{{-- resources/views/livewire/self-check-in-card.blade.php --}}
<div class="kiosk-container mt-5">
    <div class="row signin-margin">
        <div class="col-12">

            {{-- Self Check-In Card (layout only changed to kiosk style) --}}
            <div class="card kiosk-card-2 z-index-0 fadeIn3 fadeInBottom text-center mb-4"
                style="border-radius: 15px !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="neutral-background shadow-primary border-radius-lg py-3 pe-1"
                        style="background: linear-gradient(135deg, #bfbfbf, #d9d9d9) !important;">
                        <!-- Neutral Grey Gradient -->
                        <div class="text-center">
                            <img class="mt-2 mt-md-4 mx-auto z-index-1 img-fluid"
                                src="{{ asset('storage/assets/img/' . Str::slug($propertyDetails->PropertyName) . '.png') }}"
                                alt="Property Logo" style="max-width: 75%; max-height: 75%;"
                                onerror="this.onerror=null; this.src='{{ asset('storage/assets/img/placeholder.png') }}'; Livewire.emit('imageError', '{{ Str::slug($propertyDetails->PropertyName) }}.png');">
                        </div>
                        <div class="text-center text-dark mt-2">
                            <h4>{{ $propertyDetails->name }}</h4>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Booking Lookup Form -->
                    <form wire:submit.prevent="submit">
                        <div class="form-group mb-3">
                            <label for="bookingNumber">Please Enter Your Booking Reference Number:</label>
                            <input type="text" id="bookingNumber" wire:model.defer="bookingNumber"
                                class="form-control input-neutral-gray" placeholder="Booking Number"
                                style="background-color: #fafafa !important; border: 1px solid #ccc !important; color: #333 !important;">
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Check In</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

@push('css')
<style>
    /* Hide SweetAlert's default loader and close button */
    .swal2-loader,
    .swal2-close {
        display: none !important;
    }

    .swal2-timer-progress-bar {
        background-color: black !important;
    }
</style>
@endpush

@push('js')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Inject keyframes for spinner animation if not already present.
        if (!document.getElementById('spin-keyframes')) {
            const style = document.createElement('style');
            style.id = 'spin-keyframes';
            style.innerHTML = `
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            `;
            document.head.appendChild(style);
        }

        // Listen for the 'showBookingData' event from Livewire.
        window.addEventListener('showBookingData', event => {
            const data = event.detail;
            // For simplicity, use the first booking.
            const booking = data.bookings[0];
            // Store the current booking globally.
            window.currentBooking = booking;

            Swal.fire({
                title: 'Self Check-In Successful!',
                html: `
                    <div id="bookingContent" style="position: relative;">
                        <div>
                            <p><strong>Name:</strong> ${booking.guestName}</p>
                            <p><strong>Unit Name:</strong> ${booking.roomName}</p>
                            <p><strong>Check-In Date:</strong> ${booking.startDate}</p>
                            <p><strong>Check-Out Date:</strong> ${booking.endDate}</p>
                            <div id="passcodeContainer" style="margin-top: 20px; display: none;">
                                <strong>Passcode:</strong><br>
                                <span style="font-size: 36px; color: red;">${booking.passcode}#</span>
                            </div>
                            <div style="margin-top: 20px; text-align: center;">
                                <button id="showPasscodeBtn" class="btn btn-secondary" style="margin-right:10px;">Show Passcode</button>
                                <button id="makeCardBtn" class="btn btn-primary">Make Card</button>
                            </div>
                        </div>
                    </div>
                `,
                showConfirmButton: false,
                allowOutsideClick: false,
                didOpen: () => {
                    const container = Swal.getHtmlContainer();
                    // Auto-close timer
                    let autoCloseTimer = setTimeout(() => Swal.close(), 20000);

                    // Show Passcode logic
                    container.querySelector('#showPasscodeBtn').addEventListener('click', () => {
                        clearTimeout(autoCloseTimer);
                        addSpinner(container);
                        container.querySelector('#passcodeContainer').style.display = 'block';
                        setTimeout(() => Swal.close(), 10000);
                    });

                    // Make Card logic
                    container.querySelector('#makeCardBtn').addEventListener('click', () => {
                        clearTimeout(autoCloseTimer);
                        addSpinner(container);

                        if (!container.querySelector('#cardScannerInput')) {
                            const scannerDiv = document.createElement('div');
                            scannerDiv.id = 'scannerDiv';
                            scannerDiv.style.marginTop = '20px';
                            scannerDiv.innerHTML = `
                                <p>Please scan your card:</p>
                                <input type="text" id="cardScannerInput" class="form-control" inputmode="none" readonly>
                            `;
                            container.appendChild(scannerDiv);

                            const scannerInput = container.querySelector('#cardScannerInput');
                            let cardValue = '';
                            scannerInput.focus();

                            scannerInput.addEventListener('keydown', e => {
                                e.preventDefault();
                                if (e.key === 'Enter') {
                                    submitCardFromSwal(cardValue);
                                    return;
                                }
                                if (e.key === 'Backspace') {
                                    cardValue = cardValue.slice(0, -1);
                                } else if (e.key.length === 1) {
                                    cardValue += e.key;
                                }
                                scannerInput.value = cardValue;
                            });

                            setTimeout(() => {
                                if (!scannerInput.value.trim()) Swal.close();
                            }, 20000);

                            // NFC support on Android/Chrome
                            if ('NDEFReader' in window && /Android/.test(navigator.userAgent) && /Chrome/.test(navigator.userAgent)) {
                                const nfcBtn = document.createElement('button');
                                nfcBtn.id = 'scanNFCBtn';
                                nfcBtn.className = 'btn btn-info';
                                nfcBtn.style.marginTop = '10px';
                                nfcBtn.textContent = 'Scan NFC';
                                container.appendChild(nfcBtn);

                                nfcBtn.addEventListener('click', async () => {
                                    try {
                                        const ndef = new NDEFReader();
                                        await ndef.scan();
                                        ndef.addEventListener('readingerror', () => console.log('Cannot read data from the NFC tag.'));
                                        ndef.addEventListener('reading', ({ serialNumber }) => {
                                            const decimalSerial = hexToDecimalWithByteReversal(serialNumber);
                                            scannerInput.value = decimalSerial;
                                            submitCardFromSwal(decimalSerial);
                                        });
                                    } catch (err) {
                                        console.log('NFC scan error:', err);
                                    }
                                });
                            }
                        }
                    });
                },
                willClose: () => Livewire.emit('clearFields')
            });
        });

        window.addEventListener('showError', event => {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: event.detail.message,
                timer: 4000,
                showConfirmButton: false,
                timerProgressBar: true,
            });
        });

        window.addEventListener('imageError', event => {
            Swal.fire({
                icon: 'error',
                title: 'Image Load Error',
                text: `The property logo "${event.detail}" could not be loaded.`,
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 5000,
                timerProgressBar: true,
            });
        });
    });

    function addSpinner(container) {
        if (!container.querySelector('.custom-spinner')) {
            const spinnerDiv = document.createElement('div');
            spinnerDiv.className = 'custom-spinner';
            spinnerDiv.style.cssText = `
                position: absolute;
                top: 10px;
                right: 10px;
                width: 24px;
                height: 24px;
                border: 4px solid rgba(0,0,0,0.1);
                border-top-color: black;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            `;
            container.appendChild(spinnerDiv);
        }
    }

    function submitCardFromSwal(scannedCardValue) {
        if (!scannedCardValue) return;
        const booking = window.currentBooking;
        $.ajax({
            url: "{{ route('process.card') }}",
            type: 'POST',
            data: { cardNumber: scannedCardValue, bookingData: booking },
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
            success: () => Swal.fire({ icon: 'success', title: 'Success', text: 'Card created successfully!', timer: 5000, showConfirmButton: false, timerProgressBar: true }),
            error: () => Swal.fire({ icon: 'error', title: 'Error', text: 'There was a problem creating the card. Please try again.', timer: 4000, showConfirmButton: false, timerProgressBar: true })
        });
    }

    function hexToDecimalWithByteReversal(hex) {
        return parseInt(hex.split(':').reverse().join(''), 16);
    }
</script>
@endpush