@extends('layouts.app')
@section('title', 'New Purchase')

@section('content')
    <div class="mb-4">
        <h1 class="page-title"><i class="bi bi-receipt me-2"></i>New Purchase Entry</h1>
    </div>

    <form method="POST" action="{{ route('inventory.purchases.store') }}" enctype="multipart/form-data" id="purchaseForm">
        @csrf

        <!-- Header -->
        <div class="card mb-4">
            <div class="card-header"><strong>Purchase Details</strong></div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Supplier <span class="text-danger">*</span></label>
                        <select name="supplier_id" class="form-select @error('supplier_id') is-invalid @enderror" required>
                            <option value="">— Select Supplier —</option>
                            @foreach($suppliers as $s)
                                <option value="{{ $s->id }}" {{ old('supplier_id') == $s->id ? 'selected' : '' }}>
                                    {{ $s->name }} {{ $s->company_name ? "({$s->company_name})" : '' }}
                                </option>
                            @endforeach
                        </select>
                        @error('supplier_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Purchase Date <span class="text-danger">*</span></label>
                        <input type="date" name="purchase_date"
                            class="form-control @error('purchase_date') is-invalid @enderror"
                            value="{{ old('purchase_date', date('Y-m-d')) }}" required>
                        @error('purchase_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Project</label>
                        <select name="project_id" class="form-select">
                            <option value="">— None —</option>
                            @foreach($projects as $proj)
                                <option value="{{ $proj->id }}" {{ old('project_id') == $proj->id ? 'selected' : '' }}>
                                    {{ $proj->project_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label">Invoice #</label>
                        <input type="text" name="invoice_number" class="form-control" value="{{ old('invoice_number') }}"
                            placeholder="INV-001">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Invoice Attachment</label>
                        <input type="file" name="invoice_attachment" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                    </div>

                    <div class="col-md-8">
                        <label class="form-label">Notes</label>
                        <input type="text" name="notes" class="form-control" value="{{ old('notes') }}"
                            placeholder="Purchase notes…">
                    </div>
                </div>
            </div>
        </div>

        <!-- Line Items -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Line Items</strong>
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="addRow()">
                    <i class="bi bi-plus-lg me-1"></i> Add Item
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table table-bordered mb-0" id="itemsTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width:35%">Material <span class="text-danger">*</span></th>
                            <th style="width:15%">Quantity <span class="text-danger">*</span></th>
                            <th style="width:15%">Unit</th>
                            <th style="width:15%">Unit Price <span class="text-danger">*</span></th>
                            <th style="width:15%" class="text-end">Total</th>
                            <th style="width:5%"></th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody">
                        <tr data-row="0">
                            <td>
                                <select name="items[0][material_id]" class="form-select material-select" required
                                    onchange="updateUnit(this)">
                                    <option value="">— Select —</option>
                                    @foreach($materials as $mat)
                                        <option value="{{ $mat->id }}" data-unit="{{ $mat->unit }}"
                                            data-price="{{ $mat->unit_price }}">
                                            {{ $mat->material_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input type="number" step="0.01" min="0.01" name="items[0][quantity]"
                                    class="form-control item-qty" required oninput="calcRow(this)"></td>
                            <td><span class="item-unit text-muted">—</span></td>
                            <td><input type="number" step="0.01" min="0.01" name="items[0][unit_price]"
                                    class="form-control item-price" required oninput="calcRow(this)"></td>
                            <td class="text-end fw-bold item-total">0.00</td>
                            <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(this)"><i
                                        class="bi bi-x"></i></button></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="table-light">
                            <td colspan="4" class="text-end fw-bold">Grand Total:</td>
                            <td class="text-end fw-bold fs-5 text-primary" id="grandTotal">৳0.00</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <!-- Payment -->
        <div class="card mb-4">
            <div class="card-header"><strong>Initial Payment (Optional)</strong></div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Amount Paid Now</label>
                        <input type="number" step="0.01" min="0" name="initial_payment" class="form-control"
                            value="{{ old('initial_payment') }}" placeholder="0.00">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Payment Method</label>
                        <select name="payment_method" class="form-select @error('payment_method') is-invalid @enderror">
                            <option value="">— Select —</option>
                            <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                            <option value="bank" {{ old('payment_method') == 'bank' ? 'selected' : '' }}>Bank</option>
                            <option value="mobile_banking" {{ old('payment_method') == 'mobile_banking' ? 'selected' : '' }}>Mobile Banking</option>
                        </select>
                        @error('payment_method') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="bi bi-check-lg me-1"></i> Create Purchase
            </button>
            <a href="{{ route('inventory.purchases.index') }}" class="btn btn-outline-secondary btn-lg">Cancel</a>
        </div>
    </form>

    @push('scripts')
        <script>
            let rowIndex = 1;

            function addRow() {
                const tbody = document.getElementById('itemsBody');
                const materialOptions = document.querySelector('.material-select').innerHTML;
                const row = document.createElement('tr');
                row.dataset.row = rowIndex;
                row.innerHTML = `
                <td><select name="items[${rowIndex}][material_id]" class="form-select material-select" required onchange="updateUnit(this)">${materialOptions}</select></td>
                <td><input type="number" step="0.01" min="0.01" name="items[${rowIndex}][quantity]" class="form-control item-qty" required oninput="calcRow(this)"></td>
                <td><span class="item-unit text-muted">—</span></td>
                <td><input type="number" step="0.01" min="0.01" name="items[${rowIndex}][unit_price]" class="form-control item-price" required oninput="calcRow(this)"></td>
                <td class="text-end fw-bold item-total">0.00</td>
                <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(this)"><i class="bi bi-x"></i></button></td>
            `;
                tbody.appendChild(row);
                rowIndex++;
            }

            function removeRow(btn) {
                const tbody = document.getElementById('itemsBody');
                if (tbody.children.length > 1) {
                    btn.closest('tr').remove();
                    calcGrandTotal();
                }
            }

            function updateUnit(select) {
                const row = select.closest('tr');
                const opt = select.options[select.selectedIndex];
                row.querySelector('.item-unit').textContent = opt.dataset.unit || '—';
                const priceInput = row.querySelector('.item-price');
                if (opt.dataset.price && parseFloat(opt.dataset.price) > 0) {
                    priceInput.value = parseFloat(opt.dataset.price).toFixed(2);
                    calcRow(priceInput);
                }
            }

            function calcRow(input) {
                const row = input.closest('tr');
                const qty = parseFloat(row.querySelector('.item-qty')?.value) || 0;
                const price = parseFloat(row.querySelector('.item-price')?.value) || 0;
                row.querySelector('.item-total').textContent = (qty * price).toFixed(2);
                calcGrandTotal();
            }

            function calcGrandTotal() {
                let total = 0;
                document.querySelectorAll('.item-total').forEach(el => {
                    total += parseFloat(el.textContent) || 0;
                });
                document.getElementById('grandTotal').textContent = '৳' + total.toFixed(2);
            }
        </script>
    @endpush
@endsection