@extends('layouts.app')

@section('title', 'Refine Logistics Handover')

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('posm.index') }}">POSM</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('posm.delivery-notes.index') }}">Delivery Notes</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Edit</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Edit Delivery Note</div>
        <div class="d-flex align-items-center">
            <a href="{{ route('posm.delivery-notes.create') }}" data-toggle="tooltip" title="Create New">
                <i
                    class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
            </a>

            <i id="submitForm"
                class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Update Manifest"></i>

            <a href="{{ route('posm.delivery-notes.index') }}">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center ms-1"
                    data-toggle="tooltip" title="Close"></i>
            </a>
        </div>
    </div>

    <div class="row mt-4 mb-5">
        <div class="col-md-10 offset-md-1">
            <form id="dnForm" action="{{ route('posm.delivery-notes.update', $deliveryNote->id) }}" method="POST">
                @csrf
                @method('PUT')

                <!-- Section 1: Logistics Metadata -->
                <div class="posm-card mb-4">
                    <div class="d-flex align-items-center mb-4">
                        <div class="avatar-icon-sm me-3" style="background-color: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                            <i class="fa-solid fa-truck-fast"></i>
                        </div>
                        <h5 class="posm-section-title mb-0">Delivery Details & Accountability</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="row g-4">
                            <div class="col-md-4">
                                <label class="form-label text-muted fs-11 text-uppercase fw-bold">Execution Partner <span
                                        class="text-danger">*</span></label>
                                <select name="event_supplier_id"
                                    class="form-select bg-light border-0 py-3 ps-3 rounded-3 select2 shadow-none" required>
                                    @foreach($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" {{ $deliveryNote->event_supplier_id == $supplier->id ? 'selected' : '' }}>
                                            {{ $supplier->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-muted fs-11 text-uppercase fw-bold">Event Allocation <span
                                        class="text-danger">*</span></label>
                                <select name="event_budget_id"
                                    class="form-select bg-light border-0 py-3 ps-3 rounded-3 select2 shadow-none" required>
                                    @foreach($budgets as $budget)
                                        <option value="{{ $budget->id }}" {{ $deliveryNote->event_budget_id == $budget->id ? 'selected' : '' }}>
                                            {{ $budget->name }} ({{ $budget->budget_code }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-muted fs-11 text-uppercase fw-bold">Dispatch Warehouse <span
                                        class="text-danger">*</span></label>
                                <select name="warehouse_id"
                                    class="form-select bg-light border-0 py-3 ps-3 rounded-3 select2 shadow-none" required>
                                    @foreach($warehouses as $warehouse)
                                        <option value="{{ $warehouse->id }}" {{ $deliveryNote->warehouse_id == $warehouse->id ? 'selected' : '' }}>
                                            {{ $warehouse->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Section 2: Payload Items -->
                <div class="posm-card mb-4 p-0 overflow-hidden">
                    <div class="p-4 d-flex justify-content-between align-items-center border-bottom">
                        <div class="d-flex align-items-center">
                            <div class="avatar-icon-sm me-3"
                                style="background-color: rgba(59, 130, 246, 0.1); color: #3b82f6;">
                                <i class="fa-solid fa-box-open"></i>
                            </div>
                            <h5 class="posm-section-title mb-0">Delivery Note Items</h5>
                        </div>
                        <button type="button" class="btn btn-warning-soft btn-sm rounded-pill px-4 fw-bold shadow-none"
                            id="add-item-btn">
                            <i class="fa-solid fa-plus-circle me-2"></i> Add Item
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0" id="itemsTable">
                                <thead class="bg-light-soft text-muted">
                                    <tr>
                                        <th class="ps-4 py-3 fs-11 text-uppercase fw-bold">SKU Identification
                                        </th>
                                        <th class="py-3 fs-11 text-uppercase fw-bold text-center" style="width: 250px;">
                                            Dispatch Quantity</th>
                                        <th class="py-3 fs-11 text-uppercase fw-bold text-end" style="width: 200px;">
                                            Valuation</th>
                                        <th class="pe-4 py-3 fs-11 text-uppercase fw-bold text-end" style="width: 100px;">
                                            Control</th>
                                    </tr>
                                </thead>
                                <tbody id="items-container">
                                    @foreach($deliveryNote->items as $index => $item)
                                        <tr class="item-row transition-all">
                                            <td class="ps-4">
                                                <select name="items[{{ $index }}][product_id]"
                                                    class="form-select bg-light border-0 py-3 ps-3 rounded-3 product-select shadow-none"
                                                    required>
                                                    @foreach($products as $product)
                                                        <option value="{{ $product->id }}"
                                                            data-price="{{ $product->unit_price ?? 0 }}"
                                                            data-unit="{{ $product->unit_of_measure ?? 'Units' }}" {{ $item->product_id == $product->id ? 'selected' : '' }}>
                                                            {{ $product->name }} ({{ $product->code }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <div class="input-group bg-light rounded-3 overflow-hidden">
                                                    <input type="number" name="items[{{ $index }}][quantity]"
                                                        class="form-control bg-transparent border-0 py-3 text-center fw-bold quantity-input shadow-none"
                                                        min="0.01" step="0.01" required value="{{ $item->quantity }}">
                                                    <span
                                                        class="input-group-text bg-white border-0 text-muted fs-11 fw-bold unit-label"
                                                        style="min-width: 80px; justify-content: center;">{{ $item->product->unit_of_measure ?? 'UNIT' }}</span>
                                                </div>
                                            </td>
                                            <td class="line-total fw-bold text-dark text-end fs-14">LKR
                                                {{ number_format($item->total_cost, 0) }}
                                            </td>
                                            <td class="pe-4 text-end">
                                                <button type="button"
                                                    class="btn btn-light btn-sm rounded-circle shadow-none border p-2 remove-item-btn"
                                                    title="Remove SKU"
                                                    style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                                                    <i class="fa-regular fa-trash-can text-danger"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="border-top">
                                    <tr class="bg-light-soft">
                                        <td colspan="2" class="text-end py-4 fw-bold text-muted text-uppercase fs-11">
                                            Updated Payload Net Value</td>
                                        <td class="text-end py-4 fw-bold text-primary fs-4" id="total-value"
                                            style="padding-right: 0.5rem;">LKR
                                            {{ number_format($deliveryNote->items->sum('total_cost'), 0) }}
                                        </td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="alert bg-soft-warning border-0 rounded-4 p-4 d-flex align-items-center mb-5">
                    <div class="avatar-xs bg-white rounded-circle d-flex align-items-center justify-content-center me-3 shadow-sm"
                        style="width: 42px; height: 42px; flex-shrink: 0;">
                        <i class="fa-solid fa-circle-exclamation text-warning fs-4"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1 text-warning">Audit Trail Update</h6>
                        <p class="text-dark small mb-0 opacity-75">Modifying a committed handover record will be logged in
                            the system audit trail. Ensure all changes are verified against physical dispatch documents.</p>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Row Template for Dynamic Addition -->
    <template id="row-template">
        <tr class="item-row transition-all">
            <td class="ps-4">
                <select name="items[INDEX][product_id]"
                    class="form-select bg-light border-0 py-3 ps-3 rounded-3 product-select shadow-none" required>
                    <option value="">Identify Product SKU...</option>
                    @foreach($products as $product)
                        <option value="{{ $product->id }}" data-price="{{ $product->unit_price ?? 0 }}"
                            data-unit="{{ $product->unit_of_measure ?? 'Units' }}">
                            {{ $product->name }} ({{ $product->code }})
                        </option>
                    @endforeach
                </select>
            </td>
            <td>
                <div class="input-group bg-light rounded-3 overflow-hidden">
                    <input type="number" name="items[INDEX][quantity]"
                        class="form-control bg-transparent border-0 py-3 text-center fw-bold quantity-input shadow-none"
                        min="0.01" step="0.01" required placeholder="0.00">
                    <span class="input-group-text bg-white border-0 text-muted fs-11 fw-bold unit-label"
                        style="min-width: 80px; justify-content: center;">UNIT</span>
                </div>
            </td>
            <td class="line-total fw-bold text-dark text-end fs-14">LKR 0.00</td>
            <td class="pe-4 text-end">
                <button type="button" class="btn btn-light btn-sm rounded-circle shadow-none border p-2 remove-item-btn"
                    title="Remove SKU"
                    style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                    <i class="fa-regular fa-trash-can text-danger"></i>
                </button>
            </td>
        </tr>
    </template>

@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.select2').select2({ width: '100%', dropdownCssClass: 'shadow-none border-0' });
            $('.product-select').select2({ width: '100%', dropdownCssClass: 'shadow-none border-0' });

            let index = {{ $deliveryNote->items->count() }};
            const container = $('#items-container');
            const template = $('#row-template').html();

            $('#submitForm').click(function () {
                if (container.children().length === 0) {
                    Swal.fire({
                        title: 'Payload Integrity Error',
                        text: 'A handover manifest must contain at least one valid inventory item.',
                        icon: 'error',
                        confirmButtonColor: '#f7b84b'
                    });
                    return;
                }
                $(this).prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin me-2"></i> Committing Intelligence...');
                $('#dnForm').submit();
            });

            function addItem() {
                const newRow = template.replace(/INDEX/g, index++);
                container.append(newRow);
                const lastRow = container.find('.item-row').last();
                lastRow.find('.product-select').select2({ width: '100%', dropdownCssClass: 'shadow-none border-0' });
                calculateTotals();
            }

            function calculateTotals() {
                let total = 0;
                $('.item-row').each(function () {
                    const row = $(this);
                    const selected = row.find('.product-select option:selected');
                    const price = parseFloat(selected.data('price')) || 0;
                    const unit = selected.data('unit') || 'UNIT';
                    const qty = parseFloat(row.find('.quantity-input').val()) || 0;
                    const lineTotal = price * qty;

                    row.find('.unit-label').text(unit.toUpperCase());
                    row.find('.line-total').text('LKR ' + lineTotal.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
                    total += lineTotal;
                });
                $('#total-value').text('LKR ' + total.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
            }

            $('#add-item-btn').on('click', addItem);
            container.on('click', '.remove-item-btn', function () {
                $(this).closest('tr').fadeOut(200, function () { $(this).remove(); calculateTotals(); });
            });
            container.on('change', '.product-select, .quantity-input', calculateTotals);

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

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .btn-warning-soft {
            background-color: #fffbeb;
            color: #f7b84b;
            border: 1px solid #fef3c7;
        }

        .btn-warning-soft:hover {
            background-color: #f7b84b;
            color: #fff;
        }

        .select2-container--default .select2-selection--single {
            border: none;
            background-color: #f8fafc;
            height: 50px;
            border-radius: 12px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 50px;
            padding-left: 15px;
            color: #475569;
            font-weight: 500;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 50px;
        }

        .table> :not(caption)>*>* {
            padding: 1.25rem 0.5rem;
        }
    </style>
@endpush