@extends('layouts.admin-simple')

@section('title', 'Edit 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">Edit {{ $incoming->receipt_number }}</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">Edit Asset Receipt</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">{{ $incoming->receipt_number }}</p>
        </div>
        <div class="page-actions-right">
            <a href="{{ route('warehouse.fixed-assets.incoming.show', $incoming->id) }}" 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 method="POST" action="{{ route('warehouse.fixed-assets.incoming.update', $incoming->id) }}">
        @csrf
        @method('PUT')

        <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" class="form-control select2-dropdown" required>
                                <option value="">Select</option>
                                @foreach($suppliers as $s)
                                    <option value="{{ $s->id }}" {{ old('supplier_id', $incoming->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', $incoming->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', $incoming->invoice_date ? $incoming->invoice_date->format('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', $incoming->receipt_date ? $incoming->receipt_date->format('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" value="{{ old('vat_rate', $incoming->vat_rate) }}">
                        </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', $incoming->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>Asset Name *</th><th>Category *</th><th>Serial #</th><th style="width:80px;">Qty *</th><th>Unit Price *</th><th>Condition</th><th style="width:60px;"></th></tr>
                        </thead>
                        <tbody id="items-body"></tbody>
                    </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> Update Receipt</button>
                <a href="{{ route('warehouse.fixed-assets.incoming.show', $incoming->id) }}" 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; }
    </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);
        const existingItems = @json($incoming->items);

        $(document).ready(function() {
            $('.select2-dropdown').select2({ allowClear: true });
            existingItems.forEach(item => addItem(item));
            if (existingItems.length === 0) addItem();
        });

        function addItem(data) {
            let catOptions = '<option value="">Select</option>';
            categories.forEach(c => { catOptions += `<option value="${c.id}" ${data && data.category_id == c.id ? 'selected' : ''}>${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" value="${data ? data.asset_name : ''}" 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" value="${data ? (data.serial_number || '') : ''}"></td>
                <td><input type="number" name="items[${itemIndex}][quantity]" class="form-control form-control-sm" value="${data ? data.quantity : 1}" min="1" required></td>
                <td><input type="number" name="items[${itemIndex}][unit_price]" class="form-control form-control-sm" step="0.01" value="${data ? data.unit_price : ''}" required></td>
                <td><select name="items[${itemIndex}][condition]" class="form-control form-control-sm">
                    <option value="new" ${data && data.condition == 'new' ? 'selected' : ''}>New</option>
                    <option value="good" ${data && data.condition == 'good' ? 'selected' : ''}>Good</option>
                    <option value="fair" ${data && data.condition == 'fair' ? 'selected' : ''}>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();
        }
    </script>
@endpush