@extends('layouts.app')

@section('content')

<div class="aset-page">

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

    <div class="aset-header">

        <div>

            <h3>
                <i class="bi bi-pc-display me-2"></i>
                Data Aset Laboratorium
            </h3>

            <p>
                Kelola dan pantau seluruh aset laboratorium.
            </p>

        </div>


        @if(in_array(auth()->user()->role, ['admin','staff_lab']))

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

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

                Tambah Aset

            </a>

        @endif

    </div>


    {{-- =====================================================
         SUCCESS MESSAGE
    ====================================================== --}}

    @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


    {{-- =====================================================
         FILTER
    ====================================================== --}}

    <div class="card shadow-sm border-0 filter-card mb-4">

        <div class="card-header">

            <div>

                <h5 class="mb-1">

                    <i class="bi bi-funnel me-2"></i>

                    Pencarian & Filter

                </h5>

                <small>
                    Gunakan filter untuk menemukan aset dengan lebih cepat.
                </small>

            </div>

        </div>


        <div class="card-body">

            <form
                method="GET"
                action="{{ route('aset.index') }}">

                <div class="row g-3">


                    {{-- PENCARIAN --}}

                    <div class="col-12 col-md-6 col-lg-3">

                        <label class="form-label">

                            Cari Aset

                        </label>

                        <input
                            type="text"
                            name="search"
                            class="form-control"
                            placeholder="Kode / nama / merk..."
                            value="{{ request('search') }}">

                    </div>


                    {{-- LABORATORIUM --}}

                    <div class="col-12 col-md-6 col-lg-3">

                        <label class="form-label">

                            Laboratorium

                        </label>

                        <select
                            name="laboratorium"
                            class="form-select">

                            <option value="">
                                Semua Laboratorium
                            </option>

                            @foreach($laboratorium as $lab)

                                <option
                                    value="{{ $lab->id }}"
                                    {{ request('laboratorium') == $lab->id ? 'selected' : '' }}>

                                    {{ $lab->nama_lab }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    {{-- KONDISI --}}

                    <div class="col-12 col-md-6 col-lg-2">

                        <label class="form-label">

                            Kondisi

                        </label>

                        <select
                            name="kondisi"
                            class="form-select">

                            <option value="">
                                Semua Kondisi
                            </option>

                            <option
                                value="Baik"
                                {{ request('kondisi') == 'Baik' ? 'selected' : '' }}>

                                Baik

                            </option>

                            <option
                                value="Rusak Ringan"
                                {{ request('kondisi') == 'Rusak Ringan' ? 'selected' : '' }}>

                                Rusak Ringan

                            </option>

                            <option
                                value="Rusak Berat"
                                {{ request('kondisi') == 'Rusak Berat' ? 'selected' : '' }}>

                                Rusak Berat

                            </option>

                        </select>

                    </div>


                    {{-- SORT --}}

                    <div class="col-12 col-md-6 col-lg-2">

                        <label class="form-label">

                            Urutkan

                        </label>

                        <select
                            name="sort"
                            class="form-select">

                            <option value="">
                                Urutkan
                            </option>

                            <option
                                value="nama_asc"
                                {{ request('sort') == 'nama_asc' ? 'selected' : '' }}>

                                Nama A-Z

                            </option>

                            <option
                                value="nama_desc"
                                {{ request('sort') == 'nama_desc' ? 'selected' : '' }}>

                                Nama Z-A

                            </option>

                            <option
                                value="tahun_baru"
                                {{ request('sort') == 'tahun_baru' ? 'selected' : '' }}>

                                Tahun Terbaru

                            </option>

                            <option
                                value="tahun_lama"
                                {{ request('sort') == 'tahun_lama' ? 'selected' : '' }}>

                                Tahun Terlama

                            </option>

                        </select>

                    </div>


                    {{-- BUTTON CARI --}}

                    <div class="col-12 col-md-6 col-lg-2">

                        <label class="form-label">

                            &nbsp;

                        </label>

                        <button
                            type="submit"
                            class="btn btn-success w-100">

                            <i class="bi bi-search me-1"></i>

                            Cari

                        </button>

                    </div>

                </div>


                {{-- RESET --}}

                <div class="mt-3">

                    <a
                        href="{{ route('aset.index') }}"
                        class="btn btn-secondary btn-sm">

                        <i class="bi bi-arrow-counterclockwise me-1"></i>

                        Reset Filter

                    </a>

                </div>

            </form>

        </div>

    </div>


    {{-- =====================================================
         TABLE
    ====================================================== --}}

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

        <div class="card-header">

            <div>

                <h5 class="mb-1">

                    <i class="bi bi-box-seam me-2"></i>

                    Daftar Aset

                </h5>

                <small>
                    Data aset laboratorium yang terdaftar.
                </small>

            </div>

            <span class="badge bg-primary">

                {{ $aset->total() }}

                Aset

            </span>

        </div>


        <div class="card-body">

            {{-- TABLE RESPONSIVE --}}

            <div class="table-responsive">

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

                    <thead class="table-dark">

                        <tr>

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

                                No

                            </th>

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

                                Foto

                            </th>

                            <th>

                                Kode

                            </th>

                            <th>

                                Nama Aset

                            </th>

                            <th>

                                Kategori

                            </th>

                            <th>

                                Laboratorium

                            </th>

                            <th>

                                Kondisi

                            </th>

                            <th
                                class="text-center">

                                Aksi

                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        @forelse($aset as $item)

                            <tr>


                                {{-- NO --}}

                                <td class="text-center">

                                    {{ $aset->firstItem() + $loop->index }}

                                </td>


                                {{-- FOTO --}}

                                <td class="text-center">

                                    @if($item->foto)

                                        <img
                                            src="{{ asset('foto_aset/'.$item->foto) }}"
                                            class="asset-photo"
                                            alt="{{ $item->nama_aset }}">

                                    @else

                                        <div class="no-photo">

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

                                        </div>

                                    @endif

                                </td>


                                {{-- KODE --}}

                                <td>

                                    <span class="asset-code">

                                        {{ $item->kode_aset }}

                                    </span>

                                </td>


                                {{-- NAMA --}}

                                <td>

                                    <strong>

                                        {{ $item->nama_aset }}

                                    </strong>

                                </td>


                                {{-- KATEGORI --}}

                                <td>

                                    {{ $item->kategori->nama_kategori ?? '-' }}

                                </td>


                                {{-- LABORATORIUM --}}

                                <td>

                                    {{ $item->laboratorium->nama_lab ?? '-' }}

                                </td>


                                {{-- KONDISI --}}

                                <td>

                                    @if($item->kondisi == "Baik")

                                        <span class="badge bg-success">

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

                                            Baik

                                        </span>

                                    @elseif($item->kondisi == "Rusak Ringan")

                                        <span class="badge bg-warning text-dark">

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

                                            Rusak Ringan

                                        </span>

                                    @else

                                        <span class="badge bg-danger">

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

                                            Rusak Berat

                                        </span>

                                    @endif

                                </td>


                                {{-- AKSI --}}

                                <td>

                                    <div class="asset-actions">


                                        {{-- DETAIL --}}

                                        <a
                                            href="{{ route('aset.show', $item->id) }}"
                                            class="btn btn-info btn-sm"
                                            title="Detail">

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

                                            <span>
                                                Detail
                                            </span>

                                        </a>


                                        {{-- ADMIN / STAFF --}}

                                        @if(in_array(auth()->user()->role, ['admin','staff_lab']))


                                            {{-- QR --}}

                                            <a
                                                href="{{ route('aset.qrcode', $item->id) }}"
                                                class="btn btn-success btn-sm"
                                                title="QR Code">

                                                <i class="bi bi-qr-code"></i>

                                                <span>
                                                    QR
                                                </span>

                                            </a>


                                            {{-- EDIT --}}

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

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

                                                <span>
                                                    Edit
                                                </span>

                                            </a>

                                        @endif


                                        {{-- DELETE ADMIN --}}

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

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

                                                @csrf

                                                @method('DELETE')

                                                <button
                                                    type="submit"
                                                    class="btn btn-danger btn-sm"
                                                    title="Hapus"
                                                    onclick="return confirm('Hapus aset ini?')">

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

                                                    <span>
                                                        Hapus
                                                    </span>

                                                </button>

                                            </form>

                                        @endif

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

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

                                    <div class="empty-asset">

                                        <i class="bi bi-box-seam"></i>

                                        <h6 class="mt-3">

                                            Tidak ada data aset

                                        </h6>

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

                                            Belum terdapat aset yang sesuai dengan pencarian.

                                        </p>

                                    </div>

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>


            {{-- PAGINATION --}}

            @if($aset->hasPages())

                <div class="pagination-wrapper mt-4">

                    {{ $aset->withQueryString()->links() }}

                </div>

            @endif

        </div>

    </div>

</div>


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

<style>

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

.aset-page {

    width: 100%;

    max-width: 100%;

}


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

.aset-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

}


.aset-header h3 {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

}


.aset-header p {

    margin: 5px 0 0;

    color: #6c757d;

    font-size: 13px;

}


.aset-header .btn {

    white-space: nowrap;

}


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

.filter-card,
.aset-table-card {

    border-radius: 12px;

    overflow: hidden;

}


.filter-card .card-header,
.aset-table-card .card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 15px 20px;

    background: #fff;

    border-bottom: 1px solid #e9ecef;

}


.filter-card .card-header h5,
.aset-table-card .card-header h5 {

    font-size: 16px;

    font-weight: 700;

}


.filter-card .card-header small,
.aset-table-card .card-header small {

    color: #6c757d;

    font-size: 12px;

}


/* =====================================================
   FORM
===================================================== */

.form-label {

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 5px;

}


.form-control,
.form-select {

    min-height: 42px;

    font-size: 13px;

}


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

.aset-table {

    min-width: 1050px;

    margin-bottom: 0;

}


.aset-table th {

    padding: 12px;

    font-size: 12px;

    white-space: nowrap;

}


.aset-table td {

    padding: 11px;

    font-size: 13px;

}


/* =====================================================
   FOTO
===================================================== */

.asset-photo {

    width: 60px;

    height: 60px;

    object-fit: cover;

    border-radius: 8px;

    border: 1px solid #dee2e6;

}


.no-photo {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f1f3f5;

    border-radius: 8px;

    color: #adb5bd;

}


.no-photo i {

    font-size: 22px;

}


/* =====================================================
   CODE
===================================================== */

.asset-code {

    display: inline-block;

    padding: 5px 8px;

    border-radius: 5px;

    background: #f1f3f5;

    font-family: monospace;

    font-size: 11px;

    font-weight: 600;

}


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

.asset-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 4px;

}


.asset-actions form {

    margin: 0;

}


.asset-actions .btn {

    white-space: nowrap;

}


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

.empty-asset {

    padding: 15px;

}


.empty-asset > i {

    font-size: 45px;

    color: #adb5bd;

}


.empty-asset h6 {

    font-weight: 600;

}


/* =====================================================
   PAGINATION
===================================================== */

.pagination-wrapper {

    display: flex;

    justify-content: flex-end;

}


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

@media (max-width: 991.98px) {

    .aset-header h3 {

        font-size: 21px;

    }


    .aset-table {

        min-width: 1000px;

    }

}


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

@media (max-width: 767.98px) {

    .aset-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }


    .aset-header h3 {

        font-size: 20px;

    }


    .aset-header p {

        font-size: 12px;

        line-height: 1.5;

    }


    .aset-header .btn {

        width: 100%;

    }


    .filter-card,
    .aset-table-card {

        border-radius: 10px;

    }


    .filter-card .card-header,
    .aset-table-card .card-header {

        padding: 13px 15px;

    }


    .filter-card .card-header h5,
    .aset-table-card .card-header h5 {

        font-size: 14px;

    }


    .filter-card .card-body,
    .aset-table-card .card-body {

        padding: 12px;

    }


    /*
    -------------------------------------------------
    FILTER HP
    -------------------------------------------------
    */

    .form-control,
    .form-select {

        min-height: 43px;

        font-size: 13px;

    }


    /*
    -------------------------------------------------
    TABLE HP
    -------------------------------------------------
    */

    .table-responsive {

        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }


    .aset-table {

        min-width: 1000px;

    }


    .aset-table th,
    .aset-table td {

        padding: 9px;

        font-size: 11px;

    }


    /*
    -------------------------------------------------
    FOTO
    -------------------------------------------------
    */

    .asset-photo,
    .no-photo {

        width: 50px;

        height: 50px;

    }


    .no-photo i {

        font-size: 18px;

    }


    /*
    -------------------------------------------------
    ACTION
    -------------------------------------------------
    */

    .asset-actions .btn {

        font-size: 11px;

    }


    /*
    -------------------------------------------------
    PAGINATION
    -------------------------------------------------
    */

    .pagination-wrapper {

        justify-content: center;

        overflow-x: auto;

    }

}


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

@media (max-width: 575.98px) {

    .aset-header h3 {

        font-size: 18px;

    }


    .filter-card .card-body,
    .aset-table-card .card-body {

        padding: 10px;

    }


    .filter-card .card-header,
    .aset-table-card .card-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }


    .aset-table {

        min-width: 950px;

    }


    .aset-table th,
    .aset-table td {

        padding: 8px;

        font-size: 10px;

    }


    .asset-photo,
    .no-photo {

        width: 45px;

        height: 45px;

    }


    /*
    Tombol hanya menampilkan ikon
    pada HP sangat kecil.
    */

    .asset-actions .btn {

        width: 32px;

        height: 31px;

        padding: 0;

        display: inline-flex;

        align-items: center;

        justify-content: center;

    }


    .asset-actions .btn span {

        display: none;

    }


    .pagination-wrapper {

        justify-content: flex-start;

    }

}

</style>

@endsection