@extends('layouts.app')
@section('title', $event->title)
@section('page-title', 'Parent-Teacher Meeting')

@section('content')
<div class="space-y-6">

    {{-- Back + Event Header --}}
    <div class="flex items-start gap-4">
        <a href="{{ route('ptm.index') }}" class="mt-1 w-9 h-9 bg-stone-100 rounded-xl flex items-center justify-center hover:bg-stone-200 transition flex-shrink-0">
            <i class="fas fa-arrow-left text-stone-500 text-sm"></i>
        </a>
        <div>
            <h2 class="text-xl font-bold text-stone-800">{{ $event->title }}</h2>
            <p class="text-sm text-stone-400 mt-0.5">
                <i class="far fa-calendar mr-1"></i>{{ $event->date->format('l, d M Y') }}
                · <i class="far fa-clock mr-1"></i>{{ $event->formatted_time }}
                @if($event->venue) · <i class="fas fa-map-marker-alt mr-1"></i>{{ $event->venue }} @endif
            </p>
        </div>
    </div>

    {{-- Generate Slots --}}
    @if(!$hasSlots)
    <div class="bg-blue-50 rounded-2xl ring-1 ring-blue-200/60 p-6 text-center">
        <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
            <i class="fas fa-calendar-plus text-blue-500 text-xl"></i>
        </div>
        <h3 class="font-bold text-blue-800">Set Your Availability</h3>
        <p class="text-sm text-blue-600 mt-1">
            This will create {{ $event->slot_duration }}-minute slots from {{ $event->formatted_time }}
        </p>
        <form method="POST" action="{{ route('ptm.slots.generate', $event) }}" class="mt-4">
            @csrf
            <button type="submit" class="px-6 py-2.5 bg-blue-500 text-white rounded-xl text-sm font-semibold hover:bg-blue-600 transition shadow-sm">
                <i class="fas fa-magic mr-1.5"></i> Generate My Slots
            </button>
        </form>
    </div>
    @else

    {{-- Slot Management --}}
    <div class="flex items-center justify-between">
        <p class="text-sm text-stone-500">
            <span class="font-semibold text-stone-800">{{ $mySlots->count() }}</span> slots ·
            <span class="text-green-600 font-medium">{{ $mySlots->where('is_booked', true)->count() }} booked</span> ·
            <span class="text-stone-400">{{ $mySlots->where('is_booked', false)->count() }} available</span>
        </p>
        <form method="POST" action="{{ route('ptm.slots.delete', $event) }}" onsubmit="return confirm('Delete all unbooked slots?')">
            @csrf @method('DELETE')
            <button class="px-3 py-1.5 bg-red-50 text-red-500 rounded-lg text-xs font-medium hover:bg-red-100 transition">
                <i class="fas fa-trash mr-1"></i> Remove Unbooked Slots
            </button>
        </form>
    </div>

    <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
        @foreach($mySlots as $slot)
        <div class="rounded-xl ring-1 p-4 {{ $slot->is_booked ? 'bg-amber-50 ring-amber-200/60' : 'bg-white ring-stone-200/60' }}">
            <div class="flex items-center justify-between">
                <p class="font-bold text-stone-800 text-sm">{{ $slot->formatted_time }}</p>
                @if($slot->is_booked)
                <span class="px-2 py-0.5 bg-amber-200 text-amber-800 rounded-full text-[9px] font-bold">Booked</span>
                @else
                <span class="px-2 py-0.5 bg-green-100 text-green-600 rounded-full text-[9px] font-bold">Available</span>
                @endif
            </div>
            @if($slot->is_booked && $slot->booking)
            <div class="mt-2 pt-2 border-t border-amber-200/60">
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 bg-amber-200 rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-user text-amber-700 text-[10px]"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-stone-800">{{ $slot->booking->parent_->name ?? '—' }}</p>
                        <p class="text-[10px] text-stone-400">For: {{ $slot->booking->student->name ?? '—' }}</p>
                    </div>
                </div>
                @if($slot->booking->notes)
                <p class="text-xs text-amber-700 mt-2 italic bg-amber-100/50 rounded-lg px-2 py-1.5">
                    <i class="fas fa-quote-left text-[8px] mr-1 opacity-50"></i>{{ $slot->booking->notes }}
                </p>
                @endif
            </div>
            @endif
        </div>
        @endforeach
    </div>
    @endif
</div>
@endsection