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

<!-- 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">
                Complete Orders
            </h1>
            <p class="text-sm text-gray-500">
                View and manage all completed orders and order history
            </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>

        </div>

    </div>
    

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

        <div class="overflow-x-auto">
            <table class="w-full min-w-[1000px]">

            <!-- 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 Model
                    </th>
            
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                        Customer Name
                    </th>
            
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                        Customer Type
                    </th>
            
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                        Mobile No
                    </th>
            
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                        Status
                    </th>
            
                    <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider text-center whitespace-nowrap min-w-[220px]">
                        Action
                    </th>
            
                </tr>
            </thead>

<tbody class="divide-y divide-gray-100 bg-white">
 <tr class="hover:bg-gray-50 transition">

    <!-- Sr No -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        1
    </td>

<!-- Order ID -->
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-semibold text-gray-800">
        ORD-1001
    </div>
    <div class="text-xs text-gray-500 mt-1">
        15-06-2026
    </div>
</td>

    <!-- Product Model -->
    <td class="px-6 py-4 whitespace-nowrap">
        <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>

    <!-- Customer Name -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        Dev Mistry
    </td>
    
    <!-- Customer Type -->
    <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">
            Dealer Customer
        </span>
    </td>

    <!-- Mobile No -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        9876543210
    </td>



    <!-- Status -->
    <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 whitespace-nowrap">
            Completed
        </span>
    </td>
    
        <!-- Action -->
    <td class="px-6 py-4 whitespace-nowrap">
        <div class="flex items-center justify-center gap-2">
<button
    onclick="generateInvoice('ORD-1001')"
    class="w-9 h-9 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center"
    title="Generate Invoice">
    <i class="ri-file-paper-2-line"></i>
</button>

<!-- Download Invoice -->
<button
    onclick="downloadInvoice()"
    class="w-9 h-9 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 transition flex items-center justify-center"
    title="Download Invoice">
    <i class="ri-download-2-line"></i>
</button>

            <a href="view_lockora_completed_order.php"
                class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                <i class="ri-eye-line"></i>
            </a>

        </div>
    </td>


</tr>

<tr class="hover:bg-gray-50 transition" >

    <!-- Sr No -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        2
    </td>

<!-- Order ID -->
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-semibold text-gray-800">
        ORD-1002
    </div>
    <div class="text-xs text-gray-500 mt-1">
        16-06-2026
    </div>
</td>

    <!-- Product Model -->
    <td class="px-6 py-4 whitespace-nowrap">
        <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-002
        </div>
    </td>

    <!-- Customer Name -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        Raj Patel
    </td>
     <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
     <span class="px-3 py-1 rounded-full bg-orange-100 text-orange-700 text-xs font-medium">
                Sales Partner Customer
    </span>
    </td>
    <!-- Mobile No -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        9123456780
    </td>
    
        <!-- Status -->
    <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 whitespace-nowrap">
            Completed
        </span>
    </td>


    <!-- Action -->
    <td class="px-6 py-4 whitespace-nowrap">
        <div class="flex items-center justify-center gap-2">
<button
    onclick="generateInvoice('ORD-1001')"
    class="w-9 h-9 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center"
    title="Generate Invoice">
    <i class="ri-file-paper-2-line"></i>
</button>

<!-- Download Invoice -->
<button
    onclick="downloadInvoice()"
    class="w-9 h-9 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 transition flex items-center justify-center"
    title="Download Invoice">
    <i class="ri-download-2-line"></i>
</button>
    
            <a href="view_lockora_completed_order.php"
                class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                <i class="ri-eye-line"></i>
            </a>

        </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">

            <p class="text-sm text-gray-500" id="showingText">Showing all records</p>

            <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>







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