@extends('layouts.app')

@section('title', 'History')

@section('content')
<style>

/* ================= DATATABLE WRAPPER ================= */
.dataTables_wrapper {
    color: black !important;
    font-size: 14px !important;
}

/* TOP CONTROL */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px !important;
}

/* SEARCH INPUT */
.dataTables_wrapper .dataTables_filter input {
    background: white !important;
    border: 2px solid black !important;
    border-radius: 12px !important;
    color: black !important;
    padding: 8px 14px !important;
    margin-left: 10px !important;
    outline: none !important;
}

/* LENGTH SELECT */
.dataTables_wrapper .dataTables_length select {
    background: white !important;
    border: 2px solid black !important;
    border-radius: 10px !important;
    color: black !important;
    padding: 5px 10px !important;
    margin: 0 5px !important;
}

/* ================= TABLE ================= */
table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: center !important;
}

/* HEADER */
table.dataTable thead th {
    background: black !important;
    color: white !important;
    padding: 14px !important;
    border: 1px solid #444 !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 700 !important;
}

/* BODY */
table.dataTable tbody td {
    background: white !important;
    color: black !important;
    padding: 12px !important;
    border: 1px solid #d1d5db !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* REMOVE STRIPE */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even {
    background-color: white !important;
}

/* HOVER */
table.dataTable tbody tr:hover td {
    background: #f3f4f6 !important;
}

/* ================= SORT ICON ================= */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: white !important;
}

/* ================= PAGINATION ================= */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 20px !important;
}

/* BUTTON */
.dataTables_wrapper .paginate_button {
    background: #e5e7eb !important;
    border: none !important;
    border-radius: 9999px !important;
    color: black !important;
    margin: 0 4px !important;
    min-width: 35px !important;
    padding: 6px 12px !important;
}

/* ACTIVE */
.dataTables_wrapper .paginate_button.current {
    background: #60A5FA !important;
    color: white !important;
}

/* HOVER */
.dataTables_wrapper .paginate_button:hover {
    background: #93C5FD !important;
    color: black !important;
}

/* INFO */
.dataTables_wrapper .dataTables_info {
    margin-top: 15px !important;
    color: black !important;
}

/* ================= RESPONSIVE ================= */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: black !important;
}

</style>
<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 space-y-5">

        <!-- ================= REFUELING HISTORY ================= -->
        <div class="bg-[#EFEFEF] rounded-2xl p-5 shadow-md">

            <!-- HEADER -->
            <div class="flex items-center justify-between mb-5">

                <h1 class="text-black text-3xl font-extrabold">
                    Refueling History
                </h1>

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

                    EXPORT

                </button>

            </div>

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

                <table id="refuelingTable"
    class="display w-full overflow-hidden rounded-xl">

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

                        <tr>
                            <th>Log No</th>
                            <th>Tanggal</th>
                            <th>Unit</th>
                            <th>Qty</th>
                            <th>Operator</th>
                            <th>Perusahaan</th>
                            <th>Jam</th>
                        </tr>

                    </thead>

                    <tbody class="text-black bg-white">

                        <tr>
                            <td>0806202601</td>
                            <td>08 Juni 2026</td>
                            <td>HD7285</td>
                            <td>1080</td>
                            <td>ANDI</td>
                            <td>KPP</td>
                            <td>08:30 WIB</td>
                        </tr>

                        <tr>
                            <td>0806202602</td>
                            <td>08 Juni 2026</td>
                            <td>HD7284</td>
                            <td>750</td>
                            <td>REGI</td>
                            <td>KPP</td>
                            <td>08:36 WIB</td>
                        </tr>

                        <tr>
                            <td>0806202603</td>
                            <td>08 Juni 2026</td>
                            <td>LVL516</td>
                            <td>20</td>
                            <td>DAVID</td>
                            <td>KPP</td>
                            <td>08:45 WIB</td>
                        </tr>

                        <tr>
                            <td>0806202604</td>
                            <td>08 Juni 2026</td>
                            <td>SSP480</td>
                            <td>78</td>
                            <td>AREN</td>
                            <td>SSP</td>
                            <td>09:00 WIB</td>
                        </tr>

                        <tr>
                            <td>0806202605</td>
                            <td>08 Juni 2026</td>
                            <td>BMCP504</td>
                            <td>200</td>
                            <td>KARDI</td>
                            <td>BMC</td>
                            <td>09:05 WIB</td>
                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

        <!-- ================= TRANSFER HISTORY ================= -->
        <div class="bg-[#EFEFEF] rounded-2xl p-5 shadow-md">

            <!-- HEADER -->
            <div class="flex items-center justify-between mb-5">

                <h1 class="text-black text-3xl font-extrabold">
                    Transfer History
                </h1>

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

                    EXPORT

                </button>

            </div>

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

<table id="transferTable"
    class="display w-full overflow-hidden rounded-xl">

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

                        <tr>
                            <th>Transfer No</th>
                            <th>Tanggal</th>
                            <th>Flowmeter Awal</th>
                            <th>Flowmeter Akhir</th>
                            <th>Volume Transfer</th>
                            <th>Operator</th>
                        </tr>

                    </thead>

                    <tbody class="text-black bg-white">

                        <tr>
                            <td>TRF26001</td>
                            <td>08 Juni 2026</td>
                            <td>999 L</td>
                            <td>1999 L</td>
                            <td>1000 L</td>
                            <td>DIMAS</td>
                        </tr>

                        <tr>
                            <td>TRF26002</td>
                            <td>09 Juni 2026</td>
                            <td>2000 L</td>
                            <td>2850 L</td>
                            <td>850 L</td>
                            <td>ARDI</td>
                        </tr>

                        <tr>
                            <td>TRF26003</td>
                            <td>10 Juni 2026</td>
                            <td>3000 L</td>
                            <td>3900 L</td>
                            <td>900 L</td>
                            <td>OKTO</td>
                        </tr>

                        <tr>
                            <td>TRF26004</td>
                            <td>11 Juni 2026</td>
                            <td>4000 L</td>
                            <td>4700 L</td>
                            <td>700 L</td>
                            <td>REMI</td>
                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

<!-- DATATABLE INIT -->
<script>
    $(document).ready(function() {

        $('#refuelingTable').DataTable({
            responsive: true,
            paging: true,
            searching: true,
            ordering: true,
            info: true,
            lengthChange: true,

            pageLength: 5,
            lengthMenu: [5, 10, 25, 50],

            language: {
                search: "",
                searchPlaceholder: "Search...",
                lengthMenu: "Show _MENU_ data",
                info: "Showing _START_ to _END_ of _TOTAL_ data",
                paginate: {
                    previous: "‹",
                    next: "›"
                }
            }
        });

        $('#transferTable').DataTable({
            responsive: true,
            paging: true,
            searching: true,
            ordering: true,
            info: true,
            lengthChange: true,

            pageLength: 5,
            lengthMenu: [5, 10, 25, 50],

            language: {
                search: "",
                searchPlaceholder: "Search...",
                lengthMenu: "Show _MENU_ data",
                info: "Showing _START_ to _END_ of _TOTAL_ data",
                paginate: {
                    previous: "‹",
                    next: "›"
                }
            }
        });

    });
</script>

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

</div>

@endsection