@extends('layouts.app')

@section('title', 'Master')

@section('content')

<style>
/* WRAPPER */
.dataTables_wrapper {
    color: black !important;
    font-size: 14px;
}

/* TOP AREA */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* SEARCH RIGHT */
.dataTables_wrapper .dataTables_filter {
    justify-content: flex-end;
}

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

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

/* TABLE */
table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: center !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

table.dataTable th,
table.dataTable td {
    text-align: center !important;
    vertical-align: middle !important;
}

/* HEADER */
table.dataTable thead {
    background: black !important;
}

table.dataTable thead th {
    background: black !important;
    color: white !important;
    padding: 14px !important;
    font-weight: 700;
}

/* BODY */
table.dataTable tbody td {
    padding: 12px !important;
    background: white !important;
    color: black !important;
    border-bottom: 1px solid #ddd !important;
}

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

/* PAGINATION */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 20px !important;
    display: flex;
    justify-content: center;
    width: 100%;
}

.dataTables_wrapper .paginate_button {
    border: none !important;
    background: #e5e7eb !important;
    border-radius: 9999px !important;
    margin: 0 4px !important;
    min-width: 35px !important;
}

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

/* INFO */
.dataTables_wrapper .dataTables_info {
    margin-top: 15px !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">

<!-- ================= UNIT LIST ================= -->
<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">
            Unit List
        </h1>

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

            <!-- EXPORT -->
            <button
                class="px-6 h-[50px]
                       rounded-xl
                       bg-[#F5D54E]
                       border-2 border-black
                       text-black
                       text-lg
                       font-extrabold
                       flex items-center gap-2
                       hover:scale-105
                       transition-all duration-300">

                <i class="fa-solid fa-file-export"></i>

                EXPORT

            </button>

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

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

                ADD UNIT

            </button>

        </div>

    </div>

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

        <table id="unitTable"
            class="w-full border border-black rounded-xl overflow-hidden">

            <thead>
                <tr>
                    <th>Unit Code</th>
                    <th>Type</th>
                    <th>Company</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>HD7285</td>
                    <td>Dump Truck</td>
                    <td>KPP</td>

                    <td>
                        <span class="px-3 py-1 rounded-full bg-green-200 text-black font-bold">
                            Active
                        </span>
                    </td>

                    <td>

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

                            <!-- EDIT -->
                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <!-- DELETE -->
                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

                <tr>
                    <td>LVL516</td>
                    <td>Light Vehicle</td>
                    <td>BMC</td>

                    <td>
                        <span class="px-3 py-1 rounded-full bg-green-200 text-black font-bold">
                            Active
                        </span>
                    </td>

                    <td>

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

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

                <tr>
                    <td>EX2101</td>
                    <td>Excavator</td>
                    <td>SSP</td>

                    <td>
                        <span class="px-3 py-1 rounded-full bg-red-200 text-black font-bold">
                            Maintenance
                        </span>
                    </td>

                    <td>

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

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</div>

<!-- ================= WAREHOUSE LIST ================= -->
<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">
            Warehouse List
        </h1>

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

            <!-- EXPORT -->
            <button
                class="px-6 h-[50px]
                       rounded-xl
                       bg-[#F5D54E]
                       border-2 border-black
                       text-black
                       text-lg
                       font-extrabold
                       flex items-center gap-2
                       hover:scale-105
                       transition-all duration-300">

                <i class="fa-solid fa-file-export"></i>

                EXPORT

            </button>

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

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

                ADD WAREHOUSE

            </button>

        </div>

    </div>

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

        <table id="warehouseTable"
            class="w-full border border-black rounded-xl overflow-hidden">

            <thead>
                <tr>
                    <th>Warehouse Code</th>
                    <th>Location</th>
                    <th>Capacity</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>FT0045</td>
                    <td>Site A</td>
                    <td>20.000 L</td>
                    <td>
                        <span class="px-3 py-1 rounded-full bg-green-200 text-black font-bold">
                            Active
                        </span>
                    </td>

                    <td>

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

                            <!-- EDIT -->
                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <!-- DELETE -->
                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

                <tr>
                    <td>FT0046</td>
                    <td>Site B</td>
                    <td>15.000 L</td>
                    <td>
                        <span class="px-3 py-1 rounded-full bg-green-200 text-black font-bold">
                            Active
                        </span>
                    </td>

                    <td>

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

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

                <tr>
                    <td>FT0047</td>
                    <td>Site C</td>
                    <td>10.000 L</td>
                    <td>
                        <span class="px-3 py-1 rounded-full bg-red-200 text-black font-bold">
                            Inactive
                        </span>
                    </td>

                    <td>

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

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</div>
<!-- ================= COMPANY LIST ================= -->
<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">
            Company List
        </h1>

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

            <!-- EXPORT -->
            <button
                class="px-6 h-[50px]
                       rounded-xl
                       bg-[#F5D54E]
                       border-2 border-black
                       text-black
                       text-lg
                       font-extrabold
                       flex items-center gap-2
                       hover:scale-105
                       transition-all duration-300">

                <i class="fa-solid fa-file-export"></i>

                EXPORT

            </button>

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

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

                ADD COMPANY

            </button>

        </div>

    </div>

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

        <table id="companyTable"
            class="w-full border border-black rounded-xl overflow-hidden">

            <thead>
                <tr>
                    <th>Company</th>
                    <th>Location</th>
                    <th>Total Unit</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>KPP</td>
                    <td>Kalimantan</td>
                    <td>120</td>

                    <td>
                        <span class="px-3 py-1 rounded-full bg-green-200 text-black font-bold">
                            Active
                        </span>
                    </td>

                    <td>

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

                            <!-- EDIT -->
                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <!-- DELETE -->
                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

                <tr>
                    <td>BMC</td>
                    <td>Balikpapan</td>
                    <td>85</td>

                    <td>
                        <span class="px-3 py-1 rounded-full bg-green-200 text-black font-bold">
                            Active
                        </span>
                    </td>

                    <td>

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

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

                <tr>
                    <td>SSP</td>
                    <td>Samarinda</td>
                    <td>50</td>

                    <td>
                        <span class="px-3 py-1 rounded-full bg-red-200 text-black font-bold">
                            Inactive
                        </span>
                    </td>

                    <td>

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

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</div>

<!-- ================= USER LIST ================= -->
<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">
            User List
        </h1>

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

            <!-- EXPORT -->
            <button
                class="px-6 h-[50px]
                       rounded-xl
                       bg-[#F5D54E]
                       border-2 border-black
                       text-black
                       text-lg
                       font-extrabold
                       flex items-center gap-2
                       hover:scale-105
                       transition-all duration-300">

                <i class="fa-solid fa-file-export"></i>

                EXPORT

            </button>

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

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

                ADD USER

            </button>

        </div>

    </div>

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

        <table id="userTable"
            class="w-full border border-black rounded-xl overflow-hidden">

            <thead>
                <tr>
                    <th>Name</th>
                    <th>Role</th>
                    <th>Company</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>Ahmad Syhroni</td>
                    <td>Fuelman</td>
                    <td>KPP</td>

                    <td>
                        <span class="px-3 py-1 rounded-full bg-green-200 text-black font-bold">
                            Active
                        </span>
                    </td>

                    <td>

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

                            <!-- EDIT -->
                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <!-- DELETE -->
                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

                <tr>
                    <td>Dimas</td>
                    <td>Operator</td>
                    <td>BMC</td>

                    <td>
                        <span class="px-3 py-1 rounded-full bg-green-200 text-black font-bold">
                            Active
                        </span>
                    </td>

                    <td>

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

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

                <tr>
                    <td>Regi</td>
                    <td>Admin</td>
                    <td>SSP</td>

                    <td>
                        <span class="px-3 py-1 rounded-full bg-red-200 text-black font-bold">
                            Inactive
                        </span>
                    </td>

                    <td>

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

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#A9D8EE]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-pen text-black"></i>

                            </button>

                            <button
                                class="w-10 h-10
                                       rounded-xl
                                       bg-[#F3B7B7]
                                       border-2 border-black
                                       hover:scale-105
                                       transition-all duration-300">

                                <i class="fa-solid fa-trash text-black"></i>

                            </button>

                        </div>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</div>
    </div>

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

            $('#unitTable, #warehouseTable, #companyTable, #userTable').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