@extends('backend.template.layouts.template-base')
@section('title', 'Manage Orders')

@section('content')

    <section>

        <div class="top-fixed">

            <div class="orders-manage page-head-title mb-3 d-flex flex-row justify-content-between">
                <h2 id="OrderRequestText" class="text-title text-orders fw-semibold mb-0">Order Request List</h2>
                <h2 id="OrderPackageText" class="text-title text-orders d-none fw-semibold mb-0">Order Packaging List</h2>
                <h2 id="OrderDispatchText" class="text-title text-orders d-none fw-semibold mb-0">Order Dispatch List</h2>
                <h2 id="OrderDeliveredText" class="text-title text-orders d-none fw-semibold mb-0">Order Delivered List</h2>
                <h2 id="OrderScheduledText" class="text-title text-orders d-none fw-semibold mb-0">Order Scheduled List</h2>
                <button data-bs-toggle="modal" data-bs-target="#AssignDeliveryAndDispatchOrder" id="OrderPackageBtn"
                    class="button-green d-none p-2 px-3">
                    <img src="{{ asset('backend/template/images/svg/send.svg') }}" alt="">
                    Move to Dispatch
                </button>
                <div id="OrderDeliveredBtn" class="d-none">
                    <div class=" days d-flex gap-3 ">
                        <button class="button-green p-2 px-3">
                            Today
                        </button>
                        <button class="button-outline-green p-2 px-3">
                            This Week
                        </button>
                        <button class="button-outline-green p-2 px-3">
                            This Month
                        </button>
                        <div class="button-outline-gray p-2 px-3">
                            <input type="text" id="datepicker" class="border-0" style="width: 110px;outline: none;"
                                placeholder="Custom Date">
                            <img src="{{ asset('backend/template/images/svg/date.svg') }}" alt=""
                                class="calendar-icon">
                        </div>
                    </div>
                </div>
                <div id="OrderScheduledBtn" class="d-none">
                    <div class="d-flex gap-3 align-items-center">
                        <button class="button-outline-green p-2 px-3">
                            <img src="{{ asset('backend/template/svg-icon/export-green.svg') }}" alt="export">
                            Export
                        </button>
                    </div>
                </div>
            </div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" data-bs-toggle="tab" href="#Request" role="tab" aria-selected="false"
                        tabindex="-1">
                        Request <span class="badge rounded-pill ms-2">3</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#Packaging" role="tab" aria-selected="false"
                        tabindex="-1">
                        Packaging <span class="badge rounded-pill ms-2">5</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#Dispatched" role="tab" aria-selected="false"
                        tabindex="-1">
                        Dispatched <span class="badge rounded-pill ms-2">5</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#Delivered" role="tab" aria-selected="false"
                        tabindex="-1">
                        Delivered
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#Schedules" role="tab" aria-selected="false"
                        tabindex="-1">
                        Schedules
                    </a>
                </li>
            </ul>

        </div>

        <!-- Tab panes -->
        <div class="tab-content card-tab-border text-muted">
            <div class="tab-pane show active" id="Request" role="tabpanel">
                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-12 col-md-4 d-flex gap-3">
                            <div class="table-search-box w-100">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search2">
                                <input type="text" placeholder="Search by order ID or customer details"
                                    class="table-search-input">
                            </div>
                        </div>

                        <div class="col-12 col-md-3 d-flex justify-content-md-end gap-2 align-items-center">

                            <span class="table-sort-content">Show</span>

                            <div class="dropdown">
                                <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                    data-bs-toggle="dropdown">
                                    10
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">40</a></li>
                                </ul>
                            </div>

                            <span class="table-sort-content">entries</span>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">

                        <table class="table table-nowrap align-middle">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">
                                    <th class="p-3 table-head-content">Order ID</th>
                                    <th class="p-3 table-head-content">Customer Details</th>
                                    <th class="p-3 table-head-content">Order From</th>
                                    <th class="p-3 table-head-content">Payment Mode</th>
                                    <th class="p-3 table-head-content">Total <br> Qty</th>
                                    <th class="p-3 table-head-content">Total Order <br> Value</th>
                                    <th class="p-3 table-head-content">Order Location <br> & Zone</th>
                                    <th class="p-3 table-head-content">Order <br> Placed On</th>
                                    <th class="p-3 table-head-content">Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all sortable-table">
                                <tr class="" data-id="1">
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Customer X</p>
                                            <p class="mb-0 fs-13 secondary-text">
                                                <img src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">App</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Location X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">00/00/0000</p>
                                            <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                        </div>
                                    </td>
                                    <td class="p-3">
                                        <a href="{{ route('backend.template.manage-orders.request-detail') }}"
                                            class="button-green-light p-2 px-3 fs-14">
                                            View Order
                                        </a>
                                    </td>
                                </tr>
                                <tr class="" data-id="1">
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">
                                                <img class="dark-phone"
                                                    src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Website</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Location X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">00/00/0000</p>
                                            <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                        </div>
                                    </td>
                                    <td class="p-3">
                                        <a href="{{ route('backend.template.manage-orders.request-detail') }}"
                                            class="button-green-light p-2 px-3 fs-14">
                                            View Order
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="d-flex flex-row gap-3 align-items-center justify-content-end">
                        <span class="bottom-content-table">1-2 of 02 results</span>
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <div class="bottom-arrow-left-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="right-arrow">
                            </div>
                            <span class="bottom-content-num-table">1</span>
                            <div class="bottom-arrow-right-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="left-arrow">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane " id="Packaging" role="tabpanel">
                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-12 col-md-8 d-flex gap-3">
                            <div class="table-search-box w-100">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search2">
                                <input type="text" placeholder="Search by order ID or customer details"
                                    class="table-search-input">
                            </div>
                            <div class="table-header-drops">
                                <div class="drop-contain" id="zone">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Status">All Status</option>
                                        <option value="Pending">Pending</option>
                                        <option value="Completed">Completed</option>
                                    </select>
                                </div>
                            </div>
                            <div class="table-header-drops">
                                <div class="drop-contain" id="zone">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Zones">All Zones</option>
                                        <option value="Zone X">Zone X</option>
                                        <option value="Zone Y">Zone Y</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-3 d-flex justify-content-md-end gap-2 align-items-center">

                            <span class="table-sort-content">Show</span>

                            <div class="dropdown">
                                <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                    data-bs-toggle="dropdown">
                                    10
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">40</a></li>
                                </ul>
                            </div>

                            <span class="table-sort-content">entries</span>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">

                        <table class="table table-nowrap align-middle">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">
                                    <th scope="col" class="p-3" style="width: 25px;">
                                        <div class="form-check text-end">
                                            <input class="form-check-input" type="checkbox" id="checkAll"
                                                value="option">
                                        </div>
                                    </th>
                                    <th class="p-3 table-head-content">Order ID</th>
                                    <th class="p-3 table-head-content">Customer Details</th>
                                    <th class="p-3 table-head-content">Order <br> From</th>
                                    <th class="p-3 table-head-content">Payment <br> Mode</th>
                                    <th class="p-3 table-head-content">Total <br> Qty</th>
                                    <th class="p-3 table-head-content">Total Order <br> Value</th>
                                    <th class="p-3 table-head-content">Order Location <br> & Zone</th>
                                    <th class="p-3 table-head-content">Order <br> Accepted On</th>
                                    <th class="p-3 table-head-content">Packaging <br> Status</th>
                                    <th class="p-3 table-head-content">Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all sortable-table">
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Customer X</p>
                                            <p class="mb-0 fs-13 secondary-text">
                                                <img src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">App</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-xl-column gap-1">
                                            <p class="mb-0">Location X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3 color-orange fw-600">Pending</td>
                                    <td class="p-3">
                                        <a href="{{ route('backend.template.manage-orders.package-pending-detail') }}"
                                            class="button-green-light p-2 px-3 fs-14">
                                            View Order
                                        </a>
                                    </td>
                                </tr>
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-xl-column gap-1">
                                            <p class="mb-0">Customer X</p>
                                            <p class="mb-0">
                                                <img class="dark-phone"
                                                    src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Website</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-xl-column gap-1">
                                            <p class="mb-0">Location X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3 color-blue fw-600">Completed</td>
                                    <td class="p-3">
                                        <a href="{{ route('backend.template.manage-orders.package-completed-detail') }}"
                                            class="button-green-light p-2 px-3 fs-14">
                                            View Order
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="d-flex flex-row gap-3 align-items-center justify-content-end">
                        <span class="bottom-content-table">1-2 of 02 results</span>
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <div class="bottom-arrow-left-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="right-arrow">
                            </div>
                            <span class="bottom-content-num-table">1</span>
                            <div class="bottom-arrow-right-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="left-arrow">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="Dispatched" role="tabpanel">
                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-12 col-md-10 d-flex gap-3">
                            <div class="table-search-box w-100">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search2">
                                <input type="text" placeholder="Search by order ID or customer details"
                                    class="table-search-input">
                            </div>
                            <div class="table-header-drops">
                                <div class="drop-contain" id="zone">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Status">All Status</option>
                                        <option value="Pending">Pending</option>
                                        <option value="Completed">Completed</option>
                                    </select>
                                </div>
                            </div>
                            <div class="table-header-drops">
                                <div class="drop-contain" id="zone">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Zones">All Zones</option>
                                        <option value="Zone X">Zone X</option>
                                        <option value="Zone Y">Zone Y</option>
                                    </select>
                                </div>
                            </div>
                            <div class="table-header-drops">
                                <div class="drop-contain" id="zone">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Delivery Persons">All Delivery Persons</option>
                                        <option value="Person X">Person X</option>
                                        <option value="Person Y">Person Y</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-2 d-flex justify-content-md-end gap-2 align-items-center">

                            <span class="table-sort-content">Show</span>

                            <div class="dropdown">
                                <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                    data-bs-toggle="dropdown">
                                    10
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">40</a></li>
                                </ul>
                            </div>

                            <span class="table-sort-content">entries</span>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">

                        <table class="table table-nowrap align-middle">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">
                                    <th scope="col" class="p-3" style="width: 25px;">
                                        <div class="form-check text-end">
                                            <input class="form-check-input" type="checkbox" id="checkAll"
                                                value="option">
                                        </div>
                                    </th>
                                    <th class="p-3 table-head-content">Order ID</th>
                                    <th class="p-3 table-head-content">Customer Details</th>
                                    <th class="p-3 table-head-content">Order <br> From</th>
                                    <th class="p-3 table-head-content">Payment <br> Mode</th>
                                    <th class="p-3 table-head-content">Total <br> Qty</th>
                                    <th class="p-3 table-head-content">Total Order <br> Value</th>
                                    <th class="p-3 table-head-content">Delivery Person <br> & Zone</th>
                                    <th class="p-3 table-head-content">Order <br> Update On</th>
                                    <th class="p-3 table-head-content">Dispatch <br> Status</th>
                                    <th class="p-3 table-head-content">Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all sortable-table">
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Customer X</p>
                                            <p class="mb-0 fs-13 secondary-text">
                                                <img src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">App</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Person X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3 color-orange fw-600">Pending</td>
                                    <td class="p-3">
                                        <a href="{{ route('backend.template.manage-orders.dispatch-pending-detail') }}"
                                            class="button-green-light p-2 px-3 fs-14">
                                            View Order
                                        </a>
                                    </td>
                                </tr>
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-xl-column gap-1">
                                            <p class="mb-0">
                                                <img class="dark-phone"
                                                    src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Website</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Person X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3 color-blue fw-600">Out for <br> Delivery</td>
                                    <td class="p-3">
                                        <a href="{{ route('backend.template.manage-orders.dispatch-outfordelivery-detail') }}"
                                            class="button-green-light p-2 px-3 fs-14">
                                            View Order
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="d-flex flex-row gap-3 align-items-center justify-content-end">
                        <span class="bottom-content-table">1-2 of 02 results</span>
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <div class="bottom-arrow-left-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="right-arrow">
                            </div>
                            <span class="bottom-content-num-table">1</span>
                            <div class="bottom-arrow-right-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="left-arrow">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane " id="Delivered" role="tabpanel">
                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-12 col-md-9 d-flex gap-3">
                            <div class="table-search-box w-100">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search2">
                                <input type="text" placeholder="Search by order ID or customer details"
                                    class="table-search-input">
                            </div>
                            <div class="table-header-drops">
                                <div class="drop-contain" id="zone">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Zones">All Zones</option>
                                        <option value="Zone X">Zone X</option>
                                        <option value="Zone Y">Zone Y</option>
                                    </select>
                                </div>
                            </div>
                            <div class="table-header-drops">
                                <div class="drop-contain" id="zone">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Delivery Persons">All Delivery Persons</option>
                                        <option value="Person X">Person X</option>
                                        <option value="Person Y">Person Y</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-3 d-flex justify-content-md-end gap-2 align-items-center">

                            <span class="table-sort-content">Show</span>

                            <div class="dropdown">
                                <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                    data-bs-toggle="dropdown">
                                    10
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">40</a></li>
                                </ul>
                            </div>

                            <span class="table-sort-content">entries</span>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">

                        <table class="table table-nowrap align-middle">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">
                                    <th scope="col" class="p-3" style="width: 25px;">
                                        <div class="form-check text-end">
                                            <input class="form-check-input" type="checkbox" id="checkAll"
                                                value="option">
                                        </div>
                                    </th>
                                    <th class="p-3 table-head-content">Order ID</th>
                                    <th class="p-3 table-head-content">Customer Details</th>
                                    <th class="p-3 table-head-content">Order <br> From</th>
                                    <th class="p-3 table-head-content">Payment <br> Mode</th>
                                    <th class="p-3 table-head-content">Total <br> Qty</th>
                                    <th class="p-3 table-head-content">Total Order <br> Value</th>
                                    <th class="p-3 table-head-content">Delivery Person <br> & Zone</th>
                                    <th class="p-3 table-head-content">Delivered On</th>
                                    <th class="p-3 table-head-content">Delivered By</th>
                                    <th class="p-3 table-head-content">Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all sortable-table">
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Customer X</p>
                                            <p class="mb-0 fs-13 secondary-text">
                                                <img src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">App</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-xl-column gap-1">
                                            <p class="mb-0">Person X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">00/00/0000</p>
                                            <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Person X</td>
                                    <td class="p-3">
                                        <a href="{{ route('backend.template.manage-orders.delivery-detail') }}"
                                            class="button-green-light p-2 px-3 fs-14">
                                            View Order
                                        </a>
                                    </td>
                                </tr>
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">
                                                <img class="dark-phone"
                                                    src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Website</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Person X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">00/00/0000</p>
                                            <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Person X</td>
                                    <td class="p-3">
                                        <a href="{{ route('backend.template.manage-orders.delivery-detail') }}"
                                            class="button-green-light p-2 px-3 fs-14">
                                            View Order
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="d-flex flex-row gap-3 align-items-center justify-content-end">
                        <span class="bottom-content-table">1-2 of 02 results</span>
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <div class="bottom-arrow-left-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="right-arrow">
                            </div>
                            <span class="bottom-content-num-table">1</span>
                            <div class="bottom-arrow-right-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="left-arrow">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane " id="Schedules" role="tabpanel">
                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-12 col-md-6 d-flex gap-3">
                            <div class="table-search-box w-100">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search2">
                                <input type="text" placeholder="Search by order ID or customer details"
                                    class="table-search-input">
                            </div>
                            <div class="table-header-drops">
                                <div class="drop-contain" id="zone">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Dates">All Dates</option>
                                        <option value="All Dates">All Dates</option>
                                        <option value="All Dates">All Dates</option>
                                    </select>
                                </div>
                            </div>

                        </div>

                        <div class="col-12 col-md-3 d-flex justify-content-md-end gap-2 align-items-center">

                            <span class="table-sort-content">Show</span>

                            <div class="dropdown">
                                <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                    data-bs-toggle="dropdown">
                                    10
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">40</a></li>
                                </ul>
                            </div>

                            <span class="table-sort-content">entries</span>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">

                        <table class="table table-nowrap align-middle">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">
                                    <th scope="col" class="p-3" style="width: 25px;">
                                        <div class="form-check text-end">
                                            <input class="form-check-input" type="checkbox" id="checkAll"
                                                value="option">
                                        </div>
                                    </th>
                                    <th class="p-3 table-head-content">Order ID</th>
                                    <th class="p-3 table-head-content">Customer Details</th>
                                    <th class="p-3 table-head-content">Order <br> From</th>
                                    <th class="p-3 table-head-content">Payment <br> Mode</th>
                                    <th class="p-3 table-head-content">Total <br> Qty</th>
                                    <th class="p-3 table-head-content">Total Order <br> Value</th>
                                    <th class="p-3 table-head-content">Order Location <br> & Zone</th>
                                    <th class="p-3 table-head-content">Order <br> Placed On</th>
                                    <th class="p-3 table-head-content">Scheduled <br> On</th>
                                    <th class="p-3 table-head-content">Action</th>
                                </tr>
                            </thead>
                            <tbody class="list form-check-all sortable-table">
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Customer X</p>
                                            <p class="mb-0 fs-13 secondary-text">
                                                <img src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">App</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Location X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <p class="mb-0">00/00/0000 </p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 fw-bold ">
                                        <p class="mb-0">00/00/0000</p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 - 00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 color-blue fw-600">Scheduled</td>
                                </tr>
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">
                                                <img class="dark-phone"
                                                    src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Website</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-xl-column gap-1">
                                            <p class="mb-0">Location X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <p class="mb-0">00/00/0000 </p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 fw-bold">
                                        <p class="mb-0 color-green">Today</p>
                                        <p class="mb-0 fs-13 secondary-text color-green">00:00 - 00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 color-green fw-600">In-progress</td>

                                </tr>
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Customer X</p>
                                            <p class="mb-0 fs-13 secondary-text">
                                                <img src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">App</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Location X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <p class="mb-0">00/00/0000 </p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 fw-bold ">
                                        <p class="mb-0">00/00/0000</p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 - 00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 color-blue fw-600">Scheduled</td>
                                </tr>
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Customer X</p>
                                            <p class="mb-0 fs-13 secondary-text">
                                                <img src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">App</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Location X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <p class="mb-0">00/00/0000 </p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 fw-bold ">
                                        <p class="mb-0">00/00/0000</p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 - 00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 color-blue fw-600">Scheduled</td>
                                </tr>
                                <tr class="" data-id="1">
                                    <td scope="row" class="p-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="checkAll"
                                                value="option1">
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">OID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">
                                                <img class="dark-phone"
                                                    src="{{ asset('backend/template/images/svg/phone.svg') }}"
                                                    alt="">
                                                123456789
                                            </p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">Website</td>
                                    <td class="table-body-content p-3">COD</td>
                                    <td class="table-body-content p-3">05</td>
                                    <td class="table-body-content p-3">₹000</td>
                                    <td class="table-body-content p-3">
                                        <div class="d-flex flex-column gap-1">
                                            <p class="mb-0">Location X</p>
                                            <p class="mb-0 fs-13 secondary-text">Zone X</p>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <p class="mb-0">00/00/0000 </p>
                                        <p class="mb-0 fs-13 secondary-text">00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 fw-bold">
                                        <p class="mb-0 color-green">Today</p>
                                        <p class="mb-0 fs-13 secondary-text color-green">00:00 - 00:00 AM</p>
                                    </td>
                                    <td class="table-body-content p-3 color-green fw-600">In-progress</td>

                                </tr>
                            </tbody>
                        </table>

                    </div>

                    <div class="d-flex flex-row gap-3 align-items-center justify-content-end">
                        <span class="bottom-content-table">1-2 of 02 results</span>
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <div class="bottom-arrow-left-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="right-arrow">
                            </div>
                            <span class="bottom-content-num-table">1</span>
                            <div class="bottom-arrow-right-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="left-arrow">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    {{-- Assign Delivery And Dispatch Order Modal --}}
    <div class="modal fade" id="AssignDeliveryAndDispatchOrder" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-16 overflow-hidden">

                <div class="modal-header bg-color-lightGreen border-0">
                    <h3 class="mb-0 modal-title color-green">Assign Delivery & Dispatch Order</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="modal-body p-4">

                    <p>Assign a delivery person to move this order into the dispatch process.</p>

                    <h6>Assign Delivery Person</h6>

                    <form action="">
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label for="zone" class="form-label-modal">
                                    Zone <span class="color-red">*</span>
                                </label>
                                <div class="drop-contain" id="zone">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="Zone X" selected>Zone X</option>
                                        <option value="Free Zone">Free Zone</option>
                                        {{-- admin can not select other zone only current selected zone and free zone --}}
                                        <option value="Zone Y" disabled>Zone Y</option>
                                        <option value="Zone Z" disabled>Zone Z</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="deliveryPerson" class="form-label-modal">
                                    Delivery Person <span class="color-red">*</span>
                                </label>
                                <div class="drop-contain" id="deliveryPerson">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="Select">Select</option>
                                        <option value="Person X">Person X</option>
                                        <option value="Person Y">Person Y</option>
                                        <option value="Person Z">Person Z</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="p-3 pb-1 rounded-3 bg-green-light mt-3">
                        <div class="d-flex flex-row align-items-center justify-content-between">
                            <p class="status-green">Total Orders</p>
                            <p class="status-green">10</p>
                        </div>
                        <div class="d-flex flex-row align-items-center justify-content-between">
                            <p class="status-green">Total Items</p>
                            <p class="status-green">37</p>
                        </div>
                        <div class="d-flex flex-row align-items-center justify-content-between">
                            <p class="status-green">Delivery Person Assigned</p>
                            <p class="color-orange">Not Assigned</p>
                        </div>
                    </div>
                </div>

                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    {{-- if you want disabled button use (button-green-disabled) or (button-green) --}}
                    <button type="button" class="button-green-disabled">
                        <img src="{{ asset('backend/template/images/svg/send.svg') }}" alt="">
                        Move to Dispatch
                    </button>
                </div>

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

@endsection


@section('scripts')
    {{-- Date Picker logic --}}
    <script>
        $(function() {
            $('#datepicker').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayHighlight: true
            });

            $('.calendar-icon').click(function() {
                $('#datepicker').datepicker('show');
            });
        });
    </script>

    {{-- Tab concept for New(Request, Package, Dispatch, Delivered) --}}
    <script>
        document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
            tab.addEventListener('shown.bs.tab', function(event) {

                const target = event.target.getAttribute("href");

                if (target === "#Request") {

                    document.getElementById("OrderRequestText").classList.remove("d-none");
                    document.getElementById("OrderPackageText").classList.add("d-none");
                    document.getElementById("OrderDispatchText").classList.add("d-none");
                    document.getElementById("OrderDeliveredText").classList.add("d-none");
                    document.getElementById("OrderPackageBtn").classList.add("d-none");
                    document.getElementById("OrderDeliveredBtn").classList.add("d-none");
                    document.getElementById("OrderScheduledText").classList.add("d-none");
                    document.getElementById("OrderScheduledBtn").classList.add("d-none");

                } else if (target === "#Packaging") {

                    document.getElementById("OrderRequestText").classList.add("d-none");
                    document.getElementById("OrderPackageText").classList.remove("d-none");
                    document.getElementById("OrderDispatchText").classList.add("d-none");
                    document.getElementById("OrderDeliveredText").classList.add("d-none");
                    document.getElementById("OrderPackageBtn").classList.remove("d-none");
                    document.getElementById("OrderDeliveredBtn").classList.add("d-none");
                    document.getElementById("OrderScheduledText").classList.add("d-none");
                    document.getElementById("OrderScheduledBtn").classList.add("d-none");

                } else if (target === "#Dispatched") {

                    document.getElementById("OrderRequestText").classList.add("d-none");
                    document.getElementById("OrderPackageText").classList.add("d-none");
                    document.getElementById("OrderDispatchText").classList.remove("d-none");
                    document.getElementById("OrderDeliveredText").classList.add("d-none");
                    document.getElementById("OrderPackageBtn").classList.add("d-none");
                    document.getElementById("OrderDeliveredBtn").classList.add("d-none");
                    document.getElementById("OrderScheduledText").classList.add("d-none");
                    document.getElementById("OrderScheduledBtn").classList.add("d-none");

                } else if (target === "#Delivered") {

                    document.getElementById("OrderRequestText").classList.add("d-none");
                    document.getElementById("OrderPackageText").classList.add("d-none");
                    document.getElementById("OrderDispatchText").classList.add("d-none");
                    document.getElementById("OrderDeliveredText").classList.remove("d-none");
                    document.getElementById("OrderPackageBtn").classList.add("d-none");
                    document.getElementById("OrderDeliveredBtn").classList.remove("d-none");
                    document.getElementById("OrderScheduledText").classList.add("d-none");
                    document.getElementById("OrderScheduledBtn").classList.add("d-none");

                } else if (target === "#Schedules") {

                    document.getElementById("OrderRequestText").classList.add("d-none");
                    document.getElementById("OrderPackageText").classList.add("d-none");
                    document.getElementById("OrderDispatchText").classList.add("d-none");
                    document.getElementById("OrderDeliveredText").classList.add("d-none");

                    document.getElementById("OrderPackageBtn").classList.add("d-none");
                    document.getElementById("OrderDeliveredBtn").classList.add("d-none");

                    document.getElementById("OrderScheduledText").classList.remove("d-none");
                    document.getElementById("OrderScheduledBtn").classList.remove("d-none");

                }

            });
        });
    </script>

@endsection