@extends('layouts.app')

@section('title', 'Refueling')

@section('content')

    <div class="h-screen bg-[#d8e0e3] relative overflow-hidden">

        <!-- TOPBAR -->
        <x-topbar />

        <!-- CONTENT -->
        <div class="absolute top-[70px] bottom-[80px] left-0 right-0
           overflow-y-auto p-4">

            <!-- ================= FORM PIC ================= -->
            <div id="formPIC"
                class="bg-[#EFEFEF]
               rounded-2xl
               p-5 md:p-8
               max-w-5xl
               mx-auto
               shadow-md">

                <!-- TITLE -->
                <h1 class="text-black text-3xl md:text-4xl font-semibold text-center mb-8">
                    Form PIC
                </h1>

                <form class="space-y-8">

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

                        <!-- TANGGAL -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                Tanggal
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-regular fa-calendar-days
                                  absolute left-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                                <input type="date"
                                    class="w-full h-[55px]
                                   rounded-xl
                                   border-2 border-black
                                   bg-white
                                   text-black
                                   pl-14 pr-4
                                   text-xl">

                            </div>

                        </div>

                        <!-- SHIFT -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                Shift
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-regular fa-clock
                                  absolute left-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                                <select
                                    class="w-full h-[55px]
                                   rounded-xl
                                   border-2 border-black
                                   bg-white
                                   text-black
                                   pl-14 pr-4
                                   text-xl
                                   appearance-none">

                                    <option>Shift 1</option>
                                    <option>Shift 2</option>

                                </select>

                                <i
                                    class="fa-solid fa-caret-down
                                  absolute right-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                            </div>

                        </div>

                        <!-- SUPPORT DRIVER -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                Support Truck Driver
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-truck
                                  absolute left-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                                <select
                                    class="w-full h-[55px]
                                   rounded-xl
                                   border-2 border-black
                                   bg-white
                                   text-black
                                   pl-14 pr-4
                                   text-xl
                                   appearance-none">

                                    <option>Ahmad Syhroni</option>

                                </select>

                            </div>

                        </div>

                        <!-- WAREHOUSE -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                Warehouse
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-warehouse
                                  absolute left-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                                <select
                                    class="w-full h-[55px]
                                   rounded-xl
                                   border-2 border-black
                                   bg-white
                                   text-black
                                   pl-14 pr-4
                                   text-xl
                                   appearance-none">

                                    <option>FT0045</option>

                                </select>

                            </div>

                        </div>

                        <!-- FUEL MAN -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                Fuel Man
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-gas-pump
                                  absolute left-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                                <select
                                    class="w-full h-[55px]
                                   rounded-xl
                                   border-2 border-black
                                   bg-white
                                   text-black
                                   pl-14 pr-4
                                   text-xl
                                   appearance-none">

                                    <option>Bahlil Lahadalia</option>

                                </select>

                            </div>

                        </div>

                    </div>

                    <!-- BUTTON -->
                    <div class="flex justify-center pt-4">

                        <button type="button" id="nextToStartingPoint"
                            class="w-[220px] h-[60px]
                           rounded-xl
                           bg-[#A9D8EE]
                           text-black
                           text-2xl
                           font-extrabold
                           border-2 border-black
                           hover:scale-105
                           transition-all duration-300">

                            NEXT

                        </button>

                    </div>

                </form>

            </div>

            <!-- ================= FORM STARTING POINT ================= -->
            <div id="formStartingPoint"
                class="hidden
               bg-[#EFEFEF]
               rounded-2xl
               p-5 md:p-8
               max-w-5xl
               mx-auto
               shadow-md">

                <!-- TITLE -->
                <h1 class="text-black text-3xl md:text-4xl font-semibold text-center mb-8">
                    Form Starting Point
                </h1>

                <form class="space-y-8">

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

                        <!-- FLOWMETER -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                FLOWMETER FT AWAL (LITER)
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-gas-pump
                                  absolute left-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                                <input type="number" placeholder="999 L"
                                    class="w-full h-[55px]
                                   rounded-xl
                                   border-2 border-black
                                   bg-white
                                   text-black
                                   pl-14 pr-4
                                   text-xl">

                            </div>

                        </div>

                        <!-- JAM MULAI -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                JAM MULAI
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-regular fa-clock
                                  absolute left-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                                <input type="time"
                                    class="w-full h-[55px]
                                   rounded-xl
                                   border-2 border-black
                                   bg-white
                                   text-black
                                   pl-14 pr-4
                                   text-xl">

                            </div>

                        </div>

                        <!-- KETINGGIAN -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                KETINGGIAN VOLUME AWAL (CM)
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-gas-pump
                                  absolute left-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                                <input type="number" placeholder="999 L"
                                    class="w-full h-[55px]
                                   rounded-xl
                                   border-2 border-black
                                   bg-white
                                   text-black
                                   pl-14 pr-4
                                   text-xl">

                            </div>

                        </div>


                        <!-- VOLUME -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                VOLUME AWAL (LITER)
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-gas-pump
                                  absolute left-4 top-1/2 -translate-y-1/2
                                  text-black text-2xl"></i>

                                <input type="number" placeholder="999 L"
                                    class="w-full h-[55px]
                                   rounded-xl
                                   border-2 border-black
                                   bg-white
                                   text-black
                                   pl-14 pr-4
                                   text-xl">

                            </div>

                        </div>

                    </div>
                    <!-- FOTO -->
                    <div>

                        <label class="block text-black text-xl font-medium mb-2">
                            FOTO FLOWMETER AWAL
                        </label>

                        <button type="button"
                            class="w-full h-[55px]
                               rounded-xl
                               border-2 border-black
                               bg-white
                               text-black
                               text-xl
                               font-medium
                               flex items-center justify-center gap-3">

                            <i class="fa-solid fa-camera text-2xl"></i>

                            Open Camera

                        </button>

                        <!-- PREVIEW -->
                        <div
                            class="mt-4 h-[170px]
                               border-2 border-black
                               rounded-xl
                               flex items-center justify-center
                               bg-white">

                            <i class="fa-regular fa-images text-[90px] text-black"></i>

                        </div>

                    </div>

                    <!-- BUTTON -->
                    <div class="flex justify-center gap-6 pt-4">

                        <button type="button" id="backToPIC"
                            class="w-[220px] h-[60px]
                           rounded-xl
                           bg-[#F3B7B7]
                           text-black
                           text-2xl
                           font-extrabold
                           border-2 border-black">

                            BACK

                        </button>

                        <button type="button" id="startRefueling"
                            class="w-[220px] h-[60px]
                           rounded-xl
                           bg-[#A9D8EE]
                           text-black
                           text-2xl
                           font-extrabold
                           border-2 border-black">

                            START

                        </button>

                    </div>

                </form>

            </div>

            <!-- ================= FORM REFUELING ================= -->
            <div id="formRefueling"
                class="hidden
           bg-[#EFEFEF]
           rounded-2xl
           p-5 md:p-8
           max-w-5xl
           mx-auto
           shadow-md">

                <!-- TITLE -->
                <h1 class="text-black text-3xl md:text-4xl font-semibold text-center mb-8">
                    Form Refueling
                </h1>

                <form class="space-y-8">

                    <!-- GRID -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

                        <!-- UNIT -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                UNIT
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-truck
                              absolute left-4 top-1/2 -translate-y-1/2
                              text-black text-2xl"></i>

                                <select
                                    class="w-full h-[55px]
                               rounded-xl
                               border-2 border-black
                               bg-white
                               text-black
                               pl-14 pr-4
                               text-xl
                               appearance-none">

                                    <option>HD7285</option>
                                    <option>HD7286</option>

                                </select>

                                <i
                                    class="fa-solid fa-caret-down
                              absolute right-4 top-1/2 -translate-y-1/2
                              text-black text-2xl"></i>

                            </div>

                        </div>

                        <!-- JAM REFUELING -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                JAM REFUELING
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-regular fa-clock
                              absolute left-4 top-1/2 -translate-y-1/2
                              text-black text-2xl"></i>

                                <input type="time"
                                    class="w-full h-[55px]
                               rounded-xl
                               border-2 border-black
                               bg-white
                               text-black
                               pl-14 pr-4
                               text-xl">

                            </div>

                        </div>

                        <!-- PERUSAHAAN -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                PERUSAHAAN
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-building
                              absolute left-4 top-1/2 -translate-y-1/2
                              text-black text-2xl"></i>

                                <select
                                    class="w-full h-[55px]
                               rounded-xl
                               border-2 border-black
                               bg-white
                               text-black
                               pl-14 pr-4
                               text-xl
                               appearance-none">

                                    <option>KPP</option>
                                    <option>ABC</option>

                                </select>

                                <i
                                    class="fa-solid fa-caret-down
                              absolute right-4 top-1/2 -translate-y-1/2
                              text-black text-2xl"></i>

                            </div>

                        </div>

                        <!-- QUANTITY -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                QUANTITY
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-gas-pump
                              absolute left-4 top-1/2 -translate-y-1/2
                              text-black text-2xl"></i>

                                <input type="number" placeholder="288"
                                    class="w-full h-[55px]
                               rounded-xl
                               border-2 border-black
                               bg-white
                               text-black
                               pl-14 pr-4
                               text-xl">

                            </div>

                        </div>

                        <!-- HM/KM -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                HM/KM
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-gauge-high
                              absolute left-4 top-1/2 -translate-y-1/2
                              text-black text-2xl"></i>

                                <input type="number" placeholder="999"
                                    class="w-full h-[55px]
                               rounded-xl
                               border-2 border-black
                               bg-white
                               text-black
                               pl-14 pr-4
                               text-xl">

                            </div>

                        </div>

                        <!-- OPERATOR -->
                        <div>

                            <label class="block text-black text-xl font-medium mb-2">
                                OPERATOR
                            </label>

                            <div class="relative">

                                <i
                                    class="fa-solid fa-user
                              absolute left-4 top-1/2 -translate-y-1/2
                              text-black text-2xl"></i>

                                <input type="text" value="Ahmad Syhroni"
                                    class="w-full h-[55px]
                               rounded-xl
                               border-2 border-black
                               bg-white
                               text-black
                               pl-14 pr-4
                               text-xl">

                            </div>

                        </div>

                    </div>

                    <!-- SAVE -->
                    <div class="flex justify-center">

                        <button type="button"
                            class="w-[220px] h-[60px]
                       rounded-xl
                       bg-[#F5D54E]
                       text-black
                       text-2xl
                       font-extrabold
                       border-2 border-black
                       hover:scale-105
                       transition-all duration-300">

                            SAVE

                        </button>

                    </div>

                    <!-- ACTION BUTTON -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">

                        <!-- REVIEW -->
                        <button type="button" id="showLogsheet"
                            class="h-[60px]
                       rounded-xl
                       bg-[#A9D8EE]
                       text-black
                       text-2xl
                       font-extrabold
                       border-2 border-black
                       hover:scale-105
                       transition-all duration-300">

                            REVIEW

                        </button>

                        <!-- ADD -->
                        <button type="button"
                            class="h-[60px]
                       rounded-xl
                       bg-[#F5B955]
                       text-black
                       text-2xl
                       font-extrabold
                       border-2 border-black
                       hover:scale-105
                       transition-all duration-300">

                            ADD

                        </button>

                        <!-- END -->
                        <button type="button" id="showEndPoint"
                            class="h-[60px]
                       rounded-xl
                       bg-[#8ED694]
                       text-black
                       text-2xl
                       font-extrabold
                       border-2 border-black
                       hover:scale-105
                       transition-all duration-300">

                            END

                        </button>

                    </div>

                </form>

            </div>

            <!-- ================= LOGSHEET REFUELING ================= -->
            <div id="logsheetRefueling"
                class="hidden
           bg-[#EFEFEF]
           rounded-2xl
           p-5 md:p-8
           max-w-6xl
           mx-auto
           shadow-md">

                <!-- TOP ACTION -->
                <div class="mb-6">

                    <button type="button" id="backToRefueling"
                        class="w-[180px] h-[55px]
                   rounded-xl
                   bg-[#F3B7B7]
                   text-black
                   text-2xl
                   font-extrabold
                   border-2 border-black
                   hover:scale-105
                   transition-all duration-300">

                        BACK

                    </button>

                </div>

                <!-- TITLE -->
                <h1 class="text-center text-black text-3xl md:text-4xl font-bold mb-8">
                    LOGSHEET REFUELING
                </h1>

                <!-- HEADER INFO -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">

                    <!-- LEFT -->
                    <div class="space-y-2 text-black text-lg md:text-xl font-semibold">

                        <div class="flex gap-3">
                            <span class="w-[130px]">LOG NO</span>
                            <span>: OB06202601</span>
                        </div>

                        <div class="flex gap-3">
                            <span class="w-[130px]">TANGGAL</span>
                            <span>: 06 JUNI 2026</span>
                        </div>

                        <div class="flex gap-3">
                            <span class="w-[130px]">SHIFT</span>
                            <span>: 1</span>
                        </div>

                    </div>

                    <!-- RIGHT -->
                    <div class="space-y-2 text-black text-lg md:text-xl font-semibold">

                        <div class="flex gap-3">
                            <span class="w-[150px]">WAREHOUSE</span>
                            <span>: FT0045</span>
                        </div>

                        <div class="flex gap-3">
                            <span class="w-[150px]">FUELMAN</span>
                            <span>: DIMAS</span>
                        </div>

                        <div class="flex gap-3">
                            <span class="w-[150px]">STD</span>
                            <span>: ARDI</span>
                        </div>

                    </div>

                </div>

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

                    <table class="w-full border-2 border-black text-black">

                        <!-- HEAD -->
                        <thead>

                            <tr class="bg-black text-white text-lg">

                                <th class="border border-black px-3 py-3">
                                    JAM
                                </th>

                                <th class="border border-black px-3 py-3">
                                    UNIT
                                </th>

                                <th class="border border-black px-3 py-3">
                                    HM
                                </th>

                                <th class="border border-black px-3 py-3">
                                    Qty Issued
                                </th>

                                <th class="border border-black px-3 py-3">
                                    Operator
                                </th>

                            </tr>

                        </thead>

                        <!-- BODY -->
                        <tbody class="bg-white text-center text-lg">

                            <tr>

                                <td class="border border-black py-2">
                                    08:30 WIB
                                </td>

                                <td class="border border-black py-2">
                                    HD7285
                                </td>

                                <td class="border border-black py-2">
                                    5200
                                </td>

                                <td class="border border-black py-2">
                                    1080
                                </td>

                                <td class="border border-black py-2">
                                    ANDI
                                </td>

                            </tr>

                            <tr>

                                <td class="border border-black py-2">
                                    08:36 WIB
                                </td>

                                <td class="border border-black py-2">
                                    HD7284
                                </td>

                                <td class="border border-black py-2">
                                    400
                                </td>

                                <td class="border border-black py-2">
                                    750
                                </td>

                                <td class="border border-black py-2">
                                    REGI
                                </td>

                            </tr>

                            <!-- DUMMY EMPTY ROW -->
                            @for ($i = 0; $i < 12; $i++)
                                <tr class="h-[42px]">

                                    <td class="border border-black"></td>
                                    <td class="border border-black"></td>
                                    <td class="border border-black"></td>
                                    <td class="border border-black"></td>
                                    <td class="border border-black"></td>

                                </tr>
                            @endfor

                        </tbody>

                    </table>

                </div>

            </div>

            <!-- ================= FORM END POINT ================= -->
            <div id="formEndPoint"
                class="hidden
                    bg-[#EFEFEF]
                    rounded-2xl
                    p-5 md:p-8
                    max-w-5xl
                    mx-auto
                    shadow-md">

                <!-- TITLE -->
                <h1 class="text-black text-3xl md:text-4xl font-semibold text-center mb-8">
                    Form End Point
                </h1>

                <form class="space-y-8">

                    <!-- GRID -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

                        <!-- LEFT SIDE -->
                        <div class="space-y-6">

                            <!-- FLOWMETER -->
                            <div>

                                <label class="block text-black text-xl font-medium mb-2">
                                    FLOWMETER FT AKHIR (LITER)
                                </label>

                                <div class="relative">

                                    <i
                                        class="fa-solid fa-gas-pump
                                            absolute left-4 top-1/2 -translate-y-1/2
                                            text-black text-2xl"></i>

                                    <input type="number" placeholder="999 L"
                                        class="w-full h-[55px]
                                            rounded-xl
                                            border-2 border-black
                                            bg-white
                                            text-black
                                            pl-14 pr-4
                                            text-xl">

                                </div>

                            </div>

                            <!-- KETINGGIAN -->
                            <div>

                                <label class="block text-black text-xl font-medium mb-2">
                                    KETINGGIAN VOLUME AKHIR (CM)
                                </label>

                                <div class="relative">

                                    <i
                                        class="fa-solid fa-gas-pump
                                            absolute left-4 top-1/2 -translate-y-1/2
                                            text-black text-2xl"></i>

                                    <input type="number" placeholder="9999 CM"
                                        class="w-full h-[55px]
                                            rounded-xl
                                            border-2 border-black
                                            bg-white
                                            text-black
                                            pl-14 pr-4
                                            text-xl">

                                </div>

                            </div>

                            <!-- JUMLAH REFUELING -->
                            <div>

                                <label class="block text-black text-xl font-medium mb-2">
                                    JUMLAH REFUELING (LITER)
                                </label>

                                <div class="relative">

                                    <i
                                        class="fa-solid fa-gas-pump
                                            absolute left-4 top-1/2 -translate-y-1/2
                                            text-black text-2xl"></i>

                                    <input type="number" placeholder="999 L"
                                        class="w-full h-[55px]
                                            rounded-xl
                                            border-2 border-black
                                            bg-white
                                            text-black
                                            pl-14 pr-4
                                            text-xl">

                                </div>

                            </div>

                            <!-- JUMLAH FLOWMETER -->
                            <div>

                                <label class="block text-black text-xl font-medium mb-2">
                                    JUMLAH REFUELING BY FLOWMETER (LITER)
                                </label>

                                <div class="relative">

                                    <i
                                        class="fa-solid fa-gas-pump
                                            absolute left-4 top-1/2 -translate-y-1/2
                                            text-black text-2xl"></i>

                                    <input type="number" placeholder="999 L"
                                        class="w-full h-[55px]
                                            rounded-xl
                                            border-2 border-black
                                            bg-white
                                            text-black
                                            pl-14 pr-4
                                            text-xl">

                                </div>

                            </div>

                        </div>

                        <!-- RIGHT SIDE -->
                        <div class="space-y-6">

                            <!-- JAM BERAKHIR -->
                            <div>

                                <label class="block text-black text-xl font-medium mb-2">
                                    JAM BERAKHIR
                                </label>

                                <div class="relative">

                                    <i
                                        class="fa-regular fa-clock
                                            absolute left-4 top-1/2 -translate-y-1/2
                                            text-black text-2xl"></i>

                                    <input type="time"
                                        class="w-full h-[55px]
                                            rounded-xl
                                            border-2 border-black
                                            bg-white
                                            text-black
                                            pl-14 pr-4
                                            text-xl">

                                </div>

                            </div>

                            <!-- VOLUME AKHIR -->
                            <div>

                                <label class="block text-black text-xl font-medium mb-2">
                                    VOLUME AKHIR (LITER)
                                </label>

                                <div class="relative">

                                    <i
                                        class="fa-solid fa-gas-pump
                                            absolute left-4 top-1/2 -translate-y-1/2
                                            text-black text-2xl"></i>

                                    <input type="number" placeholder="9999 L"
                                        class="w-full h-[55px]
                                            rounded-xl
                                            border-2 border-black
                                            bg-white
                                            text-black
                                            pl-14 pr-4
                                            text-xl">

                                </div>

                            </div>

                            <!-- SELISIH -->
                            <div>

                                <label class="block text-black text-xl font-medium mb-2">
                                    SELISIH
                                </label>

                                <div class="relative">

                                    <i
                                        class="fa-solid fa-gas-pump
                                            absolute left-4 top-1/2 -translate-y-1/2
                                            text-black text-2xl"></i>

                                    <input type="number" placeholder="999"
                                        class="w-full h-[55px]
                                            rounded-xl
                                            border-2 border-black
                                            bg-white
                                            text-black
                                            pl-14 pr-4
                                            text-xl">

                                </div>

                            </div>

                            <!-- FOTO -->
                            <div>

                                <label class="block text-black text-xl font-medium mb-2">
                                    FOTO FLOWMETER AKHIR
                                </label>

                                <button type="button"
                                    class="w-full h-[55px]
                                        rounded-xl
                                        border-2 border-black
                                        bg-white
                                        text-black
                                        text-xl
                                        font-medium
                                        flex items-center justify-center gap-3">

                                    <i class="fa-solid fa-camera text-2xl"></i>

                                    Open Camera

                                </button>

                                <!-- PREVIEW -->
                                <div
                                    class="mt-4 h-[170px]
                                        border-2 border-black
                                        rounded-xl
                                        flex items-center justify-center
                                        bg-white">

                                    <i class="fa-regular fa-images text-[90px] text-black"></i>

                                </div>

                            </div>

                        </div>

                    </div>

                    <!-- BUTTON -->
                    <div class="flex justify-center gap-6 pt-4">

                        <!-- REVIEW -->
                        <button type="button" id="reviewEndBtn"
                            class="w-[220px] h-[60px]
                                rounded-xl
                                bg-[#A9D8EE]
                                text-black
                                text-2xl
                                font-extrabold
                                border-2 border-black
                                hover:scale-105
                                transition-all duration-300">

                            REVIEW

                        </button>

                        <!-- DONE -->
                        <button type="submit"
                            class="w-[220px] h-[60px]
                                rounded-xl
                                bg-[#8ED694]
                                text-black
                                text-2xl
                                font-extrabold
                                border-2 border-black
                                hover:scale-105
                                transition-all duration-300">

                            DONE

                        </button>

                    </div>

                </form>

            </div>

            <!-- ================= LOGSHEET END REVIEW ================= -->
            <div id="logsheetEndReview"
                class="hidden
           bg-[#EFEFEF]
           rounded-2xl
           p-5 md:p-8
           max-w-6xl
           mx-auto
           shadow-md">

                <!-- TOP ACTION -->
                <div class="flex items-center justify-between mb-6">

                    <!-- BACK -->
                    <button type="button" id="backToEndPoint"
                        class="w-[180px] h-[55px]
                   rounded-xl
                   bg-[#F3B7B7]
                   text-black
                   text-2xl
                   font-extrabold
                   border-2 border-black
                   hover:scale-105
                   transition-all duration-300">

                        BACK

                    </button>

                    <!-- EXPORT -->
                    <button type="button"
                        class="w-[180px] h-[55px]
                   rounded-xl
                   bg-[#8ED694]
                   text-black
                   text-2xl
                   font-extrabold
                   border-2 border-black
                   hover:scale-105
                   transition-all duration-300">

                        EXPORT

                    </button>

                </div>

                <!-- TITLE -->
                <h1 class="text-center text-black text-3xl font-bold mb-6">
                    LOGSHEET REFUELING
                </h1>

                <!-- HEADER INFO -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 text-black text-lg">

                    <!-- LEFT -->
                    <div class="space-y-2">

                        <div class="flex gap-2">
                            <span class="font-bold">LOG NO</span>
                            <span>: 0806202601</span>
                        </div>

                        <div class="flex gap-2">
                            <span class="font-bold">TANGGAL</span>
                            <span>: 08 JUNI 2026</span>
                        </div>

                        <div class="flex gap-2">
                            <span class="font-bold">SHIFT</span>
                            <span>: 1</span>
                        </div>

                    </div>

                    <!-- CENTER -->
                    <div class="space-y-2">

                        <div class="flex gap-2">
                            <span class="font-bold">WAREHOUSE</span>
                            <span>: FT0045</span>
                        </div>

                        <div class="flex gap-2">
                            <span class="font-bold">FUELMAN</span>
                            <span>: DIMAS</span>
                        </div>

                        <div class="flex gap-2">
                            <span class="font-bold">STD</span>
                            <span>: ARDI</span>
                        </div>

                    </div>

                    <!-- RIGHT -->
                    <div class="space-y-2 md:text-right">

                        <div class="flex md:justify-end gap-2">
                            <span class="font-bold">JAM</span>
                            <span>: 08:30 - 12.00 WIB</span>
                        </div>

                    </div>

                </div>

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

                    <table class="w-full border-2 border-black text-black">

                        <!-- HEAD -->
                        <thead class="bg-black text-white">

                            <tr>

                                <th class="border border-black px-3 py-2">
                                    JAM
                                </th>

                                <th class="border border-black px-3 py-2">
                                    Unit
                                </th>

                                <th class="border border-black px-3 py-2">
                                    HM/KM
                                </th>

                                <th class="border border-black px-3 py-2">
                                    Qty Issued
                                </th>

                                <th class="border border-black px-3 py-2">
                                    Operator
                                </th>

                                <th class="border border-black px-3 py-2">
                                    Perusahaan
                                </th>

                            </tr>

                        </thead>

                        <!-- BODY -->
                        <tbody class="bg-white">

                            <tr>
                                <td class="border border-black px-3 py-2 text-center">08:30 WIB</td>
                                <td class="border border-black px-3 py-2 text-center">HD7285</td>
                                <td class="border border-black px-3 py-2 text-center">520</td>
                                <td class="border border-black px-3 py-2 text-center">1080</td>
                                <td class="border border-black px-3 py-2 text-center">ANDI</td>
                                <td class="border border-black px-3 py-2 text-center">KPP</td>
                            </tr>

                            <tr>
                                <td class="border border-black px-3 py-2 text-center">08:36 WIB</td>
                                <td class="border border-black px-3 py-2 text-center">HD7284</td>
                                <td class="border border-black px-3 py-2 text-center">400</td>
                                <td class="border border-black px-3 py-2 text-center">750</td>
                                <td class="border border-black px-3 py-2 text-center">REGI</td>
                                <td class="border border-black px-3 py-2 text-center">KPP</td>
                            </tr>

                            <tr>
                                <td class="border border-black px-3 py-2 text-center">08:45 WIB</td>
                                <td class="border border-black px-3 py-2 text-center">LVI-516</td>
                                <td class="border border-black px-3 py-2 text-center">23342</td>
                                <td class="border border-black px-3 py-2 text-center">20</td>
                                <td class="border border-black px-3 py-2 text-center">DAVID</td>
                                <td class="border border-black px-3 py-2 text-center">KPP</td>
                            </tr>

                            <tr>
                                <td class="border border-black px-3 py-2 text-center">09:00 WIB</td>
                                <td class="border border-black px-3 py-2 text-center">SSP480</td>
                                <td class="border border-black px-3 py-2 text-center">1350</td>
                                <td class="border border-black px-3 py-2 text-center">78</td>
                                <td class="border border-black px-3 py-2 text-center">AREN</td>
                                <td class="border border-black px-3 py-2 text-center">SSP</td>
                            </tr>

                            <!-- EMPTY ROW -->
                            @for ($i = 0; $i < 8; $i++)
                                <tr>
                                    <td class="border border-black py-4"></td>
                                    <td class="border border-black"></td>
                                    <td class="border border-black"></td>
                                    <td class="border border-black"></td>
                                    <td class="border border-black"></td>
                                    <td class="border border-black"></td>
                                </tr>
                            @endfor

                        </tbody>

                    </table>

                </div>

            </div>
        </div>

        <script>
            const formPIC = document.getElementById('formPIC');
            const formStartingPoint = document.getElementById('formStartingPoint');

            const nextBtn = document.getElementById('nextToStartingPoint');
            const backBtn = document.getElementById('backToPIC');

            nextBtn.addEventListener('click', () => {
                formPIC.classList.add('hidden');
                formStartingPoint.classList.remove('hidden');
            });

            backBtn.addEventListener('click', () => {
                formStartingPoint.classList.add('hidden');
                formPIC.classList.remove('hidden');
            });
            const formRefueling = document.getElementById('formRefueling');
            const startBtn = document.getElementById('startRefueling');

            startBtn.addEventListener('click', () => {
                formStartingPoint.classList.add('hidden');
                formRefueling.classList.remove('hidden');
            });
        </script>
        <script>
            const logsheetRefueling = document.getElementById('logsheetRefueling');

            const reviewBtn = document.getElementById('showLogsheet');
            const backToRefuelingBtn = document.getElementById('backToRefueling');

            reviewBtn.addEventListener('click', () => {
                formRefueling.classList.add('hidden');
                logsheetRefueling.classList.remove('hidden');
            });

            backToRefuelingBtn.addEventListener('click', () => {
                logsheetRefueling.classList.add('hidden');
                formRefueling.classList.remove('hidden');
            });

            const formEndPoint = document.getElementById('formEndPoint');
            const endBtn = document.getElementById('showEndPoint');

            endBtn.addEventListener('click', () => {
                formRefueling.classList.add('hidden');
                formEndPoint.classList.remove('hidden');
            });
        </script>
        <script>
            const logsheetEndReview = document.getElementById('logsheetEndReview');

            const reviewEndBtn = document.getElementById('reviewEndBtn');
            const backToEndPoint = document.getElementById('backToEndPoint');

            // OPEN REVIEW
            reviewEndBtn.addEventListener('click', () => {

                formEndPoint.classList.add('hidden');
                logsheetEndReview.classList.remove('hidden');

            });

            // BACK TO END POINT
            backToEndPoint.addEventListener('click', () => {

                logsheetEndReview.classList.add('hidden');
                formEndPoint.classList.remove('hidden');

            });
        </script>
        <!-- BOTTOM NAV -->
        <x-bottom-nav />

    </div>

@endsection