From b2405eee130a461a9dde2a08d27fad02969b7c66 Mon Sep 17 00:00:00 2001
From: zhadaarsita <zhdsita@gmail.com>
Date: Sat, 8 Nov 2025 01:24:09 +0700
Subject: [PATCH] Refactor: Implementation modal and copy clipboard page
 request code

---
 resources/views/baca/request_code.blade.php | 137 ++++++++++++++++----
 1 file changed, 111 insertions(+), 26 deletions(-)

diff --git a/resources/views/baca/request_code.blade.php b/resources/views/baca/request_code.blade.php
index 3888fbf..1e2cee2 100644
--- a/resources/views/baca/request_code.blade.php
+++ b/resources/views/baca/request_code.blade.php
@@ -1,37 +1,122 @@
 @section('page-title', 'Kode Akses Buku')
 <x-app-layout>
-    <div class="container text-center py-5">
-        <div class="row justify-content-center">
-            <div class="col-md-8 col-lg-6">
 
-                <h2 class="fw-bold">KODE AKSES BUKU ANDA</h2>
-                <p class="text-muted">Kode unik telah diberikan secara otomatis. Perhatikan kode dibawah ini:</p>
+    <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">
 
-                <div class="my-4 p-4 rounded" style="border: 2px dashed #0d6efd; background-color: #f8f9fa; display: inline-block;">
-                    <h3 class="fw-bold" style="font-family: monospace; letter-spacing: 2px;">{{ $accessCode }}</h3>
+                    <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>
 
-                <p class="text-muted">Jangan bagikan kepada orang lain.</p>
-                <p>Masukkan kode akses ini pada kolom dibawah ini:</p>
-                
-                @if(session('error'))
-                    <div class="alert alert-danger">
-                        {{ session('error') }}
-                    </div>
-                @endif
+                <div class="modal-body pt-0 px-4">
+                    <div class="text-center mb-4">
 
-                <form action="{{ route('baca.verify_code', ['id' => $book['id']]) }}" method="POST" class="mt-3">
-                    @csrf
-                    <div class="form-group" style="max-width: 400px; margin-left: auto; margin-right: auto;">
-                        <label for="kode_akses" class="form-label fw-bold">Kode Akses Buku:</label>
-                        <input type="text" name="kode_akses" id="kode_akses" class="form-control form-control-lg text-center" placeholder="Masukkan kode akses..." required autofocus>
-                    </div>
-                    <div class="d-grid gap-2" style="max-width: 400px; margin-left: auto; margin-right: auto;">
-                        <button type="submit" class="btn btn-primary btn-lg mt-3">Akses Buku</button>
-                    </div>
-                </form>
+                        <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>
-</x-app-layout>
\ No newline at end of file
+
+    {{-- 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>