@extends('layouts.koleksi')

@section('title', 'Daftar Koleksi')

@section('content')
    @php
        use Picqer\Barcode\BarcodeGeneratorPNG;
    @endphp

    <div class="table-page-wrapper">

        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <h4 class="mb-0 fw-bold text-dark">
                <i class="fas fa-book text-warning me-2"></i> Daftar Koleksi
            </h4>
        </div>

        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
            <form method="GET" action="{{ route('admin.koleksi.index') }}"
                class="d-flex align-items-center gap-2 flex-wrap">
                <div class="input-group" style="max-width: 320px;">
                    <input type="text" name="search" class="form-control form-control-sm shadow-sm"
                        placeholder="Cari judul, klasifikasi, atau kode..." value="{{ request('search') }}">
                    <button class="btn btn-sm btn-warning text-white px-3" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                @if(request('search'))
                    <a href="{{ route('admin.koleksi.index') }}" class="btn btn-sm btn-secondary px-3">
                        <i class="fas fa-arrow-left"></i> Reset
                    </a>
                @endif
            </form>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm mt-3" role="alert">
                <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="table-responsive shadow-sm rounded-3">
            <table class="table table-bordered table-modern align-middle mb-0">
                <thead>
                    <tr>
                        <th class="text-center" width="4%">No</th>
                        <th>Judul</th>
                        <th width="10%">Klasifikasi</th>
                        <th width="10%">Kode Eksemplar</th>
                        <th width="9%">Barcode</th>
                        <th width="11%">Input Date</th>
                        <th width="11%">Terakhir Diubah</th>
                        <th width="8%">Sampul</th>
                        <th width="13%" class="text-center">Aksi</th>
                    </tr>
                </thead>

                <tbody>
                    @php $no = $results->firstItem(); @endphp
                    @forelse($results as $koleksi)
                        <tr>
                            <td class="text-center fw-semibold">{{ $no++ }}</td>
                            <td class="fw-semibold text-dark">{{ $koleksi->title ?? '-' }}</td>
                            <td class="text-center">{{ $koleksi->classification ?? '-' }}</td>
                            <td class="text-center">{{ $koleksi->kode_eksemplar ?? '-' }}</td>

                            <td class="text-center">
                                @if ($koleksi->barcode && Storage::disk('public')->exists($koleksi->barcode))
                                    <img src="{{ Storage::url($koleksi->barcode) }}"
                                        style="width:110px; height:40px; object-fit:contain;" class="rounded shadow-sm">
                                @elseif($koleksi->kode_eksemplar)
                                    @php
                                        $barcodeGen = new BarcodeGeneratorPNG();
                                        $barcodeImg = base64_encode(
                                            $barcodeGen->getBarcode($koleksi->kode_eksemplar, $barcodeGen::TYPE_CODE_128)
                                        );
                                    @endphp
                                    <img src="data:image/png;base64,{{ $barcodeImg }}"
                                        style="width:110px; height:40px; object-fit:contain;" class="rounded shadow-sm">
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>

                            <td class="text-center">
                                {{ $koleksi->input_date ? \Carbon\Carbon::parse($koleksi->input_date)->format('d-m-Y H:i') : '-' }}
                            </td>
                            <td class="text-center">
                                {{ $koleksi->last_update ? \Carbon\Carbon::parse($koleksi->last_update)->format('d-m-Y H:i') : '-' }}
                            </td>

                            <td class="text-center">
                                @if($koleksi->image && Storage::disk('public')->exists($koleksi->image))
                                    <img src="{{ Storage::url($koleksi->image) }}" class="rounded shadow-sm"
                                        style="width:55px; height:75px; object-fit:cover;">
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>

                            <td class="text-center">
                                <div class="d-flex justify-content-center gap-2 flex-wrap">

                                    @if (!empty($koleksi->kode_eksemplar))
                                        <a href="{{ route('admin.koleksi.barcode_single', ['kode_eksemplar' => $koleksi->kode_eksemplar]) }}"
                                            target="_blank" class="btn btn-sm btn-outline-dark rounded-pill px-3 shadow-sm">
                                            <i class="fas fa-barcode"></i> Cetak Barcode
                                        </a>
                                    @endif

                                    @if (!empty($koleksi->kode_eksemplar))
                                        <a href="{{ route('admin.koleksi.edit', ['kode_eksemplar' => $koleksi->kode_eksemplar]) }}"
                                            class="btn btn-sm btn-outline-primary rounded-pill px-3 shadow-sm">
                                            <i class="fas fa-edit"></i> Edit
                                        </a>
                                    @endif

                                    @if (!empty($koleksi->kode_eksemplar))
                                        <form
                                            action="{{ route('admin.koleksi.destroy', ['kode_eksemplar' => $koleksi->kode_eksemplar]) }}"
                                            method="POST" onsubmit="return confirm('Yakin ingin menghapus koleksi ini?')"
                                            class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-3">
                                                <i class="fas fa-trash"></i> Hapus
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">
                                <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                Tidak ada data koleksi ditemukan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="d-flex flex-column align-items-center mt-4 gap-3">
            {{ $results->links('pagination::bootstrap-4') }}

            <a href="{{ route('admin.dashboard') }}" class="btn btn-secondary rounded-pill px-4 shadow-sm">
                <i class="fas fa-arrow-left me-1"></i> Kembali
            </a>
        </div>
    </div>

    <style>
        .table-page-wrapper {
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            background: #ffffff;
            min-height: 100vh;
            padding: 40px 60px;
            overflow-x: hidden;
        }

        .table-modern thead th {
            background-color: #fbfdffff;
            color: #131313ff;
            font-weight: 600;
            border-bottom: 2px solid #f3f3f5ff;
            text-align: center;
        }

        .table-modern tbody tr:nth-child(even) {
            background-color: #fffaf3;
        }

        .table-modern tbody tr:hover {
            background-color: #fff2cc;
            transition: 0.25s ease;
        }

        .btn-outline-primary:hover {
            background-color: #2563eb;
            color: #fff;
        }

        .btn-outline-danger:hover {
            background-color: #dc2626;
            color: #fff;
        }

        .btn-outline-dark:hover {
            background-color: #111827;
            color: #fff;
        }

        html {
            scroll-behavior: smooth;
        }

        .pagination {
            scroll-margin-top: 150px;
        }
    </style>

@endsection