@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')

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

    <!-- TOPBAR -->
    <x-topbar title="Dashboard" />

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

    <!-- MONTHLY STATISTIC -->
    <div class="bg-white rounded-2xl p-5 shadow-md">

        <div class="flex items-center justify-between mb-4">

            <div>
                <h2 class="text-black text-xl md:text-2xl font-extrabold">
                    Monthly Statistics
                </h2>

                <p class="text-gray-500 text-sm">
                    Refueling activity per month
                </p>
            </div>

            <div
                class="w-14 h-14 rounded-2xl
                       bg-[#B7E7C0]
                       flex items-center justify-center">

                <i class="fa-solid fa-chart-line text-2xl text-black"></i>
            </div>

        </div>

        <div class="h-[300px] rounded-xl bg-gray-100 p-4">

<!-- GRAPH -->
<div class="flex items-end justify-between h-full gap-3">

    <!-- JAN -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">120</span>
        <div class="bg-[#97E0A3] w-full h-[20%] rounded-t-lg shadow-md"></div>
        <span class="text-xs text-black font-semibold mt-2">Jan</span>
    </div>

    <!-- FEB -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">180</span>
        <div class="bg-[#97E0A3] w-full h-[35%] rounded-t-lg shadow-md"></div>
        <span class="text-xs text-black font-semibold mt-2">Feb</span>
    </div>

    <!-- MAR -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">250</span>
        <div class="bg-[#97E0A3] w-full h-[50%] rounded-t-lg shadow-md"></div>
        <span class="text-xs text-black font-semibold mt-2">Mar</span>
    </div>

    <!-- APR -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">300</span>
        <div class="bg-[#97E0A3] w-full h-[65%] rounded-t-lg shadow-md"></div>
        <span class="text-xs text-black font-semibold mt-2">Apr</span>
    </div>

    <!-- MAY -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">410</span>
        <div class="bg-[#97E0A3] w-full h-[85%] rounded-t-lg shadow-md"></div>
        <span class="text-xs text-black font-semibold mt-2">May</span>
    </div>

    <!-- JUN -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">350</span>
        <div class="bg-[#97E0A3] w-full h-[70%] rounded-t-lg shadow-md"></div>
        <span class="text-xs text-black font-semibold mt-2">Jun</span>
    </div>

</div>

        </div>

    </div>

    <!-- YEARLY STATISTIC -->
    <div class="bg-white rounded-2xl p-5 shadow-md">

        <div class="flex items-center justify-between mb-4">

            <div>
                <h2 class="text-black text-xl md:text-2xl font-extrabold">
                    Yearly Statistics
                </h2>

                <p class="text-gray-500 text-sm">
                    Refueling activity per year
                </p>
            </div>

            <div
                class="w-14 h-14 rounded-2xl
                       bg-[#B7E7C0]
                       flex items-center justify-center">

                <i class="fa-solid fa-chart-column text-2xl text-black"></i>
            </div>

        </div>

        <div class="h-[300px] rounded-xl bg-gray-100 p-4">

<!-- GRAPH -->
<div class="flex items-end justify-between h-full gap-5">

    <!-- 2021 -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">1.2K</span>
        <div class="bg-black w-full h-[30%] rounded-t-lg"></div>
        <span class="text-xs text-black font-semibold mt-2">2021</span>
    </div>

    <!-- 2022 -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">2.4K</span>
        <div class="bg-black w-full h-[50%] rounded-t-lg"></div>
        <span class="text-xs text-black font-semibold mt-2">2022</span>
    </div>

    <!-- 2023 -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">3.8K</span>
        <div class="bg-black w-full h-[70%] rounded-t-lg"></div>
        <span class="text-xs text-black font-semibold mt-2">2023</span>
    </div>

    <!-- 2024 -->
    <div class="flex flex-col items-center justify-end h-full w-full">
        <span class="text-black text-xs font-bold mb-2">5.1K</span>
        <div class="bg-black w-full h-[95%] rounded-t-lg"></div>
        <span class="text-xs text-black font-semibold mt-2">2024</span>
    </div>

</div>

        </div>

    </div>

</div>

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

</div>

@endsection