@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto px-6 py-1">

    <h1 class="text-2xl font-bold mb-4 text-gray-800">Book {{ $dewan->name }}</h1>

    <div class="bg-white p-6 rounded-lg shadow mb-8">
        <div class="flex justify-between items-center mb-4">
            <button id="prevMonth" class="bg-gray-100 px-3 py-1 rounded hover:bg-gray-200">← Prev</button>
            <h2 id="calendarMonth" class="text-lg font-semibold text-gray-700"></h2>
            <button id="nextMonth" class="bg-gray-100 px-3 py-1 rounded hover:bg-gray-200">Next →</button>
        </div>
        <div id="calendarGrid" class="grid grid-cols-7 gap-2 text-center"></div>

        <div class="mt-3 text-sm text-gray-500 flex gap-4">
            <span class="flex items-center gap-1"><span class="inline-block w-4 h-4 bg-green-200 rounded"></span> Available</span>
            <span class="flex items-center gap-1"><span class="inline-block w-4 h-4 bg-red-300 rounded"></span> Booked</span>
            <span class="flex items-center gap-1"><span class="inline-block w-4 h-4 bg-yellow-200 rounded"></span> Partial (Some hours booked)</span>
        </div>
    </div>

    <form method="POST" action="{{ route('dewans.store', $dewan->id) }}" enctype="multipart/form-data" class="space-y-8">
        @csrf

        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-semibold mb-4 text-gray-700">Event Details</h2>

            <div class="bg-white p-3 rounded-lg shadow">
                <label class="block text-lg font-semibold text-gray-700 mb-3 ml-1">Booking Type</label>

                <div class="flex space-x-2 bg-gray-50 p-1 border border-gray-300 rounded-full w-fit">
                    <div class="flex items-center">
                        <input type="radio" name="booking_type" id="kenduriTab" value="kenduri"
                            class="hidden peer" checked>
                        <label for="kenduriTab"
                            class="cursor-pointer rounded-full py-2 px-8 text-gray-600 transition-colors duration-200 peer-checked:bg-indigo-600 peer-checked:text-white">
                            Kenduri
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="radio" name="booking_type" id="eventTab" value="event"
                            class="hidden peer">
                        <label for="eventTab"
                            class="cursor-pointer rounded-full py-2 px-8 text-gray-600 transition-colors duration-200 peer-checked:bg-indigo-600 peer-checked:text-white">
                            Event
                        </label>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-2">
                <div>
                    <label class="block text-sm text-gray-600">Event Name</label>
                    <input type="text" name="event_name" class="w-full border rounded px-3 py-2" required>
                </div>

                <div>
                    <label class="block text-sm text-gray-600">Date</label>
                    <input type="date" id="datePicker" name="date" class="w-full border rounded px-3 py-2" min="{{ date('Y-m-d') }}" required>
                    <p id="dateStatus" class="mt-2 text-sm font-medium"></p>
                </div >
                <div class="event-only">
                    <label class="block text-sm text-gray-600">Start Time</label>
                    <input type="time" id="startTime" name="start_time" class="w-full border rounded px-3 py-2" step="1800">
                </div>
                <div  class="event-only">
                    <label class="block text-sm text-gray-600">End Time</label>
                    <input type="time" id="endTime" name="end_time" class="w-full border rounded px-3 py-2" step="1800">
                </div>
            </div>

            <p class="text-gray-500 italic kenduri-note p-2">
                For kenduri bookings, time is fixed for the whole day.
            </p>
        </div>

        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-lg font-semibold mb-4 text-gray-700">Additional Services</h2>
            @if($addons->isEmpty())
                <p class="text-gray-500 italic">No additional add-ons available for this Dewan.</p>
            @else
                <div class="space-y-3">
                    @foreach($addons as $addon)
                        <div class="flex items-center justify-between border-b pb-2 addon-row"
                             data-type="{{ $addon->type ?? 'both' }}">
                            <div>
                                <p class="font-medium text-gray-800">{{ $addon->name }}</p>
                                <p class="text-gray-500 text-sm">RM{{ number_format($addon->price, 2) }}</p>
                            </div>
                            <div class="flex items-center gap-2">
                                <input type="checkbox" class="addon-checkbox" data-price="{{ $addon->price }}" name="addons[{{ $loop->index }}][id]" value="{{ $addon->id }}">
                                <input type="number" name="addons[{{ $loop->index }}][quantity]" min="1" value="1"
                                       class="addon-qty w-16 border rounded px-2 py-1 text-sm">
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="bg-white p-6 rounded-lg shadow" 
            id="booking-summary-box"
            data-service-charge-percent="{{ $dewan->service_charge_percent ?? 5.0 }}"
            data-sst-percent="{{ $dewan->sst_percent ?? 8.0 }}">

            <h2 class="text-lg font-semibold mb-4 text-gray-700">Booking Summary</h2>
            
            <div class="space-y-2">
                <div class="flex justify-between items-center text-gray-700">
                    <span id="summary-base-rate-label">Dewan Rental</span>
                    <span id="summary-base-rate" class="font-medium">RM0.00</span>
                </div>

                <div id="summary-addons-container" class="border-b border-t border-gray-200 py-3 my-3 space-y-2">
                    <p class="text-gray-400 text-sm italic">No addons selected.</p>
                </div>
                <div class="flex justify-between items-center text-gray-600 text-sm">
                    <span id="summary-service-charge-label">Service Charge (5.0%)</span>
                    <span id="summary-service-charge" class="font-medium">RM0.00</span>
                </div>

                <div class="flex justify-between items-center text-gray-600 text-sm mb-2">
                    <span id="summary-sst-label">SST (8.0%)</span>
                    <span id="summary-sst" class="font-medium">RM0.00</span>
                </div>

                <div class="flex justify-between items-center text-gray-700 text-sm mt-2">
                    <span>Deposit (RM{{ $dewan->rate_deposit  }})</span>
                    <span id="summary-deposit" class="font-medium text-indigo-600">RM0.00</span>
                </div>
                <div class="flex justify-between items-center text-gray-800 font-semibold text-lg">
                    <span>Grand total</span>
                    <span id="summary-subtotal">RM0.00</span>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-lg shadow relative">
            <h2 class="text-lg font-semibold mb-4 text-gray-700">Deposit Payment</h2>
            <p class="text-sm text-gray-500 mb-3">
                Please upload your deposit slip after reviewing the payment details.
            </p>

            <button type="button" id="openDepositModal"
                class="bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-md shadow">
                Upload Deposit Slip
            </button>

            <input type="file" id="depositInput" name="deposit_receipt" accept=".jpg,.jpeg,.png,.pdf" class="hidden">
        </div>

        <div id="depositModal"
            class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center z-[10] px-4 py-8 overflow-y-auto">
            <div class="bg-white w-full max-w-lg rounded-lg shadow-lg p-6 relative my-10 max-h-[130vh] overflow-y-auto">
                <button id="closeDepositModal" class="absolute top-3 right-3 text-gray-500 hover:text-gray-700">
                    ✕
                </button>
            
                <div class="bg-white p-6 rounded-lg shadow">
                    <h2 class="text-lg font-semibold mb-4 text-gray-700">Deposit Payment</h2>
                    <p class="text-sm text-gray-500 mb-3">
                        Please review the payment details and upload your deposit slip before submitting your booking.
                    </p>

                    <div class="border-t pt-4 mb-4">
                        <p><strong>Dewan:</strong> {{ $dewan->name }}</p>
                        <p><strong>Total Amount:</strong> <span id="modalTotal" class="text-indigo-600 font-semibold">{{ $dewan->rate_deposit }}</span></p>
                    </div>

                    <div class="border-t pt-4 mb-4">
                        <h3 class="text-lg font-semibold text-gray-700 mb-2">Bank Transfer Details</h3>
                        <p><strong>Bank:</strong> {{ $dewan->bank_name ?? 'CIMB Bank' }}</p>
                        <p><strong>Account No.:</strong> {{ $dewan->account_number ?? '15203700135675' }}</p>
                        <p><strong>Account Name:</strong> {{ $dewan->account_name ?? 'Muhammad Ezz Zikry Bin Ezry' }}</p>

                        <div class="text-center my-4">
                            <img src="{{ $dewan->qr_code ?? asset('storage/images/qrcodes/test.jpg') }}" 
                                 alt="QR Code" class="w-48 mx-auto rounded shadow">
                            <p class="text-gray-500 text-sm mt-2">Scan this QR code to make your deposit payment.</p>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Upload Deposit Slip:</label>
                        <input type="file" id="modalDepositInput" accept=".jpg,.jpeg,.png,.pdf"
                            class="block w-full border rounded px-3 py-2 mb-4">
                    </div>

                    <div class="flex justify-between items-center">
                        <button id="closeModalBtn" type="button"
                            class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md">
                            Cancel
                        </button>
                        <button id="saveDepositBtn" type="button"
                            class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-md">
                            Save & Close
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-between items-center">
            <a href="{{ route('dewans.choose', $dewan->id) }}"
               class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium transition">
                ← Back
            </a>
            <button type="submit" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-md">
                Submit Booking
            </button>
        </div>
        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 p-3 rounded mb-4">
                <ul>
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </form>
</div>

<script>
/* ============================
   💡 SMART BOOKING SCRIPT
   Fully dynamic, safe & modular
=============================== */

// --- Dynamic Rates from Database ---
const baseRateKenduri = parseFloat("{{ $dewan->rate_kenduri }}");
const baseRateEvent = parseFloat("{{ $dewan->rate_event }}");
const SERVICE_CHARGE_PERCENT = parseFloat("{{ $dewan->service_charge_percent ?? 5.0 }}");
const SST_PERCENT = parseFloat("{{ $dewan->sst_percent ?? 8.0 }}");
const DEPOSIT_RATE = parseFloat("{{ $dewan->rate_deposit ?? 0 }}");

// --- Bookings Data ---
const bookings = @json($bookings);

// --- Calendar Limits ---
let currentMonth = new Date();
const today = new Date();
const minMonth = new Date(today.getFullYear(), today.getMonth(), 1);
const maxMonth = new Date(today.getFullYear() + 1, 11, 31);

// --- DOM References ---
const grid = document.getElementById('calendarGrid');
const monthTitle = document.getElementById('calendarMonth');
const datePicker = document.getElementById('datePicker');
const dateStatus = document.getElementById('dateStatus');

const summaryBox = document.getElementById('booking-summary-box');
const baseRateLabel = document.getElementById('summary-base-rate-label');
const baseRateEl = document.getElementById('summary-base-rate');
const addonsContainer = document.getElementById('summary-addons-container');
const subtotalEl = document.getElementById('summary-subtotal');
const serviceChargeLabel = document.getElementById('summary-service-charge-label');
const serviceChargeEl = document.getElementById('summary-service-charge');
const sstLabel = document.getElementById('summary-sst-label');
const sstEl = document.getElementById('summary-sst');
const totalAmountEl = document.getElementById('totalAmount');

const bookingRadios = document.querySelectorAll('input[name="booking_type"]');
const startInput = document.getElementById('startTime');
const endInput = document.getElementById('endTime');
const checkboxes = document.querySelectorAll('.addon-checkbox');
const quantities = document.querySelectorAll('.addon-qty');
const depositInput = document.getElementById('depositInput');
const form = document.querySelector('form');
const submitBtn = document.getElementById('submitBookingBtn');

let bookingType = document.querySelector('input[name="booking_type"]:checked')?.value || 'kenduri';

/* === CALENDAR RENDER === */
/* === CALENDAR RENDER (Simplified — full-day block) === */
function renderCalendar() {
    grid.innerHTML = '';
    monthTitle.textContent = currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' });

    const firstDay = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
    const lastDay  = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);

    // Fill blank cells before first day
    for (let i = 0; i < firstDay.getDay(); i++) {
        grid.innerHTML += `<div></div>`;
    }

    for (let d = 1; d <= lastDay.getDate(); d++) {
        const dateObj  = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), d);
        const formatted = dateObj.getFullYear() + "-" +
            String(dateObj.getMonth() + 1).padStart(2, '0') + "-" +
            String(dateObj.getDate()).padStart(2, '0');

        // Check if this day already has *any* booking
        // This prevents the timezone shift and handles dates with or without timestamps
        const isBooked = bookings.some(b => new Date(b.date).toISOString().split('T')[0] === formatted);

        // Full block: red if booked, green if available
        const colorClass = isBooked
            ? "bg-red-300 text-red-800 cursor-not-allowed"
            : "bg-green-100 hover:bg-green-200 cursor-pointer";

        grid.innerHTML += `
            <div data-date="${formatted}"
                 class="py-2 rounded text-center transition ${colorClass}">
                ${d}
            </div>`;
    }

    // Disable prev/next navigation properly
    document.getElementById('prevMonth').disabled = currentMonth <= minMonth;
    document.getElementById('nextMonth').disabled = currentMonth >= maxMonth;
    document.getElementById('prevMonth').style.opacity = currentMonth <= minMonth ? 0.5 : 1;
    document.getElementById('nextMonth').style.opacity = currentMonth >= maxMonth ? 0.5 : 1;

    // Click to select only green dates
    grid.querySelectorAll('div[data-date]').forEach(cell => {
        if (cell.classList.contains('bg-red-300')) return; // skip booked
        cell.addEventListener('click', () => {
            grid.querySelectorAll('div').forEach(c => c.classList.remove('ring-2', 'ring-indigo-600'));
            cell.classList.add('ring-2', 'ring-indigo-600');
            datePicker.value = cell.dataset.date;
            dateStatus.textContent = '✅ Selected: ' + cell.dataset.date;
            dateStatus.className = 'mt-2 text-sm font-medium text-green-600';
        });
    });
}

// Calendar Navigation
document.getElementById('prevMonth').addEventListener('click', () => {
    const prev = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
    if (prev >= minMonth) { currentMonth = prev; renderCalendar(); }
});
document.getElementById('nextMonth').addEventListener('click', () => {
    const next = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
    if (next <= maxMonth) { currentMonth = next; renderCalendar(); }
});


/* === TOTAL CALCULATION === */
function calculateTotal() {
    let basePrice = 0;
    let hours = 0;

    // --- Base Rate ---
    if (bookingType === 'kenduri') {
        basePrice = baseRateKenduri;
        baseRateLabel.textContent = 'Dewan Rental (Kenduri)';
    } else {
        if (startInput.value && endInput.value) {
            const diff = (new Date(`1970-01-01T${endInput.value}`) - new Date(`1970-01-01T${startInput.value}`)) / 3600000;
            if (diff > 0) hours = diff;
        }
        basePrice = hours * baseRateEvent;
        baseRateLabel.textContent = `Dewan Rental (${hours.toFixed(1)} ${hours === 1 ? 'hour' : 'hours'})`;
    }
    baseRateEl.textContent = 'RM' + basePrice.toFixed(2);

    // --- Addons ---
    let addonsTotal = 0;
    addonsContainer.innerHTML = '';
    checkboxes.forEach((cb, i) => {
        if (cb.checked) {
            const price = parseFloat(cb.dataset.price);
            const qty = parseInt(quantities[i].value) || 1;
            const name = cb.closest('.addon-row').querySelector('.font-medium').textContent;
            const subtotal = price * qty;
            addonsTotal += subtotal;
            addonsContainer.innerHTML += `
                <div class="flex justify-between items-center text-gray-600 text-sm">
                    <span>${name} (${qty} × RM${price.toFixed(2)})</span>
                    <span class="font-medium">RM${subtotal.toFixed(2)}</span>
                </div>`;
        }
    });
    if (addonsTotal === 0)
        addonsContainer.innerHTML = '<p class="text-gray-400 text-sm italic">No addons selected.</p>';

    // --- Totals ---
    const subtotal = basePrice + addonsTotal;
    const serviceCharge = subtotal * (SERVICE_CHARGE_PERCENT / 100);
    const sst = subtotal * (SST_PERCENT / 100);
    const depositAmount = parseFloat("{{ $dewan->rate_deposit ?? 0 }}");

    // ✅ This is your true total:
    const grandTotal = subtotal + serviceCharge + sst - depositAmount;

    // --- Update UI ---
    serviceChargeLabel.textContent = `Service Charge (${SERVICE_CHARGE_PERCENT.toFixed(1)}%)`;
    sstLabel.textContent = `SST (${SST_PERCENT.toFixed(1)}%)`;
    baseRateEl.textContent = 'RM' + basePrice.toFixed(2);
    serviceChargeEl.textContent = 'RM' + serviceCharge.toFixed(2);
    sstEl.textContent = 'RM' + sst.toFixed(2);
    document.getElementById('summary-deposit').textContent = '- RM' + depositAmount.toFixed(2);

    // ✅ Final displayed total
    subtotalEl.textContent = 'RM' + grandTotal.toFixed(2);

    // Optional label change
    const totalLabel = document.getElementById('summary-total-label');
    totalLabel.textContent = depositAmount > 0 
        ? 'Grand Total (After Deposit)' 
        : 'Grand Total';

}

/* === BOOKING TYPE TOGGLE === */
function updateBookingType() {
    bookingType = document.querySelector('input[name="booking_type"]:checked')?.value || 'kenduri';
    document.querySelectorAll('.event-only').forEach(e => e.style.display = bookingType === 'event' ? 'block' : 'none');
    document.querySelector('.kenduri-note').style.display = bookingType === 'kenduri' ? 'block' : 'none';
    calculateTotal();
}

/* === DEPOSIT VALIDATION === */
// === Deposit Modal Handling ===
document.addEventListener('DOMContentLoaded', () => {
    const openModalBtn = document.getElementById('openDepositModal');
    const depositModal = document.getElementById('depositModal');
    const closeModalBtn = document.getElementById('closeDepositModal');
    const cancelModalBtn = document.getElementById('closeModalBtn');
    const saveDepositBtn = document.getElementById('saveDepositBtn');
    const modalDepositInput = document.getElementById('modalDepositInput');
    const depositInput = document.getElementById('depositInput');

    if (!openModalBtn || !depositModal) return; // Safety guard

    // 🟢 Open Modal
    openModalBtn.addEventListener('click', () => {
        depositModal.classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
    });

    // 🔴 Close Modal (X or Cancel)
    [closeModalBtn, cancelModalBtn].forEach(btn => {
        if (btn) btn.addEventListener('click', () => {
            depositModal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        });
    });

    // 💾 Save Deposit Slip
    if (saveDepositBtn) {
        saveDepositBtn.addEventListener('click', () => {
            if (modalDepositInput.files.length > 0) {
                depositInput.files = modalDepositInput.files;
                alert('✅ Deposit slip attached successfully!');
                document.body.classList.remove('overflow-hidden');
                depositModal.classList.add('hidden');
            } else {
                alert('⚠️ Please upload your deposit slip before saving.');
            }
        });
    }
});

/* === INITIALIZE === */
bookingRadios.forEach(r => r.addEventListener('change', updateBookingType));
[startInput, endInput, ...checkboxes, ...quantities].forEach(el => el.addEventListener('input', calculateTotal));

renderCalendar();
updateBookingType();
calculateTotal();
</script>
@endsection