@extends('layouts.app')
@section('title', 'Booking Search')

@section('page-wrapper')
    <div class="page-body">
        <div class="container-fluid">
            <!-- Back Button -->
            {{-- <div class="mb-3">
                <a href="{{ route('bookings.index') }}" class="btn-primary">
                    ← Back to Bookings
                </a>
            </div> --}}
            <div class="container-fluid px-0 mb-3">
                <form id="lrn-search-form" class="row align-items-start g-2 needs-validation" novalidate>
                    <div class="col-auto mt-3">
                        <label for="lrnfilter" class="form-label required fw-bold mb-0">AWB/LR Number</label>
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="form-control @error('lr_number') is-invalid @enderror" id="lrnfilter"
                            name="lr_number" value="{{ old('lr_number') }}" placeholder="Enter LR Number" required>
                        <div class="invalid-feedback">
                            Please enter a AWB/LR number.
                        </div>
                    </div>
                    <div class="col-auto d-flex gap-2">
                        <button type="submit" class="btn btn-primary">Search</button>
                        <button type="button" class="btn btn-secondary" id="resetBtn">Reset</button>
                    </div>
                </form>
            </div>
            <div class="mb-3 d-none" id="lr-result">
                <div class="overflow-x-hidden">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <div class="card shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title mb-3">Booking Details</h5>
                                    <div class="table-responsive">
                                        <table class="table card-table table-vcenter dataTable no-footer">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Booking Type</th>
                                                    <th>AWB/LR Number</th>
                                                    <th>Booking Date</th>
                                                    <th>Sender</th>
                                                    <th>Shipment Weight</th>
                                                    <th>System Cost (₹)</th>
                                                    <th>Booking Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td id="booking_type"></td>
                                                    <td id="airway_number"></td>
                                                    <td id="booking_date"></td>
                                                    <td id="sender_name"></td>
                                                    <td id="shipment_weight"></td>
                                                    <td id="booking_amount"></td>
                                                    <td id="booking_status"></td>
                                                    <td>
                                                        <span class="nav-link-icon d-md-none d-lg-inline-block mt-3">
                                                            <a href="javascript:void(0);" id="editBookingBtn"
                                                                data-bs-toggle="modal" data-bs-target="#editBookingModal"
                                                                style="margin-right:15px;" class="editClass">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                    height="24" viewBox="0 0 24 24" fill="none"
                                                                    stroke="currentColor" stroke-width="2"
                                                                    stroke-linecap="round" stroke-linejoin="round"
                                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-pencil">
                                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                                    <path
                                                                        d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
                                                                    <path d="M13.5 6.5l4 4" />
                                                                </svg>
                                                            </a>
                                                        </span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card" id="search-list">
                <div class="card-body p-0 overflow-x-hidden">
                    <div class="col-sm-12 col-md-12 mt-3 align-items-end border-top pt-3" id="customFilters"
                        style="display:none;">
                        <div class="row row-cards">
                            <div class="col-md">
                                <label for="startDate" class="mb-2">Start Date</label>
                                <div class="input-icon">
                                    <input type="text" class="form-control form-control startDate" id="startDate"
                                        autocomplete="off" value="{{ $startOfMonthFormatted }}" readonly />
                                    <span class="input-icon-addon">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path
                                                d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
                                            <path d="M16 3v4" />
                                            <path d="M8 3v4" />
                                            <path d="M4 11h16" />
                                            <path d="M11 15h1" />
                                            <path d="M12 15v3" />
                                        </svg>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md">
                                <label for="endDate" class="mb-2">End Date</label>
                                <div class="input-icon">
                                    <input type="text" class="form-control form-control" id="endDate"
                                        autocomplete="off" value="{{ $endOfMonthFormatted }}" readonly />
                                    <span class="input-icon-addon">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path
                                                d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
                                            <path d="M16 3v4" />
                                            <path d="M8 3v4" />
                                            <path d="M4 11h16" />
                                            <path d="M11 15h1" />
                                            <path d="M12 15v3" />
                                        </svg>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md">
                                <label for="adminFilter" class="mb-2">Admin</label>
                                <select id="adminFilter" class="form-select form-select">
                                    <option value="">All</option>
                                    @foreach ($admins as $key => $value)
                                        <option value="{{ $key }}">{{ $value }} </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md">
                                <label for="franchiseFilter" class="mb-2">Franchise</label>
                                <select id="franchiseFilter" class="form-select form-select">
                                    <option value="">All</option>
                                    @foreach ($franchises as $key => $value)
                                        <option value="{{ $key }}">{{ $value }} </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md">
                                <label for="bookingTypesFilter" class="mb-2">Booking Type</label>
                                <select id="bookingTypesFilter" class="form-select form-select">
                                    <option value="">All</option>
                                    @foreach ($bookingTypes as $key => $value)
                                        <option value="{{ $key }}">{{ $value }} </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-auto d-flex align-items-end">
                                <button type="button" id="resetFilters" class="btn btn-outline-secondary w-100">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="20"
                                        height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                        fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
                                        <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
                                    </svg>
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="table-default" class="dataTableContainer table-responsive">
                        <table class="table card-table table-vcenter" id="bookings-table">
                            <thead>
                                <tr>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Courier</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Booking Type</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Courier Setup
                                        Name
                                    </th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        AWB/LR Number</th>
                                    <th class="w-1 text-left"
                                        style="margin-top: 8px; margin-bottom:8px; min-width: 75px !important;">Date</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Origin & Delivery Address</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Shipment Weight</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Booking Amount</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Shipment Mode</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Shipment Type</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Freight Mode</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Insurance</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Box Count</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Package Details</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Status</th>
                                    <th width="100" class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">
                                        Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Booking Modal -->
    <div class="modal modal-blur fade" id="editBookingModal" tabindex="-1" aria-labelledby="editBookingModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <form id="editBookingForm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Booking</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="edit_booking_transaction" class="form-label required">Transaction</label>
                            <select
                                class="form-select form-control @error('edit_booking_transaction') is-invalid @enderror"
                                id="edit_booking_transaction" name="edit_booking_transaction">
                                <option value=""></option>
                                <option value="Credit">Credit</option>
                                <option value="Debit">Debit</option>
                            </select>
                            <div class="invalid-feedback">Please select transaction.</div>
                        </div>
                        <div class="mb-3">
                            <label for="edit_booking_amount" class="form-label required">Amount</label>
                            <input type="number" @error('edit_booking_amount') is-invalid @enderror class="form-control"
                                id="edit_booking_amount" name="booking_amount" step="0.01">
                            <div class="invalid-feedback">Please enter a valid amount.</div>
                        </div>
                        <div class="mb-3" id="booking-details">
                            <!-- Booking details will be dynamically inserted here -->
                        </div>
                        <div class="mb-3">
                            <label for="edit_remark" class="form-label required">Remark</label>
                            <textarea class="form-control" id="edit_remark" name="remark" rows="3"></textarea>
                            <div class="invalid-feedback">Please enter remark.</div>
                        </div>
                        <input type="hidden" id="edit_lr_number" name="lr_number">
                    </div>
                    <div class="modal-footer justify-content-start">
                        <button type="submit" class="btn btn-primary me-3">Update Booking</button>
                        <button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal modal-blur fade" id="logsModal" tabindex="-1" aria-labelledby="logsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logsModalLabel">Booking Logs</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="logsContent" class="table-responsive">
                        <table class="table table-bordered mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Correction Amount</th>
                                    <th>Booking Amount</th>
                                    <th>Additional Amount</th>
                                    <th>Remark</th>
                                    <th>Transaction</th>
                                    <th>Updated By</th>
                                    <th>Created At</th>
                                </tr>
                            </thead>
                            <tbody id="logsTableBody">
                                <tr>
                                    <td colspan="4" class="text-center">Loading...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        let table;
        $(document).ready(function() {
            const defaultStartDate = @json($startOfMonthFormatted);
            const defaultEndDate = @json($endOfMonthFormatted);
            let startPicker, endPicker;
            startPicker = new Litepicker({
                element: document.getElementById('startDate'),
                format: 'DD MMM YYYY',
                buttonText: {
                    previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
                    nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
                },
                setup: (picker) => {
                    picker.on('selected', (date1) => {
                        const selectedDate = date1.format('YYYY-MM-DD');

                        // Set minDate for endPicker (if needed)
                        if (endPicker) {
                            endPicker.setOptions({
                                minDate: selectedDate
                            });
                        }

                        // Set the default endDate (you mentioned you want it passed automatically)
                        document.getElementById('endDate').value = defaultEndDate;

                        // Trigger a single API call
                        table.ajax.reload();
                    });
                }
            });

            endPicker = new Litepicker({
                element: document.getElementById('endDate'),
                format: 'DD MMM YYYY',
                buttonText: {
                    previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
                    nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
                },
                setup: (picker) => {
                    picker.on('selected', (date1) => {
                        const selectedDate = date1.format('YYYY-MM-DD');

                        // Optionally set maxDate for startDate to prevent future dates
                        if (startPicker) {
                            startPicker.setOptions({
                                maxDate: selectedDate
                            });
                        }

                        // Reload only if user manually changes end date
                        table.ajax.reload();
                    });
                }
            });
            table = $('#bookings-table').DataTable({
                ajax: {
                    url: '{{ route('search.data') }}',
                    type: 'GET',
                    data: function(d) {
                        d.franchise_id = $('#franchiseFilter').val();
                        d.admin_id = $('#adminFilter').val();
                        d.booking_type = $('#bookingTypesFilter').val();
                        d.startDate = $('#startDate').val();
                        d.endDate = $('#endDate').val();
                    },
                },
                columns: [{
                        data: 'courier_data',
                        name: 'courier_data',
                        orderable: true,
                        searchable: true
                    }, {
                        data: 'booking_type',
                        name: 'booking_type',
                        orderable: true,
                        searchable: true
                    }, {
                        data: 'courier_setup_data',
                        name: 'courier_setup_data',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'airway_number',
                        name: 'airway_number',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'date',
                        name: 'date',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'sender_name',
                        name: 'sender_name',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'shipment_weight',
                        name: 'shipment_weight',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'booking_amount',
                        name: 'booking_amount',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'shipment_mode',
                        name: 'shipment_mode',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'shipment_type',
                        name: 'shipment_type',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'freight_mode',
                        name: 'freight_mode',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'rov_insurance',
                        name: 'rov_insurance',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'shipment_total_box_count',
                        name: 'shipment_total_box_count',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'dimension_count',
                        name: 'dimension_count',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'booking_status',
                        name: 'booking_status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                // pageLength: 1,
                stateSave: true,
                processing: true,
                serverSide: true,
                scroller: true,
                responsive: true,
                scrollCollapse: true,
                language: {
                    "paginate": {
                        "previous": '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="15 6 9 12 15 18"></polyline></svg>',
                        "next": '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="9 6 15 12 9 18"></polyline></svg>'
                    }
                },
                oLanguage: {
                    sSearch: "Search"
                },
                aoColumnDefs: [{
                    // bSortable: false,
                    // aTargets: [0, 1, 2]
                }],
                stateLoadParams: function(settings, data) {
                    if (data.length) delete data.length;
                    if (data.start) delete data.start;
                    if (data.search) delete data.search;
                    if (data.order) delete data.order;
                },
                fnDrawCallback: function() {
                    var totalRecord = this.fnSettings().fnRecordsTotal();
                    if (totalRecord > 0) {
                        $("#bookings-table tbody tr td:nth-child(2)").addClass("text-left ps-3");
                        $("#bookings-table tbody tr td:nth-child(3)").addClass("text-left ps-3");
                        $("#bookings-table tbody tr td:nth-child(4)").addClass("text-left ps-3");
                        iniTooltip();
                    }
                },
                initComplete: function() {
                    // Move the filters into the DataTables control area
                    $('#customFilters').insertAfter(
                        '#bookings-table_wrapper div.row:first > div:last ').show();
                },
                dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + // top row: length + search
                    "<'row'<'col-sm-12'tr>>" + // table
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>", // bottom row: info + pagination
                order: []
            });

            $('#franchiseFilter').change(function() {
                table.ajax.reload();
            });

            $('#adminFilter').change(function() {
                table.ajax.reload();
            });

            $('#bookingTypesFilter').change(function() {
                table.ajax.reload();
            });

            $('#resetFilters').on('click', function() {
                resetFilters();
            });

            function resetFilters() {
                const params = new URLSearchParams(window.location.search);
                const month = params.get('month');
                const date = params.get('date');
                if (month != null) {
                    window.location.href = 'search';
                } else if (date != null) {
                    window.location.href = 'search';
                }
                // Reset select input
                $('#franchiseFilter').val('');
                $('#adminFilter').val('');
                $('#bookingTypesFilter').val('');
                table.search('').draw();
                // Reinitialize startPicker
                startPicker = new Litepicker({
                    element: document.getElementById('startDate'),
                    format: 'DD MMM YYYY',
                    startDate: defaultStartDate, // 👈 set default date
                    buttonText: {
                        previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" 
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" 
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M15 6l-6 6l6 6" /></svg>`,
                        nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" 
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" 
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M9 6l6 6l-6 6" /></svg>`,
                    },
                    setup: (picker) => {
                        picker.on('selected', (date1) => {
                            const selectedDate = date1.format('YYYY-MM-DD');

                            if (endPicker) {
                                endPicker.setOptions({
                                    minDate: selectedDate
                                });
                            }

                            document.getElementById('endDate').value = defaultEndDate;
                            table.ajax.reload();
                        });
                    }
                });

                // Reinitialize endPicker if you want
                endPicker = new Litepicker({
                    element: document.getElementById('endDate'),
                    format: 'DD MMM YYYY',
                    startDate: defaultEndDate
                });
                // Trigger DataTable reload
                table.ajax.reload();
            }

            $('#bookings-table_wrapper div.row:nth-child(1)').addClass('mx-2 my-3 text-muted');
            $(
                '#bookings-table_wrapper').addClass('custom-table-scroll');
            $(
                '#bookings-table_wrapper div.row:nth-child(2)').addClass('dt-row border-top');
            $(
                '#bookings-table_wrapper div.row:nth-child(2) .col-sm-12').addClass(
                'table-responsive');
            $(
                '#bookings-table_wrapper div.row:nth-child(3)').addClass(
                'card-footer d-flex align-items-center border-top text-muted bg-white');
            $('.dataTables_filter label')
                .addClass('col-md-auto text-center search-field mt-md-0 mt-3 ');
            $('.dataTables_length label').addClass(
                'align-items-center d-flex gap-2');
        });
        $('#lrnfilter').on('input', function() {
            $(this).removeClass('is-invalid');
        });
        $('#lrn-search-form').on('submit', function(e) {
            e.preventDefault();
            const lrNumber = $('#lrnfilter').val();
            // Remove previous error messages and hide result
            $('.lr-error').remove();
            $('#lr-result').addClass('d-none');
            let isValid = true;
            // Validate required fields
            if (!lrNumber) {
                const input = $('#lrnfilter'); // Your input field
                input.addClass('is-invalid'); // Add Bootstrap class to highlight error
                input.next('.invalid-feedback').text('');
                $('#lrnfilter').addClass('is-invalid');
                $('#lrnfilter').siblings('.invalid-feedback').show();
                input.next('.invalid-feedback').text('Please enter a AWB/LR number.');
                isValid = false;
            }
            // ✅ Validation
            // if (!lrNumber) {
            //     showError('Please enter LR number.');
            //     return;
            // }

            // if (!lrNumber) return;
            if (!isValid) {
                return;
            }

            $.ajax({
                url: '{{ route('search.single') }}', // Custom route for single LR search
                type: 'GET',
                data: {
                    lr_number: lrNumber
                },
                success: function(response) {
                    if (response.success) {
                        const data = response.data;
                        // Fill in table data
                        $('#booking_type').text(data.booking_type);
                        $('#airway_number').text(data.airway_number);
                        $('#booking_date').text(data.date);
                        $('#sender_name').text(data.sender_name);
                        $('#shipment_weight').text(data.shipment_weight);
                        $('#booking_amount').text("₹" + data.booking_amount);
                        let badgeClass = '';
                        switch (data.booking_status) {
                            case 'Manifested':
                                badgeClass = 'bg-blue-lt';
                                break;
                            case 'Not Picked':
                                badgeClass = 'bg-red-lt';
                                break;
                            case 'In Transit':
                                badgeClass = 'bg-yellow-lt';
                                break;
                            case 'Pending':
                                badgeClass = 'bg-cyan-lt';
                                break;
                            case 'Dispatched':
                                badgeClass = 'bg-magento-lt';
                                break;
                            case 'Delivered':
                                badgeClass = 'bg-green-lt';
                                break;
                            default:
                                badgeClass = 'bg-saffron-lt';
                        }
                        $('#booking_status').html(
                            `<span class="badge ${badgeClass} rounded-pill col-auto">${data.booking_status}</span>`
                        );
                        $('#lr-result').removeClass('d-none');
                        $("#search-list").addClass('d-none');
                    } else {
                        $('#lr-result').addClass('d-none');
                        input.addClass('d-block');
                        input.next('.invalid-feedback').text('No record found.');
                    }
                },
                error: function(xhr) {
                    console.log("xhr", );
                    $('#lr-result').addClass('d-none');
                    $('#lrnfilter').removeClass('is-invalid');
                    const input = $('#lrnfilter'); // Your input field
                    input.addClass('is-invalid'); // Add Bootstrap class to highlight error
                    if (xhr.status === 422) {
                        showError('Booking amount already updated.');
                    } else if (xhr.status === 404) {
                        input.addClass('d-block');
                        input.next('.invalid-feedback').text('No record found.');
                    } else if (xhr.status === 400) {
                        input.addClass('d-block');
                        input.next('.invalid-feedback').text(xhr.responseJSON.message);
                    } else {
                        showError('An error occurred. Please try again.');
                    }
                }
            });
        });

        $("#resetBtn").on('click', function(e) {
            e.preventDefault(); // Prevent any default behavior
            $("#lrnfilter").val(""); // Clear the LR number input
            $("#search-list").removeClass('d-none'); // Show the full bookings table
            $("#lr-result").addClass('d-none'); // Hide the single booking result
            $('.lr-error').remove(); // Remove any error messages
            // Reset previous validation states
            $('.form-control').removeClass('is-invalid');
            $('.input-group-text').removeClass('is-invalid');
            $('.invalid-feedback').hide();
            table.ajax.reload(null, false); // Reload DataTable to show all records (optional)
        });

        // Utility function to show error below the form
        function showError(message) {
            $("#search-list").removeClass('d-none');
            const errorHtml = `<div class="alert alert-warning mt-3 lr-error">${message}</div>`;
            $('#search-section').after(errorHtml);
        }

        $(document).on('change', '#edit_booking_amount', function(e) {
            $("#modifyValues").removeClass('d-none');
            $("#modifyValues").addClass('d-block');
            // let pastTotalAmountHtml = $("#pastTotalAmount").html();
            // let pastTotalAmount = parseFloat(pastTotalAmountHtml.replace(/[^0-9.]/g, ''));
            // const amount = parseFloat($(this).val()) - pastTotalAmount;
            const amount = parseFloat($(this).val());
            const saPercent = parseFloat($(this).data('superadmin')) || 0;
            const adminPercent = parseFloat($(this).data('admin')) || 0;
            const razorpayPercent = parseFloat($(this).data('razorpay')) || 0;

            if (isNaN(amount) || amount <= 0) {
                $('#baseCost').text('0.00');
                $('#saCommissionAmount').text('0.00');
                $('#adminCommissionAmount').text('0.00');
                $('#razorpayCommissionAmount').text('0.00');
                return;
            }

            const baseCost = amount;
            const saAmount = (baseCost * saPercent) / 100;
            const adminAmount = (baseCost * adminPercent) / 100;
            const razorpayAmount = (baseCost * razorpayPercent) / 100;
            const total = baseCost + saAmount + adminAmount + razorpayAmount;

            $("#modifyValues").removeClass('d-none').addClass('d-block');
            $('#baseCost').text(baseCost.toFixed(2));
            $('#saCommissionAmount').text(saAmount.toFixed(2));
            $('#adminCommissionAmount').text(adminAmount.toFixed(2));
            $('#razorpayCommissionAmount').text(razorpayAmount.toFixed(2));
            $('#totalAmount').text(total.toFixed(2));
        });

        $(document).on('click', '#editBookingBtn', function() {


            // Example: set values from current booking row (use your actual booking object if available)
            const bookingAmount = $('#booking_amount').text();
            const lrNumber = $('#airway_number').text(); // You can store real ID in a hidden field or use dataset
            const bookingTransaction = $("#edit_booking_transaction").val("");
            // Clear previous details
            $('#booking-details').html('<p>Loading...</p>');

            // Reset previous validation states
            $('.form-control').removeClass('is-invalid');
            $('.input-group-text').removeClass('is-invalid');
            $('.invalid-feedback').hide();

            // AJAX call to fetch booking details
            $.ajax({
                url: '{{ route('search.single') }}', // Reuse existing route or create a new one
                type: 'GET',
                data: {
                    lr_number: lrNumber
                },
                success: function(response) {
                    if (response.success) {
                        const data = response.data;

                        // Set form values
                        $('#edit_booking_amount').val('');
                        $('#edit_remark').val('');
                        $('#edit_lr_number').val(data.airway_number);

                        // Populate booking details
                        // Calculate total for display (if fields are available)
                        const baseCost = parseFloat(data.base_cost) || 0;
                        const superAdminCommissionAmount = parseFloat(data
                            .superadmin_commission_amount) || 0;
                        const adminCommissionAmount = parseFloat(data.admin_commission_amount) || 0;
                        const razorpayCommissionAmount = parseFloat(data.razorpay_commission_amount) ||
                            0;
                        const calculatedTotal = parseFloat(data.total_amount);
                        // const calculatedTotal = baseCost + superAdminCommissionAmount +
                        //     adminCommissionAmount + razorpayCommissionAmount;
                        $('#edit_booking_amount')
                            .data('superadmin', parseFloat(data.franchise_superadmin_commission))
                            .data('admin', parseFloat(data.franchise_admin_commission))
                            .data('razorpay', parseFloat(data.razorpay_commission));
                        // Populate booking details in two-column layout with right-aligned values
                        const detailsHtml = `
                            <div class="card p-3">
                                <h6 class="card-title">Booking Details</h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="d-flex justify-content-between">
                                            <strong>Base Cost:</strong>
                                            <span>₹${data.base_cost || 'N/A'}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <strong>SA: (${data.superadmin_commission}%)</strong>
                                            <span>₹${data.superadmin_commission_amount ? data.superadmin_commission_amount : 'N/A'}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <strong>Admin: (${data.admin_commission}%)</strong>
                                            <span>₹${data.admin_commission_amount ? data.admin_commission_amount : 'N/A'}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <strong>Razorpay: (${data.razorpay_commission}%)</strong>
                                            <span>₹${data.razorpay_commission_amount ? data.razorpay_commission_amount : 'N/A'}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <strong>Total Amount:</strong>
                                            <span id="pastTotalAmount">₹${data.total_amount || 'N/A'}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 border-start border-2 ps-3 border-secondary d-none" id="modifyValues">
                                        <div class="d-flex justify-content-between">
                                            <strong>Base Cost:</strong>
                                            <span>₹<span id="baseCost"></span></span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <strong>SA: (${data.franchise_superadmin_commission}%)</strong>
                                            <span>₹<span id="saCommissionAmount"></span></span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <strong>Admin: (${data.franchise_admin_commission}%)</strong>
                                            <span>₹<span id="adminCommissionAmount"></span></span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <strong>Razorpay: (${data.razorpay_commission}%)</strong>
                                            <span>₹<span id="razorpayCommissionAmount"></span></span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <strong>Total Amount:</strong>
                                            <span>₹<span id="totalAmount"></span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#booking-details').html(detailsHtml);
                    } else {
                        $('#booking-details').html(
                            '<p class="text-danger">No booking details found.</p>');
                    }
                },
                error: function(xhr) {
                    $('#booking-details').html(
                        '<p class="text-danger">Error loading booking details.</p>');
                }
            });
            $('#edit_booking_amount').val(bookingAmount.trim());
            $('#edit_remark').val('');
            $('#edit_lr_number').val(lrNumber); // Replace this with actual ID from backend
        });
        // Optional: AJAX form submit (you can use your own route and logic)
        $('#editBookingForm').on('submit', function(e) {
            e.preventDefault();

            const lrNumber = $('#edit_lr_number').val();
            const newAmount = $('#edit_booking_amount').val();
            const remark = $('#edit_remark').val();
            const bookingTransaction = $('#edit_booking_transaction').val();

            // Reset previous validation states
            $('.form-control').removeClass('is-invalid');
            $('.input-group-text').removeClass('is-invalid');
            $('.invalid-feedback').hide();

            let isValid = true;

            // Validate required fields
            if (!newAmount) {
                $('#edit_booking_amount').addClass('is-invalid');
                $('#edit_booking_amount').siblings('.invalid-feedback').show();
                isValid = false;
            }

            if (!remark) {
                $('#edit_remark').addClass('is-invalid');
                $('#edit_remark').siblings('.invalid-feedback').show();
                isValid = false;
            }

            if (!bookingTransaction) {
                $('#edit_booking_transaction').addClass('is-invalid');
                $('#edit_booking_transaction').siblings('.invalid-feedback').show();
                isValid = false;
            }

            if (!isValid) {
                return;
            }

            // Example: Update on UI only (replace with AJAX if needed)
            $('#booking_amount').text(newAmount);

            $('#editBookingModal').modal('hide');

            // Optional: Send to server via AJAX
            $.ajax({
                url: '/search/updateLogs', // Replace with actual update route
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    booking_amount: newAmount,
                    lr_number: lrNumber,
                    remark: remark,
                    transaction: bookingTransaction,
                },
                success: function(response) {
                    toastr.success('Booking updated successfully.');
                    $('#lr-result').addClass('d-none');
                    $('#lrnfilter').val('');
                    $('#editBookingModal').modal('hide');
                    $('#resetBtn').click();
                },
                error: function(xhr) {
                    // Laravel Validation error (422)
                    if (xhr.status === 422) {
                        let message = 'Update failed.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            message = Object.values(errors).flat().join('<br>');
                        }
                        toastr.error(message);
                    } else {
                        toastr.error('An unexpected error occurred.');
                    }
                }
            });
        });

        $(document).on('click', '.view-logs-btn', function() {
            const bookingId = $(this).data('booking-id');

            $('#logsTableBody').html('<tr><td colspan="4" class="text-center">Loading...</td></tr>');

            $.ajax({
                url: '/search/' + bookingId + '/logs', // adjust route if needed
                type: 'GET',
                success: function(response) {
                    if (response.success && response.logs.length > 0) {
                        let rows = '';
                        response.logs.forEach(log => {
                            const badgeClass = log.transaction_type === 'Credit' ?
                                'text-success' : 'text-danger';
                            const transactionBadge =
                                `<span class="fw-bold ${badgeClass}">${log.transaction_type}</span>`;
                            rows += `
                        <tr>
                            <td>${log.updated_amount}</td>
                            <td>${log.booking_amount}</td>
                            <td>${log.difference_amount}</td>
                            <td>${log.remark}</td>
                            <td>${transactionBadge}</td>
                            <td>${log.created_by_name || 'N/A'}</td>
                            <td>${log.created_at || 'N/A'}</td>
                        </tr>`;
                        });
                        $('#logsTableBody').html(rows);
                    } else {
                        $('#logsTableBody').html(
                            '<tr><td colspan="4" class="text-center">No logs available.</td></tr>');
                    }
                },
                error: function() {
                    $('#logsTableBody').html(
                        '<tr><td colspan="4" class="text-center text-danger">Failed to load logs.</td></tr>'
                    );
                }
            });
        });
    </script>
@endsection