@extends('layouts.app')

@section('title', 'Bookings')

@section('page-wrapper')
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col d-flex justify-content-between align-items-center">
                    <h2 class="page-title">
                        Bookings
                        @if (Auth::user()->role_id != 1)
                            ({{ Auth::user()->name }})
                        @endif
                    </h2>
                    {{-- <a href="{{ route('bookings.create') }}" class="btn btn-primary">
                        <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">
                            <path d="M12 5l0 14"></path>
                            <path d="M5 12l14 0"></path>
                        </svg>
                        Add
                    </a> --}}
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container-fluid">
            <div class="card">
                <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 }}" />
                                    <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>
                            
                            @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                                <div class="col-md">
                                    <label for="adminFilter" class="mb-2">Customer</label>
                                    <select id="adminFilter" class="form-select form-select">
                                        <option value="">All</option>
                                        @foreach ($admins as $key => $value)
                                            <option value="{{ $key }}"
                                                {{ request('admin_id') == $key ? 'selected' : '' }}>{{ $value }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif
                            
                            <div class="col-md">
                                <label for="bookingCarrierTypesFilter" class="mb-2">Carrier</label>
                                <select id="bookingCarrierTypesFilter" class="form-select form-select">
                                    <option value="">All</option>
                                    @foreach ($carrierTypes as $key => $value)
                                        <option value="{{ $key }}">{{ $value }} </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md">
                                <label for="bookingStatusFilter" class="mb-2">Status</label>
                                <select id="bookingStatusFilter" class="form-select form-select">
                                    <option value="">All</option>
                                    @foreach ($bookingStatus as $key => $value)
                                        <option value="{{ $key }}"
                                            {{ request('booking_status') == $key ? 'selected' : '' }}>{{ $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; min-width: 90px !important;">Booking Date</th>
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">LR Number</th> --}}
                                    @if (Auth::user()->role_id == 1)
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;; min-width: 230px !important;">Customer Name</th>
                                    @endif
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Consignment No.</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Reference No.</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Receiver Name</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Center Name</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Carrier Name</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px; min-width: 110px !important;">Remarks</th>
                                    

                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Type</th> --}}
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Branch Id</th> --}}

                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Mobile</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Address</th> --}}
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Package Type</th> --}}
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Admin Commission</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Razorpay Commission</th> --}}
                                    @if (Auth::user()->role_id == 1)
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Weight</th>
                                    @endif
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Net Amt</th> --}}
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Insurance Amt</th> --}}
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Eway Bill Amt</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Doc Amt</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Oda Amt</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Fov Amt</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Parcel Value Amt</th> --}}
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">No. of Box</th>
                                    @if (Auth::user()->role_id == 1)
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Net Amount</th>
                                    @endif
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Valuation Amt</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Value</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Number of box</th>
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Parcel Value</th> --}}
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Delivered Status</th> --}}
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px; min-width: 110px !important;">Comments</th>
                                    @if (Auth::user()->role_id == 1)
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px; min-width: 120px !important;">Created At</th> 
                                    @endif
                                    <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px; min-width: 120px !important;">Status</th> <!-- we will use status_html data here -->
                                    {{-- <th class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;">Deliver Remark</th> --}}
                                    <th width="280" class="w-1 text-left" style="min-width: 77px !important;margin-top: 8px; margin-bottom:8px;">POD </th>
                                    <th width="280" class="w-1 text-left" style="margin-top: 8px; margin-bottom:8px;"> Receipts</th>
                                </tr>
                            </thead>
                            <tfoot>
                                {{-- <tr style="background: var(--tblr-bg-surface-tertiary);">
                                    <th>Total:</th>
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                        <th>
                                            <strong>₹<span id="baseCostTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                </tr> --}}
                                {{-- <tr style="background: var(--tblr-bg-surface-tertiary);">
                                    @if (Auth::user()->role_id == 1)
                                        <th colspan="14"></th>
                                    @elseif(Auth::user()->role_id == 3)
                                        <th colspan="6"></th>
                                    @else
                                        <th colspan="7"></th>
                                    @endif
                                    <th>Total:</th>
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                        <th>
                                            <strong>₹<span id="baseCostTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1)
                                        <th>
                                            <strong>₹<span id="superadminCommissionAmount">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                        <th>
                                            <strong>₹<span id="adminCommissionAmount">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                        <th>
                                            <strong>₹<span id="razorpayCommissionAmount">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 3)
                                        <th>
                                            <strong>₹<span id="bookingAmountTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 3)
                                        <th>
                                            <strong>₹<span id="profitLossAmountTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 3)
                                        <th>
                                            <strong>₹<span id="totalAmountTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                    <th colspan="8" style="background: var(--tblr-bg-surface-tertiary);"></th>
                                </tr> --}}
                                <tr style="background: var(--tblr-bg-surface-tertiary);">
                                @if ( Auth::user()->role_id == 1 )
                                        <th colspan="9"></th>
                                        <th>Total:</th>
                                        <th>
                                            <strong>₹<span id="totalAmountTotal">0.00</span></strong>
                                        </th>
                                        <th colspan="5"></th>
                                    @endif
                                </tr>
                                <tr style="background: var(--tblr-bg-surface-tertiary);">
                                    @if ( Auth::user()->role_id == 1 )
                                            <th colspan="8"></th>
                                            <th colspan="2" style="text-align: right"><span>Gross Total:</span></th>
                                            <th>
                                                <strong>₹<span id="allTotalAmountTotal">0.00</span></strong>
                                            </th>
                                            <th colspan="5"></th>
                                    @endif
                                </tr>
                                {{-- <tr style="background: var(--tblr-bg-surface-tertiary);">
                                    @if (Auth::user()->role_id == 1)
                                        <th colspan="14"></th>
                                    @elseif(Auth::user()->role_id == 3)
                                        <th colspan="6"></th>
                                    @else
                                        <th colspan="7"></th>
                                    @endif
                                    <th>Gross Total:</th>
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                        <th>
                                            <strong>₹<span id="allBaseCostTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1)
                                        <th>
                                            <strong>₹<span id="allSuperadminCommissionAmount">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                        <th>
                                            <strong>₹<span id="allAdminCommissionAmount">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                        <th>
                                            <strong>₹<span id="allRazorpayCommissionAmount">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 3)
                                        <th>
                                            <strong>₹<span id="allBookingAmountTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 3)
                                        <th>
                                            <strong>₹<span id="allProfitLossAmountTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 3)
                                        <th>
                                            <strong>₹<span id="allTotalAmountTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                    <th colspan="8" style="background: var(--tblr-bg-surface-tertiary);"></th>
                                </tr> --}}
                                
                                {{-- <tr style="background: var(--tblr-bg-surface-tertiary);">
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 3)
                                        <th>
                                            <strong>₹<span id="allTotalAmountTotal">0.00</span></strong>
                                        </th>
                                    @endif
                                </tr> --}}
                            </tfoot>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-blur fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-status bg-danger"></div>
                <div class="modal-body text-center py-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" 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="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" />
                        <path d="M12 9v4" />
                        <path d="M12 17h.01" />
                    </svg>
                    <h3>Are you sure?</h3>
                    <div class="text-secondary modal-body-text">massage</div>
                </div>
                <div class="modal-footer">
                    <div class="w-100">
                        <div class="row">
                            <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
                                    Cancel
                                </a></div>
                            <div class="col">
                                <form id="deleteForm" method="POST" action="" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger w-100"
                                        data-bs-dismiss="modal">Delete</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="couriers-table_processing" class="dataTables_processing" style="display:none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </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>
                                    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 4)
                                        <th>Correction Amount</th>
                                    @endif
                                    <th>Booking Amount</th>
                                    <th>Difference 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>

    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showSuccessMessage("{{ session('success') }}");
            });
        </script>
    @endif

   
    <!-- UPLOAD POD FILE MODAL -->
        <div class="modal fade" id="uploadModal" tabindex="-1">
          <div class="modal-dialog">
            <form id="uploadForm" enctype="multipart/form-data">
              @csrf
              <input type="hidden" id="uploadItemId">
            
              <div class="modal-content">
            
                <div class="modal-header">
                  <h5 class="modal-title">Upload File</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
            
                <div class="modal-body pb-0">
                  <input class="form-control" type="file" name="file" id="fileInput" accept=".jpg,.jpeg,.png, .pdf" required>
                </div>
                <span class="form-check-description mt-3" style="padding: 0 0 1rem 1.5rem ">Note: max size 5mb allowed! (.jpg, .jpeg, .png, .pdf)</span>
                <div class="modal-footer justify-content-start">
                  <button type="submit" class="btn btn-primary">Upload</button>
                  <button type="button" class="btn btn-grey" data-bs-dismiss="modal">Cancel</button>
                </div>
            
              </div>
          
            </form>
          </div>
        </div>

@endsection

@section('scripts')

{{-- <link rel="stylesheet" href="//cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="//cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> --}}
    <script>
        let table;
        $(document).ready(function() {


            const defaultStartDate = @json($startOfMonthFormatted);
            const defaultEndDate = @json($endOfMonthFormatted);
            const selectedBookingStatus = @json($selectedBookingStatus);
            let startPicker, endPicker;

            startPicker = new Litepicker({
                element: document.getElementById('startDate'),
                format: 'DD MMM YYYY',
                // maxDate: defaultEndDate, // restrict at initialization
                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');

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

                            // Auto-correct if start > end
                            const endDate = new Date(endPicker.getDate().format('YYYY-MM-DD'));
                            if (new Date(selectedDate) > endDate) {
                                endPicker.setDate(date1); // force endDate = startDate
                            }
                        }

                        table.ajax.reload();
                    });
                }
            });

            endPicker = new Litepicker({
                element: document.getElementById('endDate'),
                format: 'DD MMM YYYY',
                minDate: defaultStartDate, // restrict at initialization
                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');

                        // Update startPicker maxDate
                        if (startPicker) {
                            startPicker.setOptions({
                                maxDate: selectedDate
                            });

                            // Auto-correct if end < start
                            const startDate = new Date(startPicker.getDate().format(
                                'YYYY-MM-DD'));
                            if (new Date(selectedDate) < startDate) {
                                startPicker.setDate(date1); // force startDate = endDate
                            }
                        }

                        table.ajax.reload();
                    });
                }
            });

//             $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
//     let searchVal = $('#bookings-table input').val();
//     let dateCol = data[2].toLowerCase();

//     if (searchVal === "") return true;

//     return dateCol.startsWith(searchVal);
// });


            table = $('#bookings-table').DataTable({
                ajax: {
                    url: '{{ route('booking.data') }}',
                    type: 'GET',
                    data: function(d) {
                        d.franchise_id = $('#franchiseFilter').val();
                        d.admin_id = $('#adminFilter').val();
                        d.carrier_type = $('#bookingCarrierTypesFilter').val();
                        d.booking_status = selectedBookingStatus ? selectedBookingStatus : $(
                            '#bookingStatusFilter').val();
                        d.startDate = $('#startDate').val();
                        d.date = $('#date').val();
                        d.endDate = $('#endDate').val();
                    },
                    dataSrc: function(json) {
                        // window.base_cost_total = parseFloat(json.base_cost_total) ||
                        //     0; // store it globally
                        window.superadmin_commission_amount = parseFloat(json
                                .superadmin_commission_amount) ||
                            0; // store it globally
                        window.admin_commission_amount = parseFloat(json
                                .admin_commission_amount) ||
                            0; // store it globally
                        window.razorpay_commission_amount_total = parseFloat(json
                                .razorpay_commission_amount_total) ||
                            0; // store it globally
                        window.total_booking_amount = parseFloat(json
                                .total_booking_amount) ||
                            0; // store it globally
                        window.total_amount_total = parseFloat(json
                                .total_amount_total) ||
                            0; // store it globally
                        window.all_total_amount_total = parseFloat(json
                                .all_total_amount_total) ||
                            0; // store it globally
                        window.profit_loss_amount = parseFloat(json
                                .profit_loss_amount) ||
                            0; // store it globally

                        // Update footer total
                        $('#totalAmountTotal').html(
                            parseFloat(json.total_amount_total || 0).toFixed(2)
                        );
                        // $('#profitLossAmountTotal').html(
                        //     parseFloat(json.profit_loss_amount_total || 0).toFixed(2)
                        // );
                        $('#bookingAmountTotal').html(
                            parseFloat(json.total_booking_amount || 0).toFixed(2)
                        );
                        $('#adminCommissionAmount').html(
                            parseFloat(json.admin_commission_amount || 0).toFixed(2)
                        );
                        @if (Auth::user()->role_id == 1)
                            $('#superadminCommissionAmount').html(
                                parseFloat(json.superadmin_commission_amount || 0).toFixed(2)
                            );
                        @endif
                        $('#razorpayCommissionAmount').html(
                            parseFloat(json.razorpay_commission_amount_total || 0).toFixed(2)
                        );

                        $('#allTotalAmountTotal').html(
                            parseFloat(json.all_booking_amount_total || 0).toFixed(2)
                        );
                        // $('#allProfitLossAmountTotal').html(
                        //     parseFloat(json.all_profit_loss_amount_total || 0).toFixed(2)
                        // );
                        // $('#allBaseCostTotal').html(
                        //     parseFloat(json.all_base_cost_total || 0).toFixed(2)
                        // );
                        $('#allBookingAmountTotal').html(
                            parseFloat(json.all_total_amount_total || 0).toFixed(2)
                        );
                        $('#allAdminCommissionAmount').html(
                            parseFloat(json.all_admin_commission_total || 0).toFixed(2)
                        );
                        @if (Auth::user()->role_id == 1)
                            $('#allSuperadminCommissionAmount').html(
                                parseFloat(json.all_superadmin_commission_total || 0).toFixed(2)
                            );
                        @endif
                        $('#allRazorpayCommissionAmount').html(
                            parseFloat(json.all_razorpay_commission_total || 0).toFixed(2)
                        );
                        

                        return json.data;
                    }
                },
                columns: [
                    {
                        data: 'date',
                        name: 'date',
                        orderable: true,
                        searchable: true
                    },
                    // {
                    //     data: 'uniq_id',
                    //     name: 'uniq_id',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    @if (Auth::user()->role_id == 1)
                    {
                        data: 'admin_data',
                        name: 'client_id',
                        orderable: true,
                        searchable: true
                    },
                    @endif
                    {
                        data: 'consignment_no',
                        name: 'consignment_no',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'reference_number',
                        name: 'reference_number',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'receiver_name',
                        name: 'receiver_name',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'center_name',
                        name: 'center_name',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'carrier_name',
                        name: 'carrier_name',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'remarks',
                        name: 'remarks',
                        orderable: false,
                        searchable: true
                    },
                   
                    // {
                    //     data: 'package_type_name',
                    //     name: 'package_type_name',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'branch_id',
                    //     name: 'branch_id',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    
                    // {
                    //     data: 'mobile',
                    //     name: 'mobile',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'address',
                    //     name: 'address',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'package_type',
                    //     name: 'package_type',
                    //     orderable: true,
                    //     searchable: true
                    // },
                
                    // {
                    //     data: 'superadmin_commission_amount',
                    //     name: 'superadmin_commission_amount',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'admin_commission_amount',
                    //     name: 'admin_commission_amount',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'razorpay_commission_amount',
                    //     name: 'razorpay_commission_amount',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    @if (Auth::user()->role_id == 1)
                    {
                        data: 'weight',
                        name: 'weight',
                        orderable: true,
                        searchable: true
                    },
                    @endif
                    // {
                    //     data: 'net_amt',
                    //     name: 'net_amt',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'insurance_amt',
                    //     name: 'insurance_amt',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'eway_bill_amt',
                    //     name: 'eway_bill_amt',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'doc_amt',
                    //     name: 'doc_amt',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'oda_amt',
                    //     name: 'oda_amt',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'fov_amt',
                    //     name: 'fov_amt',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'parcel_value_amt',
                    //     name: 'parcel_value_amt',
                    //     orderable: true,
                    //     searchable: true
                    // },
                     {
                         data: 'number_of_box',
                         name: 'number_of_box',
                         orderable: true,
                         searchable: true
                     },
                    @if (Auth::user()->role_id == 1)
                    {
                        // data: 'amount',
                        data: 'net_amt',
                        name: 'amount',
                        orderable: true,
                        searchable: true
                    },
                    @endif
                    // {
                    //     data: 'valuation_amt',
                    //     name: 'valuation_amt',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'value',
                    //     name: 'value',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'parcel_value',
                    //     name: 'parcel_value',
                    //     orderable: true,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'delivered_status',
                    //     name: 'delivered_status',
                    //     orderable: true,
                    //     searchable: true
                    // },

                    // {
                    //     data: 'remarks_by_admin',
                    //     render: function (data, type, row) {
                    //         if ("{{ Auth::user()->role_id }}" == 1) {
                    //             return `@csrf<input type="text"
                    //                 class="review-input form-control form-control rounded-2"  
                    //                 data-id="${row.id}" 
                    //                 value="${data ? data : ''}" />`;
                    //         } else {
                    //             return data ?? '';
                    //         }
                    //     }
                    // },
                    {
                        data: 'remarks_by_admin',
                        name: 'remarks_by_admin',
                        orderable: false,
                        searchable: true,
                        className: 'booking-comment-column'
                    },
                    @if (Auth::user()->role_id == 1)
                    {
                        data: 'created_at',
                        name: 'created_at',
                        orderable: false,
                        searchable: true,
                        className: 'booking-comment-column'
                    },
                    @endif
                    @if (Auth::user()->role_id == 1)
                    {
                        data: 'booking_status',
                        name: 'booking_status',
                        orderable: false,
                        searchable: true,
                        className: 'booking-status-column'
                    },
                    @else
                    {
                        data: 'booking_status',
                        name: 'booking_status',
                        orderable: true,
                        searchable: true,
                        className: 'booking-status-column'
                    },
                    @endif
                    
                    // {
                    //     data: 'deliver_remark',
                    //     name: 'deliver_remark',
                    //     orderable: false,
                    //     searchable: true
                    // },
                    // {
                    //     data: 'remarks_by_admin',
                    //     name: 'remarks_by_admin',
                    //     orderable: false,
                    //     searchable: true
                    // },
                    
                    {
                        data: 'pod_action',
                        name: 'pod action',
                        orderable: false,
                        searchable: false,
                        className: 'pod-action-column'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },

                ],
                // pageLength: 1,
                stateSave: true,
                processing: true,
                serverSide: false,
                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();
                },
                footerCallback: function(row, data, start, end, display) {
                    var api = this.api();

                    // ✅ adjust indices based on role
                    @if (Auth::user()->role_id == 1)
                        var baseCostTotalColIndex = 9;
                        var adminCommissionTotalColIndex = 11;
                        var razorpayCommissionTotalColIndex = 12;
                        var systemAmountTotalColIndex = 13;
                        var totalAmountTotalColIndex = 10;
                        var grossTotalAmountTotalColIndex = 10;
                        // var profit_loss_amount = 8;
                    @elseif (Auth::user()->role_id == 2)
                        var baseCostTotalColIndex = 8;
                        var adminCommissionTotalColIndex = 9;
                        var razorpayCommissionTotalColIndex = 10;
                        var systemAmountTotalColIndex = 11;
                        var totalAmountTotalColIndex = 10;
                        var grossTotalAmountTotalColIndex = 10;
                        var profit_loss_amount = 7;
                    @elseif (Auth::user()->role_id == 3)
                        var baseCostTotalColIndex = 11;
                        var adminCommissionTotalColIndex = 9;
                        var razorpayCommissionTotalColIndex = 10;
                        var systemAmountTotalColIndex = 7;
                        var totalAmountTotalColIndex = 10;
                        var grossTotalAmountTotalColIndex = 10;
                        var profit_loss_amount = 8;
                    @endif

                    var superAdminCommissionTotalColIndex = 10;

                    @if (Auth::user()->role_id == 1)
                        var statusColIndex = 8;
                        // var statusColIndex = 21;
                    @elseif (Auth::user()->role_id == 2)
                        var statusColIndex = 7;
                    // @elseif (Auth::user()->role_id == 3)
                    //     var statusColIndex = 16;
                    @endif

                    // helper to parse numbers
                    var intVal = function(i) {
                        if (typeof i === 'string') {
                            return parseFloat(i.replace(/[^0-9.-]+/g, '')) || 0;
                        }
                        return typeof i === 'number' ? i : 0;
                    };

                    // ✅ filter out Cancelled rows for CURRENT PAGE
                    var filteredIndexes = api.rows({
                        page: 'current',
                        search: 'applied'
                    }).indexes().filter(function(idx) {
                        var statusHtml = api.cell(idx, statusColIndex).data();
                        var status = $('<div>').html(statusHtml).text().trim().toLowerCase();
                        return status !== 'cancelled';
                    });

                    // helper → sum column for CURRENT PAGE
                    var sumColumn = function(colIndex) {
                        return api.cells(filteredIndexes, colIndex).data()
                            .reduce((a, b) => intVal(a) + intVal(b), 0);
                    };

                    // helper → sum column for ALL ROWS (excluding cancelled)
                    var sumAllColumn = function(colIndex) {
                        return api.rows({
                            search: 'applied'
                        }).indexes().filter(function(idx) {
                            var statusHtml = api.cell(idx, statusColIndex).data();
                            var status = $('<div>').html(statusHtml).text().trim()
                                .toLowerCase();
                            return status !== 'cancelled';
                        }).map(function(idx) {
                            return api.cell(idx, colIndex).data();
                        }).reduce((a, b) => intVal(a) + intVal(b), 0);
                    };


                    // ---------- PAGE TOTALS ----------
                    // $('#baseCostTotal').html(formatINR(sumColumn(baseCostTotalColIndex)));
                    // $('#superadminCommissionAmount').html(formatINR(sumColumn(
                    //     superAdminCommissionTotalColIndex)));
                    // $('#adminCommissionAmount').html(formatINR(sumColumn(
                    //     adminCommissionTotalColIndex)));
                    // $('#razorpayCommissionAmount').html(formatINR(sumColumn(
                    //     razorpayCommissionTotalColIndex)));
                    // $('#bookingAmountTotal').html(formatINR(sumColumn(systemAmountTotalColIndex)));
                    $('#totalAmountTotal').html(formatINR(sumColumn(totalAmountTotalColIndex)));
                    // $('#profitLossAmountTotal').html(formatINR(sumColumn(profit_loss_amount)));


                    // ---------- GRAND TOTALS (ALL ROWS, excluding cancelled) ----------
                    // $("#allBaseCostTotal").html(formatINR(sumAllColumn(baseCostTotalColIndex)));
                    // $("#allSuperadminCommissionAmount").html(formatINR(sumAllColumn(
                    //     superAdminCommissionTotalColIndex)));
                    // $("#allAdminCommissionAmount").html(formatINR(sumAllColumn(
                    //     adminCommissionTotalColIndex)));
                    // $("#allRazorpayCommissionAmount").html(formatINR(sumAllColumn(
                    //     razorpayCommissionTotalColIndex)));
                    // $("#allBookingAmountTotal").html(formatINR(sumAllColumn(
                    //     systemAmountTotalColIndex)));
                    $("#allTotalAmountTotal").html(formatINR(sumAllColumn(grossTotalAmountTotalColIndex)));
                    // $('#allProfitLossAmountTotal').html(formatINR(sumAllColumn(profit_loss_amount)));
                },
                order: []
            });

            

            function formatINR(x) {
                x = parseFloat(x).toFixed(2);
                var lastThree = x.substring(x.length - 6);
                var otherNumbers = x.substring(0, x.length - 6);
                if (otherNumbers != '')
                    lastThree = ',' + lastThree;
                var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
                return res;
            }

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

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

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

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

            $('#startDate, #endDate').on('change', function() {
                table.ajax.reload();
            });

            // delegated event because DataTables re-renders rows
            $(document).on('change', '.status-select', function() {
                const bookingId = $(this).data('id');
                const newStatus = $(this).val();
                const token = '{{ csrf_token() }}';
            
                $.ajax({
                    url: `/bookings/${bookingId}/status`,
                    type: 'POST',
                    data: {
                        _token: token,
                        status: newStatus
                    },
                    success: function(res) {
                        if (res.success) {
                            // small confirmation (use your toast/alert system)
                            console.log('Status updated to', res.status);
                            toastr.success('Booking status updated');
                            table.ajax.reload(null, false); // reload current page, optional
                        } else {
                            alert('Update failed');
                        }
                    },
                    error: function(xhr) {
                        // revert select to previous value or show error
                        alert('Error updating status: ' + xhr.responseJSON?.message ?? xhr.statusText);
                        table.ajax.reload(null, false);
                    }
                });
            });

            $('#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 = 'bookings';
                } else if (date != null) {
                    window.location.href = 'bookings';
                }
                // Reset select input
                $('#franchiseFilter').val('');
                $('#adminFilter').val('');
                $('#bookingCarrierTypesFilter').val('');
                $('#bookingStatusFilter').val('');
                table.search('').draw();
                
                // Reinitialize startPicker
                startPicker = new Litepicker({
                    element: document.getElementById('startDate'),
                    format: 'DD MMM YYYY',
                    startDate: defaultStartDate, // 👈 set default date
                    date: 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,
                    date: defaultEndDate,
                    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();
                        });
                    }
                });
                // 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_filter')
                .addClass('d-flex justify-content-end');
            $('.dataTables_length label').addClass(
                'align-items-center d-flex gap-2 ms-2');

            $('#bookings-table_wrapper div.row:nth-child(1)').addClass('mx-2 my-3 text-muted');
            $('#bookings-table_wrapper div.row:nth-child(2)').addClass('dt-row border-top');
            $('#bookings-table_wrapper div.row:nth-child(3)').addClass(
                'card-footer d-flex align-items-center border-top text-muted bg-white');
        });

        $('#deleteModal').on('show.bs.modal', function(event) {
            // var button = $(event.relatedTarget);
            // var courierId = button.data('id');
            // var courierName = button.data('courier-name');
            // var url = $(this).data('url');
            var buttonUrl = $(event.relatedTarget).data('url');
            // console.log("Button URL:", buttonUrl);
            var form = $(this).find('form');
            // form.attr('action', '/couriers/' + courierId);
            // form.attr('action', $.ajax({
            //         url: buttonUrl,
            //         type: "DELETE",
            //         data: {_token: "{{ csrf_token() }}"},
            //         success: function() {
            //             table.ajax.reload(null, false);
            //         }
            //     }));
            form.submit(function(e) {
                e.preventDefault();
                $.ajax({
                    url: buttonUrl,
                    type: "DELETE",
                    data: {_token: "{{ csrf_token() }}"},
                    success: function() {
                        $('#deleteModal').modal('hide');
                        table.ajax.reload(null, false);
                    }
                });
            });

            var modalBody = $(this).find('.modal-body-text');
            modalBody.text('Do you really want to remove this POD ?');
        });

        $(document).on('change', '.toggle-status', function() {
            const courierId = $(this).data('id');
            const newStatus = $(this).is(':checked') ? 'Active' : 'Inactive';

            $('#couriers-table_processing').show();

            $.ajax({
                url: '{{ route('couriers.updateStatus') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: courierId,
                    status: newStatus
                },
                success: function(response) {
                    toastr.success(response.message);
                    $('#couriers-table').DataTable().ajax.reload(null, false);
                    // success: function () {
                    // console.log('Review Updated');
                     toastr.success('Comment Updated');
                    // $('#bookings-table').DataTable().ajax.reload(null, false);
                
                },
                error: function(xhr) {
                    toastr.error('Failed to update status');
                },
                complete: function() {
                    $('#couriers-table_processing').hide();
                }
            });
        });

        // $(document).on('change', '.review-input', function () {
        //     let id = $(this).data('id');
        //     let value = $(this).val();

        //     $.ajax({
        //         url: '{{ route('booking.updatereview') }}',
        //         method: 'POST',
        //         data: {
        //             id: id,
        //             remarks_by_admin: value,
        //             _token: "{{ csrf_token() }}"
        //         },
        //         success: function () {
        //             // console.log('Review Updated');
        //              toastr.success('Comment Updated');
        //             $('#bookings-table').DataTable().ajax.reload(null, false);
        //         }
        //     });
        // });


        $(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>
                            @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 2 || Auth::user()->role_id == 4)
                            <td>${log.updated_amount}</td>
                            @endif
                            <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>'
                    );
                }
            });
        });

        // POD FILE
         // Open upload modal
            $(document).on('click', '.upload-btn', function() {
                $("#uploadItemId").val($(this).data('id'));
                $("#uploadModal").modal('show');
            });

        // Upload AJAX
             $("#uploadForm").submit(function(e) {
                 e.preventDefault();
                    // const bookingId = $(this).data('id');
                 let id = $("#uploadItemId").val();
                 let formData = new FormData(this);

                 $.ajax({
                     url: "/bookings/" + id + "/upload-file",
                     type: "POST",
                     data: formData,
                     contentType: false,
                     processData: false,
                     success: function() {
                         $("#uploadModal").modal('hide');
                         table.ajax.reload(null, false);
                     }
                 });
             });

        // Remove File
            $(document).on("click", ".remove-btn", function() {
                let url = $(this).data('url');
            
                if (!confirm("Remove file?")) return;
            
                $.ajax({
                    url: url,
                    type: "DELETE",
                    data: {_token: "{{ csrf_token() }}"},
                    success: function() {
                        table.ajax.reload(null, false);
                    }
                });
            });


            // Helper function to return edit icon SVG
            function getEditSVG(id, value) {
                return `<span class="svg-hover inline-flex cursor-pointer" style="color:#8a97ab"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="edit-comments icon icon-tabler icons-tabler-outline icon-tabler-edit cursor-pointer" data-id="${id}" data-value="${value}"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg></span>`;
            }

            // Handle edit click
            $('#table-default tbody').on('click', '.edit-comments', function() {
                let span = $(this).closest('.comments-value');
                let id = span.data('id');
                let currentValue = span.data('value') || '';
                // Create input field + checkmark SVG
                let inputHTML = `
                    <div class="flex items-center">
                        <textarea class="form-control form-control comments-input" style="width: 130px; display: inline-block;" rows="3" cols="50">${currentValue}</textarea>
                        <svg xmlns="http://www.w3.org/2000/svg" 
                            width="30" 
                            height="30" 
                            viewBox="0 0 21 21" 
                            fill="currentColor" 
                            class="icon icon-tabler icon-tabler-square-check text-success update-comments cursor-pointer ml-2" 
                            data-id="${id}" 
                            data-original-value="${currentValue}">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-2.626 7.293a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"/>
                        </svg>

                    </div>
                `;

                span.html(inputHTML);
                let input = span.find('.comments-input');
                input.focus().val('').val(currentValue);

                // Detect outside click to cancel edit
                setTimeout(() => {
                    $(document).on('click.gstOutside', function(e) {
                        if (!span.is(e.target) && span.has(e.target).length === 0) {
                            span.html(currentValue ?
                                `${currentValue} ${getEditSVG(id, currentValue)}` :
                                `${getEditSVG(id, currentValue)}`);
                            $(document).off('click.gstOutside');
                        }
                    });
                }, 10);
            });

            // Click checkmark SVG to update
            $('#table-default tbody').on('click', '.update-comments', function() {
                let svg = $(this);
                let span = svg.closest('.comments-value');
                let id = svg.data('id');
                let originalValue = svg.data('original-value');
                let newValue = span.find('.comments-input').val().trim();

                // AJAX call to update
                $.ajax({
                    url: '{{ route('booking.updatereview') }}',
                    method: 'POST',
                    data: {
                    id: id,
                    remarks_by_admin: newValue,
                    _token: "{{ csrf_token() }}"
                },
                    success: function(response) {
                        // Replace text + icon
                        // toastr.success(response.message);
                        toastr.success(response.message);
                        span.html(newValue ? `${newValue} ${getEditSVG(id, newValue)}` :
                            `${getEditSVG(id, newValue)}`);
                        table.ajax.reload(null, false);
                    },
                    error: function() {
                        toastr.error('Failed to update comments');
                        span.html(originalValue ?
                            `${originalValue} ${getEditSVG(id, originalValue)}` :
                            `${getEditSVG(id, originalValue)}`);
                    },
                    complete: function() {
                        $(document).off('click.gstOutside');
                    }
                });
            });

    </script>
@endsection