From 3ffa8ee33a4d29715b4f20a01dee9c3e39949af8 Mon Sep 17 00:00:00 2001
From: LailaWulandarii <E41220418@student.polije.ac.id>
Date: Sat, 17 Jan 2026 16:51:18 +0700
Subject: [PATCH] refactor detail-foto view to remove commented code and
 improve readability

---
 resources/views/user/detail-foto.blade.php | 103 ++-------------------
 1 file changed, 9 insertions(+), 94 deletions(-)

diff --git a/resources/views/user/detail-foto.blade.php b/resources/views/user/detail-foto.blade.php
index 113a47b..16ad51a 100644
--- a/resources/views/user/detail-foto.blade.php
+++ b/resources/views/user/detail-foto.blade.php
@@ -128,31 +128,23 @@ class="detailfoto-thumb rounded-4">
     </section>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script>
-        // ============================================================
-        // 1. VARIABLE GLOBAL & UTILITIES
-        // ============================================================
-        let countdown; // Variabel untuk menyimpan timer
+        let countdown;
         let isTimeUp = false;
         const durasiPaket = parseInt(document.getElementById('data-paket')?.dataset.durasi || 15);
 
-        // Fungsi Update Counter (+/-) untuk Additional
         function updateCounter(btn, change) {
             const input = btn.parentElement.querySelector('input');
             let currentValue = parseInt(input.value) || 0;
             let newValue = currentValue + change;
 
-            if (newValue < 0) newValue = 0; // Cegah minus
+            if (newValue < 0) newValue = 0;
             input.value = newValue;
         }
 
-        // Fungsi Tampilkan Kalender (Step 1 -> Step 2)
         function showCalendar() {
             document.getElementById('btn-booking-wrapper').style.display = 'none';
-
-            // DISABLE KOLOM KIRI
             const leftColumn = document.getElementById('left-column');
             if (leftColumn) leftColumn.classList.add('disabled-section');
-
             const calendarCol = document.getElementById('calendar-column');
             if (calendarCol) {
                 calendarCol.classList.remove('d-none');
@@ -164,57 +156,39 @@ function showCalendar() {
             }
         }
 
-        // Fungsi Sembunyikan Kalender (Tombol Batalkan)
         function hideCalendar() {
             if (countdown) clearInterval(countdown);
-
             document.getElementById('calendar-column').classList.add('d-none');
             document.getElementById('btn-booking-wrapper').style.display = 'block';
-
-            // ENABLE KEMBALI KOLOM KIRI
             const leftColumn = document.getElementById('left-column');
             if (leftColumn) leftColumn.classList.remove('disabled-section');
-
-            // Scroll kembali ke atas (opsional, agar user sadar kolom kiri aktif lagi)
             leftColumn.scrollIntoView({
                 behavior: 'smooth'
             });
-
-            // Reset pilihan tanggal & jam di input hidden
             document.getElementById('input_tgl_booking').value = "";
             document.getElementById('input_jam_mulai').value = "";
         }
 
-        // Fungsi Timer Mundur
         function startTimer(duration) {
             let timer = duration,
                 minutes, seconds;
             const display = document.querySelector('#booking-timer');
-            const submitBtn = document.querySelector('.btn-action-submit'); // Pastikan class tombol benar
-
-            isTimeUp = false; // Reset status setiap timer mulai
+            const submitBtn = document.querySelector('.btn-action-submit');
+            isTimeUp = false;
             if (countdown) clearInterval(countdown);
-
             countdown = setInterval(function() {
                 minutes = parseInt(timer / 60, 10);
                 seconds = parseInt(timer % 60, 10);
-
                 minutes = minutes < 10 ? "0" + minutes : minutes;
                 seconds = seconds < 10 ? "0" + seconds : seconds;
-
                 if (display) display.textContent = minutes + ":" + seconds;
-
                 if (--timer < 0) {
                     clearInterval(countdown);
-                    isTimeUp = true; // Kunci status
-
-                    // Matikan tombol submit secara visual
+                    isTimeUp = true;
                     if (submitBtn) {
                         submitBtn.disabled = true;
                         submitBtn.classList.add('disabled');
                     }
-
-                    // Tampilkan alert
                     Swal.fire({
                         title: 'Waktu Habis!',
                         text: 'Sesi booking Anda telah berakhir. Silakan pilih ulang jadwal.',
@@ -223,13 +197,12 @@ function startTimer(duration) {
                         confirmButtonColor: '#3B8181',
                         allowOutsideClick: false
                     }).then(() => {
-                        location.reload(); // Refresh halaman
+                        location.reload();
                     });
                 }
             }, 1000);
         }
 
-        // Helper: Hitung Jam Selesai
         function calculateEndTime(startTime, duration) {
             let [hours, minutes] = startTime.split(':').map(Number);
             minutes += duration;
@@ -241,27 +214,14 @@ function calculateEndTime(startTime, duration) {
             return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
         }
 
-
-        // ============================================================
-        // 2. LOGIC AJAX & INTERAKSI KALENDER
-        // ============================================================
-
-        // A. Fungsi Ganti Bulan (Tanpa Refresh)
         function changeMonth(month, year) {
             const wrapper = document.getElementById('calendar-grid-wrapper');
-
-            // Efek loading
             wrapper.style.opacity = '0.5';
-
-            // Panggil Controller via AJAX
             fetch(`/load-calendar?month=${month}&year=${year}`)
-                .then(response => response.json()) // Pastikan controller return JSON { html: "..." }
+                .then(response => response.json())
                 .then(data => {
-                    // Ganti isi wrapper dengan HTML baru dari server
                     wrapper.innerHTML = data.html;
                     wrapper.style.opacity = '1';
-
-                    // PENTING: Pasang ulang listener karena elemen HTML-nya baru
                     reinitDateListeners();
                 })
                 .catch(err => {
@@ -270,54 +230,37 @@ function changeMonth(month, year) {
                 });
         }
 
-        // B. Pasang Event Listener ke Tanggal (Re-usable)
         function reinitDateListeners() {
             const dateItems = document.querySelectorAll('.date-item:not(.disabled):not(.empty)');
-
             dateItems.forEach(item => {
                 item.addEventListener('click', function() {
-                    // UI: Reset warna selected lama
                     document.querySelectorAll('.date-item').forEach(el => el.classList.remove('selected'));
                     this.classList.add('selected');
-
-                    // Logic: Simpan tanggal ke input hidden
                     const tgl = this.dataset.date;
                     const tglInput = document.getElementById('input_tgl_booking');
                     if (tglInput) tglInput.value = tgl;
-
-                    // Logic: Cek Slot ke Database
                     checkSlotAvailability(tgl);
                 });
             });
         }
 
-        // C. Cek Slot Penuh via AJAX
         function checkSlotAvailability(tgl) {
-            // 1. Reset semua tombol jam jadi aktif dulu
             const allTimeBtns = document.querySelectorAll('.btn-time');
             allTimeBtns.forEach(btn => {
                 btn.classList.remove('disabled', 'full', 'active');
                 btn.disabled = false;
                 btn.title = "";
             });
-
-            // 2. Kosongkan input jam (karena user ganti tanggal)
             document.getElementById('input_jam_mulai').value = "";
             const sekarang = new Date();
             const jamSekarang = sekarang.getHours();
             const menitSekarang = sekarang.getMinutes();
             const totalMenitSekarang = (jamSekarang * 60) + menitSekarang;
-
-            // Format tanggal hari ini (YYYY-MM-DD) untuk perbandingan
             const hariIni = sekarang.toISOString().split('T')[0];
-
-            // 3. LOGIKA JAM LEWAT: Jika tanggal yang diklik adalah hari ini
             if (tgl === hariIni) {
                 allTimeBtns.forEach(btn => {
                     const [jamBtn, menitBtn] = btn.dataset.time.split(':').map(Number);
                     const totalMenitBtn = (jamBtn * 60) + menitBtn;
-
-                    // Jika waktu pada tombol sudah lewat dari waktu sekarang
                     if (totalMenitBtn <= totalMenitSekarang) {
                         btn.classList.add('disabled', 'full');
                         btn.disabled = true;
@@ -325,75 +268,47 @@ function checkSlotAvailability(tgl) {
                     }
                 });
             }
-            // 3. Panggil Server
             fetch(`/cek-slot-foto?tanggal=${tgl}`)
                 .then(res => res.json())
                 .then(data => {
                     data.forEach(booking => {
-                        // Ambil jam depan saja (09:00:00 -> 09:00)
                         const jamPenuh = booking.jam_mulai.substring(0, 5);
-
-                        // Cari tombol yg punya data-time sama
                         const btnPenuh = document.querySelector(`.btn-time[data-time="${jamPenuh}"]`);
-
                         if (btnPenuh) {
-                            btnPenuh.classList.add('disabled', 'full'); // Tambah class styling
-                            btnPenuh.disabled = true; // Matikan klik
+                            btnPenuh.classList.add('disabled', 'full');
+                            btnPenuh.disabled = true;
                             btnPenuh.title = "Slot Sudah Terisi";
                         }
                     });
                 })
                 .catch(err => console.error("Gagal cek slot:", err));
         }
-
-
-        // ============================================================
-        // 3. INISIALISASI SAAT HALAMAN DIMUAT (DOM READY)
-        // ============================================================
         document.addEventListener('DOMContentLoaded', function() {
-
-            // 1. Jalankan Listener Tanggal (Untuk kalender mulai)
             reinitDateListeners();
-
-            // 2. Pasang Listener Tombol Jam (Cukup sekali)
             const timeButtons = document.querySelectorAll('.btn-time');
             timeButtons.forEach(btn => {
                 btn.addEventListener('click', function(e) {
                     e.preventDefault();
-
-                    // Cek jika tombol disabled (safety)
                     if (this.disabled || this.classList.contains('disabled')) return;
-
-                    // UI: Reset active
                     timeButtons.forEach(el => el.classList.remove('active'));
                     this.classList.add('active');
-
-                    // Logic: Simpan Jam
                     const startTime = this.dataset.time;
                     document.getElementById('input_jam_mulai').value = startTime;
-
-                    // Logic: Hitung Jam Selesai
                     const endTime = calculateEndTime(startTime, durasiPaket);
                     document.getElementById('input_jam_selesai').value = endTime;
                 });
             });
-
-            // 3. Validasi Submit Form
-            // 3. Validasi Submit Form
             const bookingForm = document.getElementById('form-booking');
             if (bookingForm) {
                 bookingForm.addEventListener('submit', function(e) {
                     const tgl = document.getElementById('input_tgl_booking').value;
                     const jam = document.getElementById('input_jam_mulai').value;
-
-                    // CEK APAKAH WAKTU HABIS
                     if (isTimeUp) {
                         e.preventDefault();
                         Swal.fire('Maaf!', 'Waktu booking sudah habis, halaman akan dimuat ulang.', 'error')
                             .then(() => location.reload());
                         return;
                     }
-
                     if (!tgl || !jam) {
                         e.preventDefault();
                         Swal.fire({