@extends('layouts.admin-simple')

@section('title', 'New Asset Receipt')

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item">Fixed Assets</li>
    <li class="breadcrumb-item"><a href="{{ route('warehouse.fixed-assets.incoming.index') }}">Incoming</a></li>
    <li class="breadcrumb-item active">New Receipt</li>
@endsection

@section('page-title')
    <div class="d-flex justify-content-between align-items-center w-100">
        <div class="page-title-left">
            <h3 class="mb-1">New Asset Receipt</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Receive new fixed assets from supplier</p>
        </div>
        <div class="page-actions-right">
            <a href="{{ route('warehouse.fixed-assets.incoming.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="material-icons mr-1" style="font-size: 16px;">arrow_back</i> Back
            </a>
        </div>
    </div>
@endsection

@section('content')
    <form id="incomingForm" method="POST" action="{{ route('warehouse.fixed-assets.incoming.store') }}">
        @csrf

        <div class="card mb-3">
            <div class="card-header"><h6 class="mb-0"><i class="material-icons mr-2 align-middle">local_shipping</i>Receipt Details</h6></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Supplier <span class="text-danger">*</span></label>
                            <select name="supplier_id" id="supplier_id" class="form-control select2-dropdown" required>
                                <option value="">Select Supplier</option>
                                @foreach($suppliers as $s)
                                    <option value="{{ $s->id }}" {{ old('supplier_id') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Invoice Number <span class="text-danger">*</span></label>
                            <input type="text" name="invoice_number" class="form-control" value="{{ old('invoice_number') }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Invoice Date <span class="text-danger">*</span></label>
                            <input type="date" name="invoice_date" class="form-control" value="{{ old('invoice_date', date('Y-m-d')) }}" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Receipt Date</label>
                            <input type="date" name="receipt_date" class="form-control" value="{{ old('receipt_date', date('Y-m-d')) }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>VAT Rate (%)</label>
                            <input type="number" name="vat_rate" class="form-control" step="0.01" min="0" max="100" value="{{ old('vat_rate', 5) }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Notes</label>
                            <input type="text" name="notes" class="form-control" value="{{ old('notes') }}" placeholder="Optional notes">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="material-icons mr-2 align-middle">list</i>Asset Items</h6>
                <button type="button" onclick="addItem()" class="btn btn-sm btn-success">
                    <i class="material-icons mr-1" style="font-size: 16px;">add</i> Add Item
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0" id="items-table">
                        <thead class="thead-light">
                            <tr>
                                <th style="min-width: 200px;">Asset Name *</th>
                                <th style="min-width: 150px;">Category *</th>
                                <th>Serial #</th>
                                <th style="width: 80px;">Qty *</th>
                                <th style="min-width: 120px;">Unit Price *</th>
                                <th>Condition</th>
                                <th style="width: 60px;"></th>
                            </tr>
                        </thead>
                        <tbody id="items-body">
                        </tbody>
                        <tfoot>
                            <tr class="bg-light">
                                <td colspan="4" class="text-right font-weight-bold">Subtotal:</td>
                                <td colspan="2" class="font-weight-bold" id="subtotal">AED 0.00</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body text-center py-3">
                <button type="submit" class="btn btn-success mr-3"><i class="material-icons mr-1" style="font-size: 16px;">save</i> Create Receipt</button>
                <a href="{{ route('warehouse.fixed-assets.incoming.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        .select2-container { width: 100% !important; }
        .select2-container--default .select2-selection--single { height: 38px; border: 1px solid #ced4da; }
        .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
        #items-table input, #items-table select { font-size: 13px; }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        let itemIndex = 0;
        const categories = @json($categories);

        $(document).ready(function() {
            $('#supplier_id').select2({ placeholder: 'Select Supplier', allowClear: true });
            addItem(); // Add first row
        });

        function addItem() {
            let catOptions = '<option value="">Select</option>';
            categories.forEach(c => { catOptions += `<option value="${c.id}">${c.category_name}</option>`; });

            let row = `<tr id="item-row-${itemIndex}">
                <td><input type="text" name="items[${itemIndex}][asset_name]" class="form-control form-control-sm" required></td>
                <td><select name="items[${itemIndex}][category_id]" class="form-control form-control-sm" required>${catOptions}</select></td>
                <td><input type="text" name="items[${itemIndex}][serial_number]" class="form-control form-control-sm"></td>
                <td><input type="number" name="items[${itemIndex}][quantity]" class="form-control form-control-sm" value="1" min="1" required onchange="calcSubtotal()"></td>
                <td><input type="number" name="items[${itemIndex}][unit_price]" class="form-control form-control-sm" step="0.01" min="0" required onchange="calcSubtotal()"></td>
                <td><select name="items[${itemIndex}][condition]" class="form-control form-control-sm">
                    <option value="new">New</option><option value="good">Good</option><option value="fair">Fair</option>
                </select></td>
                <td><button type="button" onclick="removeItem(${itemIndex})" class="btn btn-sm btn-outline-danger"><i class="material-icons" style="font-size: 16px;">close</i></button></td>
            </tr>`;

            $('#items-body').append(row);
            itemIndex++;
        }

        function removeItem(idx) {
            if ($('#items-body tr').length > 1) {
                $(`#item-row-${idx}`).remove();
                calcSubtotal();
            }
        }

        function calcSubtotal() {
            let total = 0;
            $('#items-body tr').each(function() {
                let qty = parseFloat($(this).find('input[name$="[quantity]"]').val()) || 0;
                let price = parseFloat($(this).find('input[name$="[unit_price]"]').val()) || 0;
                total += qty * price;
            });
            $('#subtotal').text('AED ' + total.toFixed(2));
        }
    </script>
@endpush