@extends('layouts.site')
@section('title', \App\Models\SiteSetting::get('schedule_session_meta_title', 'Schedule a Session - Faith & Future Summit'))
@section('meta_description', \App\Models\SiteSetting::get('schedule_session_meta_description', 'Book an academic session with FFS speakers.'))
@section('breadcrumbs', '[{"name":"Schedule a Session"}]')

@section('content')
@php $tdata = \App\Models\TimeSlot::grid() @endphp

{{-- Hero --}}
<section class="relative py-16 md:py-24 px-margin-mobile">
  <div class="max-w-4xl mx-auto text-center reveal">
    <span class="text-primary font-label-caps tracking-widest block mb-4 uppercase">Engage With Us</span>
    <x-heading key="schedule_session_heading" tag="h1" default="Schedule a Session" class="font-display-xl text-white mb-6" />
    <p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto mb-6">Select an available time slot below to request an academic session, mentorship meeting, or speaking engagement.</p>
    <p class="text-sm text-muted">All bookings are subject to confirmation and availability approval by the organizing team.</p>
  </div>
</section>

{{-- How to Book --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-12 reveal">
  <div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-center">
    @foreach([['event_available','Select Slot','Pick an available (green) time'],['edit_note','Fill Form','Your details & session type'],['send','Submit','Request is sent'],['hourglass_top','Review','Team checks availability'],['check_circle','Confirmed','Receive confirmation']] as [$icon,$title,$desc])
    <div class="p-4 rounded-2xl bg-surface-elevation-1 border border-border-subtle">
      <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-3">
        <span class="material-symbols-outlined text-primary text-xl">{{ $icon }}</span>
      </div>
      <h4 class="text-white font-bold text-xs mb-1">{{ $title }}</h4>
      <p class="text-on-surface-variant text-[11px]">{{ $desc }}</p>
    </div>
    @endforeach
  </div>
</section>

{{-- Time Slot Grid --}}
<section class="max-w-6xl mx-auto px-margin-mobile pb-16 reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center">Available Time Slots</h2>

  @if(empty($tdata['dates']))
  <div class="text-center py-16 bg-surface-elevation-1 rounded-3xl border border-border-subtle">
    <span class="material-symbols-outlined text-7xl text-muted/30 block mb-4">event_busy</span>
    <p class="text-on-surface-variant text-lg">No time slots available yet. Check back soon.</p>
  </div>
  @else
  <div class="overflow-x-auto rounded-2xl border border-border-subtle">
    <table class="w-full border-collapse text-center text-sm">
      <thead>
        <tr>
          <th class="p-3 bg-surface-elevation-1 text-on-surface-variant font-label-caps text-[10px] tracking-wider uppercase border-b border-r border-border-subtle sticky left-0 z-10 min-w-[140px]">Time Slot</th>
          @foreach($tdata['dates'] as $d)
          <th class="p-3 bg-surface-elevation-1 text-on-surface-variant font-label-caps text-[10px] tracking-wider uppercase border-b border-r border-border-subtle min-w-[120px]">{{ \Carbon\Carbon::parse($d)->format('D, M d') }}</th>
          @endforeach
        </tr>
      </thead>
      <tbody>
        @foreach($tdata['timeSlots'] as $ts)
        <tr>
          <td class="p-3 bg-surface-elevation-1 text-on-surface-variant font-bold text-xs border-b border-r border-border-subtle sticky left-0 z-10">{{ $ts }}</td>
          @foreach($tdata['grid'][$ts] as $status)
          @if($status === 'available')
          <td class="p-3 bg-green-600/80 text-white font-bold cursor-pointer hover:bg-green-500 transition-colors border-b border-r border-border-subtle" onclick="openSlotBooking('{{ $ts }}')">Available</td>
          @elseif($status === 'booked')
          <td class="p-3 bg-surface-container text-muted border-b border-r border-border-subtle opacity-60">Booked</td>
          @else
          <td class="p-3 bg-surface-elevation-1 text-muted/30 border-b border-r border-border-subtle">—</td>
          @endif
          @endforeach
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
  <p class="text-center text-xs text-muted mt-3">👈 Swipe left/right to view full schedule on mobile</p>
  @endif
</section>

{{-- Booking Modal --}}
<div id="slot-modal" class="fixed inset-0 z-[99] hidden items-center justify-center bg-black/70 backdrop-blur-sm" onclick="if(event.target===this)closeSlotModal()">
  <div class="relative w-full max-w-lg max-h-[90vh] overflow-y-auto mx-4 bg-surface-elevation-2 rounded-2xl border border-border-subtle shadow-2xl" onclick="event.stopPropagation()">
    <button onclick="closeSlotModal()" class="absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-surface-container border border-border-subtle flex items-center justify-center text-on-surface-variant hover:text-white hover:border-primary transition-all"><span class="material-symbols-outlined">close</span></button>
    <div class="p-8 md:p-10">
      <span class="text-primary font-label-caps tracking-widest block mb-2 uppercase">Request a Session</span>
      <h2 class="font-headline-lg text-2xl text-white mb-2">Book Time Slot</h2>
      <p class="text-on-surface-variant mb-2">Selected slot: <span id="selected-slot" class="text-primary font-bold"></span></p>

      <form id="slot-form" class="space-y-5 mt-6" onsubmit="handleSlotSubmit(event)">
        <div class="grid sm:grid-cols-2 gap-4">
          <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">First Name *</span><input type="text" required class="w-full bg-surface-container text-white border border-border-subtle rounded-xl px-4 py-3 outline-none focus:border-primary transition-colors"/></label>
          <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">Last Name *</span><input type="text" required class="w-full bg-surface-container text-white border border-border-subtle rounded-xl px-4 py-3 outline-none focus:border-primary transition-colors"/></label>
        </div>
        <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">Email *</span><input type="email" required class="w-full bg-surface-container text-white border border-border-subtle rounded-xl px-4 py-3 outline-none focus:border-primary transition-colors"/></label>
        <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">WhatsApp Number *</span><input type="tel" required class="w-full bg-surface-container text-white border border-border-subtle rounded-xl px-4 py-3 outline-none focus:border-primary transition-colors" placeholder="+92 300 1234567"/></label>
        <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">Session Type</span>
        <select class="w-full bg-surface-container text-white border border-border-subtle rounded-xl px-4 py-3 outline-none focus:border-primary transition-colors">
          <option>Academic Session</option><option>Mentorship Meeting</option><option>Speaking Engagement</option><option>Consultation</option>
        </select></label>
        <label class="block"><span class="text-sm text-on-surface-variant mb-1.5 block">Message (Optional)</span><textarea rows="2" class="w-full bg-surface-container text-white border border-border-subtle rounded-xl px-4 py-3 outline-none focus:border-primary transition-colors" placeholder="Briefly describe your request..."></textarea></label>
        <button type="submit" class="w-full bg-primary text-white py-4 rounded-xl font-bold text-lg hover:shadow-[0_0_24px_rgba(37,99,255,0.4)] transition-all">Request Booking</button>
      </form>
      <div id="slot-success" class="hidden text-center py-10">
        <span class="material-symbols-outlined text-7xl text-primary mb-4">check_circle</span>
        <h3 class="font-headline-lg text-2xl text-white mb-3">Booking Requested!</h3>
        <p class="text-on-surface-variant text-sm">Our team will confirm within 48 hours via email or WhatsApp.</p>
      </div>
    </div>
  </div>
</div>

<script>
function openSlotBooking(slot) {
  document.getElementById('selected-slot').textContent = slot;
  document.getElementById('slot-modal').classList.remove('hidden');
  document.getElementById('slot-modal').classList.add('flex');
  document.body.style.overflow = 'hidden';
}
function closeSlotModal() {
  document.getElementById('slot-modal').classList.add('hidden');
  document.getElementById('slot-modal').classList.remove('flex');
  document.body.style.overflow = '';
  document.getElementById('slot-success').classList.add('hidden');
  document.getElementById('slot-form').classList.remove('hidden');
}
function handleSlotSubmit(e) {
  e.preventDefault();
  document.getElementById('slot-form').classList.add('hidden');
  document.getElementById('slot-success').classList.remove('hidden');
}
</script>
@endsection