@php
    $purchase = $purchase ?? null;
    $oldItems = old('items');
    $items = $oldItems ?: ($purchase?->items->map(fn ($i) => [
        'product_id' => $i->product_id,
        'quantity' => $i->quantity,
        'price' => $i->price,
    ])->all() ?: [['product_id' => '', 'quantity' => 1, 'price' => 0]]);
@endphp

<div class="row g-3">
    <div class="col-12"><div class="form-section-title"><i class="fa-solid fa-cart-flatbed"></i>بيانات أمر الشراء</div></div>

    <div class="col-md-4">
        <label class="form-label">المورد <span class="req">*</span></label>
        <select name="supplier_id" class="form-select select2" data-placeholder="اختر المورد" required>
            <option value="">— اختر المورد —</option>
            @foreach ($suppliers as $k => $v)
                <option value="{{ $k }}" @selected((int) old('supplier_id', $purchase?->supplier_id) === (int) $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">التاريخ <span class="req">*</span></label>
        <input type="date" name="date" value="{{ old('date', $purchase?->date?->format('Y-m-d') ?? today()->toDateString()) }}" class="form-control" required>
    </div>

    <div class="col-md-4">
        <label class="form-label">رقم فاتورة المورد</label>
        <input type="text" name="invoice_ref" value="{{ old('invoice_ref', $purchase?->invoice_ref) }}" class="form-control">
    </div>
</div>

<div class="form-section-title mt-4"><i class="fa-solid fa-list"></i>الأصناف</div>

<div class="table-responsive">
    <table class="table table-bordered align-middle" id="itemsTable">
        <thead class="table-light">
        <tr>
            <th style="width:40%">المنتج</th>
            <th style="width:15%">الكمية</th>
            <th style="width:20%">سعر الوحدة</th>
            <th style="width:20%">الإجمالي</th>
            <th style="width:5%"></th>
        </tr>
        </thead>
        <tbody>
        @foreach ($items as $index => $row)
            <tr class="item-row">
                <td>
                    <select name="items[{{ $index }}][product_id]" class="form-select form-select-sm item-product">
                        <option value="">— اختر المنتج —</option>
                        @foreach ($products as $p)
                            <option value="{{ $p->id }}" data-price="{{ $p->purchase_price }}"
                                @selected((int) ($row['product_id'] ?? 0) === $p->id)>
                                {{ $p->name }} ({{ $p->code }})
                            </option>
                        @endforeach
                    </select>
                </td>
                <td><input type="number" step="0.01" min="0" name="items[{{ $index }}][quantity]" value="{{ $row['quantity'] ?? 1 }}" class="form-control form-control-sm item-qty"></td>
                <td><input type="number" step="0.01" min="0" name="items[{{ $index }}][price]" value="{{ $row['price'] ?? 0 }}" class="form-control form-control-sm item-price"></td>
                <td><input type="text" class="form-control form-control-sm item-total bg-light" readonly></td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="fa-solid fa-trash"></i></button>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

<button type="button" class="btn btn-sm btn-outline-primary" id="addRow"><i class="fa-solid fa-plus ms-1"></i>إضافة صنف</button>

<div class="row g-3 mt-3">
    <div class="col-md-6">
        <label class="form-label">ملاحظات</label>
        <textarea name="notes" class="form-control" rows="4">{{ old('notes', $purchase?->notes) }}</textarea>
    </div>

    <div class="col-md-6">
        <table class="table table-sm">
            <tr>
                <td class="fw-bold">الإجمالي قبل الخصم</td>
                <td class="text-start"><span id="subtotalDisplay">0.00</span> {{ setting('currency', 'ر.س') }}</td>
            </tr>
            <tr>
                <td class="fw-bold">الخصم</td>
                <td><input type="number" step="0.01" min="0" name="discount" id="discountInput" value="{{ old('discount', $purchase?->discount ?? 0) }}" class="form-control form-control-sm"></td>
            </tr>
            <tr>
                <td class="fw-bold">الضريبة</td>
                <td><input type="number" step="0.01" min="0" name="tax" id="taxInput" value="{{ old('tax', $purchase?->tax ?? 0) }}" class="form-control form-control-sm"></td>
            </tr>
            <tr>
                <td class="fw-bold">المبلغ المدفوع</td>
                <td><input type="number" step="0.01" min="0" name="paid_amount" value="{{ old('paid_amount', $purchase?->paid_amount ?? 0) }}" class="form-control form-control-sm"></td>
            </tr>
            <tr class="table-primary">
                <td class="fw-bold">الإجمالي النهائي</td>
                <td class="text-start fw-bold"><span id="grandTotal">0.00</span> {{ setting('currency', 'ر.س') }}</td>
            </tr>
        </table>
    </div>
</div>

<div class="d-flex gap-2 mt-4">
    <button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk ms-2"></i>حفظ</button>
    <a href="{{ route('purchases.index') }}" class="btn btn-light">إلغاء</a>
</div>

@push('scripts')
<script>
$(function () {
    let rowIndex = {{ count($items) }};

    function recalc() {
        let subtotal = 0;
        $('#itemsTable tbody tr').each(function () {
            const qty = parseFloat($(this).find('.item-qty').val()) || 0;
            const price = parseFloat($(this).find('.item-price').val()) || 0;
            const total = qty * price;
            $(this).find('.item-total').val(fmt(total));
            subtotal += total;
        });

        const discount = parseFloat($('#discountInput').val()) || 0;
        const tax = parseFloat($('#taxInput').val()) || 0;

        $('#subtotalDisplay').text(fmt(subtotal));
        $('#grandTotal').text(fmt(Math.max(0, subtotal - discount + tax)));
    }

    $('#itemsTable').on('input change', '.item-qty, .item-price', recalc);
    $('#discountInput, #taxInput').on('input', recalc);

    $('#itemsTable').on('change', '.item-product', function () {
        const price = $(this).find('option:selected').data('price');
        if (price !== undefined) {
            $(this).closest('tr').find('.item-price').val(price);
            recalc();
        }
    });

    $('#addRow').on('click', function () {
        const $row = $('#itemsTable tbody tr:first').clone();
        $row.find('select, input').each(function () {
            const name = $(this).attr('name');
            if (name) $(this).attr('name', name.replace(/\[\d+\]/, '[' + rowIndex + ']'));
            if ($(this).is('select')) $(this).val('');
            else if ($(this).hasClass('item-qty')) $(this).val(1);
            else $(this).val(0);
        });
        $('#itemsTable tbody').append($row);
        rowIndex++;
        recalc();
    });

    $('#itemsTable').on('click', '.remove-row', function () {
        if ($('#itemsTable tbody tr').length > 1) {
            $(this).closest('tr').remove();
            recalc();
        }
    });

    recalc();
});
</script>
@endpush