@extends('layouts.app')

@section('content')

<div class="qr-page">

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

    <div class="qr-header">

        <div>

            <h3>

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

                QR Code Aset

            </h3>

            <p>
                QR Code digunakan untuk mengidentifikasi aset laboratorium.
            </p>

        </div>

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

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

            Kembali

        </a>

    </div>


    {{-- =====================================================
         QR CARD
    ====================================================== --}}

    <div class="qr-card">

        <div class="qr-card-header">

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

            QR Code Aset

        </div>


        <div class="qr-card-body">


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

            <div class="asset-information">

                <h4>
                    {{ $aset->nama_aset }}
                </h4>

                <div class="asset-code-text">

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

                    {{ $aset->kode_aset }}

                </div>

                @if($aset->laboratorium)

                    <div class="asset-lab-text">

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

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

                    </div>

                @endif

            </div>


            {{-- =================================================
                 QR CODE
            ================================================== --}}

            <div class="qr-wrapper">

                <div class="qr-image">

                    {!! $qrCode !!}

                </div>

            </div>


            <p class="qr-description">

                Scan QR Code untuk melihat informasi aset.

            </p>


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

            <div class="qr-actions no-print">

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

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

                    Lihat Detail

                </a>


                <button
                    type="button"
                    onclick="window.print()"
                    class="btn btn-primary">

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

                    Cetak QR Code

                </button>


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

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

                    Kembali

                </a>

            </div>


        </div>

    </div>

</div>


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

<style>

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

.qr-page {

    width: 100%;

}


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

.qr-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

}


.qr-header h3 {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

}


.qr-header p {

    margin: 5px 0 0;

    color: #6c757d;

    font-size: 13px;

}


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

.qr-card {

    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0,0,0,.08);

    border: 1px solid #e9ecef;

}


.qr-card-header {

    padding: 15px 20px;

    background: #198754;

    color: white;

    font-size: 16px;

    font-weight: 600;

}


.qr-card-body {

    padding: 30px;

    text-align: center;

}


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

.asset-information {

    margin-bottom: 25px;

}


.asset-information h4 {

    margin: 0;

    font-size: 21px;

    font-weight: 700;

    color: #212529;

    word-break: break-word;

}


.asset-code-text {

    margin-top: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #198754;

}


.asset-lab-text {

    margin-top: 5px;

    color: #6c757d;

    font-size: 13px;

}


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

.qr-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

}


.qr-image {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

    background: white;

    border: 1px solid #dee2e6;

    border-radius: 10px;

}


.qr-image svg {

    display: block;

    width: 250px;

    height: 250px;

    max-width: 100%;

}


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

.qr-description {

    margin: 18px 0 25px;

    color: #6c757d;

    font-size: 13px;

}


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

.qr-actions {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

}


.qr-actions .btn {

    min-width: 130px;

}


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

@media (max-width: 991.98px) {

    .qr-header h3 {

        font-size: 21px;

    }


    .qr-card {

        max-width: 550px;

    }

}


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

@media (max-width: 767.98px) {

    .qr-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }


    .qr-header h3 {

        font-size: 20px;

    }


    .qr-header p {

        font-size: 12px;

        line-height: 1.5;

    }


    .qr-header .btn {

        width: 100%;

    }


    .qr-card {

        border-radius: 10px;

    }


    .qr-card-header {

        padding: 13px 15px;

        font-size: 14px;

    }


    .qr-card-body {

        padding: 20px 15px;

    }


    .asset-information h4 {

        font-size: 18px;

    }


    .asset-code-text {

        font-size: 13px;

    }


    .asset-lab-text {

        font-size: 12px;

    }


    .qr-image {

        padding: 10px;

    }


    .qr-image svg {

        width: 210px;

        height: 210px;

    }


    .qr-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .qr-actions .btn {

        width: 100%;

        min-width: 0;

    }

}


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

@media (max-width: 575.98px) {

    .qr-header h3 {

        font-size: 18px;

    }


    .qr-card-body {

        padding: 18px 12px;

    }


    .asset-information {

        margin-bottom: 20px;

    }


    .asset-information h4 {

        font-size: 16px;

    }


    .qr-image {

        padding: 8px;

    }


    .qr-image svg {

        width: 180px;

        height: 180px;

    }


    .qr-description {

        font-size: 12px;

        margin: 15px 0 20px;

    }

}


/* =====================================================
   PRINT
===================================================== */

@media print {

    body * {

        visibility: hidden;

    }


    .qr-card,
    .qr-card * {

        visibility: visible;

    }


    .qr-card {

        position: absolute;

        left: 50%;

        top: 30px;

        transform: translateX(-50%);

        width: 500px;

        max-width: 500px;

        box-shadow: none;

        border: 1px solid #000;

    }


    .qr-card-header {

        background: white !important;

        color: black !important;

        border-bottom: 1px solid #000;

    }


    .qr-image {

        border: none;

    }


    .no-print {

        display: none !important;

    }

}

</style>

@endsection