<?php include 'header.php'; ?>

<style>
.ts-control {
    height: 44px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
}

.ts-dropdown {
    z-index: 99999 !important;
}

.ts-wrapper.single .ts-control {
    padding-left: 12px !important;
}

.ts-wrapper.single .ts-control input {
    margin: 0 !important;
    padding: 0 !important;
}

.ts-wrapper.single .placeholder {
    margin-left: 0 !important;
}

.ts-wrapper {
    width: 100% !important;
}

.ts-dropdown-content {
    max-height: 170px !important;
    overflow-y: auto !important;
}

body.modal-open {
    overflow: hidden !important;
}

html.modal-open {
    overflow: hidden !important;
}
</style>

<!-- Page Wrapper -->
<div class="px-0 py-3 md:p-2 lg:p-6">

    <!-- Header -->
    <div
        class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5 bg-white p-4 rounded-lg border border-gray-200">

        <!-- Title -->
        <div>
            <h1 class="text-2xl font-bold text-gray-800">
                Orders List
            </h1>

            <p class="text-sm text-gray-500">
                Track, manage and monitor all LockOra customer orders
            </p>
        </div>

        <!-- Actions -->
        <div class="flex flex-col sm:flex-row gap-3">

            <!-- Search -->
            <div class="relative">

                <input type="text" placeholder="Search here..." id="searchInput"
                    class="w-full sm:w-[220px] pl-10 pr-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none text-sm">
                <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>

            </div>

            <!-- Filter -->
            <button id="openFilter"
                class="px-4 py-2.5 rounded-xl border border-blue-100 bg-white hover:bg-gradient-to-r hover:from-blue-500 hover:to-indigo-600 hover:text-white transition-all duration-300 text-sm text-blue-600 flex items-center gap-2">
                <i class="ri-filter-3-line"></i>
                Filter
            </button>

            <a href="add_lockora_order.php"
                class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium text-sm flex items-center gap-2 shadow-lg hover:from-blue-600 hover:to-indigo-700 transition-all duration-300">
                <i class="ri-add-line"></i>
                Add Order
            </a>


        </div>

    </div>

    <!-- Order Type Filter Buttons -->
    <div class="bg-white rounded-2xl border border-gray-200 p-4 mb-5">
        <div class="flex flex-wrap gap-3">

            <button onclick="setTypeFilter('all')" id="typeBtn-all"
                class="type-btn px-5 h-11 rounded-xl text-sm font-medium border transition-all duration-200 border-slate-200 text-slate-700 bg-slate-100 hover:bg-slate-200 flex items-center gap-2">
                All Types
            </button>

            <button onclick="setTypeFilter('dealer')" id="typeBtn-dealer"
                class="type-btn px-5 h-11 rounded-xl text-sm font-medium border transition-all duration-200 border-blue-200 text-blue-700 bg-blue-50 hover:bg-blue-100 flex items-center gap-2">
                <i class="ri-store-2-line text-lg"></i> Dealer
            </button>

            <button onclick="setTypeFilter('customer')" id="typeBtn-customer"
                class="type-btn px-5 h-11 rounded-xl text-sm font-medium border transition-all duration-200 border-cyan-200 text-cyan-700 bg-cyan-50 hover:bg-cyan-100 flex items-center gap-2">
                <i class="ri-user-line text-lg"></i> Webiste Customer
            </button>

            <button onclick="setTypeFilter('sales partner')" id="typeBtn-sales-partner"
                class="type-btn px-5 h-11 rounded-xl text-sm font-medium border transition-all duration-200 border-orange-200 text-orange-700 bg-orange-50 hover:bg-orange-100 flex items-center gap-2">
                <i class="ri-handshake-line text-lg"></i> Sales Partner
            </button>

        </div>
    </div>

    <!-- Status Filter Buttons -->
    <div class="bg-white rounded-2xl border border-gray-200 p-4 mb-5">
        <div class="flex flex-wrap gap-3">

            <!-- All Orders -->
            <button id="statusBtn-all" onclick="filterOrders('all')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-slate-100 text-slate-700 border border-slate-200 hover:bg-slate-200 transition text-sm font-medium">
                <i class="ri-file-list-3-line text-lg"></i>
                All Orders <span class="px-2 py-0.5 text-xs rounded-full bg-slate-300 text-black">5</span>
            </button>

            <!-- Pending -->
            <button id="statusBtn-pending" onclick="filterOrders('pending')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-red-50 text-red-700 border border-red-200 hover:bg-red-100 transition text-sm font-medium">
                <i class="ri-time-line text-lg"></i>
                Pending <span class="px-2 py-0.5 text-xs rounded-full bg-red-300 text-black">1</span>
            </button>

            <!-- Confirmed -->
            <button id="statusBtn-confirmed" onclick="filterOrders('confirmed')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100 transition text-sm font-medium">
                <i class="ri-checkbox-circle-line text-lg"></i>
                Confirmed <span class="px-2 py-0.5 text-xs rounded-full bg-blue-300 text-black">1</span>
            </button>

            <!-- Processing -->
            <button id="statusBtn-processing" onclick="filterOrders('processing')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-amber-50 text-amber-700 border border-amber-200 hover:bg-amber-100 transition text-sm font-medium">
                <i class="ri-loader-4-line text-lg"></i>
                Processing <span class="px-2 py-0.5 text-xs rounded-full bg-amber-300 text-black">1</span>
            </button>

            <!-- In Transit -->
            <button id="statusBtn-intransit" onclick="filterOrders('intransit')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-purple-50 text-purple-700 border border-purple-200 hover:bg-purple-100 transition text-sm font-medium">
                <i class="ri-truck-line text-lg"></i>
                In Transit <span class="px-2 py-0.5 text-xs rounded-full bg-purple-300 text-black">1</span>
            </button>

            <!-- Delivered -->
            <button id="statusBtn-delivered" onclick="filterOrders('delivered')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100 transition text-sm font-medium">
                <i class="ri-truck-fill text-lg"></i>
                Delivered <span class="px-2 py-0.5 text-xs rounded-full bg-emerald-300 text-black">1</span>
            </button>

            <!-- Installation -->
            <button id="statusBtn-installation" onclick="filterOrders('installation')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-teal-50 text-teal-700 border border-teal-200 hover:bg-teal-100 transition text-sm font-medium">
                <i class="ri-tools-line text-lg"></i>
                Installation <span class="px-2 py-0.5 text-xs rounded-full bg-teal-300 text-black">1</span>
            </button>

            <!-- Completed -->
            <button id="statusBtn-completed" onclick="filterOrders('completed')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-green-50 text-green-700 border border-green-200 hover:bg-green-100 transition text-sm font-medium">
                <i class="ri-checkbox-circle-fill text-lg"></i>
                Completed <span class="px-2 py-0.5 text-xs rounded-full bg-green-300 text-black">1</span>
            </button>

            <!-- Cancelled -->
            <button id="statusBtn-cancelled" onclick="filterOrders('cancelled')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-gray-100 text-gray-700 border border-gray-200 hover:bg-gray-200 transition text-sm font-medium">
                <i class="ri-close-circle-line text-lg"></i>
                Cancelled <span class="px-2 py-0.5 text-xs rounded-full bg-gray-300 text-black">1</span>
            </button>


            <!-- Return -->
            <button id="statusBtn-return" onclick="filterOrders('return')"
                class="status-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-rose-50 text-rose-700 border border-rose-200 hover:bg-rose-100 transition text-sm font-medium">
                <i class="ri-arrow-go-back-line text-lg"></i>
                Return <span class="px-2 py-0.5 text-xs rounded-full bg-rose-300 text-black">1</span>
            </button>

        </div>
    </div>



    <!-- Card -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-x-auto overflow-y-hidden">

        <!-- Table -->
        <div class="overflow-x-auto">

            <table class="w-full min-w-[1200px] whitespace-nowrap">

                <!-- Table Head -->
                <thead class="bg-gray-50 border-b border-gray-200">

                    <tr class="text-left">

                        <th
                            class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Sr.no
                        </th>


                        <th
                            class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Order ID
                        </th>

                        <th
                            class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Product
                        </th>

                        <th
                            class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Order Type
                        </th>

                        <th
                            class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Amount
                        </th>

                        <th
                            class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Payment Status
                        </th>

                        <th
                            class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Order Status
                        </th>

                        <th
                            class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Action
                        </th>

                    </tr>

                </thead>

                <tbody class="divide-y divide-gray-100 bg-white">

                    <!-- Pending Order -->
                    <tr class="hover:bg-gray-50 transition" data-status="pending">
                        <td class="px-6 py-4 font-semibold text-black-600 whitespace-nowrap">1</td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">
                                ORD-1000
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                07-06-2026
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L1 Core</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-001</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">Dealer</span>
                        </td>
                        <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">₹10,999</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-yellow-100 text-yellow-700 text-xs font-medium">Pending</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium">Pending</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">
                                <button onclick="openOrderModal()"
                                    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">
                                    <i class="ri-file-list-3-line"></i>
                                </button>
                                <a href="view_lockora_order.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

                                <a href="#"
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                    <i class="ri-pencil-line"></i>
                                </a>

                                <button onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                    <i class="ri-delete-bin-line"></i>
                                </button>

                            </div>
                        </td>
                    </tr>

                    <!-- Confirmed Order -->
                    <tr class="hover:bg-gray-50 transition" data-status="confirmed">
                        <td class="px-6 py-4 font-semibold text-black-600 whitespace-nowrap">2</td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">
                                ORD-1000
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                07-06-2026
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L1 Core</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-002</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-orange-100 text-orange-700 text-xs font-medium">Sales
                                Partner</span>
                        </td>
                        <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">₹12,999</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">Paid</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">Confirmed</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">
                                <button onclick="openOrderModal()"
                                    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">
                                    <i class="ri-file-list-3-line"></i>
                                </button>

                                <a href="view_lockora_order.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

                                <a href="#"
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                    <i class="ri-pencil-line"></i>
                                </a>

                                <button onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                    <i class="ri-delete-bin-line"></i>
                                </button>

                            </div>
                        </td>
                    </tr>

                    <!-- Processing Order -->
                    <tr class="hover:bg-gray-50 transition" data-status="processing">
                        <td class="px-6 py-4 font-semibold text-black-600 whitespace-nowrap">3</td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">
                                ORD-1000
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                07-06-2026
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L2+</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-003</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-cyan-100 text-cyan-700 text-xs font-medium">Webiste
                                Customer</span>
                        </td>
                        <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">₹15,999</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">Paid</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-yellow-100 text-yellow-700 text-xs font-medium">Processing</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">

                                <button onclick="openOrderModal()"
                                    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">
                                    <i class="ri-file-list-3-line"></i>
                                </button>

                                <a href="view_lockora_order.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

                                <a href="#"
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                    <i class="ri-pencil-line"></i>
                                </a>

                                <button onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                    <i class="ri-delete-bin-line"></i>
                                </button>

                            </div>
                        </td>
                    </tr>




                    <!-- Cancelled Order -->
                    <tr class="hover:bg-gray-50 transition" data-status="cancelled">
                        <td class="px-6 py-4 font-semibold text-black-600 whitespace-nowrap">4</td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">
                                ORD-1000
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                07-06-2026
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L2+</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-006</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">Dealer</span>
                        </td>
                        <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">₹13,999</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-yellow-100 text-yellow-700 text-xs font-medium">Pending</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-xs font-medium">Cancelled</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">

                                <button onclick="openOrderModal()"
                                    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">
                                    <i class="ri-file-list-3-line"></i>
                                </button>

                                <a href="view_lockora_order.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

                                <a href="#"
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                    <i class="ri-pencil-line"></i>
                                </a>

                                <button onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                    <i class="ri-delete-bin-line"></i>
                                </button>

                            </div>
                        </td>
                    </tr>

                    <tr class="hover:bg-gray-50 transition" data-status="intransit">
                        <td class="px-6 py-4 font-semibold whitespace-nowrap">5</td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">
                                ORD-1000
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                07-06-2026
                            </div>
                        </td>

                        <td class="px-6 py-4">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L3 Pro</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-007</div>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">
                                Dealer
                            </span>
                        </td>

                        <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">
                            ₹16,999
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                                Paid
                            </span>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-medium">
                                In Transit
                            </span>
                        </td>

                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">
                                <button onclick="openOrderModal()"
                                    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">
                                    <i class="ri-file-list-3-line"></i>
                                </button>
                                <a href="view_lockora_order.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

                                <a href="#"
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                    <i class="ri-pencil-line"></i>
                                </a>

                                <button onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </div>
                        </td>
                    </tr>

                    <tr class="hover:bg-gray-50 transition" data-status="delivered">
                        <td class="px-6 py-4 font-semibold whitespace-nowrap">6</td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">
                                ORD-1000
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                07-06-2026
                            </div>
                        </td>

                        <td class="px-6 py-4">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L3 Pro</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-008</div>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-orange-100 text-orange-700 text-xs font-medium">
                                Sales Partner
                            </span>
                        </td>

                        <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">
                            ₹18,999
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                                Paid
                            </span>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-medium">
                                Delivered
                            </span>
                        </td>

                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">

                                <button onclick="openOrderModal()"
                                    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">
                                    <i class="ri-file-list-3-line"></i>
                                </button>

                                <a href="view_lockora_order.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

                                <a href="#"
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                    <i class="ri-pencil-line"></i>
                                </a>

                                <button onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                    <i class="ri-delete-bin-line"></i>
                                </button>

                            </div>
                        </td>
                    </tr>

                    <tr class="hover:bg-gray-50 transition" data-status="installation">
                        <td class="px-6 py-4 font-semibold whitespace-nowrap">7</td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">
                                ORD-1000
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                07-06-2026
                            </div>
                        </td>

                        <td class="px-6 py-4">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L4 Ultra</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-009</div>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-cyan-100 text-cyan-700 text-xs font-medium">
                                Website Customer
                            </span>
                        </td>

                        <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">
                            ₹21,999
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                                Paid
                            </span>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-teal-100 text-teal-700 text-xs font-medium">
                                Installation
                            </span>
                        </td>

                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">
                                <button onclick="openOrderModal()"
                                    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">
                                    <i class="ri-file-list-3-line"></i>
                                </button>

                                <a href="view_lockora_order.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

                                <a href="#"
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                    <i class="ri-pencil-line"></i>
                                </a>

                                <button onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                    <i class="ri-delete-bin-line"></i>
                                </button>

                            </div>
                        </td>
                    </tr>

                    <tr class="hover:bg-gray-50 transition" data-status="completed">
                        <td class="px-6 py-4 font-semibold whitespace-nowrap">8</td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">
                                ORD-1000
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                07-06-2026
                            </div>
                        </td>

                        <td class="px-6 py-4">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L5 Elite</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-010</div>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">
                                Dealer
                            </span>
                        </td>

                        <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">
                            ₹24,999
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                                Paid
                            </span>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                                Completed
                            </span>
                        </td>

                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">

                                <button onclick="openOrderModal()"
                                    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">
                                    <i class="ri-file-list-3-line"></i>
                                </button>

                                <a href="view_lockora_order.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

                                <a href="#"
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                    <i class="ri-pencil-line"></i>
                                </a>

                                <button onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                    <i class="ri-delete-bin-line"></i>
                                </button>

                            </div>
                        </td>
                    </tr>

                    <tr class="hover:bg-gray-50 transition" data-status="return">
                        <td class="px-6 py-4 font-semibold whitespace-nowrap">9</td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">
                                ORD-1000
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                07-06-2026
                            </div>
                        </td>

                        <td class="px-6 py-4">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L2+</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-011</div>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-orange-100 text-orange-700 text-xs font-medium">
                                Sales Partner
                            </span>
                        </td>

                        <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">
                            ₹14,999
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-rose-100 text-rose-700 text-xs font-medium">
                                Refunded
                            </span>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-rose-100 text-rose-700 text-xs font-medium">
                                Return
                            </span>
                        </td>

                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-2">

                                <button onclick="openOrderModal()"
                                    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">
                                    <i class="ri-file-list-3-line"></i>
                                </button>

                                <a href="view_lockora_order.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

                                <a href="#"
                                    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                    <i class="ri-pencil-line"></i>
                                </a>

                                <button onclick="deleteRow(this)"
                                    class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                    <i class="ri-delete-bin-line"></i>
                                </button>

                            </div>
                        </td>
                    </tr>

                </tbody>

            </table>

        </div>

        <!-- Footer -->
        <div class="px-4 py-4 border-t border-gray-100 flex flex-col md:flex-row items-center justify-between gap-4">

            <!-- Left -->
            <p class="text-sm text-gray-500">
                Showing 1 to 4 of 62 tasks
            </p>

            <!-- Pagination -->
            <div class="flex items-center gap-2">

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">
                    <i class="ri-arrow-left-s-line"></i>
                </button>

                <button
                    class="w-9 h-9 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium shadow-md">
                    1
                </button>

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                    2
                </button>

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                    3
                </button>

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                    4
                </button>

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">
                    <i class="ri-arrow-right-s-line"></i>
                </button>

            </div>

        </div>

    </div>

</div>


<!-- Order Modal -->
<div id="orderModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm hidden items-center justify-center z-50 p-4">

    <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl overflow-visible">

        <!-- Header -->
        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200">

            <div class="flex items-center gap-3">

                <div class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600">
                    <i class="ri-file-list-3-line text-xl"></i>
                </div>

                <div>
                    <h3 class="text-lg font-semibold text-slate-800">
                        Update Order Status
                    </h3>

                    <p class="text-xs text-slate-500">
                        Change order status
                    </p>
                </div>

            </div>

            <button onclick="closeOrderModal()"
                class="w-9 h-9 rounded-lg bg-slate-100 hover:bg-slate-200 flex items-center justify-center">
                <i class="ri-close-line text-lg"></i>
            </button>

        </div>

        <!-- Body -->
        <div class="p-5 space-y-4">

            <!-- Current Status -->
            <div class="rounded-xl border border-slate-200 bg-slate-50 p-4">

                <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">
                    Current Status
                </p>

                <div class="flex items-center justify-between">

                    <span id="currentStatusText" class="text-sm font-semibold text-slate-800">
                        Pending
                    </span>

                    <span id="currentStatusBadge"
                        class="px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium">
                        Pending
                    </span>

                </div>

            </div>

            <!-- New Status -->
            <div>

                <label class="block text-sm font-medium text-slate-700 mb-2">
                    Select New Status
                </label>

                <select id="orderStatusSelect">
                    <option value="">Search Status...</option>
                    <option value="pending">Pending</option>
                    <option value="confirmed">Confirmed</option>
                    <option value="processing">Processing</option>
                    <option value="intransit">In Transit</option>
                    <option value="delivered">Delivered</option>
                    <option value="installation">Installation</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                    <option value="return">Return</option>
                </select>

            </div>

        </div>

        <!-- Footer -->
        <div class="px-5 py-4 border-t border-slate-200 bg-slate-50 flex justify-end gap-3 rounded-b-2xl">

            <button onclick="closeOrderModal()"
                class="px-5 h-10 rounded-lg border border-slate-200 bg-white text-slate-700 text-sm font-medium hover:bg-slate-100">
                Cancel
            </button>

            <button onclick="updateOrderStatus()"
                class="px-5 h-10 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-medium shadow-md">

                Update Status

            </button>

        </div>

    </div>

</div>

<!-- Filter Sidebar -->
<div id="filterSidebar"
    class="fixed top-0 right-[-400px] w-[320px] h-full bg-white shadow-2xl z-50 transition-all duration-300 border-l border-gray-200">
    <!-- Header -->
    <div class="flex items-center justify-between p-5 border-b border-gray-100">
        <h2 class="text-lg font-bold text-gray-800">
            Filters
        </h2>
        <button id="closeFilter" class="w-9 h-9  text-black  flex items-center justify-center">

            <i class="ri-close-line text-xl"></i>

        </button>
    </div>
    <!-- Body -->
    <div class="p-5 space-y-5 pb-28">
        <!-- From Date -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">
                From Date
            </label>
            <div class="relative">
                <i class="ri-calendar-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                <input type="date" id="fromDate"
                    class="h-11 w-full rounded-md border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
            </div>
        </div>
        <!-- To Date -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">
                To Date
            </label>
            <div class="relative">
                <i class="ri-calendar-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                <input type="date" id="toDate"
                    class="h-11 w-full rounded-md border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
            </div>
        </div>

        <!-- Product -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">
                Product
            </label>

            <select id="productSelect">
                <option value="">All Products</option>
                <option value="LockOra L1 Core">LockOra L1 Core</option>
                <option value="LockOra L2+">LockOra L2+</option>
                <option value="LockOra L3 Pro">LockOra L3 Pro</option>
            </select>
        </div>

        <!-- Order Type -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">
                Order Type
            </label>

            <select id="orderTypeSelect">
                <option value="">All Order Types</option>
                <option value="dealer">Dealer</option>
                <option value="sales partner">Sales Partner</option>
                <option value="customer">Website Customer</option>
            </select>
        </div>

        <!-- Amount -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">
                Amount
            </label>

            <div class="relative">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 font-medium">
                    ₹
                </span>

                <input type="number" id="amountFilter" placeholder="Enter amount"
                    class="h-11 w-full rounded-md border border-slate-200 bg-slate-50 pl-8 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
            </div>
        </div>

    </div>
    <!-- Bottom Fixed Buttons -->
    <div class="absolute bottom-0 left-0 w-full border-t border-gray-200 bg-white p-4">
        <div class="flex flex-row items-center justify-center gap-3 whitespace-nowrap">
            <!-- Reset Button -->
            <button
                class="w-1/2 h-11 rounded-md border border-slate-200 bg-slate-100 text-sm font-medium text-slate-700 transition hover:bg-slate-200">
                Reset
            </button>
            <!-- Apply Filter Button -->
            <button
                class="w-1/2 h-11 rounded-md bg-gradient-to-r from-blue-500 to-indigo-600 text-sm font-medium text-white shadow-md transition hover:from-blue-600 hover:to-indigo-700">
                Apply Filter
            </button>
        </div>
    </div>
</div>

<script>
function updateOrderStatus() {

    const status = orderStatusTS.getValue(); // TomSelect value

    if (!status) {
        Swal.fire({
            icon: "warning",
            title: "Select Status",
            text: "Please select order status.",
            width: "320px"
        });
        return;
    }

    // In Transit -> Confirmation Popup
    if (status === "intransit") {

        Swal.fire({
            title: "Are you sure?",
            text: "Are you sure you want to complete the order?",
            icon: "question",
            width: "350px",
            showCancelButton: true,
            confirmButtonText: "Yes",
            cancelButtonText: "No",
            confirmButtonColor: "#2563eb",
            cancelButtonColor: "#ef4444"
        }).then((result) => {

            if (result.isConfirmed) {

                closeOrderModal();

                Swal.fire({
                    icon: "success",
                    title: "Success",
                    text: "Order updated successfully.",
                    width: "320px",
                    timer: 1500,
                    showConfirmButton: false
                });

                // Ajax / Status update code here

            }

        });

        return;
    }

    // Other Status
    closeOrderModal();

    Swal.fire({
        icon: "success",
        title: "Success",
        text: "Order updated successfully.",
        width: "320px",
        timer: 1500,
        showConfirmButton: false
    });

}
</script>

<script>
function openOrderModal() {

    const modal = document.getElementById("orderModal");

    modal.classList.remove("hidden");
    modal.classList.add("flex");

    document.body.classList.add("modal-open");
    document.documentElement.classList.add("modal-open");
}

function closeOrderModal() {

    const modal = document.getElementById("orderModal");

    modal.classList.add("hidden");
    modal.classList.remove("flex");

    document.body.classList.remove("modal-open");
    document.documentElement.classList.remove("modal-open");
}


const orderStatusTS = new TomSelect("#orderStatusSelect", {
    create: false,
    placeholder: "Search Status..."
});
</script>

<script>
new TomSelect("#productSelect", {
    create: false,
    placeholder: "Search Product..."
});

new TomSelect("#orderTypeSelect", {
    create: false,
    placeholder: "Search Order Type..."
});
</script>

<script>
const openFilter = document.getElementById("openFilter");
const closeFilter = document.getElementById("closeFilter");
const filterSidebar = document.getElementById("filterSidebar");

openFilter.addEventListener("click", () => {

    filterSidebar.style.right = "0";

});

closeFilter.addEventListener("click", () => {

    filterSidebar.style.right = "-400px";

});
</script>

<script>
function deleteRow(button) {

    Swal.fire({

        title: "Delete Record?",
        text: "This row will be deleted.",
        icon: "warning",

        width: "320px",
        padding: "1rem",

        showCancelButton: true,
        scrollbarPadding: false,
        confirmButtonText: "Delete",
        cancelButtonText: "Cancel",

        confirmButtonColor: "#2563eb",
        cancelButtonColor: "#ef4444",

        customClass: {

            popup: "rounded-2xl",
            title: "text-lg font-semibold",
            htmlContainer: "text-sm text-gray-500",
            confirmButton: "px-4 py-2 rounded-lg text-sm",
            cancelButton: "px-4 py-2 rounded-lg text-sm"

        }

    }).then((result) => {

        if (result.isConfirmed) {

            button.closest("tr").remove();

            Swal.fire({

                icon: "success",
                title: "Deleted!",
                text: "Record removed successfully.",

                width: "300px",
                padding: "1rem",

                showConfirmButton: false,
                timer: 1400

            });

        }

    });

}
</script>

<script>
let activeStatus = "all";
let activeType = "all";

function applyFilters() {

    const rows = document.querySelectorAll("tbody tr");

    rows.forEach(row => {

        const rowStatus = row.dataset.status || "";

        const typeCell = row.querySelector("td:nth-child(4) span");
        const rowType = typeCell ?
            typeCell.textContent.trim().toLowerCase() :
            "";

        const statusMatch =
            activeStatus === "all" ||
            rowStatus === activeStatus;

        const typeMatch =
            activeType === "all" ||
            rowType === activeType;

        row.style.display =
            (statusMatch && typeMatch) ?
            "" :
            "none";

    });
}

function filterOrders(status) {
    activeStatus = status;
    applyFilters();
}

function setTypeFilter(type) {
    activeType = type;
    applyFilters();
}
</script>

<?php include 'footer.php'; ?>