@extends('layouts.app')

@section('content')

<div class="scan-result-page">

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

    <div class="scan-result-header">

        <div>

            <h3 class="mb-1">

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

                Detail Aset Hasil Scan

            </h3>

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

                Informasi aset berdasarkan QR Code yang dipindai.

            </p>

        </div>

    </div>


    {{-- =====================================================
         CARD HASIL SCAN
    ====================================================== --}}

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

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

            <div class="d-flex align-items-center gap-2">

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

                <strong>
                    QR Code Berhasil Dipindai
                </strong>

            </div>

        </div>


        <div class="card-body">

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

            <div class="asset-result-list">


                {{-- KODE ASET --}}

                <div class="asset-result-item">

                    <div class="asset-result-label">

                        <i class="bi bi-upc-scan"></i>

                        <span>
                            Kode Aset
                        </span>

                    </div>

                    <div class="asset-result-value">

                        <span class="badge bg-primary asset-code">

                            {{ $aset->kode_aset }}

                        </span>

                    </div>

                </div>


                {{-- NAMA ASET --}}

                <div class="asset-result-item">

                    <div class="asset-result-label">

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

                        <span>
                            Nama Aset
                        </span>

                    </div>

                    <div class="asset-result-value">

                        {{ $aset->nama_aset }}

                    </div>

                </div>


                {{-- KATEGORI --}}

                <div class="asset-result-item">

                    <div class="asset-result-label">

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

                        <span>
                            Kategori
                        </span>

                    </div>

                    <div class="asset-result-value">

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

                    </div>

                </div>


                {{-- LABORATORIUM --}}

                <div class="asset-result-item">

                    <div class="asset-result-label">

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

                        <span>
                            Laboratorium
                        </span>

                    </div>

                    <div class="asset-result-value">

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

                    </div>

                </div>


                {{-- MERK --}}

                <div class="asset-result-item">

                    <div class="asset-result-label">

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

                        <span>
                            Merk
                        </span>

                    </div>

                    <div class="asset-result-value">

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

                    </div>

                </div>


                {{-- SPESIFIKASI --}}

                <div class="asset-result-item">

                    <div class="asset-result-label">

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

                        <span>
                            Spesifikasi
                        </span>

                    </div>

                    <div class="asset-result-value">

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

                    </div>

                </div>


                {{-- TAHUN --}}

                <div class="asset-result-item">

                    <div class="asset-result-label">

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

                        <span>
                            Tahun Perolehan
                        </span>

                    </div>

                    <div class="asset-result-value">

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

                    </div>

                </div>


                {{-- KONDISI --}}

                <div class="asset-result-item">

                    <div class="asset-result-label">

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

                        <span>
                            Kondisi
                        </span>

                    </div>

                    <div class="asset-result-value">

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

                            <span class="badge bg-success">
                                Baik
                            </span>

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

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

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

                            <span class="badge bg-danger">
                                Rusak Berat
                            </span>

                        @else

                            <span class="badge bg-secondary">
                                {{ $aset->kondisi ?? '-' }}
                            </span>

                        @endif

                    </div>

                </div>


                {{-- LOKASI JIKA ADA --}}

                @if(isset($aset->lokasi))

                    <div class="asset-result-item">

                        <div class="asset-result-label">

                            <i class="bi bi-geo-alt"></i>

                            <span>
                                Lokasi
                            </span>

                        </div>

                        <div class="asset-result-value">

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

                        </div>

                    </div>

                @endif


                {{-- KETERANGAN JIKA ADA --}}

                @if(isset($aset->keterangan))

                    <div class="asset-result-item">

                        <div class="asset-result-label">

                            <i class="bi bi-chat-text"></i>

                            <span>
                                Keterangan
                            </span>

                        </div>

                        <div class="asset-result-value">

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

                        </div>

                    </div>

                @endif


            </div>


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

            @if($aset->foto)

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

                    <h5>

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

                        Foto Aset

                    </h5>

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

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

                    </div>

                </div>

            @endif


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

            <div class="scan-result-actions">

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

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

                    Scan Lagi

                </a>


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

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

                    Detail Aset

                </a>


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

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

                    Dashboard

                </a>

            </div>

        </div>

    </div>

</div>


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

@push('styles')

<style>

/* =====================================================
   HALAMAN
====================================================== */

.scan-result-page {

    width: 100%;

}


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

.scan-result-header {

    margin-bottom: 20px;

}

.scan-result-header h3 {

    font-weight: 600;

}

.scan-result-header p {

    font-size: 14px;

}


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

.scan-result-card {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    border-radius: 12px;

    overflow: hidden;

}


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

.scan-result-card .card-header {

    padding: 15px 20px;

}


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

.asset-result-list {

    width: 100%;

}


/* =====================================================
   ITEM
====================================================== */

.asset-result-item {

    display: grid;

    grid-template-columns: 230px minmax(0, 1fr);

    align-items: center;

    min-height: 55px;

    border-bottom: 1px solid #e9ecef;

}

.asset-result-item:last-child {

    border-bottom: none;

}


/* =====================================================
   LABEL
====================================================== */

.asset-result-label {

    display: flex;

    align-items: center;

    gap: 9px;

    font-weight: 600;

    color: #495057;

}

.asset-result-label i {

    color: #0d6efd;

    font-size: 17px;

}


/* =====================================================
   VALUE
====================================================== */

.asset-result-value {

    min-width: 0;

    word-break: break-word;

    color: #212529;

}


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

.asset-code {

    font-family: monospace;

    font-size: 13px;

}


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

.asset-photo-section {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #e9ecef;

}

.asset-photo-section h5 {

    margin-bottom: 15px;

}

.asset-photo-wrapper {

    width: 100%;

    display: flex;

    justify-content: center;

}

.asset-photo {

    width: 100%;

    max-width: 350px;

    max-height: 350px;

    object-fit: contain;

    border-radius: 10px;

    border: 1px solid #dee2e6;

    padding: 5px;

}


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

.scan-result-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #e9ecef;

}


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

@media (max-width: 767.98px) {

    .scan-result-header h3 {

        font-size: 21px;

    }

    .scan-result-header p {

        font-size: 13px;

    }


    .scan-result-card .card-body {

        padding: 18px;

    }


    .asset-result-item {

        grid-template-columns: 180px minmax(0, 1fr);

    }


    .asset-result-label {

        font-size: 14px;

    }


    .asset-result-value {

        font-size: 14px;

    }

}


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

@media (max-width: 575.98px) {

    .scan-result-header {

        margin-bottom: 15px;

    }


    .scan-result-header h3 {

        font-size: 19px;

    }


    .scan-result-header p {

        font-size: 12px;

    }


    .scan-result-card .card-body {

        padding: 15px;

    }


    /*
       Pada HP label dan nilai
       ditampilkan bertumpuk.
    */

    .asset-result-item {

        display: block;

        padding: 12px 0;

        min-height: auto;

    }


    .asset-result-label {

        margin-bottom: 6px;

        font-size: 13px;

    }


    .asset-result-value {

        padding-left: 25px;

        font-size: 14px;

    }


    .asset-photo {

        max-width: 100%;

        max-height: 300px;

    }


    /*
       Tombol memenuhi lebar layar
       agar mudah disentuh.
    */

    .scan-result-actions {

        display: grid;

        grid-template-columns: 1fr;

    }


    .scan-result-actions .btn {

        width: 100%;

    }

}


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

@media (max-width: 400px) {

    .scan-result-header h3 {

        font-size: 18px;

    }


    .scan-result-card .card-body {

        padding: 12px;

    }


    .asset-result-label {

        font-size: 12px;

    }


    .asset-result-value {

        font-size: 13px;

    }


    .scan-result-card .card-header {

        padding: 12px 15px;

        font-size: 13px;

    }

}

</style>

@endpush

@endsection