@extends('layouts.app')

@section('title', 'Create Delivery Note')

@push('css')
    <link href="{{ asset('assets/css/posm_custom.css') }}" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .fs-11 {
            font-size: 11px;
        }

        .ls-1 {
            letter-spacing: 0.5px;
        }

        .bg-light-soft {
            background-color: #f8fafc;
        }

        .bg-soft-warning {
            background-color: rgba(247, 184, 75, 0.1) !important;
        }

        .bg-soft-primary {
            background-color: rgba(59, 130, 246, 0.1) !important;
        }

        .bg-soft-info {
            background-color: rgba(6, 182, 212, 0.1) !important;
        }

        .transition-all {
            transition: all 0.2s ease;
        }

        .table>thead>tr>th {
            background-color: #f8fafc;
            border-bottom: 1px solid #edf2f7;
            color: #64748b;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.5px;
            padding: 12px 15px;
        }

        .btn-warning-soft {
            background-color: rgba(247, 184, 75, 0.1);
            color: #f7b84b;
            border: 1px dashed #f7b84b;
            transition: all 0.2s ease;
        }

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

        .select2-container--default .select2-selection--single {
            height: 45px !important;
            padding: 8px !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 8px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 43px !important;
        }
    </style>
@endpush

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb posm-breadcrumb bg-transparent p-0 mb-0">
                    <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 text-dark fw-bold" aria-current="page">New Note</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Create Delivery Note</div>
        <div class="d-flex align-items-center ms-auto">
            <!-- Mandatory Action Set (Right) -->
            <!-- Add -->
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

            <!-- Save -->
            <i id="submitForm"
                class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Save Manifest" style="cursor: pointer;"></i>

            <!-- Edit -->
            <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit" style="cursor: default;"></i>

            <!-- Delete -->
            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete" style="cursor: default;"></i>

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

            <!-- Column Visibility -->
            <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns" style="cursor: default;"></i>
        </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.store') }}" method="POST">
                @csrf

                <!-- Section 1: Note Details -->
                <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="row g-4">
                        <div class="col-md-4">
                            <label class="form-label text-muted fs-11 text-uppercase fw-bold ls-1 mb-2">Event Supplier <span
                                    class="text-danger">*</span></label>
                            <select name="event_supplier_id" class="form-control select2 shadow-none" required>
                                <option value="">Select Supplier</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label text-muted fs-11 text-uppercase fw-bold ls-1 mb-2">Event / Budget <span
                                    class="text-danger">*</span></label>
                            <select name="event_budget_id" class="form-control select2 shadow-none" required>
                                <option value="">Select Budget</option>
                                @foreach($budgets as $budget)
                                    <option value="{{ $budget->id }}">{{ $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 ls-1 mb-2">Warehouse <span
                                    class="text-danger">*</span></label>
                            <select name="warehouse_id" class="form-control select2 shadow-none" required>
                                <option value="">Select Warehouse</option>
                                @foreach($warehouses as $warehouse)
                                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Section 2: 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="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="itemsTable">
                            <thead>
                                <tr>
                                    <th class="ps-4">Product</th>
                                    <th class="text-center" style="width: 250px;">Quantity</th>
                                    <th class="text-end" style="width: 200px;">Total Price</th>
                                    <th class="pe-4 text-end" style="width: 80px;"></th>
                                </tr>
                            </thead>
                            <tbody id="items-container">
                                <!-- Rows added via JS -->
                            </tbody>
                            <tfoot class="bg-light-soft border-top">
                                <tr>
                                    <td colspan="2" class="text-end py-4 fw-bold text-muted text-uppercase fs-11 ls-1">
                                        Estimated Total Value</td>
                                    <td class="text-end py-4 fw-bold text-primary fs-4" id="total-value"
                                        style="padding-right: 0.5rem;">LKR 0.00</td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                <div class="alert bg-soft-info border-0 rounded-4 p-4 d-flex align-items-center mb-5">
                    <div class="avatar-sm 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-shield-check text-info fs-4"></i>
                    </div>
                    <div class="ms-2">
                        <h6 class="fw-bold mb-1 text-info fs-14">Stock Verification Required</h6>
                        <p class="text-dark small mb-0 opacity-75">By saving this delivery note, you confirm that physical
                            quantities match the specified records. This will trigger stock deductions and budget updates.
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Row Template for Dynamic Addition -->
    <template id="row-template">
        <tr class="item-row transition-all border-bottom border-light">
            <td class="ps-4">
                <select name="items[INDEX][product_id]"
                    class="form-control bg-light border-0 product-select shadow-none py-2" required>
                    <option value="">Select Product</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->sku }})
                        </option>
                    @endforeach
                </select>
            </td>
            <td>
                <div class="input-group bg-light rounded-3 overflow-hidden border border-light">
                    <input type="number" name="items[INDEX][quantity]"
                        class="form-control bg-transparent border-0 py-2 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-outline-danger btn-sm rounded-circle shadow-none border-0 p-2 remove-item-btn"
                    title="Remove Item"
                    style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                    <i class="fa-regular fa-trash-can"></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%',
                placeholder: 'Select Option',
                allowClear: true
            });

            let index = 0;
            const container = $('#items-container');
            const template = $('#row-template').html();

            $('#submitForm').click(function () {
                if (container.children().length === 0) {
                    Swal.fire({
                        title: 'Empty Note',
                        text: 'Please add at least one item to the delivery note.',
                        icon: 'warning',
                        confirmButtonColor: '#f7b84b'
                    });
                    return;
                }
                $(this).prop('disabled', true);
                $('#dnForm').submit();
            });

            function addItem() {
                const newRowVal = template.replace(/INDEX/g, index++);
                const $newRow = $(newRowVal);
                container.append($newRow);

                // Initialize Select2 on the new select element
                $newRow.find('.product-select').select2({
                    width: '100%',
                    placeholder: 'Select Product',
                    minimumResultsForSearch: 5
                });

                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);

            // Add first row by default
            addItem();
        });
    </script>
@endpush