@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>

    {{-- Stats --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
        <div class="bg-white rounded-xl ring-1 ring-stone-200/60 p-4 text-center">
            <p class="text-2xl font-bold text-stone-800">{{ $stats['teachers'] }}</p>
            <p class="text-[10px] text-stone-400 uppercase font-semibold tracking-wide mt-0.5">Teachers</p>
        </div>
        <div class="bg-white rounded-xl ring-1 ring-stone-200/60 p-4 text-center">
            <p class="text-2xl font-bold text-stone-800">{{ $stats['total_slots'] }}</p>
            <p class="text-[10px] text-stone-400 uppercase font-semibold tracking-wide mt-0.5">Total Slots</p>
        </div>
        <div class="bg-green-50 rounded-xl ring-1 ring-green-200/60 p-4 text-center">
            <p class="text-2xl font-bold text-green-700">{{ $stats['booked'] }}</p>
            <p class="text-[10px] text-green-500 uppercase font-semibold tracking-wide mt-0.5">Booked</p>
        </div>
        <div class="bg-amber-50 rounded-xl ring-1 ring-amber-200/60 p-4 text-center">
            <p class="text-2xl font-bold text-amber-700">{{ $stats['available'] }}</p>
            <p class="text-[10px] text-amber-500 uppercase font-semibold tracking-wide mt-0.5">Available</p>
        </div>
    </div>

    {{-- Teacher-wise breakdown --}}
    <div class="space-y-4">
        @foreach($slotsByTeacher as $teacherId => $slots)
        @php
            $teacher = $slots->first()->teacher;
            $booked = $slots->where('is_booked', true);
            $available = $slots->where('is_booked', false);
            $pct = $slots->count() > 0 ? round(($booked->count() / $slots->count()) * 100) : 0;
        @endphp
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
            {{-- Teacher Header --}}
            <div class="px-5 py-3 border-b border-stone-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <span class="text-sm font-bold text-amber-700">{{ strtoupper(substr($teacher->name ?? '?', 0, 1)) }}</span>
                    </div>
                    <div>
                        <p class="font-bold text-stone-800 text-sm">{{ $teacher->name ?? 'Unknown' }}</p>
                        <p class="text-[10px] text-stone-400">
                            {{ $slots->count() }} slots · {{ $booked->count() }} booked · {{ $available->count() }} available
                        </p>
                    </div>
                </div>
                {{-- Progress bar --}}
                <div class="flex items-center gap-2">
                    <div class="w-24 h-2 bg-stone-100 rounded-full overflow-hidden">
                        <div class="h-full bg-amber-500 rounded-full" style="width: {{ $pct }}%"></div>
                    </div>
                    <span class="text-xs font-bold {{ $pct > 70 ? 'text-green-600' : 'text-stone-400' }}">{{ $pct }}%</span>
                </div>
            </div>

            {{-- Slots Timeline --}}
            <div class="p-4">
                <div class="flex flex-wrap gap-2">
                    @foreach($slots->sortBy('start_time') as $slot)
                    <div class="px-3 py-2 rounded-lg text-xs ring-1 {{ $slot->is_booked ? 'bg-amber-50 ring-amber-200/60' : 'bg-stone-50 ring-stone-200/60' }}">
                        <p class="font-bold {{ $slot->is_booked ? 'text-amber-700' : 'text-stone-500' }}">
                            {{ \Carbon\Carbon::parse($slot->start_time)->format('h:i A') }}
                        </p>
                        @if($slot->is_booked && $slot->booking)
                        <p class="text-[10px] text-stone-500 mt-0.5">{{ $slot->booking->parent_->name ?? '—' }}</p>
                        <p class="text-[9px] text-stone-400">For: {{ $slot->booking->student->name ?? '—' }}</p>
                        @else
                        <p class="text-[10px] text-stone-400 mt-0.5">Open</p>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endforeach

        @if($slotsByTeacher->isEmpty())
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-12 text-center">
            <i class="fas fa-user-clock text-3xl text-stone-200 mb-3 block"></i>
            <p class="text-stone-400">No teachers have set their availability yet</p>
        </div>
        @endif
    </div>
</div>
@endsection