@extends('layouts.app')

@section('content')

<div class="kategori-page">

    {{-- =====================================================
         HEADER
    ====================================================== --}}

    <div class="page-header">

        <div>

            <h3>
                <i class="bi bi-tags me-2"></i>
                Data Kategori
            </h3>

            <p>
                Kelola kategori aset laboratorium.
            </p>

        </div>


        @if(auth()->user()->role == 'admin')

            <a
                href="{{ route('kategori.create') }}"
                class="btn btn-primary">

                <i class="bi bi-plus-circle me-1"></i>

                Tambah Kategori

            </a>

        @endif

    </div>


    {{-- =====================================================
         NOTIFIKASI
    ====================================================== --}}

    @if(session('success'))

        <div
            class="alert alert-success alert-dismissible fade show"
            role="alert">

            <i class="bi bi-check-circle me-2"></i>

            {{ session('success') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert">
            </button>

        </div>

    @endif


    {{-- =====================================================
         CARD TABEL
    ====================================================== --}}

    <div class="card shadow-sm border-0 kategori-card">

        <div class="card-header">

            <div>

                <h5 class="mb-1">

                    <i class="bi bi-list-ul me-2"></i>

                    Daftar Kategori

                </h5>

                <small>
                    Daftar kategori aset yang tersedia.
                </small>

            </div>

            <span class="badge bg-primary">

                {{ $kategori->count() }}

                Kategori

            </span>

        </div>


        <div class="card-body">


            {{-- =================================================
                 TABEL
            ================================================== --}}

            <div class="table-responsive">

                <table class="table table-bordered table-hover align-middle kategori-table">

                    <thead class="table-dark">

                        <tr>

                            <th
                                width="70"
                                class="text-center">

                                No

                            </th>

                            <th>

                                Nama Kategori

                            </th>

                            <th>

                                Kode Kategori

                            </th>

                            <th>

                                Keterangan

                            </th>

                            <th
                                width="190"
                                class="text-center">

                                Aksi

                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        @forelse($kategori as $item)

                            <tr>

                                {{-- NO --}}

                                <td class="text-center">

                                    {{ $loop->iteration }}

                                </td>


                                {{-- NAMA --}}

                                <td>

                                    <div class="category-name">

                                        <div class="category-icon">

                                            <i class="bi bi-tag"></i>

                                        </div>

                                        <span>

                                            {{ $item->nama_kategori }}

                                        </span>

                                    </div>

                                </td>


                                {{-- KODE --}}

                                <td>

                                    <span class="badge bg-secondary category-code">

                                        {{ $item->kode_kategori }}

                                    </span>

                                </td>


                                {{-- KETERANGAN --}}

                                <td>

                                    @if($item->keterangan)

                                        <span class="description-text">

                                            {{ $item->keterangan }}

                                        </span>

                                    @else

                                        <span class="text-muted">

                                            -

                                        </span>

                                    @endif

                                </td>


                                {{-- AKSI --}}

                                <td class="text-center">

                                    <div class="action-buttons">


                                        {{-- EDIT --}}

                                        @if(auth()->user()->role == 'admin')

                                            <a
                                                href="{{ route('kategori.edit', $item->id) }}"
                                                class="btn btn-warning btn-sm"
                                                title="Edit kategori">

                                                <i class="bi bi-pencil-square"></i>

                                                <span>
                                                    Edit
                                                </span>

                                            </a>


                                            {{-- HAPUS --}}

                                            <form
                                                action="{{ route('kategori.destroy', $item->id) }}"
                                                method="POST"
                                                class="delete-form">

                                                @csrf

                                                @method('DELETE')

                                                <button
                                                    type="submit"
                                                    class="btn btn-danger btn-sm"
                                                    onclick="return confirm('Yakin ingin menghapus kategori?')"
                                                    title="Hapus kategori">

                                                    <i class="bi bi-trash"></i>

                                                    <span>
                                                        Hapus
                                                    </span>

                                                </button>

                                            </form>

                                        @else

                                            <span class="text-muted">

                                                Tidak ada aksi

                                            </span>

                                        @endif


                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td
                                    colspan="5"
                                    class="text-center py-5">

                                    <div class="empty-category">

                                        <i class="bi bi-tags"></i>

                                        <h6 class="mt-3">

                                            Belum ada data kategori

                                        </h6>

                                        <p class="text-muted mb-0">

                                            Data kategori belum tersedia.

                                        </p>

                                    </div>

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>


{{-- =====================================================
     CSS RESPONSIVE
====================================================== --}}

<style>

/* =====================================================
   PAGE
===================================================== */

.kategori-page {

    width: 100%;

    max-width: 100%;

}


/* =====================================================
   HEADER
===================================================== */

.page-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

}


.page-header h3 {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

}


.page-header p {

    margin: 5px 0 0;

    color: #6c757d;

    font-size: 13px;

}


.page-header .btn {

    white-space: nowrap;

}


/* =====================================================
   CARD
===================================================== */

.kategori-card {

    width: 100%;

    border-radius: 12px;

    overflow: hidden;

}


.kategori-card .card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 15px 20px;

    background: #fff;

    border-bottom: 1px solid #e9ecef;

}


.kategori-card .card-header h5 {

    font-size: 16px;

    font-weight: 700;

}


.kategori-card .card-header small {

    color: #6c757d;

    font-size: 12px;

}


/* =====================================================
   TABLE
===================================================== */

.kategori-table {

    min-width: 850px;

    margin-bottom: 0;

}


.kategori-table th {

    padding: 12px;

    font-size: 13px;

    white-space: nowrap;

}


.kategori-table td {

    padding: 12px;

    font-size: 13px;

}


/* =====================================================
   CATEGORY NAME
===================================================== */

.category-name {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;

}


.category-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    min-width: 35px;

    background: #e7f1ff;

    color: #0d6efd;

    border-radius: 8px;

}


.category-icon i {

    font-size: 16px;

}


/* =====================================================
   KODE
===================================================== */

.category-code {

    font-size: 11px;

    padding: 6px 9px;

}


/* =====================================================
   KETERANGAN
===================================================== */

.description-text {

    color: #495057;

    line-height: 1.5;

}


/* =====================================================
   ACTION
===================================================== */

.action-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;

}


.action-buttons form {

    margin: 0;

}


.action-buttons .btn {

    white-space: nowrap;

}


/* =====================================================
   EMPTY
===================================================== */

.empty-category {

    padding: 15px;

}


.empty-category i {

    font-size: 45px;

    color: #adb5bd;

}


.empty-category h6 {

    font-weight: 600;

    color: #495057;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991.98px) {

    .page-header h3 {

        font-size: 21px;

    }


    .kategori-card .card-header {

        padding: 14px 16px;

    }


    .kategori-table {

        min-width: 800px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767.98px) {

    .page-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }


    .page-header h3 {

        font-size: 20px;

    }


    .page-header p {

        font-size: 12px;

        line-height: 1.5;

    }


    .page-header .btn {

        width: 100%;

    }


    .kategori-card {

        border-radius: 10px;

    }


    .kategori-card .card-header {

        padding: 13px 15px;

    }


    .kategori-card .card-header h5 {

        font-size: 15px;

    }


    .kategori-card .card-body {

        padding: 12px;

    }


    /* TABLE SCROLL */

    .table-responsive {

        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }


    .kategori-table {

        min-width: 800px;

    }


    .kategori-table th,
    .kategori-table td {

        font-size: 12px;

        padding: 10px;

    }


    /* CATEGORY */

    .category-icon {

        width: 32px;

        height: 32px;

        min-width: 32px;

    }


    .category-name {

        gap: 8px;

    }


    /* ACTION */

    .action-buttons .btn {

        font-size: 11px;

    }

}


/* =====================================================
   HP KECIL
===================================================== */

@media (max-width: 575.98px) {

    .page-header h3 {

        font-size: 18px;

    }


    .kategori-card .card-body {

        padding: 10px;

    }


    .kategori-card .card-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }


    .kategori-table {

        min-width: 750px;

    }


    .kategori-table th,
    .kategori-table td {

        padding: 9px;

        font-size: 11px;

    }


    .action-buttons .btn span {

        display: none;

    }


    .action-buttons .btn {

        width: 34px;

        height: 32px;

        padding: 0;

        display: inline-flex;

        align-items: center;

        justify-content: center;

    }


    .empty-category i {

        font-size: 38px;

    }

}

</style>

@endsection