@section('page-title', 'Kode Akses Buku')
<x-app-layout>

    <div class="modal fade" id="accessCodeModal" tabindex="-1" aria-labelledby="accessCodeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 1rem;">
                <div class="modal-header border-0 pb-0 d-block text-center position-relative">

                    <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal"
                        aria-label="Close">
                    </button>

                    <div class="icon-circle bg-primary-soft text-primary mx-auto mb-3"
                        style="width: 60px; height: 60px; border-radius: 12px;">
                        <i class="bi bi-shield-lock fs-3"></i>
                    </div>

                    <h4 class="modal-title fw-bold" id="accessCodeModalLabel">Akses Buku Digital</h4>
                    <p class="text-muted small">Masukkan kode akses yang telah Anda terima di bawah ini.</p>
                </div>

                <div class="modal-body pt-0 px-4">
                    <div class="text-center mb-4">

                        <p class="mb-2 small text-muted">Kode Akses Unik Anda:</p>
                        <div class="input-group input-group-lg shadow-sm">
                            <input type="text" class="form-control text-center fw-bold bg-light"
                                value="{{ $accessCode ?? 'KODE-TIDAK-TERSEDIA' }}" id="accessCodeDisplay" readonly
                                style="border-right: none; font-family: monospace; letter-spacing: 1px;">
                            <button class="btn btn-outline-primary" type="button" id="copyCodeButton"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="Salin Kode">
                                <i class="bi bi-clipboard"></i>
                            </button>
                        </div>

                        <p class="small text-danger mt-1">Jangan bagikan kode ini kepada orang lain.</p>
                    </div>
                    @if (session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif

                    {{-- Form Verifikasi Kode Akses --}}
                    <form action="{{ route('baca.verify_code', ['id' => $book['id'] ?? 1]) }}" method="POST">
                        @csrf
                        <div class="form-group mb-3">
                            <label for="kode_akses" class="form-label fw-bold small text-start d-block">Verifikasi Kode
                                Akses:</label>
                            <input type="text" name="kode_akses" id="kode_akses"
                                class="form-control form-control text-center"
                                placeholder="Tempel kode akses di sini..." required autofocus>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary mt-2">Akses Buku</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Script untuk Salin Kode, Menampilkan Modal, dan Redirect saat ditutup --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Logika Copy to Clipboard 
            const copyButton = document.getElementById('copyCodeButton');
            const accessCodeDisplay = document.getElementById('accessCodeDisplay');

            if (copyButton) {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });

                copyButton.addEventListener('click', function() {
                    navigator.clipboard.writeText(accessCodeDisplay.value).then(() => {
                        const originalIcon = copyButton.querySelector('i').className;
                        copyButton.querySelector('i').className = 'bi bi-check-lg text-success';

                        const tooltip = bootstrap.Tooltip.getInstance(copyButton);
                        if (tooltip) {
                            tooltip.hide();
                            copyButton.setAttribute('title', 'Tersalin!');
                            tooltip.update();
                            tooltip.show();
                        }

                        setTimeout(() => {
                            copyButton.querySelector('i').className = originalIcon;
                            if (tooltip) {
                                tooltip.hide();
                                copyButton.setAttribute('title', 'Salin Kode');
                                tooltip.update();
                            }
                        }, 1500);
                    }).catch(err => {
                        alert('Gagal menyalin kode. Silakan salin manual.');
                    });
                });
            }

            // Tampilkan Modal Secara Otomatis
            const accessCode = '{{ $accessCode ?? null }}';
            const accessCodeModal = document.getElementById('accessCodeModal');

            if (accessCode && accessCodeModal) {
                var myModal = new bootstrap.Modal(accessCodeModal);
                myModal.show();
            }

            // Logic redirect (Mengarahkan ke baca.ringkasan)
            if (accessCodeModal) {
                accessCodeModal.addEventListener('hidden.bs.modal', function(event) {
                    // Redirect ke halaman ringkasan buku saat modal ditutup
                    window.location.href = '{{ route('baca.ringkasan', ['id' => $book['id'] ?? 1]) }}';
                });
            }
        });
    </script>

</x-app-layout>