@extends('layouts.admin-simple')

@section('title', 'Edit Incoming Receipt - ' . $incoming->receipt_number)

@section('breadcrumb')
    <li class="breadcrumb-item">Warehouse</li>
    <li class="breadcrumb-item">Indirect Goods</li>
    <li class="breadcrumb-item"><a href="{{ route('warehouse.indirect-goods.incoming.index') }}">Incoming Receipts</a></li>
    <li class="breadcrumb-item"><a href="{{ route('warehouse.indirect-goods.incoming.show', $incoming->id) }}">{{ $incoming->receipt_number }}</a></li>
    <li class="breadcrumb-item active">Edit</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: {{ $incoming->receipt_number }}</h3>
            <p class="text-muted mb-0" style="font-size: 13px;">Edit indirect goods incoming receipt (Draft)</p>
        </div>
        <div class="page-actions-right d-flex align-items-center">
            <a href="{{ route('warehouse.indirect-goods.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 to Details
            </a>
        </div>
    </div>
@endsection

@section('content')
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <form id="incomingForm" method="POST" action="{{ route('warehouse.indirect-goods.incoming.update', $incoming->id) }}">
        @csrf
        @method('PUT')

        <!-- Header Information Card -->
        <div class="card mb-3">
            <div class="card-header">
                <h6 class="card-title mb-0 d-flex align-items-center">
                    <i class="material-icons mr-2">info</i>
                    Receipt Information
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="supplier_id">Supplier <span class="text-danger">*</span></label>
                            <select name="supplier_id" id="supplier_id"
                                    class="form-control select2-dropdown @error('supplier_id') is-invalid @enderror" required>
                                <option value="">Select Supplier</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}" {{ old('supplier_id', $incoming->supplier_id) == $supplier->id ? 'selected' : '' }}>
                                        {{ $supplier->name }} {{ $supplier->supplier_code ? '(' . $supplier->supplier_code . ')' : '' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('supplier_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="invoice_number">Invoice Number <span class="text-danger">*</span></label>
                            <input type="text" name="invoice_number" id="invoice_number"
                                   class="form-control @error('invoice_number') is-invalid @enderror"
                                   placeholder="Enter invoice number"
                                   value="{{ old('invoice_number', $incoming->invoice_number) }}" required>
                            @error('invoice_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="invoice_date">Invoice Date <span class="text-danger">*</span></label>
                            <input type="date" name="invoice_date" id="invoice_date"
                                   class="form-control @error('invoice_date') is-invalid @enderror"
                                   value="{{ old('invoice_date', $incoming->invoice_date ? $incoming->invoice_date->format('Y-m-d') : '') }}" required>
                            @error('invoice_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="project_id">Project</label>
                            <select name="project_id" id="project_id"
                                    class="form-control select2-dropdown @error('project_id') is-invalid @enderror">
                                <option value="">No Project (Warehouse Stock)</option>
                                @foreach($projects as $project)
                                    <option value="{{ $project->id }}" {{ old('project_id', $incoming->project_id) == $project->id ? 'selected' : '' }}>
                                        {{ $project->project_name }} {{ $project->project_number ? '(' . $project->project_number . ')' : '' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('project_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="division_id">Division</label>
                            <select name="division_id" id="division_id"
                                    class="form-control select2-dropdown @error('division_id') is-invalid @enderror">
                                <option value="">Select Division</option>
                                @foreach($divisions as $division)
                                    <option value="{{ $division->id }}"
                                            data-project="{{ $division->project_id ?? '' }}"
                                            {{ old('division_id', $incoming->division_id) == $division->id ? 'selected' : '' }}>
                                        {{ $division->division_name }} {{ $division->division_code ? '(' . $division->division_code . ')' : '' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('division_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="vat_rate">VAT Rate (%)</label>
                            <input type="number" name="vat_rate" id="vat_rate"
                                   class="form-control @error('vat_rate') is-invalid @enderror"
                                   placeholder="0.00" step="0.01" min="0" max="100"
                                   value="{{ old('vat_rate', $incoming->vat_rate ?? '5.00') }}">
                            @error('vat_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group mb-0">
                            <label for="notes">Notes</label>
                            <textarea name="notes" id="notes" rows="2"
                                      class="form-control @error('notes') is-invalid @enderror"
                                      placeholder="Optional notes or remarks">{{ old('notes', $incoming->notes) }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Items Card -->
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="card-title mb-0 d-flex align-items-center">
                    <i class="material-icons mr-2">inventory</i>
                    Items
                </h6>
                <button type="button" id="addItemBtn" class="btn btn-sm btn-primary">
                    <i class="material-icons mr-1" style="font-size: 14px;">add</i>
                    Add Item
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0" id="items-table">
                        <thead class="bg-light">
                            <tr>
                                <th style="width: 22%;">Indirect Good <span class="text-danger">*</span></th>
                                <th style="width: 9%;">Qty Ordered</th>
                                <th style="width: 9%;">Qty Delivered <span class="text-danger">*</span></th>
                                <th style="width: 10%;">Unit Price <span class="text-danger">*</span></th>
                                <th style="width: 10%;">Total Price</th>
                                <th style="width: 10%;">Batch No.</th>
                                <th style="width: 10%;">Expiry Date</th>
                                <th style="width: 14%;">Notes</th>
                                <th style="width: 6%;">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="items-tbody">
                            <!-- Dynamic rows populated by JS -->
                        </tbody>
                        <tfoot class="bg-light">
                            <tr>
                                <td colspan="4" class="text-right font-weight-bold">Subtotal:</td>
                                <td class="font-weight-bold">
                                    <span id="display-subtotal">0.00</span>
                                </td>
                                <td colspan="4"></td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-right font-weight-bold">VAT (<span id="display-vat-rate">5.00</span>%):</td>
                                <td class="font-weight-bold">
                                    <span id="display-vat">0.00</span>
                                </td>
                                <td colspan="4"></td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-right font-weight-bold text-success">Grand Total:</td>
                                <td class="font-weight-bold text-success" style="font-size: 15px;">
                                    <span id="display-grand-total">0.00</span>
                                </td>
                                <td colspan="4"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <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.indirect-goods.incoming.show', $incoming->id) }}" class="btn btn-outline-secondary">
                    <i class="material-icons mr-1" style="font-size: 16px;">cancel</i>
                    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>
        .form-group label {
            font-weight: 600;
            color: #495057;
            font-size: 14px;
        }
        .card-title {
            font-size: 16px;
            font-weight: 600;
            color: #495057;
        }
        .table th {
            border-top: none;
            font-weight: 600;
            color: #495057;
            background-color: #f8f9fa;
            font-size: 12px;
        }
        .table td {
            vertical-align: middle;
            font-size: 13px;
        }
        .select2-container--default .select2-selection--single {
            height: 38px;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            line-height: 36px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
            padding-left: 12px;
            color: #495057;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
            right: 10px;
        }
        .select2-container {
            width: 100% !important;
        }
        .select2-dropdown {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }
        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            padding: 8px 12px;
        }
        #items-table .select2-container {
            width: 100% !important;
            min-width: 180px !important;
        }
        #items-table .select2-container--default .select2-selection--single {
            height: calc(1.5em + 0.5rem + 2px);
            line-height: calc(1.5em + 0.5rem);
        }
        #items-table .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: calc(1.5em + 0.5rem);
            font-size: 13px;
        }
        #items-table .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: calc(1.5em + 0.5rem);
        }
        .table-responsive {
            overflow: visible !important;
        }
        #items-table {
            overflow: visible !important;
        }
        .item-row:hover {
            background-color: #f8f9fa;
        }
    </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 itemRowCounter = 0;
        let indirectGoods = @json($indirectGoods);
        let existingItems = @json($incoming->items);

        $(document).ready(function() {
            // Initialize header Select2 dropdowns
            $('#supplier_id').select2({ placeholder: 'Select Supplier', allowClear: true, width: '100%' });
            $('#project_id').select2({ placeholder: 'No Project (Warehouse Stock)', allowClear: true, width: '100%' });
            $('#division_id').select2({ placeholder: 'Select Division', allowClear: true, width: '100%' });

            // Filter divisions based on selected project
            $('#project_id').on('change', function() {
                var projectId = $(this).val();
                filterDivisions(projectId);
            });

            // VAT rate change triggers recalculation
            $('#vat_rate').on('input', function() {
                calculateTotals();
            });

            // Add item button
            $('#addItemBtn').on('click', function() {
                addItemRow();
            });

            // Load existing items
            if (existingItems && existingItems.length > 0) {
                loadExistingItems();
            } else {
                addItemRow();
            }
        });

        function filterDivisions(projectId) {
            var $divisionSelect = $('#division_id');
            $divisionSelect.find('option').each(function() {
                var $option = $(this);
                var optionProject = $option.data('project');
                if (!$option.val()) return;
                if (!projectId || optionProject == projectId || !optionProject) {
                    $option.prop('disabled', false);
                } else {
                    $option.prop('disabled', true);
                    if ($option.is(':selected')) {
                        $divisionSelect.val('').trigger('change');
                    }
                }
            });
        }

        function addItemRow(itemData) {
            itemRowCounter++;
            var idx = itemRowCounter;

            var goodsOptions = '<option value="">Select Item</option>';
            indirectGoods.forEach(function(item) {
                var selected = (itemData && itemData.indirect_good_id == item.id) ? ' selected' : '';
                goodsOptions += '<option value="' + item.id + '" data-unit="' + (item.unit_of_measure || 'PCS') + '"' + selected + '>'
                    + item.ig_description + ' (' + item.ig_code + ')'
                    + '</option>';
            });

            var qtyOrdered = itemData ? (parseFloat(itemData.quantity_ordered) || '') : '';
            var qtyDelivered = itemData ? (parseFloat(itemData.quantity_delivered) || '') : '';
            var unitPrice = itemData ? (parseFloat(itemData.unit_price) || '') : '';
            var rowTotal = itemData ? (parseFloat(itemData.total_price) || 0).toFixed(2) : '0.00';
            var batchNumber = itemData ? (itemData.batch_number || '') : '';
            var expiryDate = itemData && itemData.expiry_date ? itemData.expiry_date.substring(0, 10) : '';
            var notes = itemData ? (itemData.notes || '') : '';

            var rowHtml = '<tr class="item-row" data-row="' + idx + '">'
                + '<td>'
                + '    <select name="items[' + idx + '][indirect_good_id]" id="item_select_' + idx + '" class="form-control form-control-sm item-select" required>'
                + goodsOptions
                + '    </select>'
                + '</td>'
                + '<td>'
                + '    <input type="number" name="items[' + idx + '][quantity_ordered]" class="form-control form-control-sm qty-ordered" placeholder="0" step="0.01" min="0" value="' + qtyOrdered + '">'
                + '</td>'
                + '<td>'
                + '    <input type="number" name="items[' + idx + '][quantity_delivered]" class="form-control form-control-sm qty-delivered" placeholder="0" step="0.01" min="0.01" required value="' + qtyDelivered + '">'
                + '</td>'
                + '<td>'
                + '    <input type="number" name="items[' + idx + '][unit_price]" class="form-control form-control-sm unit-price" placeholder="0.00" step="0.01" min="0" required value="' + unitPrice + '">'
                + '</td>'
                + '<td>'
                + '    <input type="text" class="form-control form-control-sm row-total" readonly value="' + rowTotal + '">'
                + '</td>'
                + '<td>'
                + '    <input type="text" name="items[' + idx + '][batch_number]" class="form-control form-control-sm" placeholder="Batch" value="' + batchNumber + '">'
                + '</td>'
                + '<td>'
                + '    <input type="date" name="items[' + idx + '][expiry_date]" class="form-control form-control-sm" value="' + expiryDate + '">'
                + '</td>'
                + '<td>'
                + '    <input type="text" name="items[' + idx + '][notes]" class="form-control form-control-sm" placeholder="Notes" value="' + notes + '">'
                + '</td>'
                + '<td class="text-center">'
                + '    <button type="button" class="btn btn-sm btn-outline-danger remove-row-btn" data-row="' + idx + '">'
                + '        <i class="material-icons" style="font-size: 14px;">delete</i>'
                + '    </button>'
                + '</td>'
                + '</tr>';

            $('#items-tbody').append(rowHtml);

            // Initialize Select2 for the new row
            $('#item_select_' + idx).select2({
                placeholder: 'Select Item',
                allowClear: true,
                width: '100%',
                dropdownAutoWidth: false
            });

            // Bind row events
            bindRowEvents(idx);
        }

        function bindRowEvents(idx) {
            var $row = $('tr[data-row="' + idx + '"]');

            $row.find('.qty-delivered, .unit-price').on('input', function() {
                var qty = parseFloat($row.find('.qty-delivered').val()) || 0;
                var price = parseFloat($row.find('.unit-price').val()) || 0;
                var total = qty * price;
                $row.find('.row-total').val(total.toFixed(2));
                calculateTotals();
            });

            $row.find('.remove-row-btn').on('click', function() {
                var rowCount = $('#items-tbody tr.item-row').length;
                if (rowCount <= 1) {
                    alert('At least one item is required.');
                    return;
                }
                $row.remove();
                calculateTotals();
            });

            $('#item_select_' + idx).on('change', function() {
                var selectedId = $(this).val();
                if (!selectedId) return;

                var isDuplicate = false;
                $('#items-tbody tr.item-row').each(function() {
                    var rowIdx = $(this).data('row');
                    if (rowIdx != idx) {
                        var existingVal = $(this).find('.item-select').val();
                        if (existingVal === selectedId) {
                            isDuplicate = true;
                            return false;
                        }
                    }
                });

                if (isDuplicate) {
                    alert('This item has already been added. Please update the quantity on the existing row.');
                    $(this).val('').trigger('change');
                }
            });
        }

        function loadExistingItems() {
            existingItems.forEach(function(item) {
                addItemRow(item);
            });
            calculateTotals();
        }

        function calculateTotals() {
            var subtotal = 0;
            $('#items-tbody tr.item-row').each(function() {
                var rowTotal = parseFloat($(this).find('.row-total').val()) || 0;
                subtotal += rowTotal;
            });

            var vatRate = parseFloat($('#vat_rate').val()) || 0;
            var vatAmount = subtotal * (vatRate / 100);
            var grandTotal = subtotal + vatAmount;

            $('#display-subtotal').text(subtotal.toFixed(2));
            $('#display-vat-rate').text(vatRate.toFixed(2));
            $('#display-vat').text(vatAmount.toFixed(2));
            $('#display-grand-total').text(grandTotal.toFixed(2));
        }
    </script>
@endpush