@extends('layouts.app')

@section('content')

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

<div class="qrcode-header">

    <div>
        <h3 class="mb-1">
            <i class="bi bi-qr-code me-2"></i>
            Manajemen QR Code
        </h3>

        <p class="text-muted mb-0">
            Kelola dan cetak QR Code untuk setiap aset laboratorium.
        </p>
    </div>

    <div class="qrcode-header-action">

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

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

            Cetak Semua QR Code

        </a>

    </div>

</div>


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

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

    <div class="card-body p-0">

        {{-- TABLE RESPONSIVE --}}

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

            <table class="table table-bordered table-hover align-middle mb-0">

                <thead class="table-dark">

                    <tr>

                        <th class="text-center qr-no-column">
                            No
                        </th>

                        <th>
                            Nama Aset
                        </th>

                        <th>
                            Kode Aset
                        </th>

                        <th class="text-center qr-code-column">
                            QR Code
                        </th>

                        <th class="text-center qr-action-column">
                            Aksi
                        </th>

                    </tr>

                </thead>


                <tbody>

                @forelse($aset as $item)

                    <tr>

                        {{-- NO --}}

                        <td class="text-center">

                            {{ $loop->iteration }}

                        </td>


                        {{-- NAMA ASET --}}

                        <td>

                            <div class="asset-name">

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

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

                            </div>

                        </td>


                        {{-- KODE --}}

                        <td>

                            <span class="asset-code">

                                {{ $item->kode_aset }}

                            </span>

                        </td>


                        {{-- QR CODE --}}

                        <td class="text-center">

                            <div class="qr-preview">

                                {!! QrCode::size(90)->generate(
                                    route('publik.scan', $item->kode_aset)
                                ) !!}

                            </div>

                        </td>


                        {{-- AKSI --}}

                        <td class="text-center">

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

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

                                Lihat QR

                            </a>

                        </td>

                    </tr>


                @empty

                    <tr>

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

                            <div class="empty-qrcode">

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

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

                                <p class="text-muted mb-0">
                                    QR Code belum dapat ditampilkan karena
                                    belum terdapat data aset.
                                </p>

                            </div>

                        </td>

                    </tr>

                @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>


{{-- =====================================================
     CSS RESPONSIVE QR CODE
====================================================== --}}

@push('styles')

<style>

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

.qrcode-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 20px;

}

.qrcode-header h3 {

    font-weight: 600;

}


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

.qrcode-card {

    width: 100%;

    overflow: hidden;

}


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

.qrcode-table-wrapper {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}


/*
   Supaya tabel tidak memaksa
   seluruh halaman melebar.
*/

.qrcode-table-wrapper table {

    min-width: 850px;

}


/* =====================================================
   COLUMN
====================================================== */

.qr-no-column {

    width: 60px;

}

.qr-code-column {

    width: 160px;

}

.qr-action-column {

    width: 150px;

}


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

.qr-preview {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 5px;

}

.qr-preview svg {

    max-width: 90px;

    height: auto;

}


/* =====================================================
   NAMA ASET
====================================================== */

.asset-name {

    display: flex;

    align-items: center;

    gap: 5px;

    min-width: 200px;

}


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

.asset-code {

    font-family: monospace;

    font-weight: 600;

    white-space: nowrap;

}


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

.empty-qrcode {

    padding: 20px;

}

.empty-qrcode i {

    font-size: 50px;

    color: #6c757d;

}

.empty-qrcode h5 {

    font-weight: 600;

}


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

@media (max-width: 767.98px) {

    .qrcode-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }


    .qrcode-header h3 {

        font-size: 21px;

    }


    .qrcode-header p {

        font-size: 13px;

    }


    .qrcode-header-action {

        width: 100%;

    }


    .qrcode-header-action .btn {

        width: 100%;

    }


    .qrcode-card {

        border-radius: 8px;

    }


    /*
       Tabel tetap memiliki ukuran
       yang nyaman dibaca.
    */

    .qrcode-table-wrapper table {

        min-width: 750px;

    }


    .qrcode-table-wrapper th,
    .qrcode-table-wrapper td {

        font-size: 13px;

        padding: 10px;

    }


    .qr-preview svg {

        max-width: 75px;

    }

}


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

@media (max-width: 575.98px) {

    .qrcode-header {

        margin-bottom: 15px;

    }


    .qrcode-header h3 {

        font-size: 19px;

    }


    .qrcode-header p {

        font-size: 12px;

    }


    .qrcode-table-wrapper table {

        min-width: 700px;

    }


    .qrcode-table-wrapper th,
    .qrcode-table-wrapper td {

        padding: 8px;

        font-size: 12px;

    }


    .qr-preview svg {

        max-width: 70px;

    }

}

</style>

@endpush

@endsection