@include('includes.app')
@include('includes.sidebar')
@include('includes.header')
<style>
    .filter-transition {
        overflow: hidden;
        transition: all 0.4s ease;
        transform-origin: top;
        max-height: 1000px;
        /* enough height to accommodate content */
        transform: scaleY(1);
        opacity: 1;
    }

    .filter-transition.hidden {
        max-height: 0;
        transform: scaleY(0);
        opacity: 0;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-content {
        min-height: 100vh;
        padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
    }

    /*@media (max-width: 991.98px) {*/
    /*  #sidebarWrapper {*/
    /*    transform: translateX(-100%);*/
    /*    transition: transform 0.3s ease-in-out;*/
    /*    display: block !important;*/
    /*    position: fixed;*/
    /*    top: 70px;*/
    /*    left: 0;*/
    /*    width: 250px;*/
    /*    background: white;*/
    /*    z-index: 1000;*/
    /*    height: 100vh;*/
    /*    overflow-y: auto;*/
    /*    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);*/
    /*  }*/

    /*  #sidebarWrapper.active {*/
    /*    transform: translateX(0);*/
    /*  }*/
    /*}*/
    /*#sidebarWrapper a.active {*/

    /*  font-weight: bold;*/
    /*  background: #e6f4ff;*/
    /*  color: #007bff !important;*/
    /*  border-radius: 5px;*/
    /*  padding: 6px 12px;*/
    /*  display: block;*/


    /*}*/


    .custom-dropdown {
        min-width: 100px;
        padding: 4px 0;
        font-size: 13px;
        text-align: center;
    }

    .custom-dropdown .dropdown-item {
        padding: 4px 8px;
    }

    .offcanvas-body .card {
        background-color: white;
        border: none;
        margin-bottom: 1rem;
    }

    .offcanvas-body .card-header {
        font-weight: bold;
        font-size: 16px;
    }

    .offcanvas-body p {
        margin: 0 0 5px;
        font-size: 14px;
    }

    th {
        white-space: nowrap;
    }

    th,
    td {
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }
</style>
<style>
    /* Your existing CSS remains the same */
    .filter-transition {
        overflow: hidden;
        transition: all 0.4s ease;
        transform-origin: top;
        max-height: 1000px;
        transform: scaleY(1);
        opacity: 1;
    }

    .filter-transition.hidden {
        max-height: 0;
        transform: scaleY(0);
        opacity: 0;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-content {
        min-height: 100vh;
        padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
    }

    .custom-dropdown {
        min-width: 100px;
        padding: 4px 0;
        font-size: 13px;
        text-align: center;
    }

    .custom-dropdown .dropdown-item {
        padding: 4px 8px;
    }

    .offcanvas-body .card {
        background-color: white;
        border: none;
        margin-bottom: 1rem;
    }

    .offcanvas-body .card-header {
        font-weight: bold;
        font-size: 16px;
    }

    .offcanvas-body p {
        margin: 0 0 5px;
        font-size: 14px;
    }

    th {
        white-space: nowrap;
    }

    th,
    td {
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    .details-wrapper {
        background-color: #fff;
        padding: 15px;
        font-size: 13px;
        line-height: 1.6;
        font-family: Arial, sans-serif;
    }

    .section-title {
        background-color: #00BFFF;
        color: white;
        font-weight: bold;
        padding: 6px 12px;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 5px;
        border-radius: 2px;
    }

    .data-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background-color: #f9f9f9;
    }

    .data-row {
        display: flex;
        border-bottom: 1px solid #e1e1e1;
        padding: 6px 10px;
    }

    .data-row:nth-child(odd) {
        background-color: #fff;
    }

    .data-label {
        width: 40%;
        font-weight: bold;
        color: #333;
    }

    .data-value {
        width: 60%;
        color: #000;
    }

    .btn-outline-dark.active,
    .btn-outline-dark:active {
        background-color: #16acf2 !important;
        border-color: #11a7ec !important;
        color: white !important;
    }
</style>
@include('includes.toster')
<div class="page-content">
    <div class="container-fluid media-containerfluid" style="background-color: #F6F7F9; padding-left: 45px;">
        <div class="row mt-4">

            <!-- Sidebar Column -->
            @include('includes.under-invoice-sidebar')



            <!-- Main Content -->
            <div class="col-md-10">
                <!--              <button class="btn btn-primary d-lg-none m-2" onclick="toggleSidebar()">-->
                <!--  ☰ Menu-->
                <!--</button>-->
                <!-- Filter Card -->
                <!--      <div class="d-flex justify-content-end mb-3">-->
                <!--        <button class="btn btn-primary"-->
                <!--        style="background: linear-gradient(180deg, #190650 -14.29%, #16ACF2 158.33%);"-->
                <!--        data-bs-toggle="modal"-->
                <!--        data-bs-target="#addOrderModal">-->
                <!--  + Add Order-->
                <!--</button>-->

                <!--      </div>-->

                <div class="card mb-4 responsive-card">

                    <!-- Filter Form -->
                    <div id="filterForm" class="card-body filter-transition">
                        <form class="row g-3" action="/carrier-invoice/claim-list" method="get">
                            <div class="col-md-4">
                                <label class="form-label">Order ID:</label>
                                <input type="text" name="order_id" class="form-control" value="{{ request()->order_id ?? '' }}">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Carrier:</label>
                                <select class="form-select" name="carrier">
                                    <option value="">All</option>
                                    @foreach($carriers as $carrier)
                                        <option value="{{ $carrier->id }}" {{ request()->carrier == $carrier->id ? 'selected' : '' }}>
                                            {{-- {{ $carrier->company?->pivot?->legal_name ?? $carrier->legal_name }} --}}
                                            {{ $carrier?->companyUser?->legal_name ?: $carrier?->legal_name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Factoring Company</label>
                                <select class="form-select select2" name="factoring_company">
                                    <option value="">All</option>
                                    @foreach($factors as $factor)
                                        <option value="{{ $factor->id }}" {{ request()->factoring_company == $factor->id ? 'selected' : '' }}>
                                            {{ $factor->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="currency">Payment Mode</label>
                                <select class="form-control" name="payment_mode">
                                    <option value="">All</option>
                                    <option value="regular" {{ request()->payment_mode == 'regular' ? 'selected' : '' }}>Regular</option>
                                    <option value="quick" {{ request()->payment_mode == 'quick' ? 'selected' : '' }}>Quick Pay</option>                                        
                                    <option value="factoring" {{ request()->payment_mode == 'factoring' ? 'selected' : '' }}>Factoring</option>
                                </select>
                            </div>
                            
                            
                            <div class="col-md-4">
                                <label class="form-label">Currency</label>
                                <select class="form-select" name="currency">
                                    <option value="">All</option>
                                    @foreach($currencies as $currency)
                                        <option value="{{ $currency }}" {{ request()->currency == $currency ? 'selected' : '' }}>
                                            {{ $currency }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <div class="col-md-4">
                                <label class="form-label">Date Range</label>
                                <input type="text" id="orderDateFilter" class="form-control" placeholder="Choose Date Range"
                                autocomplete="off" value="{{ request()->start_date ? request()->start_date . ' - ' : '' }} {{ request()->end_date ?? '' }}">
                                <input type="hidden" id="start_date" name="start_date" value="{{ request()->start_date ?? '' }}">
                                <input type="hidden" id="end_date" name="end_date" value="{{ request()->end_date ?? '' }}">
                            </div>
                            
                            <div class="col-12 text-end">
                                <button class="btn btn-primary mt-2"
                                    style="background-color: #16ACF2; border-color: #16ACF2;">Apply</button>

                                <button class="btn btn-primary mt-2" type="button" onclick="window.location.href = '/carrier-invoice/claim-list'"
                                    style="background-color: #E33C5A; border-color: #E33C5A;">Clear</button>
                            </div>
                        </form>
                    </div>

                    <hr style="border: 1px solid #0D0D0D;">

                    <div class="d-flex justify-content-between align-items-center p-2 rounded">
                        <!-- Left Buttons -->
                        <div class="d-flex gap-2">
                            @can('invoice_carrierInvoiceNotReceived_view')
                            <button class="btn btn-outline-dark btn-sm {{ request()->is('Carrier_Invoice') ? 'active' : '' }}"  
                            onclick="window.location.href = '/Carrier_Invoice'"
                                style="background: #DFEAFC; border-color: #DFEAFC;">

                                <span>Invoice Not Received</span>
                            </button>                                
                            @endcan

                            @can('invoice_carrierInvoiceReceived_view')
                            <button class="btn btn-outline-dark btn-sm {{ request()->is('carrier/received-invocie') ? 'active' : '' }}"  "
                                style="background: #DFEAFC; border-color: #DFEAFC;"
                                onclick="window.location.href = '/carrier/received-invocie'">
                                Invoice Received
                            </button>                                
                            @endcan

                            @can('invoice_carrierPaidInvoice_view')
                            <button class="btn btn-outline-dark btn-sm {{ request()->is('carrier/paid-invocie') ? 'active' : '' }}"
                                style="background: #DFEAFC; border-color: #DFEAFC;"
                                onclick="window.location.href = '/carrier/paid-invocie'">
                                Paid Invoice
                            </button>                                
                            @endcan

                            @can('invoice_carrierPaidInvoice_view')
                                <button onclick="window.location.href = '/carrier-invoice/group-paid'"
                                    class="btn btn-outline-dark btn-sm {{ request()->is('carrier-invoice/group-paid') ? 'active' : '' }}"
                                    style="background: #DFEAFC; border-color: #DFEAFC;">
                                    Grouped Payment List
                                </button>
                            @endcan

                            @can('invoice_carrierInvoiceNotReceived_view')
                            <button onclick="window.location.href = '/invoice/carrier-all'"
                            class="btn btn-outline-dark btn-sm {{ request()->is('invoice/carrier-all') ? 'active' : '' }}"
                                style="background: #DFEAFC; border-color: #DFEAFC;">
                                All Invoice
                            </button>                                
                            @endcan

                            @can('invoice_carrierPayableDayCount_view')
                            <button class="btn btn-outline-dark btn-sm {{ request()->is('carrier/payable-age') ? 'active' : '' }}"
                                style="background: #DFEAFC; border-color: #DFEAFC;"
                                onclick="window.location.href = '/carrier/payable-age'">
                                Payable Day Count
                            </button>                                
                            @endcan

                            @can('invoice_carrierDisputedInvoice_view')
                            <button class="btn btn-outline-dark btn-sm {{ request()->is('carrier-invoice/claim-list') ? 'active' : '' }}"
                                style="background: #DFEAFC; border-color: #DFEAFC;"
                                onclick="window.location.href = '/carrier-invoice/claim-list'">
                                Claim/Dispute
                            </button>                                
                            @endcan
                        </div>


                    </div>


                    <!-- Filter Toggle Section -->
                    <div class="d-flex justify-content-between align-items-center p-2 rounded">
                        <!-- Left Buttons -->
                        <div class="d-flex gap-2">
                            @canexport('print')
                            <button  id="btnPrint" class="btn btn-outline-dark btn-sm"
                                style="background: #DFEAFC; border-color: #DFEAFC;">
                                <img src="../assets/images/icons/Group 207309.png">
                            </button>
                            @endcanexport
                            @canexport('pdf')
                            <button id="btnPdf" class="btn btn-outline-dark btn-sm"
                                style="background: #DFEAFC; border-color: #DFEAFC;">
                                <img src="../assets/images/icons/Group 207310.png">
                            </button>
                            @endcanexport
                            @canexport('excel')
                            <button id="btnExcel" class="btn btn-outline-dark btn-sm"
                                style="background: #DFEAFC; border-color: #DFEAFC;">
                                <img src="../assets/images/icons/Group 207311.png">
                            </button>
                            @endcanexport
                        </div>

                        <!-- Center Title -->
                        <div class="text-center">
                            <h6 class="mb-0" style="font-size: 20px; font-weight: 600;">Disputed Invoice</h6>
                            <small style="font-size: 16px; font-weight: 500;">
                                @if (request()->start_date && request()->end_date)
                                    Showing results From
                                    {{ \Carbon\Carbon::parse(request()->start_date)->format('M d, Y') }}
                                    to
                                    {{ \Carbon\Carbon::parse(request()->end_date)->format('M d, Y') }}                                
                                @else
                                    Showing all results                                    
                                @endif                                
                            </small>
                        </div>

                        <!-- Right Filter Button -->
                        <div>
                            <button onclick="toggleFilter()" class="btn btn-light btn-sm border"
                                style="width: 70px; height:30px; background: #DFEAFC; border-color: #DFEAFC;">
                                Filter <i id="chevronIcon" class="bi bi-chevron-up"></i>
                            </button>
                        </div>
                    </div>

                    <!-- JavaScript -->
                    <script>
                        function toggleFilter() {
                            const filterForm = document.getElementById("filterForm");
                            const icon = document.getElementById("chevronIcon");

                            filterForm.classList.toggle("hidden");

                            // Toggle icon
                            if (filterForm.classList.contains("hidden")) {
                                icon.classList.remove("bi-chevron-up");
                                icon.classList.add("bi-chevron-down");
                            } else {
                                icon.classList.remove("bi-chevron-down");
                                icon.classList.add("bi-chevron-up");
                            }
                        }

                        // On page load, filter should be visible
                        document.addEventListener("DOMContentLoaded", function () {
                            document.getElementById("filterForm").classList.remove("hidden");
                        });
                    </script>



                    <!-- Table Card -->

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="ordersTable" class="table table-bordered"
                                style="background-color: white; color: black;">
                                <thead style="background: #05BCF6; color: white;">
                                    <tr role="row">
                                        <th style="width: 26px;">S.No.</th>
                                        <th style="width: 38px;">Order ID</th>
                                        <th>Action</th>
                                        <th style="width: 48px;">Order Date</th>
                                        <th style="width: 85px;">Carrier</th>
                                        <th>Factor</th>
                                        <th>Payment Mode</th>
                                        <th style="width: 68px;">Carrier Contact</th>
                                        <th style="width: 57px;">Carrier Email</th>
                                        <th style="width: 108px;">Invoice No./Invoice Date</th>
                                        <th>Currency</th>
                                        <th style="width: 94px;">Pending Since(Days)</th>
                                        <th style="width: 68px;">Payment</th>
                                        <th style="width: 132px;">Payment Mode/Payment Date</th>
                                        <th style="width: 132px;">Note</th>
                                    </tr>
                                </thead>
                                <tbody style="background-color: white; color: black;">
                                    @foreach ($loadOrders as $loadOrder)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td style="color: #05BCF6; cursor: pointer;" data-bs-toggle="offcanvas"
                                                data-bs-target="#loadRequestDetails{{ $loadOrder->id }}">
                                                {{ $loadOrder->order_id ?: $loadOrder->id }}
                                            </td>
                                            <td>
                                                <div class="dropdown" x-data="{ createInvoiceModal(loadOrderId, dispatchID, amount = null, currency = null) { 
                                                    const modal = new bootstrap.Modal(document.getElementById('createInvoiceModal'));
                                                    modal.show();
                                                    document.getElementById('load_order_id').value = loadOrderId;
                                                    document.getElementById('invoice_no').value = dispatchID;
                                                    if(amount){
                                                        document.getElementById('final_price_alert').innerHTML = 'Order/Carrier Price: ' + Number(amount).toFixed(2);
                                                    }
                                                    console.log(currency);
                                                    document.getElementById('invoice_currency').value = currency;
                                                } }">
                                                    <button class="btn btn-sm btn-info dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        Action
                                                    </button>
                                                    <ul class="dropdown-menu custom-dropdown">
    
                                                        <li>
                                                            <a class="dropdown-item d-flex align-items-center" href="#"
                                                                data-bs-toggle="offcanvas" data-bs-target="#loadRequestDetails{{ $loadOrder->id }}">
                                                                <i class="bi bi-eye me-2 text-primary"></i> View
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item d-flex align-items-center"
                                                                href="javascript:void(0)"
                                                                onclick="showclaimDispute({{ $loadOrder?->carrierInvoice?->id ?? null }})">
                                                                Restore Invocie
                                                            </a>
                                                        </li> 
                                                        @can('order_action')
                                                        <li>
                                                            <a class="dropdown-item d-flex align-items-center " href="#"
                                                                onclick="showQuickNote({{ $loadOrder->id }})">
                                                                <i class="bi bi-receipt me-2 text-warning"></i> Add Quick
                                                                Note
                                                            </a>
                                                        </li>
                                                        @endcan
    
    
                                                    </ul>
                                                </div>
                                            </td>
                                            <td>{{ \Carbon\Carbon::parse($loadOrder->created_at)->format('M d, Y') }}</td>
                                             <td>{{ $loadOrder?->dispatch?->carrier?->companyUser?->legal_name ?: $loadOrder?->dispatch?->carrier?->legal_name}}</td>
                                             <td>{{ $loadOrder?->carrierInvoice?->factoring_company ?? '' }}</td>
                                             <td>{{ $loadOrder?->carrierInvoice?->payment_type ?? '' }}</td>
                                             <td>{{ $loadOrder?->dispatch?->carrier?->companyUser?->primary_phone ?: $loadOrder?->dispatch?->carrier?->primary_phone}}</td>
                                             <td>{{ $loadOrder?->dispatch?->carrier?->companyUser?->email ?: $loadOrder?->dispatch?->carrier?->email}}</td>
                                            <td>
                                                @php
                                                    $invoiceDate = $loadOrder->carrierInvoice ? \Carbon\Carbon::parse($loadOrder->carrierInvoice->invoice_date) : '';
                                                    $daysPending = $invoiceDate ? ceil($invoiceDate->diffInDays(\Carbon\Carbon::now())) : 'N/A';
                                                @endphp
                                               
                                                {{ $loadOrder?->carrierInvoice?->invoice_no ?? 'N/A' }} / {{ $invoiceDate }}
                                                {{-- $loadOrder?->invoice?->invoice_date ? \Carbon\Carbon::parse($loadOrder?->invoice?->invoice_date)->format('M d, Y') : 'N/A' }} --}}
                                            </td>
                                            <td>{{ $loadOrder?->carrierInvoice?->currency ?? '' }}</td>
                                            <td>
                                                {{ $daysPending }}
                                                
                                            </td>

                                            <td>
                                                -
                                            </td>
                                            <td>
                                                -
                                            </td>
                                            <td>
                                                <span style="color: #0080DC; cursor: pointer;"
                                                    onclick="fetchAndShowNotes({{ $loadOrder->id }})">
                                                    View Note
                                                </span>
                                            </td>
                                            
                                        </tr>

                                        @php
                                            $currency = $loadOrder?->carrierInvoice?->currency;
                                            $amount = $loadOrder?->carrierInvoice?->final_amount ?? 0;

                                            if (!isset($pandl[$currency])) {
                                                $pandl[$currency] = 0;
                                            }

                                            $pandl[$currency] += $amount;
                                        @endphp
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <table style="font-size:14px" width="500px">
                            <tbody>
                                <tr>
                                    <td>Currency</td>
                                    <td>Total</td>
                                </tr>
                                @foreach ($pandl ?? [] as $currency => $pl)
                                    <tr>
                                        <td>{{ $currency ?? 'N/A' }}</td>
                                        <td><b>{{ number_format($pl, 2) }}</b></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="createInvoiceModal" tabindex="-1" aria-labelledby="PickupDetailsLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content shadow">
                    <div class="modal-header p-3" style="background-color: #05BCF6;">
                        <h6 class="modal-title text-white">Receive Invoice</h6>
                        <button type="button" class="btn-close text-white" style="filter: invert(1);"
                            data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="/invoice/carrier/store" enctype="multipart/form-data" method="post">
                        <div class="row" x-data="{ paymentMode: 'quick', discountType: 'percentage', 
                        discountAmount: 0, finalAmount: 0, invoiceAmount: 0,
                        calculateFinalAmount: function(){
                            if (this.paymentMode == 'quick'){
                                if(this.discountType == 'percentage'){
                                    let discount = this.invoiceAmount * this.discountAmount / 100;
                                    this.finalAmount = parseFloat(this.invoiceAmount - discount).toFixed(2);
                                }
                                if(this.discountType == 'flat'){
                                    this.finalAmount = parseFloat(this.invoiceAmount - this.discountAmount).toFixed(2);
                                }
                            }else{
                                this.finalAmount = parseFloat(this.invoiceAmount).toFixed(2);
                            }
                        }}">
                                @csrf
                                <div class="col-md-4">
                                    <input type="hidden" name="load_order_id" id="load_order_id">
                                    <label for="invoice_no">Invoice No.</label>
                                    <input class="form-control form-control-sm" type="text" id="invoice_no"
                                        name="invoice_no" placeholder="Invoice no.">
                                </div>

                                <div class="col-md-4">
                                    <label for="invoice_date">Invoice Date <small class="text-danger">*</small></label>
                                    <input class="form-control form-control-sm" type="date"
                                        name="invoice_date" value="{{ now() }}" required>
                                </div>

                                <div class="col-md-4">
                                    <label for="invoice_amount">Amount</label>
                                    <input class="form-control form-control-sm" type="number" name="invoice_amount"
                                        id="invoice_amount" placeholder="0.00" x-model="invoiceAmount" x-on:change="calculateFinalAmount()">
                                        <small class="text-info" id="final_price_alert"></small>
                                </div>

                                <div class="col-md-4">
                                    <label for="invoice_amount">Currency</label>
                                    <select name="currency" id="invoice_currency" class="form-control form-control-sm">
                                        <option value="" hidden></option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->currency }}">
                                                {{ $country->currency }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-12 mt-2">
                                    <label for="invoice_notes">Notes</label>
                                    <textarea name="notes" id="invoice_notes" class="form-control form-control-sm" placeholder="Enter Note"></textarea>
                                </div>

                                <div class="col-md-4 mt-2">
                                    <label for="currency">Factoring/ Quick Pay</label>
                                    <select class="form-control form-control-sm" name="payment_type" x-model="paymentMode" x-on:change="calculateFinalAmount()">
                                        <option value="" hidden></option>
                                        <option value="quick">Quick Pay</option>                                        
                                        <option value="factoring" hidden>Factoring</option>
                                    </select>
                                </div>

                                <div class="col-md-4 mt-2">
                                    <label for="discount_type">Discount Type</label x-show="paymentMode == 'quick'">
                                    <select class="form-control form-control-sm" name="discount_type" x-model="discountType" x-on:change="calculateFinalAmount()">
                                        <option value="" hidden></option>
                                        <option value="flat">Flat</option>                                        
                                        <option value="percentage">Percentage</option>
                                    </select>
                                </div>

                                <div class="col-md-4 mt-2">
                                    <label for="discount_amount">Discount</label>
                                    <input class="form-control form-control-sm" type="number" x-model="discountAmount" x-on:change="calculateFinalAmount()"
                                        name="discount_amount">
                                </div>

                                <div class="col-md-4 mt-2">
                                    <label for="final_discount">Final Amount</label>
                                    <input class="form-control form-control-sm" type="number" x-model="finalAmount"
                                        name="final_amount" readonly>
                                </div>

                                <div class="col-md-8"></div>


                                <button class="btn btn-primary mt-2 ms-auto me-auto"
                                    style="background-color: #16ACF2; border-color: #16ACF2; width: 70px;">Create</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        

        <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
            aria-hidden="true" data-bs-backdrop="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-4">
                    <div class="modal-header bg-danger text-white rounded-top-4">
                        <h5 class="modal-title" id="deleteConfirmModalLabel"><i
                                class="bi bi-exclamation-triangle me-2"></i>Confirm Deletion</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p class="mb-2">Are you sure you want to delete this data?</p>
                        <p class="text-muted small">This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-sm btn-danger">Yes, Delete</button>
                    </div>
                </div>
            </div>
        </div>



        <div class="modal fade" id="CloseConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
            aria-hidden="true" data-bs-backdrop="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-4">
                    <div class="modal-header bg-danger text-white rounded-top-4">
                        <h5 class="modal-title" id="deleteConfirmModalLabel"><i
                                class="bi bi-exclamation-triangle me-2"></i>Confirm Publish</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p class="mb-2">Are you sure you want to Publish this Load Order?</p>
                        <p class="text-muted small">This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-sm btn-danger">Yes, Delete</button>
                    </div>
                </div>
            </div>
        </div>

        @foreach ($loadOrders as $loadOrder)
            <div class="offcanvas offcanvas-end" tabindex="-1" id="loadRequestDetails{{ $loadOrder->id }}"
                style="width: 980px; border-top-left-radius: 12px; border-bottom-left-radius: 12px; overflow: hidden;"
                data-bs-backdrop="true">
                <div class="offcanvas-header d-flex justify-content-between align-items-center"
                    style="background-color: #000; padding: 16px 25px;">
                    <h5 class="offcanvas-title text-white mb-0" style="font-size: 18px;">
                        Order Details <span style="color: #05BCF6;"></span>
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                <div class="offcanvas-body" style="background-color: #F6F7F9; padding: 20px;">
                    <div class="details-wrapper">
                        <!-- General Information -->
                        <div class="section-title">General Information</div>
                        <div class="data-grid">
                            <div class="data-row">
                                <div class="data-label">Order Type:</div>
                                <div class="data-value text-ca">{{ $loadOrder->quote_type ?? 'N/A' }}</div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Company:</div>
                                <div class="data-value">
                                    {{ $loadOrder->customer ? $loadOrder->customer->company_name : 'N/A' }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Customer ID:</div>
                                <div class="data-value">
                                    {{ $loadOrder?->customer?->customer_id ?? $loadOrder?->customer?->id }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Customer PO:</div>
                                <div class="data-value">
                                    {{ $loadOrder->customer_po ?? 'N/A' }}
                                </div>
                            </div>
                            @if(strtolower($loadOrder->quote_type) == 'multi')
                                <div class="data-row">
                                    <div class="data-label">Count of Trucks:</div>
                                    <div class="data-value">{{ $loadOrder->truck_count ?? 'N/A' }}</div>
                                </div>
                            @endif
                            <div class="data-row">
                                <div class="data-label">Employee Code:</div>
                                <div class="data-value">{{ $loadOrder?->employee?->unique_code ?? 'N/A' }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Mode of Transport:</div>
                                <div class="data-value">
                                    {{ $loadOrder->modeOfTransport->name ?? 'N/A' }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Ordered By:</div>
                                <div class="data-value">{{ $loadOrder->ordered_by ?? 'N/A' }}</div>
                            </div>
                        </div>

                        <!-- Row Sections -->
                        @foreach($loadOrder->rows as $index => $row)
                            <div class="section-title">Row {{ $loop->iteration }}</div>
                            <div class="data-grid">
                                <div class="data-row">
                                    <div class="data-label">Quantity of Trucks:</div>
                                    <div class="data-value">{{ $row->quantity ?? 'N/A' }}</div>
                                </div>
                                <div class="data-row">
                                    <div class="data-label">Equipment Type:</div>
                                    <div class="data-value">

                                        {{ $row->equipment ? $row?->equipment?->name : 'N/A' }}
                                    </div>
                                </div>
                            </div>

                            <!-- Pickup Details -->
                            @foreach($row->pickups as $pickupIndex => $pickup)
                                <div class="section-title">Pickup Locations {{ $pickupIndex + 1 }}</div>
                                <div class="data-grid">
                                    <div class="data-row">
                                        <div class="data-label">Name:</div>
                                        <div class="data-value">{{ $pickup->name ?? 'N/A' }}</div>
                                    </div>

                                    <div class="data-row">
                                        <div class="data-label">Email:</div>
                                        <div class="data-value">{{ $pickup->email ?? 'N/A' }}</div>
                                    </div>

                                    <div class="data-row">
                                        <div class="data-label">Phone:</div>
                                        <div class="data-value">{{ $pickup->phone ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Street:</div>
                                        <div class="data-value">{{ $pickup->street ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Country:</div>
                                        <div class="data-value">
                                            {{ $pickup->country ? $pickup->country?->name : 'N/A' }}
                                        </div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">State:</div>
                                        <div class="data-value">{{ $pickup->state ? $pickup->state?->name : 'N/A' }}
                                        </div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">City:</div>
                                        <div class="data-value">{{ $pickup->city ? $pickup->city?->name : 'N/A' }}
                                        </div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Postal Code:</div>
                                        <div class="data-value">{{ $pickup->postal_code ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">PO:</div>
                                        <div class="data-value">{{ $pickup->po ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Time:</div>
                                        <div class="data-value">{{ $pickup->time ?? 'N/A' }}</div>
                                    </div>

                                    <div class="data-row">
                                        <div class="data-label">Pickup Note:</div>
                                        <div class="data-value">{{ $pickup->note ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            @endforeach

                            <!-- Delivery Details -->
                            @foreach($row->deliveries as $deliveryIndex => $delivery)
                                <div class="section-title">Delivery Locations {{ $deliveryIndex + 1 }}</div>
                                <div class="data-grid">
                                    <div class="data-row">
                                        <div class="data-label">Name:</div>
                                        <div class="data-value">{{ $delivery->name ?? 'N/A' }}</div>
                                    </div>

                                    <div class="data-row">
                                        <div class="data-label">Email:</div>
                                        <div class="data-value">{{ $delivery->email ?? 'N/A' }}</div>
                                    </div>

                                    <div class="data-row">
                                        <div class="data-label">Phone:</div>
                                        <div class="data-value">{{ $delivery->phone ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Street:</div>
                                        <div class="data-value">{{ $delivery->street ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Country:</div>
                                        <div class="data-value">
                                            {{ $delivery->country ? $delivery->country?->name : 'N/A' }}
                                        </div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">State:</div>
                                        <div class="data-value">
                                            {{ $delivery->state ? $delivery->state->name : 'N/A' }}
                                        </div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">City:</div>
                                        <div class="data-value">
                                            {{ $delivery->city ? $delivery->city->name : 'N/A' }}
                                        </div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Postal Code:</div>
                                        <div class="data-value">{{ $delivery->postal_code ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">PO:</div>
                                        <div class="data-value">{{ $delivery->po ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Time:</div>
                                        <div class="data-value">{{ $delivery->time ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Delivery Note:</div>
                                        <div class="data-value">{{ $delivery->note ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            @endforeach

                            <!-- Shipping Details -->
                            @if($row->shipping)
                                <div class="section-title">Shipping Details</div>
                                <div class="data-grid">
                                    <div class="data-row">
                                        <div class="data-label">Commodity:</div>
                                        <div class="data-value">{{ $row->shipping->commodity ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Currency:</div>
                                        <div class="data-value">{{ $row->shipping->currency ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Base Price:</div>
                                        <div class="data-value">{{ $row->shipping->base_price ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label"></div>
                                        <div class="data-value"></div>
                                    </div>
                                    @isset($row->shipping->shippingRows)
                                        @foreach ($row->shipping->shippingRows as $i => $shippingRow)

                                            <div class="data-row">
                                                <div class="data-labe fw-bolder fs-3">Shipping {{ $i + 1 }}</div>
                                                <div class="data-value"></div>
                                            </div>
                                            <div class="data-row">
                                                <div class="data-label"></div>
                                                <div class="data-value"></div>
                                            </div>
                                            <div class="data-row">
                                                <div class="data-label">Quantity:</div>
                                                <div class="data-value">{{ $shippingRow->quantity ?? 'N/A' }}</div>
                                            </div>
                                            <div class="data-row">
                                                <div class="data-label">Units:</div>
                                                <div class="data-value">{{ $shippingRow->units ?? 'N/A' }}</div>
                                            </div>
                                            <div class="data-row">
                                                <div class="data-label">Weight:</div>
                                                <div class="data-value">{{ $shippingRow->weight_value ?? 'N/A' }}
                                                    {{ $shippingRow->weight ?? '' }}
                                                </div>
                                            </div>
                                            <div class="data-row">
                                                <div class="data-label">Dimension:</div>
                                                <div class="data-value">
                                                    @if(!empty($shippingRow->dimension_value))
                                                        @php
                                                            $dims = explode('*', $shippingRow->dimension_value);
                                                            $labels = ['L', 'W', 'H']; // labels in order
                                                            $formatted = [];
                                                            foreach ($dims as $i => $val) {
                                                                if (!empty($val) && isset($labels[$i])) {
                                                                    $formatted[] = $val . $labels[$i];
                                                                }
                                                            }
                                                        @endphp
                                                        {{ implode(' * ', $formatted) }}
                                                    @else
                                                        N/A
                                                    @endif

                                                    {{-- Show dimension field also --}}
                                                    {{ !empty($shippingRow->dimension) ? ' (' . $shippingRow->dimension . ')' : '' }}
                                                </div>
                                            </div>
                                        @endforeach
                                    @endisset
                                </div>
                            @endif

                            @foreach($row->warehouses as $warehouseIndex => $warehouse)
                                <div class="section-title">Warehouse Details {{ $warehouseIndex + 1 }}</div>
                                <div class="data-grid">
                                    <div class="data-row">
                                        <div class="data-label">Location:</div>
                                        <div class="data-value">{{ $warehouse->location->name ?? 'N/A' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Price:</div>
                                        <div class="data-value">{{ $warehouse->amount ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            @endforeach

                            <!-- Additional Details -->
                            @if($row->additional)
                                <div class="section-title">Additional Details</div>
                                <div class="data-grid">
                                    <div class="data-row">
                                        <div class="data-label">Tarped:</div>
                                        <div class="data-value">{{ $row->additional->tarped ? 'Yes' : 'No' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Team:</div>
                                        <div class="data-value">{{ $row->additional->team ? 'Yes' : 'No' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Hazmat:</div>
                                        <div class="data-value">
                                            @if($row->additional && $row->additional->hazmat)
                                                Yes (Class: {{ $row->additional->class ?? 'N/A' }})
                                            @else
                                                No
                                            @endif
                                        </div>
                                    </div>


                                    <div class="data-row">
                                        <div class="data-label">Temperature:</div>
                                        <div class="data-value">
                                            @if($row->additional && $row->additional->temperature)
                                                Yes
                                                (Value: {{ $row->additional->temperature_value ?? 'N/A' }}
                                                {{ $row->additional->temperature_unit ?? '' }})
                                            @else
                                                No
                                            @endif
                                        </div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Non Stackable:</div>
                                        <div class="data-value">{{ $row->additional->non_stackable ? 'Yes' : 'No' }}
                                        </div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Bonded:</div>
                                        <div class="data-value">{{ $row->additional->bonded ? 'Yes' : 'No' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Trailer Drop:</div>
                                        <div class="data-value">{{ $row->additional->trailer_drop ? 'Yes' : 'No' }}
                                        </div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Tailgate Delivery:</div>
                                        <div class="data-value">{{ $row->additional->tailgate ? 'Yes' : 'No' }}</div>
                                    </div>
                                    <div class="data-row">
                                        <div class="data-label">Residential Delivery:</div>
                                        <div class="data-value">{{ $row->additional->residential ? 'Yes' : 'No' }}</div>
                                    </div>
                                </div>
                            @endif
                        @endforeach

                        <!-- Charges -->
                        @if($loadOrder->charges->count())
                            <div class="section-title">Charges</div>
                            <div class="data-grid">
                                @foreach($loadOrder->charges as $charge)
                                    <div class="data-row">
                                        <div class="data-label">{{ $charge->type ?? 'N/A' }}</div>
                                        <div class="data-value">{{ $charge->amount }} ({{ $charge->rate_type }})</div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <!-- Discounts -->
                        @if($loadOrder->discounts->count())
                            <div class="section-title">Discounts</div>
                            <div class="data-grid">
                                @foreach($loadOrder->discounts as $discount)
                                    <div class="data-row">
                                        <div class="data-label">{{ $discount->types ? $discount->types->name : 'N/A' }}
                                        </div>
                                        <div class="data-value">
                                            {{ $discount->types ? $discount->types->Amount : 'N/A' }}
                                            ({{ $discount->types ? $discount->types->percentage : 'N/A' }})
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <!-- Tax and Final Details -->
                        <div class="section-title">Tax & Final Details</div>
                        <div class="data-grid">
                            <div class="data-row">
                                <div class="data-label">GST:</div>
                                <div class="data-value">
                                    {{ $loadOrder->gst ? $loadOrder->gst . '%' : 'N/A' }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">PST:</div>
                                <div class="data-value">
                                    <!--{{ $loadOrder->pstTax ? $loadOrder->pstTax->tax : 'N/A' }}</div>-->
                                    {{ $loadOrder->pst ? $loadOrder->pst . '%' : 'N/A' }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">HST:</div>
                                <div class="data-value">
                                    <!--{{ $loadOrder->hstTax ? $loadOrder->hstTax->tax : 'N/A' }}</div>-->
                                    {{ $loadOrder->hst ? $loadOrder->hst . '%' : 'N/A' }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">QST:</div>
                                <div class="data-value">
                                    {{ $loadOrder->qst ? $loadOrder->qst . '%' : 'N/A' }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Final Price Before Tax:</div>
                                <div class="data-value">
                                    {{ ($loadOrder->pbt ?? 0.00) }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Final Price:</div>
                                <div class="data-value">{{ $loadOrder->final_price ?? '0.00' }}</div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Notes:</div>
                                <div class="data-value">{{ $loadOrder->notes ?? 'N/A' }}</div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Terms & Conditions:</div>
                                <div class="data-value">
                                    {{ $loadOrder->termConditions ? $loadOrder->termConditions->name : 'N/A' }}
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-label">Special Note:</div>
                                <div class="data-value">{{ $loadOrder->special_note ?? 'N/A' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

    </div>
</div>
@include('includes.footer')
<!-- Scripts -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script> -->
<!-- jQuery -->

<!-- Quick Note -->
        <div class="modal fade" id="viewQuickNote" tabindex="-1" aria-labelledby="viewQuickNote" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content ">
                    <div class="modal-header p-3" style="background-color: #05BCF6 important;">
                        <h6 class="modal-title text-white">Add Quick Note</h6>
                        <button type="button" class="btn-close text-white" style="filter: invert(1);"
                            data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12">
                            <label class="form-label">Add Quick Note:</label>
                            <input type="hidden" id="quick_note_load_order_id">
                            <textarea class="form-control" rows="3" name="quick_note" id="quick_note"
                                placeholder="Enter Note here..."></textarea>
                        </div>
                        <!-- Save Button -->
                        <div class="col-md-12 text-center mt-4">
                            <button class="btn btn-primary" type="button" onclick="saveQuickNote();"
                                style="background-color: #05BCF6;">Save</button>
                        </div>


                    </div>
                </div>
            </div>
        </div>


        <!-- View Status Modal -->
        <div class="modal fade" id="viewNote" tabindex="-1" aria-labelledby="viewNote" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content shadow">
                    <div class="modal-header p-3" style="background-color: #05BCF6;">
                        <h6 class="modal-title text-white">View Note</h6>
                        <a class="d-flex align-items-center ms-auto text-light me-3 mt-auto mb-auto" href="#"
                            id="AddNoteFromModal">
                            Add Note</a>
                        <button type="button" class="btn-close text-white m-0" style="filter: invert(1);"
                            data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped align-middle text-center">
                                <thead class="table-light">
                                    <tr>
                                        <th>S No.</th>
                                        <th>Note</th>
                                        <th>Date</th>
                                        <th>Created By</th>
                                    </tr>
                                </thead>
                                <tbody id="noteViewBody">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


</div>
</div>


<script>
    function showQuickNote(load_order_id) {
        $('#quick_note_load_order_id').val(load_order_id);
        $('#quick_note').val('');

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

        const modal = new bootstrap.Modal(document.getElementById('viewQuickNote'));
        modal.show();
    }

    function saveQuickNote() {
        $.ajax({
            url: "{{ route('load-order.quick-note.store') }}",
            method: "POST",
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                quick_note: $('#quick_note').val(),
                load_order_id: $('#quick_note_load_order_id').val(),
            },
            success: function (response) {
                alert("Note saved");
                $('#viewQuickNote').modal('hide');
            },
            error: function (xhr) {
                alert("Error: " + xhr.responseJSON.message);
            }
        });
    }

    function fetchAndShowNotes(load_order_id) {
        $('#noteViewBody').html('');
        $.ajax({
            url: "/load-order/quick-notes/show/" + load_order_id,
            method: "GET",
            success: function (response) {
                let notesHtml = '';
                if (response) {
                    $('#noteViewBody').html(response);
                } else {
                    notesHtml = '<tr><td colspan="4">No notes available.</td></tr>';
                }
                $("#AddNoteFromModal").attr("onclick", `showQuickNote(${load_order_id})`);
                const modal = new bootstrap.Modal(document.getElementById('viewNote'));
                modal.show();
            },
            error: function (xhr) {
                alert("Error: " + xhr.responseJSON.message);
            }
        });
    }

    function showNote() {
        const modal = new bootstrap.Modal(document.getElementById('viewNote'));
        modal.show();
    }
</script>

<script>
    document.getElementById('select-all').addEventListener('change', function () {
        const isChecked = this.checked;
        document.querySelectorAll('.select-row').forEach(cb => {
            cb.checked = isChecked;
        });
    });

    function showclaimDispute(id) {
        let alertShow = confirm("Are you sure you want to Restore this Invoice?");
        if (alertShow) {
            $.ajax({
                url: "/carrier-invoice/claim-restore",
                method: "POST",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    invoice_id: id,
                },
                success: function (response) {
                    alert("Invoice Restored Successfully");
                    location.reload();
                },
                error: function (xhr) {
                    alert("Error: " + xhr.responseJSON.message);
                }
            });
        }
    }
</script>

<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../assets/js/sidebarmenu.js"></script>
<script src="../assets/js/app.min.js"></script>
<script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
<script src="../assets/js/dashboard.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

{{--
  Fix (Carrier Dispute only): the duplicate jQuery reload above (pre-existing demo-template leftover)
  resets $.fn, wiping the Select2 plugin that was already attached in includes/app.blade.php.
  Reattach it here, using the same asset and config already used everywhere else, scoped to only
  the Carrier filter on this page.
--}}
<script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
<script>
    $(document).ready(function () {
        try {
            initSelect2('[name="carrier"]');
        } catch (error) {
            console.log(error);
        }
    });
</script>



<script>
    $(function () {
    $('#orderDateFilter').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear',
            format: 'YYYY-MM-DD'
        },
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            'This Year': [moment().startOf('year'), moment()],
            'All Time': [moment('2000-01-01'), moment()],
        }
    });

    $('#orderDateFilter').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
        $('#start_date').val(picker.startDate.format('YYYY-MM-DD'));
        $('#end_date').val(picker.endDate.format('YYYY-MM-DD'));
    });

    $('#orderDateFilter').on('cancel.daterangepicker', function (ev, picker) {
        $(this).val('');
        $('#start_date').val('');
        $('#end_date').val('');
    });
});

    $(document).ready(function () {
       if (!$.fn.DataTable.isDataTable('#ordersTable')) {
            var table =    $('#ordersTable').DataTable({
            responsive: true,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'excelHtml5',
                    title: 'Disputed Invoice',
                    className: 'd-none',
                    exportOptions: {
                        columns: ':not(:first-child):not(:last-child)'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    title: 'Disputed Invoice',
                    orientation: 'landscape', 
                    pageSize: 'A4',         
                    className: 'd-none',
                    exportOptions: {
                        columns: ':not(:first-child):not(:last-child)'
                    },
                    customize: function (doc) {                        
                        var table = doc.content[1].table;
                        var body = table.body;
                        var colCount = body[0].length;
                        
                        table.widths = Array(colCount).fill('*');
                        doc.styles.tableHeader.fontSize = 9;
                        doc.defaultStyle.fontSize = 8;

                        doc.content[1].layout = {
                            paddingLeft: function (i) { return 2; },
                            paddingRight: function (i) { return 2; },
                            paddingTop: function (i) { return 2; },
                            paddingBottom: function (i) { return 2; }
                        };                        
                        doc.pageMargins = [20, 20, 20, 20];
                    }
                },
                {
                    extend: 'print',
                    title: 'Disputed Invoices',
                    className: 'd-none',
                    exportOptions: {
                        columns: ':not(:first-child):not(:last-child)'
                    },
                    customize: function (win) {
                        $(win.document.body).css('font-size', '10px');                
                        
                        $(win.document.body).find('table')
                            .addClass('compact')
                            .css('width', '100%')
                            .css('font-size', '8px');                
                    
                        $(win.document.body).find('table th, table td').css({
                            'padding': '4px 6px'
                        });                
                        
                        $(win.document.body).find('table th').css('font-size', '9px');                        
                        $(win.document.body).css('margin', '10px');
                    }
                }
            ]
        });

        
        $('#btnExcel').on('click', function () {
            table.button('.buttons-excel').trigger();
        });

        $('#btnPdf').on('click', function () {
            table.button('.buttons-pdf').trigger();
        });

        $('#btnPrint').on('click', function () {
            table.button('.buttons-print').trigger();
        });
    }
    });
</script>
<script>
    function toggleSidebar() {
        const sidebar = document.getElementById("sidebarWrapper");
        sidebar.classList.toggle("active");
    }
</script>
</body>

</html>