@extends('layouts.app')
@section('title', 'Book Safari — Tadoba Online')

@push('styles')
<style>
.booking-page { max-width: 900px; margin: 48px auto; padding: 0 24px; }
.step-wizard { display: flex; justify-content: space-between; margin-bottom: 40px; position: relative; }
.step-wizard::before { content:''; position:absolute; top:22px; left:10%; right:10%; height:2px; background:rgba(0,0,0,0.08); z-index:0; }
.step { flex:1; text-align:center; position: relative; z-index: 1; }
.step-circle {
    width: 44px; height: 44px; border-radius: 50%;
    background: #eee; color: #999;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 8px; font-size: 16px; font-weight: 600;
    border: 2px solid #ddd; transition: all .3s;
}
.step.active .step-circle  { background: var(--primary); color: var(--gold); border-color: var(--primary); }
.step.done .step-circle    { background: var(--gold); color: var(--dark); border-color: var(--gold); }
.step-label { font-size: 12px; color: var(--text-muted); }
.step.active .step-label   { color: var(--primary); font-weight: 600; }

.step-panel { display: none; }
.step-panel.active { display: block; }

.form-card { background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); padding: 32px; margin-bottom: 24px; }
.form-card-title { font-family:'Playfair Display',serif; font-size: 22px; color: var(--text); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols-1 { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.form-group input, .form-group select {
    border: 1px solid #ddd; border-radius: 8px;
    padding: 10px 14px; font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: border .2s;
}
.form-group input:focus, .form-group select:focus { border-color: var(--primary); outline: none; }
.form-group .hint { font-size: 11px; color: #aaa; }

.visitor-block { background: rgba(27,67,50,0.04); border: 1px solid rgba(27,67,50,0.1); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.visitor-block-title { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }

.price-summary { background: var(--dark); border-radius: 12px; padding: 24px; color: #ccc; }
.ps-title { color: var(--gold); font-family:'Playfair Display',serif; font-size: 18px; margin-bottom: 20px; }
.ps-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; }
.ps-row.total { font-weight: 600; font-size: 18px; color: #fff; border-bottom: none; margin-top: 8px; }
.ps-row.total .amount { color: var(--gold); }

.slot-info { background: rgba(27,67,50,0.06); border: 1px solid rgba(27,67,50,0.15); border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; }
.slot-info-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.si-item label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 3px; }
.si-item span { font-size: 14px; font-weight: 600; color: var(--primary); }

.nav-btns { display: flex; justify-content: space-between; margin-top: 24px; }

.rzp-btn { background: var(--gold); color: var(--dark); border: none; padding: 14px 36px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.rzp-btn:hover { background: var(--gold-lt); }

@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; }
    .slot-info-grid { grid-template-columns: 1fr 1fr; }
}
</style>
@endpush

@section('content')
<div class="booking-page">
    <h1 style="font-size:28px;margin-bottom:8px;">Book Safari</h1>
    <p style="color:var(--text-muted);margin-bottom:32px;">Complete your Tadoba safari booking in 4 simple steps</p>

    {{-- Step Wizard --}}
    <div class="step-wizard">
        <div class="step active" id="step-ind-1">
            <div class="step-circle">1</div>
            <div class="step-label">Zone & Date</div>
        </div>
        <div class="step" id="step-ind-2">
            <div class="step-circle">2</div>
            <div class="step-label">Visitor Details</div>
        </div>
        <div class="step" id="step-ind-3">
            <div class="step-circle">3</div>
            <div class="step-label">Review & Pay</div>
        </div>
        <div class="step" id="step-ind-4">
            <div class="step-circle"><i class="ti ti-check"></i></div>
            <div class="step-label">Confirmed!</div>
        </div>
    </div>

    {{-- STEP 1: Zone & Date --}}
    <div class="step-panel active" id="panel-1">
        <div class="form-card">
            <div class="form-card-title">Select Zone, Date & Shift</div>
            <div class="form-row">
                <div class="form-group">
                    <label>Safari Zone *</label>
                    <select id="s1_zone_id">
                        <option value="">-- Select Zone --</option>
                        @foreach($zones as $z)
                            <option value="{{ $z->id }}" {{ request('zone') == $z->id ? 'selected' : '' }}>
                                {{ $z->name }} ({{ $z->gate_name }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Safari Date *</label>
                    <input type="text" id="s1_date" placeholder="Select date" value="{{ request('date') }}" readonly>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Shift *</label>
                    <select id="s1_shift">
                        <option value="morning" {{ request('shift') === 'morning' ? 'selected' : '' }}>Morning (6:00 AM)</option>
                        <option value="evening" {{ request('shift') === 'evening' ? 'selected' : '' }}>Evening (3:00 PM)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Number of Visitors *</label>
                    <select id="s1_visitor_count" onchange="generateVisitorForms()">
                        @for($i=1; $i<=6; $i++)
                            <option value="{{ $i }}" {{ request('count', 1) == $i ? 'selected' : '' }}>{{ $i }} {{ $i === 1 ? 'Visitor' : 'Visitors' }}</option>
                        @endfor
                    </select>
                </div>
            </div>
            <div id="slot-availability-msg" style="font-size:13px;padding:10px 14px;border-radius:8px;display:none;"></div>
        </div>

        <div class="nav-btns">
            <div></div>
            <button class="btn-primary" onclick="checkSlotAndProceed()" style="padding:12px 32px;font-size:15px;">
                Check Availability & Continue <i class="ti ti-arrow-right"></i>
            </button>
        </div>
    </div>

    {{-- STEP 2: Visitor Details --}}
    <div class="step-panel" id="panel-2">
        <div class="slot-info">
            <div class="slot-info-grid">
                <div class="si-item"><label>Zone</label><span id="si_zone">—</span></div>
                <div class="si-item"><label>Date</label><span id="si_date">—</span></div>
                <div class="si-item"><label>Shift</label><span id="si_shift">—</span></div>
                <div class="si-item"><label>Reporting Time</label><span id="si_reporting">—</span></div>
            </div>
        </div>

        <div class="form-card">
            <div class="form-card-title">Visitor Details</div>
            <div id="visitor-forms"></div>
        </div>

        <div class="nav-btns">
            <button class="btn-outline" onclick="goToStep(1)"><i class="ti ti-arrow-left"></i> Back</button>
            <button class="btn-primary" onclick="validateVisitorsAndProceed()" style="padding:12px 32px;font-size:15px;">
                Continue to Review <i class="ti ti-arrow-right"></i>
            </button>
        </div>
    </div>

    {{-- STEP 3: Review & Pay --}}
    <div class="step-panel" id="panel-3">
        <div class="form-card">
            <div class="form-card-title">Review Your Booking</div>
            <div id="booking-summary"></div>
        </div>

        <div class="price-summary">
            <div class="ps-title">Price Breakdown</div>
            <div id="price-breakdown"></div>
            <div class="ps-row total">
                <span>Total Amount</span>
                <span class="amount" id="total-amount">₹0</span>
            </div>
        </div>

        <div style="margin-top:20px;background:#fff;border-radius:10px;padding:16px;border:1px solid rgba(0,0,0,0.08);">
            <label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;color:var(--text-muted);">
                <input type="checkbox" id="agree_terms" style="margin-top:2px;">
                I agree to the <a href="#" style="color:var(--primary);">Terms & Conditions</a> and understand the safari rules and cancellation policy.
            </label>
        </div>

        <div class="nav-btns" style="margin-top:20px;">
            <button class="btn-outline" onclick="goToStep(2)"><i class="ti ti-arrow-left"></i> Back</button>
            <button class="rzp-btn" onclick="initiatePayment()">
                <i class="ti ti-lock"></i> Pay Securely with Razorpay
            </button>
        </div>
    </div>

    {{-- STEP 4: Success --}}
    <div class="step-panel" id="panel-4" style="text-align:center;padding:48px 24px;">
        <div style="width:80px;height:80px;background:rgba(27,67,50,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:36px;">✅</div>
        <h2 style="font-size:32px;color:var(--primary);margin-bottom:12px;">Booking Confirmed!</h2>
        <p style="color:var(--text-muted);margin-bottom:8px;">Your entry permit is being generated.</p>
        <p style="color:var(--text-muted);margin-bottom:32px;">You will receive permit on WhatsApp & Email within 5 minutes.</p>
        <div id="success-booking-ref" style="background:rgba(27,67,50,0.06);border-radius:10px;padding:20px;margin-bottom:32px;display:inline-block;">
            <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">BOOKING REFERENCE</div>
            <div style="font-size:24px;font-weight:600;color:var(--primary);" id="confirmed-ref">—</div>
        </div>
        <br>
        <a href="{{ route('bookings.my') }}" class="btn-primary">View My Bookings</a>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
let slotData = {};
let pricingData = {};
let createdBooking = {};

flatpickr('#s1_date', {
    minDate: 'today',
    dateFormat: 'Y-m-d',
    maxDate: new Date().fp_incr(90),
});

function generateVisitorForms() {
    const count = parseInt(document.getElementById('s1_visitor_count').value);
    const container = document.getElementById('visitor-forms');
    container.innerHTML = '';

    for (let i = 1; i <= count; i++) {
        container.innerHTML += `
        <div class="visitor-block">
            <div class="visitor-block-title">
                <span>Visitor ${i}</span>
                ${i === 1 ? '<span style="font-size:11px;color:var(--gold);">Primary Contact</span>' : ''}
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Full Name *</label>
                    <input type="text" name="v_name_${i}" placeholder="As per ID proof" required>
                </div>
                <div class="form-group">
                    <label>Age *</label>
                    <input type="number" name="v_age_${i}" placeholder="Age in years" min="1" max="100" required>
                </div>
            </div>
            <div class="form-row cols-3">
                <div class="form-group">
                    <label>Nationality *</label>
                    <select name="v_nationality_${i}" onchange="toggleIdProof(${i}, this.value)">
                        <option value="indian">Indian</option>
                        <option value="foreigner">Foreigner</option>
                    </select>
                </div>
                <div class="form-group" id="idtype_grp_${i}">
                    <label>ID Proof Type *</label>
                    <select name="v_id_proof_type_${i}">
                        <option value="aadhar">Aadhar Card</option>
                        <option value="driving_license">Driving License</option>
                        <option value="voter_id">Voter ID</option>
                        <option value="passport">Passport</option>
                        <option value="pan">PAN Card</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>ID Proof Number *</label>
                    <input type="text" name="v_id_proof_no_${i}" placeholder="ID number" required>
                </div>
            </div>
        </div>`;
    }
}

function toggleIdProof(i, val) {
    const grp = document.getElementById(`idtype_grp_${i}`);
    if (grp) grp.style.display = val === 'foreigner' ? 'none' : 'flex';
}

async function checkSlotAndProceed() {
    const zone  = document.getElementById('s1_zone_id').value;
    const date  = document.getElementById('s1_date').value;
    const shift = document.getElementById('s1_shift').value;
    const msg   = document.getElementById('slot-availability-msg');

    if (!zone || !date) {
        showMsg(msg, 'error', 'Please select Zone and Date.');
        return;
    }

    showMsg(msg, 'info', 'Checking availability...');

    const r = await fetch('/api/booking/check-availability', {
        method: 'POST',
        headers: {'Content-Type':'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content},
        body: JSON.stringify({ zone_id: zone, safari_date: date, shift })
    });

    const data = await r.json();

    if (data.available) {
        showMsg(msg, 'success', `✓ ${data.available_seats} seats available!`);
        slotData    = data;
        pricingData = data.pricing;

        document.getElementById('si_zone').textContent     = document.getElementById('s1_zone_id').options[document.getElementById('s1_zone_id').selectedIndex].text;
        document.getElementById('si_date').textContent     = date;
        document.getElementById('si_shift').textContent    = shift === 'morning' ? 'Morning (6:00 AM)' : 'Evening (3:00 PM)';
        document.getElementById('si_reporting').textContent= data.reporting_time;

        generateVisitorForms();
        setTimeout(() => goToStep(2), 600);
    } else {
        showMsg(msg, 'error', '✗ ' + data.message);
    }
}

function validateVisitorsAndProceed() {
    const count = parseInt(document.getElementById('s1_visitor_count').value);
    for (let i = 1; i <= count; i++) {
        const name = document.querySelector(`[name="v_name_${i}"]`)?.value;
        const age  = document.querySelector(`[name="v_age_${i}"]`)?.value;
        const idno = document.querySelector(`[name="v_id_proof_no_${i}"]`)?.value;
        if (!name || !age || !idno) {
            alert(`Please fill all details for Visitor ${i}`);
            return;
        }
    }
    buildReviewPage();
    goToStep(3);
}

function buildReviewPage() {
    const count = parseInt(document.getElementById('s1_visitor_count').value);
    let visitors = [], total = 0;
    let breakdown = '';

    total += parseFloat(pricingData.guide_charges || 0);
    total += parseFloat(pricingData.vehicle_charges || 0);
    breakdown += `<div class="ps-row"><span>Guide charges</span><span>₹${pricingData.guide_charges}</span></div>`;
    breakdown += `<div class="ps-row"><span>Vehicle charges</span><span>₹${pricingData.vehicle_charges}</span></div>`;

    let summary = `<table style="width:100%;border-collapse:collapse;font-size:14px;">
        <thead><tr style="background:rgba(27,67,50,0.06);">
            <th style="padding:10px;text-align:left;">Visitor</th>
            <th style="padding:10px;">Nationality</th>
            <th style="padding:10px;">Type</th>
            <th style="padding:10px;text-align:right;">Ticket</th>
        </tr></thead><tbody>`;

    for (let i = 1; i <= count; i++) {
        const name = document.querySelector(`[name="v_name_${i}"]`).value;
        const age  = parseInt(document.querySelector(`[name="v_age_${i}"]`).value);
        const nat  = document.querySelector(`[name="v_nationality_${i}"]`).value;
        const type = age < 12 ? 'child' : 'adult';
        const key  = `${nat}_${type}`;
        const price= parseFloat(pricingData[key] || 0);
        total += price;

        visitors.push({
            name, age, nationality: nat,
            id_proof_type: document.querySelector(`[name="v_id_proof_type_${i}"]`)?.value,
            id_proof_no:   document.querySelector(`[name="v_id_proof_no_${i}"]`).value,
        });

        breakdown += `<div class="ps-row"><span>${name} (${nat}, ${type})</span><span>₹${price}</span></div>`;
        summary   += `<tr style="border-bottom:1px solid rgba(0,0,0,0.06);">
            <td style="padding:10px;">${name}</td>
            <td style="padding:10px;text-align:center;">${nat}</td>
            <td style="padding:10px;text-align:center;">${type}</td>
            <td style="padding:10px;text-align:right;">₹${price}</td>
        </tr>`;
    }
    summary += '</tbody></table>';

    const gst   = Math.round(total * 0.05);
    const grand = total + gst;
    breakdown += `<div class="ps-row"><span>GST (5%)</span><span>₹${gst}</span></div>`;

    window._visitors = visitors;
    window._grandTotal = grand;

    document.getElementById('booking-summary').innerHTML = summary;
    document.getElementById('price-breakdown').innerHTML = breakdown;
    document.getElementById('total-amount').textContent  = '₹' + grand.toLocaleString('en-IN');
}

async function initiatePayment() {
    if (!document.getElementById('agree_terms').checked) {
        alert('Please agree to Terms & Conditions.');
        return;
    }

    const r = await fetch('/api/booking/create-safari', {
        method: 'POST',
        headers: {'Content-Type':'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content},
        body: JSON.stringify({
            slot_id:  slotData.slot_id,
            visitors: window._visitors,
        })
    });

    const data = await r.json();
    if (!data.success) { alert(data.message); return; }

    createdBooking = data.booking;
    const order    = data.razorpay_order;

    const rzp = new Razorpay({
        key:         order.key,
        amount:      window._grandTotal * 100,
        currency:    'INR',
        name:        'Tadoba Online Booking',
        description: `Safari Booking — ${document.getElementById('si_zone').textContent}`,
        order_id:    order.order_id,
        prefill: {
            name:  '{{ auth()->user()?->name }}',
            email: '{{ auth()->user()?->email }}',
            contact: '{{ auth()->user()?->phone }}',
        },
        theme: { color: '#1B4332' },
        handler: function(response) {
            fetch('/payment/callback', {
                method: 'POST',
                headers: {'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content},
                body: JSON.stringify({
                    booking_ref:          createdBooking.booking_ref,
                    razorpay_order_id:    response.razorpay_order_id,
                    razorpay_payment_id:  response.razorpay_payment_id,
                    razorpay_signature:   response.razorpay_signature,
                })
            }).then(r => r.json()).then(d => {
                if (d.success) {
                    document.getElementById('confirmed-ref').textContent = createdBooking.booking_ref;
                    goToStep(4);
                }
            });
        }
    });
    rzp.open();
}

function goToStep(n) {
    document.querySelectorAll('.step-panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.step').forEach((s,i) => {
        s.classList.remove('active','done');
        if (i < n-1) s.classList.add('done');
        if (i === n-1) s.classList.add('active');
    });
    document.getElementById(`panel-${n}`).classList.add('active');
    window.scrollTo({top: 0, behavior:'smooth'});
}

function showMsg(el, type, msg) {
    el.style.display = 'block';
    const colors = { success:'#e8f5e9;color:#2e7d32', error:'#ffebee;color:#c62828', info:'#fff8e1;color:#f57f17' };
    el.style.cssText += `;background:${colors[type].split(';')[0].split(':')[1]};${colors[type].split(';')[1]}`;
    el.textContent = msg;
}

// Pre-fill if coming from home page
window.addEventListener('load', () => {
    const p = new URLSearchParams(location.search);
    if (p.get('zone'))  { document.getElementById('s1_zone_id').value = p.get('zone'); }
    if (p.get('shift')) { document.getElementById('s1_shift').value   = p.get('shift'); }
    if (p.get('count')) { document.getElementById('s1_visitor_count').value = p.get('count'); }
    generateVisitorForms();
});
</script>
@endpush