@extends('layouts.app')

@section('content')

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

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

    <div class="detail-header">

        <div>

            <h3>
                <i class="bi bi-box-seam me-2"></i>
                Detail Data Aset
            </h3>

            <p>
                Informasi lengkap mengenai aset laboratorium.
            </p>

        </div>

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

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

        </a>

    </div>


    {{-- =====================================================
         DETAIL CARD
    ====================================================== --}}

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

            </h5>

        </div>


        <div class="card-body">

            <div class="row g-4">


                {{-- =================================================
                     FOTO ASET
                ================================================== --}}

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

                    <div class="photo-section">

                        <div class="section-title">

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

                            Foto Aset

                        </div>


                        @if($aset->foto)

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

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

                            </div>

                        @else

                            <div class="no-photo">

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

                                <span>
                                    Tidak Ada Foto
                                </span>

                            </div>

                        @endif


                        {{-- KODE ASET --}}

                        <div class="asset-code">

                            <span>
                                Kode Aset
                            </span>

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

                        </div>

                    </div>

                </div>


                {{-- =================================================
                     INFORMASI ASET
                ================================================== --}}

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

                    <div class="section-title">

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

                        Informasi Aset

                    </div>


                    <div class="detail-list">


                        {{-- NAMA ASET --}}

                        <div class="detail-row">

                            <div class="detail-label">
                                Nama Aset
                            </div>

                            <div class="detail-value">
                                {{ $aset->nama_aset }}
                            </div>

                        </div>


                        {{-- KATEGORI --}}

                        <div class="detail-row">

                            <div class="detail-label">
                                Kategori
                            </div>

                            <div class="detail-value">

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

                            </div>

                        </div>


                        {{-- LABORATORIUM --}}

                        <div class="detail-row">

                            <div class="detail-label">
                                Laboratorium
                            </div>

                            <div class="detail-value">

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

                            </div>

                        </div>


                        {{-- MERK --}}

                        <div class="detail-row">

                            <div class="detail-label">
                                Merk
                            </div>

                            <div class="detail-value">

                                {{ $aset->merk ?? '-' }}

                            </div>

                        </div>


                        {{-- TAHUN --}}

                        <div class="detail-row">

                            <div class="detail-label">
                                Tahun Perolehan
                            </div>

                            <div class="detail-value">

                                {{ $aset->tahun_perolehan ?? '-' }}

                            </div>

                        </div>


                        {{-- KONDISI --}}

                        <div class="detail-row">

                            <div class="detail-label">
                                Kondisi
                            </div>

                            <div class="detail-value">

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

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

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

                                        Baik

                                    </span>

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

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

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

                                        Rusak Ringan

                                    </span>

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

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

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

                                        Rusak Berat

                                    </span>

                                @else

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

                                        {{ $aset->kondisi }}

                                    </span>

                                @endif

                            </div>

                        </div>


                    </div>


                    {{-- =================================================
                         SPESIFIKASI
                    ================================================== --}}

                    <div class="specification-section">

                        <div class="section-title">

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

                            Spesifikasi

                        </div>


                        <div class="specification-box">

                            @if($aset->spesifikasi)

                                {!! nl2br(e($aset->spesifikasi)) !!}

                            @else

                                <span class="text-muted">

                                    Belum ada spesifikasi aset.

                                </span>

                            @endif

                        </div>

                    </div>


                    {{-- =================================================
                         ACTION
                    ================================================== --}}

                    <div class="detail-actions">


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

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

                            Kembali

                        </a>


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

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

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

                                QR Code

                            </a>

                        @endif


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

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

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

                                Edit Aset

                            </a>

                        @endif


                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


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

<style>

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

.aset-detail-page {

    width: 100%;

}


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

.detail-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

}


.detail-header h3 {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

}


.detail-header p {

    margin: 5px 0 0;

    color: #6c757d;

    font-size: 13px;

}


.detail-header .btn {

    white-space: nowrap;

}


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

.detail-card {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    border-radius: 12px;

    overflow: hidden;

}


.detail-card .card-header {

    padding: 15px 20px;

}


.detail-card .card-header h5 {

    font-size: 16px;

    font-weight: 600;

}


.detail-card .card-body {

    padding: 25px;

}


/* =====================================================
   SECTION TITLE
===================================================== */

.section-title {

    margin-bottom: 15px;

    font-size: 15px;

    font-weight: 700;

    color: #343a40;

}


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

.photo-section {

    width: 100%;

}


.asset-photo-wrapper {

    width: 100%;

    max-width: 330px;

    margin: 0 auto;

    padding: 10px;

    background: #f8f9fa;

    border: 1px solid #dee2e6;

    border-radius: 10px;

    text-align: center;

}


.asset-photo {

    display: block;

    width: 100%;

    max-height: 280px;

    object-fit: contain;

    border-radius: 7px;

}


.no-photo {

    width: 100%;

    max-width: 330px;

    height: 280px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background: #f8f9fa;

    border: 1px dashed #adb5bd;

    border-radius: 10px;

    color: #6c757d;

}


.no-photo i {

    font-size: 45px;

}


.no-photo span {

    font-size: 13px;

}


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

.asset-code {

    max-width: 330px;

    margin: 15px auto 0;

    padding: 12px 15px;

    background: #f8f9fa;

    border: 1px solid #dee2e6;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.asset-code span {

    font-size: 12px;

    color: #6c757d;

}


.asset-code strong {

    font-size: 14px;

}


/* =====================================================
   DETAIL
===================================================== */

.detail-list {

    border: 1px solid #dee2e6;

    border-radius: 8px;

    overflow: hidden;

}


.detail-row {

    display: grid;

    grid-template-columns: 190px 1fr;

    border-bottom: 1px solid #dee2e6;

}


.detail-row:last-child {

    border-bottom: none;

}


.detail-label {

    padding: 12px 15px;

    background: #f8f9fa;

    font-size: 13px;

    font-weight: 600;

    color: #495057;

}


.detail-value {

    padding: 12px 15px;

    font-size: 13px;

    color: #212529;

    word-break: break-word;

}


/* =====================================================
   KONDISI
===================================================== */

.condition-badge {

    padding: 7px 10px;

    font-size: 12px;

    font-weight: 500;

}


/* =====================================================
   SPESIFIKASI
===================================================== */

.specification-section {

    margin-top: 25px;

}


.specification-box {

    min-height: 90px;

    padding: 15px;

    background: #f8f9fa;

    border: 1px solid #dee2e6;

    border-radius: 8px;

    font-size: 13px;

    line-height: 1.7;

    word-break: break-word;

}


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

.detail-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;

}


.detail-actions .btn {

    min-width: 110px;

}


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

@media (max-width: 991.98px) {

    .detail-header h3 {

        font-size: 21px;

    }


    .detail-card {

        max-width: 100%;

    }


    .detail-row {

        grid-template-columns: 160px 1fr;

    }


    .asset-photo-wrapper,
    .no-photo,
    .asset-code {

        max-width: 280px;

    }


    .no-photo {

        height: 240px;

    }

}


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

@media (max-width: 767.98px) {

    .detail-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }


    .detail-header h3 {

        font-size: 20px;

    }


    .detail-header p {

        font-size: 12px;

        line-height: 1.5;

    }


    .detail-header .btn {

        width: 100%;

    }


    .detail-card {

        border-radius: 10px;

    }


    .detail-card .card-header {

        padding: 13px 15px;

    }


    .detail-card .card-body {

        padding: 18px 15px;

    }


    .detail-card .card-header h5 {

        font-size: 14px;

    }


    .asset-photo-wrapper,
    .no-photo {

        max-width: 250px;

    }


    .asset-photo {

        max-height: 220px;

    }


    .no-photo {

        height: 220px;

    }


    .asset-code {

        max-width: 250px;

    }


    .detail-row {

        display: block;

    }


    .detail-label {

        padding: 9px 12px;

        font-size: 12px;

    }


    .detail-value {

        padding: 10px 12px;

        font-size: 13px;

    }


    .specification-section {

        margin-top: 20px;

    }


    .detail-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .detail-actions .btn {

        width: 100%;

        min-width: 0;

    }

}


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

@media (max-width: 575.98px) {

    .detail-header h3 {

        font-size: 18px;

    }


    .detail-card .card-body {

        padding: 15px 12px;

    }


    .detail-card .card-header {

        padding: 12px;

    }


    .detail-card .card-header h5 {

        font-size: 14px;

    }


    .asset-photo-wrapper,
    .no-photo {

        max-width: 210px;

    }


    .asset-photo {

        max-height: 180px;

    }


    .no-photo {

        height: 180px;

    }


    .asset-code {

        max-width: 210px;

        padding: 10px 12px;

    }


    .asset-code span {

        font-size: 11px;

    }


    .asset-code strong {

        font-size: 12px;

    }


    .section-title {

        font-size: 14px;

    }


    .detail-label,
    .detail-value {

        font-size: 12px;

    }


    .specification-box {

        font-size: 12px;

        padding: 12px;

    }

}

</style>

@endsection