@extends('layouts.app')

@section('title', 'Expert Consultation - Texora')
@section('meta_description', 'Book a private strategy session with Texora compliance experts for Pakistani and international business setup.')

@section('content')
@php
    $waNum = App\Models\SiteSetting::where('key','whatsapp_number')->value('value') ?? '923001234567';
@endphp

<main class="txp-page" data-txp-page>
    <section class="txp-hero txp-hero--dark" data-txp-hero>
        <div class="txp-shell txp-hero-grid">
            <div>
                <span class="txp-kicker txp-reveal">Expert access</span>
                <h1 class="txp-title txp-reveal">Book a focused session<span class="txp-dot">.</span></h1>
            </div>
            <p class="txp-lede txp-reveal">Get direct guidance for registration, tax filing, documents, compliance status, or international entity setup.</p>
        </div>
    </section>

    <section class="txp-section" data-txp-section>
        <div class="txp-shell">
            <form method="POST" action="{{ route('consultation.store') }}" x-data="{ slot: null, date: '{{ date('Y-m-d', strtotime('+1 day')) }}' }">
                @csrf
                <div class="txp-hero-grid">
                    <div class="space-y-16">
                        <div>
                            <span class="txp-kicker">01 / Session</span>
                            <div class="txp-grid">
                                @foreach($slots as $s)
                                    <label class="txp-card cursor-pointer" :class="slot == {{ $s->id }} ? 'ring-4 ring-[#1710e6]/20 border-[#1710e6]' : ''">
                                        <input type="radio" name="consultation_slot_id" value="{{ $s->id }}" class="sr-only" @change="slot = {{ $s->id }}" required>
                                        <small>{{ $s->duration_minutes }} min</small>
                                        <h3>{{ $s->name }}</h3>
                                        <p>Private strategy session with Texora expert support.</p>
                                        <div class="txp-card-meta">
                                            <span>PKR {{ number_format($s->price, 0) }}</span>
                                            <span>Select</span>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                            @error('consultation_slot_id')
                                <p class="mt-4 text-sm font-bold text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <span class="txp-kicker">02 / Schedule</span>
                            <div class="grid gap-4 md:grid-cols-2">
                                <div>
                                    <label class="txp-label" for="booking_date">Consultation date</label>
                                    <input type="date" id="booking_date" name="booking_date" class="txp-input" min="{{ date('Y-m-d', strtotime('+1 day')) }}" x-model="date" required>
                                </div>
                                <div>
                                    <label class="txp-label" for="booking_time">Preferred time</label>
                                    <select id="booking_time" name="booking_time" class="txp-select" required>
                                        <option value="">Select time</option>
                                        @foreach(['09:00 AM','10:00 AM','11:00 AM','12:00 PM','02:00 PM','03:00 PM','04:00 PM','05:00 PM'] as $time)
                                            <option value="{{ $time }}">{{ $time }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div>
                            <span class="txp-kicker">03 / Context</span>
                            <textarea id="notes" name="notes" class="txp-textarea" placeholder="Briefly describe your business and requirements..."></textarea>
                        </div>
                    </div>

                    <aside class="txp-dark p-8 md:p-12 self-start lg:sticky lg:top-32">
                        <span class="txp-kicker">Summary</span>
                        <h2 class="txp-title" style="font-size:clamp(3.4rem,5vw,6rem);">Ready when you are<span class="txp-dot">.</span></h2>
                        <div class="my-10 space-y-0">
                            <div class="txp-row"><strong>Date</strong><span x-text="date"></span><em>01</em></div>
                            <div class="txp-row"><strong>Medium</strong><span>Private video / WhatsApp follow-up</span><em>02</em></div>
                        </div>
                        @auth
                            <button type="submit" class="txp-button w-full">Confirm Session</button>
                        @else
                            <p class="mb-5 text-white/55">You must be logged in to book a slot.</p>
                            <a href="{{ route('register') }}" class="txp-button w-full">Sign Up to Book</a>
                        @endauth
                        <a href="https://wa.me/{{ $waNum }}" target="_blank" class="mt-4 inline-flex text-sm font-black text-white/55 hover:text-white">Need urgent help? Open WhatsApp -></a>
                    </aside>
                </div>
            </form>
        </div>
    </section>
</main>
@endsection