@extends('layouts.portal')

@section('content')
<section class="section">
    <div style="max-width: 1000px; margin: 0 auto; padding-top: 8rem; text-align: center;">
        <h1 class="section-title">Select <span>Consultation</span> Type</h1>
        <p class="section-subtitle">Choose your preferred way to connect and consult with us.</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem;">
            
            <!-- Chat Box -->
            <div style="background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 2.5rem 1.5rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
                <div style="font-size: 3rem; margin-bottom: 1rem;">💬</div>
                <h3 style="color: var(--text-main); font-size: 1.5rem; margin-bottom: 0.5rem;">Chat Booking</h3>
                <p style="color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem;">Instant text consultation for quick guidance and advice.</p>
                <div style="font-size: 2.5rem; color: #4ade80; font-weight: bold; margin-bottom: 1.5rem;">₹199</div>
                <button class="btn btn-primary" style="width: 100%; padding: 0.8rem; font-size: 1rem;" onclick="return showPaymentModal(event, 'Chat Consultation', 199);">Book Chat</button>
            </div>

            <!-- Call Box -->
            <div style="background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 2.5rem 1.5rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
                <div style="font-size: 3rem; margin-bottom: 1rem;">📞</div>
                <h3 style="color: var(--text-main); font-size: 1.5rem; margin-bottom: 0.5rem;">Voice Call Booking</h3>
                <p style="color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem;">Detailed one-on-one audio session for in-depth discussion.</p>
                <div style="font-size: 2.5rem; color: #4ade80; font-weight: bold; margin-bottom: 1.5rem;">₹299</div>
                <button class="btn btn-primary" style="width: 100%; padding: 0.8rem; font-size: 1rem;" onclick="return showPaymentModal(event, 'Voice Call Consultation', 299);">Book Call</button>
            </div>

            <!-- Video Box -->
            <div style="background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 2.5rem 1.5rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
                <div style="font-size: 3rem; margin-bottom: 1rem;">📹</div>
                <h3 style="color: var(--text-main); font-size: 1.5rem; margin-bottom: 0.5rem;">Video Call Booking</h3>
                <p style="color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem;">Face-to-face personalized consultation for maximum clarity.</p>
                <div style="font-size: 2.5rem; color: #4ade80; font-weight: bold; margin-bottom: 1.5rem;">₹499</div>
                <button class="btn btn-primary" style="width: 100%; padding: 0.8rem; font-size: 1rem;" onclick="return showPaymentModal(event, 'Video Call Consultation', 499);">Book Video</button>
            </div>

        </div>
        
        <!-- Payment Modal -->
        <div id="paymentModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(5px);">
            <div style="background: rgba(17, 24, 39, 0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2.5rem 2rem; max-width: 400px; width: 90%; text-align: center; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
                <button onclick="closePaymentModal()" style="position: absolute; top: 15px; right: 20px; background: none; border: none; color: white; font-size: 2rem; cursor: pointer;">&times;</button>
                <h3 style="color: var(--text-main); font-size: 1.5rem; margin-bottom: 0.5rem;">Scan QR to Pay</h3>
                <p id="modalConsultationType" style="color: var(--text-muted); margin-bottom: 1.5rem;">Chat Consultation - ₹199</p>
                <div style="background: white; padding: 1rem; border-radius: 12px; display: inline-block; margin-bottom: 1.5rem;">
                    <!-- Placeholder QR code, replace URL with your actual QR code image -->
                    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d0/QR_code_for_mobile_English_Wikipedia.svg" alt="Payment QR Code" style="width: 200px; height: 200px;">
                </div>
                <p style="color: #4ade80; font-size: 0.95rem; margin-bottom: 1.5rem;">Scan using PhonePe, GPay, or Paytm</p>
                <button class="btn btn-primary" style="width: 100%; padding: 0.8rem; font-size: 1rem;" onclick="confirmPayment()">I have paid</button>
            </div>
        </div>
    </div>
</section>

<script>
    function showPaymentModal(event, type, amount) {
        event.preventDefault();
        @if(!Auth::check())
            alert('Please login first to book an appointment.');
            window.location.href = "{!! route('portal.customer.login', ['simulate_host' => request()->query('simulate_host')]) !!}";
        @else
            document.getElementById('modalConsultationType').innerText = type + ' - ₹' + amount;
            document.getElementById('paymentModal').style.display = 'flex';
        @endif
        return false;
    }

    function closePaymentModal() {
        document.getElementById('paymentModal').style.display = 'none';
    }

    function confirmPayment() {
        window.location.href = "{!! route('booking', ['simulate_host' => request()->query('simulate_host')]) !!}";
    }

    function handleBookingType(event) {
        @if(!Auth::check())
            event.preventDefault();
            alert('Please login first to book an appointment.');
            window.location.href = "{!! route('portal.customer.login', ['simulate_host' => request()->query('simulate_host')]) !!}";
            return false;
        @else
            window.location.href = "{!! route('booking', ['simulate_host' => request()->query('simulate_host')]) !!}";
            return true;
        @endif
    }
</script>
@endsection