@extends('layouts.app')

@section('title', 'Transfer')

@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 CONTAINER -->
        <div
            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 Transfer
            </h1>

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

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

                    <!-- FLOWMETER MAINTANK AWAL -->
                    <div>

                        <label class="block text-black text-xl font-medium mb-2">
                            FLOWMETER MAINTANK 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>

                    <!-- VOLUME TANGKI FT AWAL -->
                    <div>

                        <label class="block text-black text-xl font-medium mb-2">
                            VOLUME TANGKI 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>

                    <!-- KETINGGIAN VOLUME TANGKI -->
                    <div>

                        <label class="block text-black text-xl font-medium mb-2">
                            KETINGGIAN VOLUME TANGKI FT 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="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>

                </div>

                <!-- LINE -->
                <div class="border-t-2 border-black/50"></div>

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

                    <!-- JUMLAH TRANSFER -->
                    <div>

                        <label class="block text-black text-xl font-medium mb-2">
                            JUMLAH TRANSFER 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>

                    <!-- KETINGGIAN FT AKHIR -->
                    <div>

                        <label class="block text-black text-xl font-medium mb-2">
                            KETINGGIAN VOLUME FT 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>

                    <!-- FLOWMETER MAINTANK AKHIR -->
                    <div>

                        <label class="block text-black text-xl font-medium mb-2">
                            FLOWMETER MANTANK 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>

                    <!-- 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="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>

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

                    <button
                        type="submit"
                        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">

                        SUBMIT

                    </button>

                </div>

            </form>

        </div>

    </div>

    <!-- BOTTOM NAV -->
    <x-bottom-nav />

</div>

@endsection