@extends('layouts.master')
  <div class="flex min-h-screen">
    @section('title', 'Order')
    <!-- SIDEBAR -->
    @include('layouts.navbar')

    <!-- MAIN -->
    <main class="flex-1 p-8">

      <!-- HEADER -->
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5 mb-8">

        <div>

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

            <div
              class="w-12 h-12 rounded-2xl bg-blue-100 text-blue-600 flex items-center justify-center text-xl">
              <i class="fa-solid fa-box"></i>
            </div>

            <div>

              <h2 class="text-5xl font-bold text-slate-900">
                Order Management
              </h2>

              <p class="text-slate-500 mt-2 text-lg">
                View and manage your recent customer orders.
              </p>

            </div>

          </div>

        </div>

        <!-- SEARCH -->
        <div class="relative w-full lg:w-[320px]">

          <i
            class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
          </i>

          <input
            type="text"
            placeholder="Search orders..."
            class="w-full h-12 rounded-2xl border border-slate-200 bg-white pl-11 pr-4 outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition"
          />

        </div>

      </div>

      <!-- TABLE CONTAINER -->
      <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">

        <!-- TABS -->
        <div
          class="flex items-center gap-8 px-6 border-b border-slate-200 overflow-x-auto">

          <!-- ACTIVE -->
          <button
            class="relative py-5 text-blue-600 font-semibold whitespace-nowrap">

            All

            <span
              class="ml-2 px-2 py-1 rounded-full bg-slate-100 text-slate-500 text-xs">
              7
            </span>

            <div
              class="absolute bottom-0 left-0 w-full h-[3px] bg-blue-600 rounded-full">
            </div>

          </button>

          <button
            class="py-5 text-slate-500 hover:text-slate-700 font-semibold whitespace-nowrap transition">

            Pending

            <span
              class="ml-2 px-2 py-1 rounded-full bg-slate-100 text-slate-500 text-xs">
              2
            </span>

          </button>

          <button
            class="py-5 text-slate-500 hover:text-slate-700 font-semibold whitespace-nowrap transition">

            Processed

            <span
              class="ml-2 px-2 py-1 rounded-full bg-slate-100 text-slate-500 text-xs">
              2
            </span>

          </button>

          <button
            class="py-5 text-slate-500 hover:text-slate-700 font-semibold whitespace-nowrap transition">

            Completed

            <span
              class="ml-2 px-2 py-1 rounded-full bg-slate-100 text-slate-500 text-xs">
              3
            </span>

          </button>

        </div>

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

          <table class="w-full min-w-[1100px]">

            <!-- HEAD -->
            <thead class="bg-slate-50 border-b border-slate-200">

              <tr class="text-left">

                <th class="px-6 py-5 text-sm font-bold uppercase tracking-wide text-slate-500">
                  Order ID
                </th>

                <th class="px-6 py-5 text-sm font-bold uppercase tracking-wide text-slate-500">
                  Timestamp
                </th>

                <th class="px-6 py-5 text-sm font-bold uppercase tracking-wide text-slate-500">
                  Buyer Name
                </th>

                <th class="px-6 py-5 text-sm font-bold uppercase tracking-wide text-slate-500">
                  Product Purchased
                </th>

                <th class="px-6 py-5 text-sm font-bold uppercase tracking-wide text-slate-500">
                  Total Amount
                </th>

                <th class="px-6 py-5 text-sm font-bold uppercase tracking-wide text-slate-500">
                  Status
                </th>

                <th class="px-6 py-5 text-sm font-bold uppercase tracking-wide text-slate-500 text-right">
                  Action
                </th>

              </tr>

            </thead>

            <!-- BODY -->
            <tbody class="divide-y divide-slate-100">

              <!-- ROW -->
              <tr class="hover:bg-slate-50 transition">

                <td class="px-6 py-5 font-bold text-slate-800">
                  ORD-7392
                </td>

                <td class="px-6 py-5 text-slate-600">
                  May 2, 2026 21:23
                </td>

                <td class="px-6 py-5 font-medium text-slate-700">
                  Alice Smith
                </td>

                <td class="px-6 py-5 text-slate-600">
                  Wireless Noise-Canceling Headphones
                </td>

                <td class="px-6 py-5 font-bold text-slate-800">
                  $249.99
                </td>

                <td class="px-6 py-5">

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-700">
                    Pending
                  </span>

                </td>

                <td class="px-6 py-5 text-right">

                  <button
                    class="w-10 h-10 rounded-xl hover:bg-slate-100 text-slate-500 transition">

                    <i class="fa-solid fa-ellipsis"></i>

                  </button>

                </td>

              </tr>

              <!-- ROW -->
              <tr class="hover:bg-slate-50 transition">

                <td class="px-6 py-5 font-bold text-slate-800">
                  ORD-7391
                </td>

                <td class="px-6 py-5 text-slate-600">
                  May 2, 2026 20:15
                </td>

                <td class="px-6 py-5 font-medium text-slate-700">
                  Bob Johnson
                </td>

                <td class="px-6 py-5 text-slate-600">
                  Mechanical Keyboard - Cherry MX Blue
                </td>

                <td class="px-6 py-5 font-bold text-slate-800">
                  $129.50
                </td>

                <td class="px-6 py-5">

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-blue-100 text-blue-700">
                    Processed
                  </span>

                </td>

                <td class="px-6 py-5 text-right">

                  <button
                    class="w-10 h-10 rounded-xl hover:bg-slate-100 text-slate-500 transition">

                    <i class="fa-solid fa-ellipsis"></i>

                  </button>

                </td>

              </tr>

              <!-- ROW -->
              <tr class="hover:bg-slate-50 transition">

                <td class="px-6 py-5 font-bold text-slate-800">
                  ORD-7390
                </td>

                <td class="px-6 py-5 text-slate-600">
                  May 2, 2026 18:45
                </td>

                <td class="px-6 py-5 font-medium text-slate-700">
                  Charlie Brown
                </td>

                <td class="px-6 py-5 text-slate-600">
                  Ergonomic Office Chair
                </td>

                <td class="px-6 py-5 font-bold text-slate-800">
                  $350.00
                </td>

                <td class="px-6 py-5">

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-green-100 text-green-700">
                    Completed
                  </span>

                </td>

                <td class="px-6 py-5 text-right">

                  <button
                    class="w-10 h-10 rounded-xl hover:bg-slate-100 text-slate-500 transition">

                    <i class="fa-solid fa-ellipsis"></i>

                  </button>

                </td>

              </tr>

              <!-- ROW -->
              <tr class="hover:bg-slate-50 transition">

                <td class="px-6 py-5 font-bold text-slate-800">
                  ORD-7389
                </td>

                <td class="px-6 py-5 text-slate-600">
                  May 2, 2026 17:30
                </td>

                <td class="px-6 py-5 font-medium text-slate-700">
                  Diana Prince
                </td>

                <td class="px-6 py-5 text-slate-600">
                  USB-C Hub 7-in-1
                </td>

                <td class="px-6 py-5 font-bold text-slate-800">
                  $45.99
                </td>

                <td class="px-6 py-5">

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-700">
                    Pending
                  </span>

                </td>

                <td class="px-6 py-5 text-right">

                  <button
                    class="w-10 h-10 rounded-xl hover:bg-slate-100 text-slate-500 transition">

                    <i class="fa-solid fa-ellipsis"></i>

                  </button>

                </td>

              </tr>

              <!-- ROW -->
              <tr class="hover:bg-slate-50 transition">

                <td class="px-6 py-5 font-bold text-slate-800">
                  ORD-7388
                </td>

                <td class="px-6 py-5 text-slate-600">
                  May 1, 2026 23:20
                </td>

                <td class="px-6 py-5 font-medium text-slate-700">
                  Evan Wright
                </td>

                <td class="px-6 py-5 text-slate-600">
                  4K Monitor 27 inch
                </td>

                <td class="px-6 py-5 font-bold text-slate-800">
                  $320.00
                </td>

                <td class="px-6 py-5">

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-green-100 text-green-700">
                    Completed
                  </span>

                </td>

                <td class="px-6 py-5 text-right">

                  <button
                    class="w-10 h-10 rounded-xl hover:bg-slate-100 text-slate-500 transition">

                    <i class="fa-solid fa-ellipsis"></i>

                  </button>

                </td>

              </tr>

              <!-- ROW -->
              <tr class="hover:bg-slate-50 transition">

                <td class="px-6 py-5 font-bold text-slate-800">
                  ORD-7387
                </td>

                <td class="px-6 py-5 text-slate-600">
                  May 1, 2026 21:10
                </td>

                <td class="px-6 py-5 font-medium text-slate-700">
                  Fiona Gallagher
                </td>

                <td class="px-6 py-5 text-slate-600">
                  Smartphone Stand
                </td>

                <td class="px-6 py-5 font-bold text-slate-800">
                  $15.00
                </td>

                <td class="px-6 py-5">

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-blue-100 text-blue-700">
                    Processed
                  </span>

                </td>

                <td class="px-6 py-5 text-right">

                  <button
                    class="w-10 h-10 rounded-xl hover:bg-slate-100 text-slate-500 transition">

                    <i class="fa-solid fa-ellipsis"></i>

                  </button>

                </td>

              </tr>

              <!-- ROW -->
              <tr class="hover:bg-slate-50 transition">

                <td class="px-6 py-5 font-bold text-slate-800">
                  ORD-7386
                </td>

                <td class="px-6 py-5 text-slate-600">
                  May 1, 2026 16:05
                </td>

                <td class="px-6 py-5 font-medium text-slate-700">
                  George Miller
                </td>

                <td class="px-6 py-5 text-slate-600">
                  Bluetooth Speaker
                </td>

                <td class="px-6 py-5 font-bold text-slate-800">
                  $55.00
                </td>

                <td class="px-6 py-5">

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-green-100 text-green-700">
                    Completed
                  </span>

                </td>

                <td class="px-6 py-5 text-right">

                  <button
                    class="w-10 h-10 rounded-xl hover:bg-slate-100 text-slate-500 transition">

                    <i class="fa-solid fa-ellipsis"></i>

                  </button>

                </td>

              </tr>

            </tbody>

          </table>

        </div>

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

          <p class="text-slate-500">
            Showing 7 out of 7 orders
          </p>

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

            <button
              class="px-5 h-11 rounded-xl border border-slate-200 bg-slate-100 text-slate-400 font-semibold cursor-not-allowed">
              Previous
            </button>

            <button
              class="px-5 h-11 rounded-xl border border-slate-200 bg-white hover:bg-slate-100 text-slate-700 font-semibold transition">
              Next
            </button>

          </div>

        </div>

      </div>

    </main>

  </div>