@extends('admin.layouts.master')

@section('title', 'إضافة تسوية جرد')

@php
    $initialItems = old('items', [
        ['product_id' => '', 'unit_id' => '', 'actual_quantity' => '', 'unit_cost' => '', 'notes_ar' => ''],
    ]);

    $productsPayload = $products->map(fn ($product) => [
        'id' => $product->id,
        'name' => $product->name_ar,
        'sku' => $product->sku,
        'unit_id' => $product->unit_id,
        'unit_name' => $product->unit?->name_ar ?? '-',
    ])->values();
@endphp

@section('css')
<style>
    .adjustment-create-hero { background: linear-gradient(135deg, #0f766e 0%, #0f172a 100%); border-radius: 22px; padding: 1.6rem; color: #fff; }
    .form-shell, .summary-shell, .items-shell { border: 0; border-radius: 20px; box-shadow: 0 14px 40px rgba(15, 23, 42, .06); }
    .summary-shell { background: linear-gradient(180deg, #f8fffe 0%, #f4f8ff 100%); }
    .summary-tile { border: 1px solid #d7edea; border-radius: 18px; background: #fff; }
    .item-card { border: 1px solid #e7edf4; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .03); }
    .item-card + .item-card { margin-top: 1rem; }
    .mini-label { font-size: .72rem; font-weight: 700; color: #6b7280; }
    .snapshot-box { border-radius: 14px; background: #f8fafc; border: 1px dashed #d5dee8; }
    .reason-chip { border-radius: 999px; }
</style>
@endsection

@section('content')
<div class="pc-container">
    <div class="pc-content">
        <div class="adjustment-create-hero mb-4 d-flex flex-wrap justify-content-between gap-3 align-items-center">
            <div>
                <div class="small opacity-75 mb-1">نموذج عربي احترافي لتسوية المخزون</div>
                <h3 class="mb-2 text-white">إنشاء تسوية جرد دقيقة وسريعة</h3>
                <p class="mb-0 opacity-75">اختر المخزن، أضف الأصناف، وسيتم جلب الرصيد الدفتري تلقائيًا مع حساب الفرق والأثر المالي مباشرة.</p>
            </div>
            <a href="{{ route('admin.inventory.adjustments.index') }}" class="btn btn-light fw-bold">
                <i class="ti ti-list me-1"></i>العودة لقائمة التسويات
            </a>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show">
                <div class="fw-bold mb-1"><i class="ti ti-alert-circle me-1"></i>يرجى مراجعة البيانات التالية:</div>
                <ul class="mb-0 ps-3">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <form method="post" action="{{ route('admin.inventory.adjustments.store') }}" id="adjustment-form">
            @csrf

            <div class="row g-4">
                <div class="col-xl-8">
                    <div class="card form-shell mb-4">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                                <div>
                                    <h5 class="mb-1">بيانات التسوية</h5>
                                    <small class="text-muted">حدد المخزن وتاريخ الجرد وسبب التسوية بصورة واضحة.</small>
                                </div>
                                <span class="badge bg-primary-subtle text-primary px-3 py-2">سيتم الحفظ كمسودة أولاً</span>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">المخزن <span class="text-danger">*</span></label>
                                    <select name="warehouse_id" id="warehouse-id" class="form-select @error('warehouse_id') is-invalid @enderror" required>
                                        <option value="">اختر المخزن</option>
                                        @foreach($warehouses as $warehouse)
                                            <option value="{{ $warehouse->id }}" @selected(old('warehouse_id', $warehouses->first()?->id) == $warehouse->id)>
                                                {{ $warehouse->name_ar }}{{ $warehouse->code ? ' - '.$warehouse->code : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('warehouse_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">تاريخ التسوية <span class="text-danger">*</span></label>
                                    <input type="date" name="adjustment_date" class="form-control @error('adjustment_date') is-invalid @enderror" value="{{ old('adjustment_date', now()->toDateString()) }}" required>
                                    @error('adjustment_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">سبب التسوية <span class="text-danger">*</span></label>
                                    <input type="text" name="reason_ar" id="reason-ar" list="adjustment-reasons" class="form-control @error('reason_ar') is-invalid @enderror" value="{{ old('reason_ar', 'جرد دوري') }}" placeholder="مثال: جرد دوري" required>
                                    <datalist id="adjustment-reasons">
                                        @foreach($reasonOptions as $reasonOption)
                                            <option value="{{ $reasonOption }}"></option>
                                        @endforeach
                                    </datalist>
                                    @error('reason_ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-12">
                                    <div class="d-flex flex-wrap gap-2">
                                        @foreach($reasonOptions as $reasonOption)
                                            <button type="button" class="btn btn-outline-secondary btn-sm reason-chip quick-reason" data-reason="{{ $reasonOption }}">{{ $reasonOption }}</button>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">ملاحظات الإدارة</label>
                                    <textarea name="notes_ar" rows="3" class="form-control @error('notes_ar') is-invalid @enderror" placeholder="أي ملاحظات تفصيلية عن ظروف الجرد أو سبب الفرق...">{{ old('notes_ar') }}</textarea>
                                    @error('notes_ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card items-shell">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                                <div>
                                    <h5 class="mb-1">بنود التسوية</h5>
                                    <small class="text-muted">أضف كل صنف مرة واحدة فقط، وسيتم جلب الرصيد الدفتري تلقائيًا حسب المخزن المختار.</small>
                                </div>
                                <button type="button" id="add-row" class="btn btn-primary">
                                    <i class="ti ti-plus me-1"></i>إضافة بند جديد
                                </button>
                            </div>

                            <div id="items-wrapper">
                                @foreach($initialItems as $index => $item)
                                    <div class="item-card p-3 adjustment-item-row" data-index="{{ $index }}">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <div>
                                                <div class="fw-bold">بند التسوية <span class="row-number">{{ $loop->iteration }}</span></div>
                                                <small class="text-muted">سجل الكمية الفعلية وسيتم احتساب الفرق تلقائيًا.</small>
                                            </div>
                                            <button type="button" class="btn btn-outline-danger btn-sm remove-row" @disabled(count($initialItems) === 1 && $loop->first)>
                                                <i class="ti ti-trash"></i>
                                            </button>
                                        </div>

                                        <div class="row g-3">
                                            <div class="col-lg-5">
                                                <label class="form-label">الصنف <span class="text-danger">*</span></label>
                                                <select name="items[{{ $index }}][product_id]" class="form-select product-select" required>
                                                    <option value="">اختر الصنف</option>
                                                    @foreach($products as $product)
                                                        <option value="{{ $product->id }}" @selected(($item['product_id'] ?? '') == $product->id)>
                                                            {{ $product->name_ar }} @if($product->sku) ({{ $product->sku }}) @endif
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-lg-2">
                                                <label class="form-label">الوحدة</label>
                                                <select name="items[{{ $index }}][unit_id]" class="form-select unit-select" required>
                                                    <option value="{{ $item['unit_id'] ?? '' }}">{{ $item['unit_id'] ? 'جاري التحميل...' : 'اختر الصنف أولاً' }}</option>
                                                </select>
                                            </div>
                                            <div class="col-lg-2">
                                                <label class="form-label">الرصيد الفعلي <span class="text-danger">*</span></label>
                                                <input type="number" step="0.0001" min="0" name="items[{{ $index }}][actual_quantity]" class="form-control actual-quantity" value="{{ $item['actual_quantity'] ?? '' }}" placeholder="0.0000" required>
                                            </div>
                                            <div class="col-lg-3">
                                                <label class="form-label">تكلفة الوحدة التقديرية</label>
                                                <input type="number" step="0.0001" min="0" name="items[{{ $index }}][unit_cost]" class="form-control unit-cost" value="{{ $item['unit_cost'] ?? '' }}" placeholder="0.0000">
                                            </div>

                                            <div class="col-12">
                                                <div class="snapshot-box p-3">
                                                    <div class="row g-3 align-items-center">
                                                        <div class="col-md-3">
                                                            <div class="mini-label">الرصيد الدفتري</div>
                                                            <div class="fw-bold expected-display">0.0000</div>
                                                            <input type="hidden" class="expected-quantity" value="0">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="mini-label">فرق الجرد</div>
                                                            <div class="difference-display fw-bold text-primary">0.0000</div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="mini-label">الأثر المالي التقديري</div>
                                                            <div class="line-total-display fw-bold">0.00 ج.م</div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="mini-label">آخر حركة معروفة</div>
                                                            <div class="last-movement text-muted small">لا توجد بيانات بعد</div>
                                                        </div>
                                                        <div class="col-12 product-meta text-muted small"></div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <label class="form-label">ملاحظة البند</label>
                                                <input type="text" name="items[{{ $index }}][notes_ar]" class="form-control" value="{{ $item['notes_ar'] ?? '' }}" placeholder="مثال: فرق ناتج عن كسر، هالك، قص، أو مراجعة دورية">
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="card summary-shell sticky-top" style="top: 90px;">
                        <div class="card-body p-4">
                            <h5 class="mb-1">ملخص مباشر للتسوية</h5>
                            <p class="text-muted small mb-4">يتحدث هذا الملخص تلقائيًا أثناء إدخال البنود.</p>

                            <div class="summary-tile p-3 mb-3">
                                <div class="text-muted small">عدد البنود</div>
                                <div class="fs-2 fw-bold" id="summary-items-count">0</div>
                            </div>

                            <div class="summary-tile p-3 mb-3">
                                <div class="row g-3">
                                    <div class="col-6">
                                        <div class="text-muted small">إجمالي الزيادة</div>
                                        <div class="fw-bold text-success" id="summary-positive">0.0000</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="text-muted small">إجمالي العجز</div>
                                        <div class="fw-bold text-danger" id="summary-negative">0.0000</div>
                                    </div>
                                    <div class="col-12">
                                        <div class="text-muted small">صافي الفرق</div>
                                        <div class="fw-bold" id="summary-net">0.0000</div>
                                    </div>
                                </div>
                            </div>

                            <div class="summary-tile p-3 mb-4">
                                <div class="text-muted small">إجمالي الأثر المالي التقديري</div>
                                <div class="fs-4 fw-bold" id="summary-impact">0.00 ج.م</div>
                                <div class="small text-muted mt-2">الرقم تقديري قبل الترحيل ويعتمد على تكلفة الوحدة المدخلة أو آخر تكلفة حركة.</div>
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-success btn-lg">
                                    <i class="ti ti-device-floppy me-1"></i>حفظ التسوية كمسودة
                                </button>
                                <a href="{{ route('admin.inventory.adjustments.index') }}" class="btn btn-light">إلغاء والعودة</a>
                            </div>

                            <hr>

                            <div class="small text-muted d-flex flex-column gap-2">
                                <div><i class="ti ti-info-circle me-1 text-primary"></i>لا تكرر نفس الصنف أكثر من مرة داخل نفس التسوية.</div>
                                <div><i class="ti ti-building-warehouse me-1 text-primary"></i>تغيير المخزن يعيد تحميل الأرصدة الدفترية لكل البنود.</div>
                                <div><i class="ti ti-checklist me-1 text-primary"></i>بعد الحفظ يمكنك مراجعة شاشة العرض ثم ترحيل التسوية رسميًا.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('js')
<script>
    $(function () {
        const products = @json($productsPayload);
        const snapshotUrl = '{{ route('admin.inventory.adjustments.product_snapshot') }}';
        const productMap = Object.fromEntries(products.map(product => [String(product.id), product]));
        const itemsWrapper = $('#items-wrapper');

        function formatNumber(value, digits = 4) {
            const number = parseFloat(value || 0);
            return number.toLocaleString('en-US', { minimumFractionDigits: digits, maximumFractionDigits: digits });
        }

        function formatMoney(value) {
            const number = parseFloat(value || 0);
            return `${number.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ج.م`;
        }

        function updateRowNames() {
            itemsWrapper.find('.adjustment-item-row').each(function (index) {
                const row = $(this);
                row.attr('data-index', index);
                row.find('.row-number').text(index + 1);
                row.find('[name]').each(function () {
                    const currentName = $(this).attr('name');
                    $(this).attr('name', currentName.replace(/items\[\d+\]/, `items[${index}]`));
                });
            });

            const buttons = itemsWrapper.find('.remove-row');
            buttons.prop('disabled', itemsWrapper.find('.adjustment-item-row').length === 1);
        }

        function setUnit(row, unitId, unitName) {
            const unitSelect = row.find('.unit-select');
            if (!unitId) {
                unitSelect.html('<option value="">اختر الصنف أولاً</option>');
                return;
            }

            unitSelect.html(`<option value="${unitId}" selected>${unitName || '-'}</option>`);
        }

        function updateRowCalculation(row) {
            const expected = parseFloat(row.find('.expected-quantity').val() || 0);
            const actual = parseFloat(row.find('.actual-quantity').val() || 0);
            const unitCost = parseFloat(row.find('.unit-cost').val() || 0);
            const difference = actual - expected;
            const lineTotal = difference * unitCost;

            const differenceDisplay = row.find('.difference-display');
            differenceDisplay.removeClass('text-success text-danger text-primary');
            differenceDisplay.addClass(difference > 0 ? 'text-success' : (difference < 0 ? 'text-danger' : 'text-primary'));
            differenceDisplay.text(formatNumber(difference));

            row.find('.expected-display').text(formatNumber(expected));
            row.find('.line-total-display').text(formatMoney(lineTotal));
        }

        function updateSummary() {
            let positive = 0;
            let negative = 0;
            let impact = 0;
            let count = 0;

            itemsWrapper.find('.adjustment-item-row').each(function () {
                const row = $(this);
                const productId = row.find('.product-select').val();

                if (productId) {
                    count++;
                }

                const expected = parseFloat(row.find('.expected-quantity').val() || 0);
                const actual = parseFloat(row.find('.actual-quantity').val() || 0);
                const unitCost = parseFloat(row.find('.unit-cost').val() || 0);
                const difference = actual - expected;

                if (difference > 0) {
                    positive += difference;
                }

                if (difference < 0) {
                    negative += Math.abs(difference);
                }

                impact += (difference * unitCost);
            });

            $('#summary-items-count').text(count);
            $('#summary-positive').text(formatNumber(positive));
            $('#summary-negative').text(formatNumber(negative));
            $('#summary-net').text(formatNumber(positive - negative));
            $('#summary-impact').text(formatMoney(impact));
        }

        function loadSnapshot(row) {
            const productId = row.find('.product-select').val();
            const warehouseId = $('#warehouse-id').val();
            const product = productMap[String(productId)] || null;

            if (!productId || !warehouseId) {
                row.find('.expected-quantity').val(0);
                row.find('.expected-display').text(formatNumber(0));
                row.find('.difference-display').text(formatNumber(0));
                row.find('.line-total-display').text(formatMoney(0));
                row.find('.last-movement').text('اختر المخزن والصنف أولاً');
                row.find('.product-meta').text('');
                setUnit(row, '', '');
                updateSummary();
                return;
            }

            row.find('.last-movement').text('جاري تحميل الرصيد الدفتري...');
            setUnit(row, product.unit_id, product.unit_name);

            $.get(snapshotUrl, { warehouse_id: warehouseId, product_id: productId })
                .done(function (response) {
                    row.find('.expected-quantity').val(response.expected_quantity || 0);
                    row.find('.expected-display').text(formatNumber(response.expected_quantity || 0));
                    setUnit(row, response.default_unit_id, response.default_unit_name);

                    if (!row.find('.unit-cost').val() && parseFloat(response.last_unit_cost || 0) > 0) {
                        row.find('.unit-cost').val(response.last_unit_cost);
                    }

                    const lastMovementText = response.last_reference_number
                        ? `آخر مرجع: ${response.last_reference_number}${response.last_movement_date ? ' - ' + response.last_movement_date : ''}`
                        : 'لا توجد حركة سابقة لهذا الصنف في المخزن';

                    row.find('.last-movement').text(lastMovementText);
                    row.find('.product-meta').text(response.description ? `${response.product_name} - ${response.description}` : response.product_name);

                    updateRowCalculation(row);
                    updateSummary();
                })
                .fail(function () {
                    row.find('.last-movement').text('تعذر جلب بيانات الرصيد. يرجى المحاولة مرة أخرى.');
                    row.find('.expected-quantity').val(0);
                    updateRowCalculation(row);
                    updateSummary();
                });
        }

        function createRow(index) {
            return `
                <div class="item-card p-3 adjustment-item-row" data-index="${index}">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <div class="fw-bold">بند التسوية <span class="row-number">${index + 1}</span></div>
                            <small class="text-muted">سجل الكمية الفعلية وسيتم احتساب الفرق تلقائيًا.</small>
                        </div>
                        <button type="button" class="btn btn-outline-danger btn-sm remove-row"><i class="ti ti-trash"></i></button>
                    </div>
                    <div class="row g-3">
                        <div class="col-lg-5">
                            <label class="form-label">الصنف <span class="text-danger">*</span></label>
                            <select name="items[${index}][product_id]" class="form-select product-select" required>
                                <option value="">اختر الصنف</option>
                                ${products.map(product => `<option value="${product.id}">${product.name}${product.sku ? ` (${product.sku})` : ''}</option>`).join('')}
                            </select>
                        </div>
                        <div class="col-lg-2">
                            <label class="form-label">الوحدة</label>
                            <select name="items[${index}][unit_id]" class="form-select unit-select" required>
                                <option value="">اختر الصنف أولاً</option>
                            </select>
                        </div>
                        <div class="col-lg-2">
                            <label class="form-label">الرصيد الفعلي <span class="text-danger">*</span></label>
                            <input type="number" step="0.0001" min="0" name="items[${index}][actual_quantity]" class="form-control actual-quantity" placeholder="0.0000" required>
                        </div>
                        <div class="col-lg-3">
                            <label class="form-label">تكلفة الوحدة التقديرية</label>
                            <input type="number" step="0.0001" min="0" name="items[${index}][unit_cost]" class="form-control unit-cost" placeholder="0.0000">
                        </div>
                        <div class="col-12">
                            <div class="snapshot-box p-3">
                                <div class="row g-3 align-items-center">
                                    <div class="col-md-3">
                                        <div class="mini-label">الرصيد الدفتري</div>
                                        <div class="fw-bold expected-display">0.0000</div>
                                        <input type="hidden" class="expected-quantity" value="0">
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mini-label">فرق الجرد</div>
                                        <div class="difference-display fw-bold text-primary">0.0000</div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mini-label">الأثر المالي التقديري</div>
                                        <div class="line-total-display fw-bold">0.00 ج.م</div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mini-label">آخر حركة معروفة</div>
                                        <div class="last-movement text-muted small">لا توجد بيانات بعد</div>
                                    </div>
                                    <div class="col-12 product-meta text-muted small"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">ملاحظة البند</label>
                            <input type="text" name="items[${index}][notes_ar]" class="form-control" placeholder="مثال: فرق ناتج عن كسر، هالك، قص، أو مراجعة دورية">
                        </div>
                    </div>
                </div>
            `;
        }

        $('#add-row').on('click', function () {
            itemsWrapper.append(createRow(itemsWrapper.find('.adjustment-item-row').length));
            updateRowNames();
            updateSummary();
        });

        $(document).on('click', '.remove-row', function () {
            $(this).closest('.adjustment-item-row').remove();
            updateRowNames();
            updateSummary();
        });

        $(document).on('change', '.product-select', function () {
            const row = $(this).closest('.adjustment-item-row');
            loadSnapshot(row);
        });

        $(document).on('input', '.actual-quantity, .unit-cost', function () {
            const row = $(this).closest('.adjustment-item-row');
            updateRowCalculation(row);
            updateSummary();
        });

        $('#warehouse-id').on('change', function () {
            itemsWrapper.find('.adjustment-item-row').each(function () {
                loadSnapshot($(this));
            });
        });

        $('.quick-reason').on('click', function () {
            $('#reason-ar').val($(this).data('reason')).trigger('input');
        });

        itemsWrapper.find('.adjustment-item-row').each(function () {
            const row = $(this);
            const selectedProduct = row.find('.product-select').val();
            if (selectedProduct) {
                loadSnapshot(row);
            } else {
                updateRowCalculation(row);
            }
        });

        updateRowNames();
        updateSummary();
    });
</script>
@endsection