@extends('layouts.app')

@section('content')

<div class="laporan-page">

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

    <div class="laporan-header">

        <div>

            <h3 class="laporan-title">

                <i class="bi bi-file-earmark-text me-2"></i>

                Laporan Data Aset

            </h3>

            <p class="laporan-subtitle">

                Lihat, filter, cetak, dan export data aset laboratorium.

            </p>

        </div>


        {{-- =================================================
             TOMBOL EXPORT
        ================================================== --}}

        <div class="laporan-actions">

            <a
                href="{{ route('laporan.cetak', request()->query()) }}"
                target="_blank"
                class="btn btn-danger">

                <i class="bi bi-file-earmark-pdf me-1"></i>

                Cetak PDF

            </a>


            <a
                href="{{ route('laporan.export', request()->query()) }}"
                class="btn btn-success">

                <i class="bi bi-file-earmark-excel me-1"></i>

                Export Excel

            </a>

        </div>

    </div>


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

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

        <div class="card-header bg-primary text-white">

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

            <strong>
                Filter Laporan
            </strong>

        </div>


        <div class="card-body">

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

                <div class="row g-3">


                    {{-- LABORATORIUM --}}

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

                        <label
                            for="laboratorium"
                            class="form-label">

                            Laboratorium

                        </label>

                        <select
                            id="laboratorium"
                            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>


                    {{-- KATEGORI --}}

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

                        <label
                            for="kategori"
                            class="form-label">

                            Kategori

                        </label>

                        <select
                            id="kategori"
                            name="kategori"
                            class="form-select">

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

                            @foreach($kategori as $kat)

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

                                    {{ $kat->nama_kategori }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    {{-- KONDISI --}}

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

                        <label
                            for="kondisi"
                            class="form-label">

                            Kondisi

                        </label>

                        <select
                            id="kondisi"
                            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>


                    {{-- TAHUN --}}

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

                        <label
                            for="tahun"
                            class="form-label">

                            Tahun Perolehan

                        </label>

                        <input
                            type="number"
                            id="tahun"
                            name="tahun"
                            value="{{ request('tahun') }}"
                            class="form-control"
                            placeholder="Contoh: 2025">

                    </div>

                </div>


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

                <div class="filter-actions mt-3">

                    <button
                        type="submit"
                        class="btn btn-primary">

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

                        Tampilkan

                    </button>


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

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

                        Reset

                    </a>

                </div>

            </form>

        </div>

    </div>


    {{-- =====================================================
         HASIL LAPORAN
    ====================================================== --}}

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

        <div class="card-header bg-light">

            <div class="hasil-header">

                <div>

                    <strong>

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

                        Data Aset

                    </strong>

                </div>


                <div class="total-data">

                    Total Data:

                    <span class="badge bg-primary">

                        {{ $aset->count() }}

                    </span>

                </div>

            </div>

        </div>


        <div class="card-body">


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

            <div class="table-responsive laporan-table-wrapper">

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

                    <thead class="table-primary">

                        <tr>

                            <th width="60">
                                No
                            </th>

                            <th>
                                Kode
                            </th>

                            <th>
                                Nama Aset
                            </th>

                            <th>
                                Laboratorium
                            </th>

                            <th>
                                Kategori
                            </th>

                            <th>
                                Kondisi
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        @forelse($aset as $item)

                        <tr>

                            <td class="text-center">

                                {{ $loop->iteration }}

                            </td>


                            <td>

                                <strong>
                                    {{ $item->kode_aset }}
                                </strong>

                            </td>


                            <td>

                                {{ $item->nama_aset }}

                            </td>


                            <td>

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

                            </td>


                            <td>

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

                            </td>


                            <td>

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

                                    <span class="badge bg-success kondisi-badge">

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

                                        Baik

                                    </span>

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

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

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

                                        Rusak Ringan

                                    </span>

                                @elseif($item->kondisi == 'Rusak Berat')

                                    <span class="badge bg-danger kondisi-badge">

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

                                        Rusak Berat

                                    </span>

                                @else

                                    <span class="badge bg-secondary kondisi-badge">

                                        {{ $item->kondisi }}

                                    </span>

                                @endif

                            </td>

                        </tr>


                        @empty

                        <tr>

                            <td
                                colspan="6"
                                class="text-center py-4">

                                <div class="empty-report">

                                    <i class="bi bi-file-earmark-x"></i>

                                    <p class="mb-0">

                                        Tidak ada data aset berdasarkan filter yang dipilih.

                                    </p>

                                </div>

                            </td>

                        </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>


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

<style>

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

.laporan-page {

    width: 100%;

}


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

.laporan-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 20px;

}


.laporan-title {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

}


.laporan-subtitle {

    margin: 5px 0 0;

    font-size: 13px;

    color: #6c757d;

}


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

.laporan-actions {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}


.laporan-actions .btn {

    white-space: nowrap;

}


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

.laporan-card {

    border-radius: 10px;

    overflow: hidden;

}


.laporan-card .card-header {

    padding: 14px 18px;

}


.laporan-card .card-body {

    padding: 20px;

}


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

.form-label {

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 6px;

}


.form-control,
.form-select {

    min-height: 42px;

    font-size: 13px;

}


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

.filter-actions {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}


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

.hasil-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

}


.total-data {

    font-size: 13px;

    color: #555;

}


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

.laporan-table-wrapper {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}


.laporan-table {

    min-width: 850px;

    margin-bottom: 0;

}


.laporan-table th {

    white-space: nowrap;

    font-size: 13px;

    padding: 12px;

}


.laporan-table td {

    font-size: 13px;

    padding: 11px;

}


/* =====================================================
   BADGE
===================================================== */

.kondisi-badge {

    white-space: nowrap;

    padding: 7px 9px;

    font-size: 11px;

}


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

.empty-report {

    color: #6c757d;

}


.empty-report i {

    display: block;

    font-size: 40px;

    margin-bottom: 10px;

}


.empty-report p {

    font-size: 13px;

}


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

@media (max-width: 991.98px) {

    .laporan-title {

        font-size: 21px;

    }


    .laporan-card .card-body {

        padding: 15px;

    }

}


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

@media (max-width: 767.98px) {

    .laporan-header {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }


    .laporan-title {

        font-size: 20px;

    }


    .laporan-subtitle {

        font-size: 12px;

        line-height: 1.5;

    }


    .laporan-actions {

        display: grid;

        grid-template-columns: 1fr 1fr;

        width: 100%;

    }


    .laporan-actions .btn {

        width: 100%;

        font-size: 12px;

    }


    .laporan-card {

        border-radius: 8px;

    }


    .laporan-card .card-header {

        padding: 12px 14px;

    }


    .laporan-card .card-body {

        padding: 12px;

    }


    .filter-actions {

        flex-direction: column;

    }


    .filter-actions .btn {

        width: 100%;

    }


    .hasil-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }


    /*
    |--------------------------------------------------------------------------
    | Tabel tidak mengecil terlalu jauh.
    | Hanya tabel yang digeser horizontal.
    |--------------------------------------------------------------------------
    */

    .laporan-table {

        min-width: 800px;

    }

}


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

@media (max-width: 575.98px) {

    .laporan-title {

        font-size: 18px;

    }


    .laporan-actions {

        grid-template-columns: 1fr;

    }


    .laporan-card .card-body {

        padding: 10px;

    }


    .laporan-table {

        min-width: 760px;

    }


    .laporan-table th,
    .laporan-table td {

        font-size: 12px;

        padding: 9px;

    }


    .kondisi-badge {

        font-size: 10px;

    }

}

</style>

@endsection