@extends('layouts.app')

@section('page-title', 'QR Scanner')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="mb-6">
        <h2 class="text-2xl font-bold text-slate-800 mb-2">QR Code Scanner</h2>
        <p class="text-slate-500">Scan QR code booking atau reservasi penghuni untuk verifikasi</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Scanner Section -->
        <div class="space-y-6">
            <!-- Camera Scanner -->
            <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
                <h3 class="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    Scan dengan Kamera
                </h3>
                
                <!-- QR Scanner Container -->
                <div class="relative bg-slate-900 rounded-xl overflow-hidden mb-4" style="height: 350px;">
                    <div id="reader" class="w-full h-full"></div>
                    
                    <!-- Overlay Guide -->
                    <div class="absolute inset-0 pointer-events-none">
                        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 border-2 border-indigo-500/50 rounded-lg"></div>
                        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48">
                            <div class="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-indigo-500"></div>
                            <div class="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-indigo-500"></div>
                            <div class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-indigo-500"></div>
                            <div class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-indigo-500"></div>
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <div class="flex gap-3">
                    <button id="start-btn" onclick="startScanner()"
                            class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 rounded-xl font-semibold transition flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        Mulai Scan
                    </button>
                    <button id="stop-btn" onclick="stopScanner()" disabled
                            class="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-700 px-4 py-3 rounded-xl font-semibold transition flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
                        </svg>
                        Stop
                    </button>
                </div>

                <!-- Camera Select -->
                <div class="mt-4">
                    <label class="block text-sm font-medium text-slate-700 mb-2">Pilih Kamera</label>
                    <select id="camera-select" onchange="switchCamera()"
                            class="w-full border border-slate-300 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="">Memuat kamera...</option>
                    </select>
                </div>
            </div>

            <!-- Manual Input -->
            <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
                <h3 class="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Input Manual
                </h3>
                
                <form onsubmit="manualScan(event)" class="space-y-3">
                    <div>
                        <input type="text" id="manual-code" 
                               placeholder="Masukkan kode booking/reservasi (contoh: BK20260327...)"
                               class="w-full border border-slate-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 font-mono">
                    </div>
                    <button type="submit"
                            class="w-full bg-slate-700 hover:bg-slate-800 text-white px-4 py-3 rounded-xl font-semibold transition">
                        Cari
                    </button>
                </form>
            </div>
        </div>

        <!-- Result Section -->
        <div class="space-y-6">
            <!-- Loading State -->
            <div id="loading-card" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 hidden">
                <div class="text-center py-12">
                    <div class="animate-spin w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full mx-auto mb-4"></div>
                    <p class="text-slate-600 font-medium">Mencari data...</p>
                </div>
            </div>

            <!-- Empty State -->
            <div id="empty-card" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
                <div class="text-center py-12">
                    <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-10 h-10 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-700 mb-2">Belum Ada Hasil Scan</h3>
                    <p class="text-slate-500 text-sm">Scan QR code atau input kode booking untuk melihat detail</p>
                </div>
            </div>

            <!-- Success Card -->
            <div id="result-card" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 hidden">
                <div id="result-content">
                    <!-- Content will be populated by JavaScript -->
                </div>
            </div>

            <!-- Error Card -->
            <div id="error-card" class="bg-red-50 rounded-2xl border border-red-200 p-6 hidden">
                <div class="flex items-start gap-3">
                    <svg class="w-6 h-6 text-red-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div class="flex-1">
                        <h3 class="font-semibold text-red-900 mb-1">Tidak Ditemukan</h3>
                        <p id="error-message" class="text-red-700 text-sm"></p>
                    </div>
                    <button onclick="clearError()" class="text-red-400 hover:text-red-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- html5-qrcode library -->
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>

<script>
let html5QrcodeScanner = null;
let isScanning = false;

// Initialize camera list
async function initCameras() {
    try {
        const cameras = await html5QrcodeScanner.getCameras();
        const select = document.getElementById('camera-select');
        select.innerHTML = '';
        
        cameras.forEach(camera => {
            const option = document.createElement('option');
            option.value = camera.id;
            option.text = camera.label || `Camera ${select.options.length + 1}`;
            select.appendChild(option);
        });
    } catch (err) {
        console.error('Error accessing cameras:', err);
    }
}

// Start scanner
async function startScanner() {
    if (isScanning) return;
    
    const cameraId = document.getElementById('camera-select').value;
    
    html5QrcodeScanner = new Html5Qrcode('reader');
    
    const config = {
        fps: 10,
        qrbox: { width: 250, height: 250 },
        aspectRatio: 1.0,
        disableFlip: false,
    };
    
    try {
        await html5QrcodeScanner.start(
            cameraId || { facingMode: 'environment' },
            config,
            onScanSuccess
        );
        
        isScanning = true;
        document.getElementById('start-btn').disabled = true;
        document.getElementById('start-btn').classList.add('opacity-50', 'cursor-not-allowed');
        document.getElementById('stop-btn').disabled = false;
        document.getElementById('stop-btn').classList.remove('bg-slate-200', 'text-slate-700');
        document.getElementById('stop-btn').classList.add('bg-red-500', 'hover:bg-red-600', 'text-white');
    } catch (err) {
        console.error('Error starting scanner:', err);
        showError('Gagal mengakses kamera. Pastikan izin kamera telah diberikan.');
    }
}

// Stop scanner
function stopScanner() {
    if (!isScanning || !html5QrcodeScanner) return;
    
    html5QrcodeScanner.stop().then(() => {
        isScanning = false;
        document.getElementById('start-btn').disabled = false;
        document.getElementById('start-btn').classList.remove('opacity-50', 'cursor-not-allowed');
        document.getElementById('stop-btn').disabled = true;
        document.getElementById('stop-btn').classList.add('bg-slate-200', 'text-slate-700');
        document.getElementById('stop-btn').classList.remove('bg-red-500', 'hover:bg-red-600', 'text-white');
    }).catch(err => {
        console.error('Error stopping scanner:', err);
    });
}

// Switch camera
async function switchCamera() {
    if (isScanning) {
        stopScanner();
        setTimeout(() => startScanner(), 500);
    }
}

// On scan success
async function onScanSuccess(decodedText, decodedResult) {
    // Stop scanner after successful scan
    stopScanner();
    
    // Show loading
    showLoading();
    
    // Send to server for processing
    try {
        const response = await fetch('{{ route("scanner.scan") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ code: decodedText }),
        });
        
        const data = await response.json();
        
        if (response.ok && data.success) {
            showResult(data);
        } else {
            showError(data.message || 'Data tidak ditemukan');
        }
    } catch (err) {
        console.error('Scan error:', err);
        showError('Terjadi kesalahan saat memproses scan');
    }
}

// Manual scan
async function manualScan(event) {
    event.preventDefault();
    
    const code = document.getElementById('manual-code').value.trim();
    
    if (!code) {
        showError('Masukkan kode booking atau reservasi');
        return;
    }
    
    showLoading();
    
    try {
        const response = await fetch('{{ route("scanner.scan") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ code: code }),
        });
        
        const data = await response.json();
        
        if (response.ok && data.success) {
            showResult(data);
        } else {
            showError(data.message || 'Data tidak ditemukan');
        }
    } catch (err) {
        console.error('Scan error:', err);
        showError('Terjadi kesalahan saat memproses scan');
    }
}

// Show loading
function showLoading() {
    document.getElementById('empty-card').classList.add('hidden');
    document.getElementById('result-card').classList.add('hidden');
    document.getElementById('error-card').classList.add('hidden');
    document.getElementById('loading-card').classList.remove('hidden');
}

// Show result
function showResult(data) {
    document.getElementById('loading-card').classList.add('hidden');
    document.getElementById('empty-card').classList.add('hidden');
    document.getElementById('error-card').classList.add('hidden');
    
    const content = document.getElementById('result-content');
    const card = document.getElementById('result-card');
    card.classList.remove('hidden');
    
    if (data.type === 'booking') {
        const booking = data.data;
        const statusColor = booking.status === 'confirmed' ? 'green' : (booking.status === 'cancelled' ? 'red' : 'yellow');
        
        content.innerHTML = `
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-1 0h-2m-2 0h-2m-2 0H9m-2 0H7m-2 0H5m-2 0H3m0 0V5a2 2 0 012-2h2a2 2 0 012 2v16a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-800">Booking Request</h3>
                        <p class="text-sm text-slate-500 font-mono">${booking.booking_code}</p>
                    </div>
                </div>
                <span class="px-3 py-1 bg-${statusColor}-100 text-${statusColor}-800 rounded-full text-xs font-semibold uppercase">
                    ${booking.status}
                </span>
            </div>
            
            <div class="space-y-3 mb-4">
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Nama Tamu</span>
                    <span class="font-semibold text-slate-800">${booking.guest_name}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Email</span>
                    <span class="text-slate-700 text-sm">${booking.guest_email}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Telepon</span>
                    <span class="text-slate-700 text-sm">${booking.guest_phone}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Tipe Kamar</span>
                    <span class="font-semibold text-slate-800">${booking.room_type.name}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Check-in</span>
                    <span class="font-semibold text-slate-800">${formatDate(booking.check_in_date)}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Check-out</span>
                    <span class="font-semibold text-slate-800">${formatDate(booking.check_out_date)}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Durasi</span>
                    <span class="font-semibold text-slate-800">${getMonths(booking.check_in_date, booking.check_out_date)} bulan</span>
                </div>
                <div class="flex justify-between py-2">
                    <span class="text-slate-500 text-sm">Estimasi Total</span>
                    <span class="font-bold text-indigo-600">${formatCurrency(booking.estimated_total)}</span>
                </div>
            </div>
            
            <div class="flex gap-2">
                <a href="{{ url('booking-requests') }}/${booking.id}" 
                   class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white text-center px-4 py-2.5 rounded-xl font-semibold transition text-sm">
                    Lihat Detail
                </a>
                <button onclick="clearResult()" 
                        class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition text-sm">
                    Scan Lagi
                </button>
            </div>
        `;
    } else if (data.type === 'reservation') {
        const reservation = data.data;
        const statusColor = reservation.status_color || 'blue';
        
        content.innerHTML = `
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-800">Reservasi</h3>
                        <p class="text-sm text-slate-500 font-mono">${reservation.reservation_code}</p>
                    </div>
                </div>
                <span class="px-3 py-1 bg-${statusColor}-100 text-${statusColor}-800 rounded-full text-xs font-semibold uppercase">
                    ${reservation.status.replace('_', ' ')}
                </span>
            </div>
            
            <div class="space-y-3 mb-4">
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Tamu</span>
                    <span class="font-semibold text-slate-800">${reservation.guest.full_name}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Kamar</span>
                    <span class="font-semibold text-slate-800">${reservation.room.room_number} (${reservation.room.room_type.name})</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Check-in</span>
                    <span class="font-semibold text-slate-800">${formatDate(reservation.check_in_date)}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Check-out</span>
                    <span class="font-semibold text-slate-800">${formatDate(reservation.check_out_date)}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-100">
                    <span class="text-slate-500 text-sm">Pembayaran</span>
                    <span class="font-semibold text-slate-800">${reservation.payment_status}</span>
                </div>
                <div class="flex justify-between py-2">
                    <span class="text-slate-500 text-sm">Total</span>
                    <span class="font-bold text-emerald-600">${formatCurrency(reservation.total_price)}</span>
                </div>
            </div>
            
            <div class="flex gap-2">
                <a href="{{ url('reservations') }}/${reservation.id}" 
                   class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white text-center px-4 py-2.5 rounded-xl font-semibold transition text-sm">
                    Lihat Detail
                </a>
                ${reservation.invoice ? `
                <a href="{{ url('invoices') }}/${reservation.invoice.id}/download" 
                   class="px-4 py-2.5 bg-slate-700 hover:bg-slate-800 text-white rounded-xl font-semibold transition text-sm"
                   target="_blank">
                    Download Invoice
                </a>
                ` : ''}
                <button onclick="clearResult()" 
                        class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition text-sm">
                    Scan Lagi
                </button>
            </div>
        `;
    }
}

// Show error
function showError(message) {
    document.getElementById('loading-card').classList.add('hidden');
    document.getElementById('empty-card').classList.add('hidden');
    document.getElementById('result-card').classList.add('hidden');
    document.getElementById('error-message').textContent = message;
    document.getElementById('error-card').classList.remove('hidden');
}

// Clear error
function clearError() {
    document.getElementById('error-card').classList.add('hidden');
    document.getElementById('empty-card').classList.remove('hidden');
}

// Clear result
function clearResult() {
    document.getElementById('result-card').classList.add('hidden');
    document.getElementById('empty-card').classList.remove('hidden');
    document.getElementById('manual-code').value = '';
}

// Helper functions
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
}

function getMonths(checkIn, checkOut) {
    const start = new Date(checkIn);
    const end = new Date(checkOut);
    const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
    return Math.max(1, Math.ceil(days / 30));
}

function formatCurrency(amount) {
    return 'Rp ' + parseFloat(amount).toLocaleString('id-ID');
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Check if browser supports getUserMedia
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        showError('Browser Anda tidak mendukung akses kamera. Gunakan browser modern seperti Chrome atau Firefox.');
        document.getElementById('start-btn').disabled = true;
    } else {
        // Request camera permission and init
        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
            .then(() => {
                html5QrcodeScanner = new Html5Qrcode('reader');
                initCameras();
            })
            .catch((err) => {
                console.error('Camera permission denied:', err);
                showError('Izin kamera ditolak. Mohon izinkan akses kamera untuk menggunakan scanner.');
                document.getElementById('start-btn').disabled = true;
            });
    }
});

// Cleanup on page unload
window.addEventListener('beforeunload', function() {
    if (isScanning && html5QrcodeScanner) {
        stopScanner();
    }
});
</script>

@endsection