@extends('layouts.master')
@section('title', 'Product')
  <div class="flex min-h-screen">

    <!-- SIDEBAR -->
    @include('layouts.navbar')
    <!-- MAIN -->
    <main class="flex-1 p-8">

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

        <div>
          <h2 class="text-5xl font-bold text-slate-900">
            Product
          </h2>

          <p class="text-slate-500 mt-2 text-lg">
            Manage your Product.
          </p>
        </div>

        <button
          class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-4 rounded-2xl shadow-md transition flex items-center gap-3 w-fit">

          <i class="fa-solid fa-plus"></i>
          Add New Product

        </button>

      </div>

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

        <!-- SEARCH & FILTER -->
        <div class="p-5 flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b border-slate-100">

          <!-- SEARCH -->
          <div class="relative w-full md: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 sessions..."
              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>

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

            <button
              class="w-11 h-11 rounded-xl border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-slate-100 transition">

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

            </button>

            <select
              class="h-11 px-4 rounded-xl border border-slate-200 bg-white text-slate-700 outline-none focus:ring-4 focus:ring-blue-100">

              <option>All Statuses</option>
              <option>Live</option>
              <option>Scheduled</option>
              <option>Ended</option>

            </select>

          </div>

        </div>

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

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

            <!-- 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 tracking-wide text-slate-500 uppercase">
                  Name Product
                </th>

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

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

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

                <th class="px-6 py-5 text-sm font-bold tracking-wide text-slate-500 uppercase text-right">
                  Actions
                </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">

                  <h3 class="font-bold text-lg text-slate-800">
                    Summer Collection Launch
                  </h3>

                  <p class="text-slate-400 mt-1">
                    LS-101
                  </p>

                </td>

                <td class="px-6 py-5 text-slate-600 font-medium">
                  May 16, 2026 • 01:00
                </td>

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

                  <div
                    class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600">

                    12

                  </div>

                </td>

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

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

                </td>

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

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

                    <button
                      class="w-10 h-10 rounded-xl bg-slate-100 hover:bg-slate-200 flex items-center justify-center text-slate-600 transition">

                      <i class="fa-regular fa-pen-to-square"></i>

                    </button>

                    <button
                      class="w-10 h-10 rounded-xl bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-500 transition">

                      <i class="fa-regular fa-trash-can"></i>

                    </button>

                  </div>

                </td>

              </tr>

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

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

                  <h3 class="font-bold text-lg text-slate-800">
                    Flash Sale Friday
                  </h3>

                  <p class="text-slate-400 mt-1">
                    LS-102
                  </p>

                </td>

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

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

                  <div
                    class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600">

                    5

                  </div>

                </td>

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

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-600 flex items-center gap-2 w-fit">

                    <span class="w-2 h-2 rounded-full bg-red-500"></span>
                    Live

                  </span>

                </td>

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

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

                    <button
                      class="w-10 h-10 rounded-xl bg-slate-100 hover:bg-slate-200 flex items-center justify-center text-slate-600 transition">

                      <i class="fa-regular fa-eye"></i>

                    </button>

                    <button
                      class="w-10 h-10 rounded-xl bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-500 transition">

                      <i class="fa-regular fa-trash-can"></i>

                    </button>

                  </div>

                </td>

              </tr>

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

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

                  <h3 class="font-bold text-lg text-slate-800">
                    Tech Gadgets Review
                  </h3>

                  <p class="text-slate-400 mt-1">
                    LS-103
                  </p>

                </td>

                <td class="px-6 py-5 text-slate-600 font-medium">
                  Apr 28, 2026 • 21:00
                </td>

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

                  <div
                    class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600">

                    8

                  </div>

                </td>

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

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-slate-100 text-slate-600">
                    Ended
                  </span>

                </td>

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

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

                    <button
                      class="w-10 h-10 rounded-xl bg-slate-100 hover:bg-slate-200 flex items-center justify-center text-slate-600 transition">

                      <i class="fa-regular fa-eye"></i>

                    </button>

                    <button
                      class="w-10 h-10 rounded-xl bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-500 transition">

                      <i class="fa-regular fa-trash-can"></i>

                    </button>

                  </div>

                </td>

              </tr>

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

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

                  <h3 class="font-bold text-lg text-slate-800">
                    Q&A and Giveaway
                  </h3>

                  <p class="text-slate-400 mt-1">
                    LS-104
                  </p>

                </td>

                <td class="px-6 py-5 text-slate-600 font-medium">
                  Apr 26, 2026 • 02:30
                </td>

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

                  <div
                    class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600">

                    0

                  </div>

                </td>

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

                  <span
                    class="px-4 py-2 rounded-full text-sm font-semibold bg-slate-100 text-slate-600">
                    Ended
                  </span>

                </td>

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

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

                    <button
                      class="w-10 h-10 rounded-xl bg-slate-100 hover:bg-slate-200 flex items-center justify-center text-slate-600 transition">

                      <i class="fa-regular fa-eye"></i>

                    </button>

                    <button
                      class="w-10 h-10 rounded-xl bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-500 transition">

                      <i class="fa-regular fa-trash-can"></i>

                    </button>

                  </div>

                </td>

              </tr>

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

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

                  <h3 class="font-bold text-lg text-slate-800">
                    Midnight Madness Sale
                  </h3>

                  <p class="text-slate-400 mt-1">
                    LS-105
                  </p>

                </td>

                <td class="px-6 py-5 text-slate-600 font-medium">
                  May 20, 2026 • 07:00
                </td>

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

                  <div
                    class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600">

                    20

                  </div>

                </td>

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

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

                </td>

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

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

                    <button
                      class="w-10 h-10 rounded-xl bg-slate-100 hover:bg-slate-200 flex items-center justify-center text-slate-600 transition">

                      <i class="fa-regular fa-pen-to-square"></i>

                    </button>

                    <button
                      class="w-10 h-10 rounded-xl bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-500 transition">

                      <i class="fa-regular fa-trash-can"></i>

                    </button>

                  </div>

                </td>

              </tr>

            </tbody>

          </table>

        </div>

      </div>

    </main>

  </div>