@extends('layouts.app')

@section('content')

<div class="laboratorium-detail-page">

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

    <div class="page-header">

        <div>

            <h3>
                <i class="bi bi-building me-2"></i>
                Profil Laboratorium
            </h3>

            <p>
                Informasi dan data aset laboratorium.
            </p>

        </div>

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

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

            Kembali

        </a>

    </div>


    {{-- =====================================================
         PROFIL LABORATORIUM
    ====================================================== --}}

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

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

            <h5 class="mb-0">

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

                Informasi Laboratorium

            </h5>

        </div>


        <div class="card-body">

            <div class="row g-4">


                {{-- FOTO --}}

                <div class="col-12 col-lg-4">

                    <div class="laboratorium-photo-wrapper">

                        @if($laboratorium->foto)

                            <img
                                src="{{ asset('storage/'.$laboratorium->foto) }}"
                                alt="{{ $laboratorium->nama_lab }}"
                                class="laboratorium-photo">

                        @else

                            <div class="no-photo">

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

                                <span>
                                    Belum ada foto laboratorium
                                </span>

                            </div>

                        @endif

                    </div>

                </div>


                {{-- INFORMASI --}}

                <div class="col-12 col-lg-8">

                    <div class="info-list">


                        <div class="info-item">

                            <div class="info-label">
                                <i class="bi bi-building me-2"></i>
                                Nama Laboratorium
                            </div>

                            <div class="info-value">
                                {{ $laboratorium->nama_lab }}
                            </div>

                        </div>


                        <div class="info-item">

                            <div class="info-label">
                                <i class="bi bi-geo-alt me-2"></i>
                                Lokasi
                            </div>

                            <div class="info-value">
                                {{ $laboratorium->lokasi }}
                            </div>

                        </div>


                        <div class="info-item">

                            <div class="info-label">
                                <i class="bi bi-person me-2"></i>
                                Kepala Laboratorium
                            </div>

                            <div class="info-value">
                                {{ $laboratorium->kepala_lab }}
                            </div>

                        </div>


                        <div class="info-item">

                            <div class="info-label">
                                <i class="bi bi-box-seam me-2"></i>
                                Jumlah Aset
                            </div>

                            <div class="info-value">

                                <span class="badge bg-primary">
                                    {{ $jumlahAset }} Aset
                                </span>

                            </div>

                        </div>


                        <div class="info-item">

                            <div class="info-label">
                                <i class="bi bi-tags me-2"></i>
                                Jumlah Kategori
                            </div>

                            <div class="info-value">

                                <span class="badge bg-secondary">
                                    {{ $jumlahKategori }} Kategori
                                </span>

                            </div>

                        </div>


                    </div>

                </div>

            </div>


            {{-- =================================================
                 DESKRIPSI
            ================================================== --}}

            <hr class="my-4">


            <div class="description-section">

                <h5>

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

                    Deskripsi Laboratorium

                </h5>

                <p>

                    {{ $laboratorium->deskripsi ?? 'Belum ada deskripsi laboratorium.' }}

                </p>

            </div>


            {{-- =================================================
                 STATISTIK ASET
            ================================================== --}}

            <hr class="my-4">


            <h5 class="section-title">

                <i class="bi bi-bar-chart me-2"></i>

                Statistik Aset

            </h5>


            <div class="row g-3">


                {{-- TOTAL ASET --}}

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

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

                        <div class="stat-icon">

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

                        </div>

                        <div>

                            <h2>
                                {{ $jumlahAset }}
                            </h2>

                            <span>
                                Total Aset
                            </span>

                        </div>

                    </div>

                </div>


                {{-- KONDISI BAIK --}}

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

                    <div class="stat-card bg-success text-white">

                        <div class="stat-icon">

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

                        </div>

                        <div>

                            <h2>
                                {{ $aset->where('kondisi','Baik')->count() }}
                            </h2>

                            <span>
                                Kondisi Baik
                            </span>

                        </div>

                    </div>

                </div>


                {{-- RUSAK RINGAN --}}

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

                    <div class="stat-card bg-warning text-dark">

                        <div class="stat-icon">

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

                        </div>

                        <div>

                            <h2>
                                {{ $aset->where('kondisi','Rusak Ringan')->count() }}
                            </h2>

                            <span>
                                Rusak Ringan
                            </span>

                        </div>

                    </div>

                </div>


                {{-- RUSAK BERAT --}}

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

                    <div class="stat-card bg-danger text-white">

                        <div class="stat-icon">

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

                        </div>

                        <div>

                            <h2>
                                {{ $aset->where('kondisi','Rusak Berat')->count() }}
                            </h2>

                            <span>
                                Rusak Berat
                            </span>

                        </div>

                    </div>

                </div>


            </div>


            {{-- =================================================
                 DAFTAR ASET
            ================================================== --}}

            <hr class="my-4">


            <div class="section-header">

                <div>

                    <h5 class="section-title mb-1">

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

                        Daftar Aset Laboratorium

                    </h5>

                    <small class="text-muted">

                        Daftar aset yang terdaftar pada laboratorium ini.

                    </small>

                </div>

            </div>


            <div class="table-responsive mt-3">

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

                    <thead class="table-dark">

                        <tr>

                            <th class="text-center">
                                No
                            </th>

                            <th>
                                Kode Aset
                            </th>

                            <th>
                                Nama Aset
                            </th>

                            <th>
                                Kategori
                            </th>

                            <th class="text-center">
                                Kondisi
                            </th>

                            <th class="text-center">
                                QR Code
                            </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->kategori->nama_kategori ?? '-' }}
                                </td>


                                <td class="text-center">

                                    @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>


                                <td class="text-center">

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

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

                                        QR Code

                                    </a>

                                </td>

                            </tr>

                        @empty

                            <tr>

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

                                    <div class="empty-state">

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

                                        <h6 class="mt-3">
                                            Belum ada aset
                                        </h6>

                                        <p class="text-muted mb-0">
                                            Belum ada aset pada laboratorium ini.
                                        </p>

                                    </div>

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>


            {{-- KEMBALI --}}

            <div class="bottom-action">

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

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

                    Kembali ke Data Laboratorium

                </a>

            </div>

        </div>

    </div>

</div>


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

<style>

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

.laboratorium-detail-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;

}


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

.detail-card {

    border-radius: 12px;

    overflow: hidden;

}


.detail-card .card-header {

    padding: 15px 20px;

}


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

.laboratorium-photo-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

}


.laboratorium-photo {

    display: block;

    width: 100%;

    max-width: 380px;

    height: 250px;

    object-fit: cover;

    border-radius: 10px;

    box-shadow: 0 3px 10px rgba(0,0,0,.12);

}


.no-photo {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 380px;

    height: 250px;

    background: #f1f3f5;

    border-radius: 10px;

    color: #6c757d;

}


.no-photo i {

    font-size: 45px;

    margin-bottom: 10px;

}


/* =====================================================
   INFORMASI
===================================================== */

.info-list {

    width: 100%;

}


.info-item {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 20px;

    padding: 13px 0;

    border-bottom: 1px solid #e9ecef;

}


.info-item:last-child {

    border-bottom: 0;

}


.info-label {

    font-size: 13px;

    font-weight: 600;

    color: #495057;

}


.info-value {

    font-size: 13px;

    color: #212529;

    word-break: break-word;

}


/* =====================================================
   DESKRIPSI
===================================================== */

.description-section h5,
.section-title {

    font-size: 18px;

    font-weight: 700;

}


.description-section p {

    margin-top: 12px;

    margin-bottom: 0;

    line-height: 1.8;

    color: #495057;

    font-size: 14px;

    white-space: pre-line;

}


/* =====================================================
   STATISTIK
===================================================== */

.stat-card {

    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 115px;

    padding: 18px;

    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(0,0,0,.08);

}


.stat-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    min-width: 52px;

    background: rgba(255,255,255,.20);

    border-radius: 10px;

}


.stat-icon i {

    font-size: 22px;

}


.stat-card h2 {

    margin: 0;

    font-size: 28px;

    font-weight: 700;

}


.stat-card span {

    font-size: 12px;

}


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

.asset-table {

    min-width: 850px;

}


.asset-table th {

    font-size: 13px;

    white-space: nowrap;

    padding: 12px;

}


.asset-table td {

    font-size: 13px;

    padding: 12px;

}


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

.empty-state i {

    font-size: 42px;

    color: #adb5bd;

}


.empty-state h6 {

    font-weight: 600;

}


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

.bottom-action {

    margin-top: 20px;

}


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

@media (max-width: 991.98px) {

    .page-header h3 {

        font-size: 21px;

    }


    .laboratorium-photo {

        max-width: 100%;

    }


    .info-item {

        grid-template-columns: 180px 1fr;

        gap: 15px;

    }

}


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

@media (max-width: 767.98px) {

    .page-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }


    .page-header h3 {

        font-size: 20px;

    }


    .page-header p {

        font-size: 12px;

        line-height: 1.5;

    }


    .page-header .btn {

        width: 100%;

    }


    .detail-card {

        border-radius: 10px;

    }


    .detail-card .card-header {

        padding: 13px 15px;

    }


    .detail-card .card-body {

        padding: 15px;

    }


    /* FOTO */

    .laboratorium-photo {

        width: 100%;

        max-width: 100%;

        height: 210px;

    }


    .no-photo {

        max-width: 100%;

        height: 210px;

    }


    /* INFORMASI */

    .info-item {

        display: block;

        padding: 12px 0;

    }


    .info-label {

        margin-bottom: 5px;

        font-size: 12px;

    }


    .info-value {

        font-size: 13px;

    }


    /* DESKRIPSI */

    .description-section h5,
    .section-title {

        font-size: 16px;

    }


    .description-section p {

        font-size: 13px;

        line-height: 1.7;

    }


    /* STATISTIK */

    .stat-card {

        min-height: 90px;

        padding: 14px;

        gap: 12px;

    }


    .stat-icon {

        width: 45px;

        height: 45px;

        min-width: 45px;

    }


    .stat-icon i {

        font-size: 18px;

    }


    .stat-card h2 {

        font-size: 23px;

    }


    .stat-card span {

        font-size: 11px;

    }


    /* TABLE */

    .table-responsive {

        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }


    .asset-table {

        min-width: 850px;

    }


    .asset-table th,
    .asset-table td {

        font-size: 12px;

        padding: 10px;

    }


    /* BUTTON */

    .bottom-action .btn {

        width: 100%;

    }

}


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

@media (max-width: 575.98px) {

    .page-header h3 {

        font-size: 18px;

    }


    .detail-card .card-body {

        padding: 12px;

    }


    .laboratorium-photo {

        height: 180px;

    }


    .no-photo {

        height: 180px;

    }


    .stat-card {

        min-height: 82px;

        padding: 12px;

    }


    .stat-icon {

        width: 40px;

        height: 40px;

        min-width: 40px;

    }


    .stat-card h2 {

        font-size: 21px;

    }

}

</style>

@endsection