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

@section('content')
@php
    // Gather class teacher IDs from children's classes
    $ctIds = collect();
    $actIds = collect();
    foreach ($children as $child) {
        $cls = $child->studentProfile?->class_;
        if ($cls) {
            if ($cls->class_teacher_id) $ctIds->push($cls->class_teacher_id);
            if ($cls->asst_class_teacher_id) $actIds->push($cls->asst_class_teacher_id);
        }
    }
    $ctIds = $ctIds->unique();
    $actIds = $actIds->unique();
@endphp

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

    {{-- My Bookings for this event --}}
    @if($myBookings->where('status', 'booked')->isNotEmpty())
    <div class="bg-green-50 rounded-2xl ring-1 ring-green-200/60 p-5">
        <h3 class="font-bold text-green-800 text-sm mb-3"><i class="fas fa-check-circle mr-1.5"></i>My Booked Slots</h3>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
            @foreach($myBookings->where('status', 'booked') as $booking)
            <div class="bg-white rounded-xl p-4 ring-1 ring-green-200/40">
                <div class="flex items-center justify-between">
                    <p class="font-bold text-stone-800 text-sm">{{ $booking->slot->formatted_time }}</p>
                    <form method="POST" action="{{ route('ptm.booking.cancel', $booking) }}" onsubmit="return confirm('Cancel this booking?')">
                        @csrf @method('DELETE')
                        <button class="text-red-400 hover:text-red-600 text-xs" title="Cancel">
                            <i class="fas fa-times-circle"></i> Cancel
                        </button>
                    </form>
                </div>
                <div class="flex items-center gap-2 mt-2">
                    <div class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-user-tie text-amber-600 text-xs"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-stone-800">
                            {{ $booking->slot->teacher->name ?? '—' }}
                            @if($ctIds->contains($booking->slot->teacher_id))
                            <span class="ml-1 px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded text-[8px] font-bold">★ Class Teacher</span>
                            @elseif($actIds->contains($booking->slot->teacher_id))
                            <span class="ml-1 px-1.5 py-0.5 bg-stone-100 text-stone-600 rounded text-[8px] font-bold">Asst. CT</span>
                            @endif
                        </p>
                        <p class="text-[10px] text-stone-400">For: {{ $booking->student->name ?? '—' }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Available Teachers & Slots --}}
    @if($availableSlots->isNotEmpty())
    <h3 class="font-bold text-stone-800 text-sm"><i class="fas fa-calendar-alt text-amber-500 mr-1.5"></i>Available Slots</h3>
    <div class="space-y-4">
        @foreach($availableSlots as $teacherId => $slots)
        @php $teacher = $slots->first()->teacher; @endphp
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden {{ $ctIds->contains($teacherId) ? 'ring-2 ring-amber-300' : '' }}">
            {{-- Teacher Header --}}
            <div class="px-5 py-3 {{ $ctIds->contains($teacherId) ? 'bg-amber-50' : 'bg-stone-50' }} border-b border-stone-100 flex items-center gap-3">
                <div class="w-10 h-10 {{ $ctIds->contains($teacherId) ? 'bg-amber-200' : ($actIds->contains($teacherId) ? 'bg-stone-200' : 'bg-amber-100') }} rounded-xl flex items-center justify-center flex-shrink-0">
                    <span class="text-sm font-bold {{ $ctIds->contains($teacherId) ? 'text-amber-800' : 'text-amber-700' }}">{{ strtoupper(substr($teacher->name ?? '?', 0, 1)) }}</span>
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 flex-wrap">
                        <p class="font-bold text-stone-800 text-sm">{{ $teacher->name ?? 'Unknown' }}</p>
                        @if($ctIds->contains($teacherId))
                        <span class="px-2 py-0.5 bg-amber-500 text-white rounded-full text-[9px] font-bold">★ Class Teacher</span>
                        @elseif($actIds->contains($teacherId))
                        <span class="px-2 py-0.5 bg-stone-400 text-white rounded-full text-[9px] font-bold">Asst. Class Teacher</span>
                        @endif
                    </div>
                    <p class="text-[10px] text-stone-400">
                        {{ $teacher->teacherProfile?->specialization ?? '' }}
                        · {{ $slots->count() }} slots available
                    </p>
                </div>
            </div>

            {{-- Slot Grid --}}
            <div class="p-4">
                <div class="flex flex-wrap gap-2">
                    @foreach($slots->sortBy('start_time') as $slot)
                    <button onclick="openBookModal({{ $slot->id }}, '{{ addslashes($teacher->name) }}', '{{ \Carbon\Carbon::parse($slot->start_time)->format('h:i A') }} – {{ \Carbon\Carbon::parse($slot->end_time)->format('h:i A') }}')"
                            class="px-3 py-2 bg-green-50 text-green-700 rounded-lg text-sm font-medium hover:bg-green-100 ring-1 ring-green-200/60 transition">
                        {{ \Carbon\Carbon::parse($slot->start_time)->format('h:i A') }}
                    </button>
                    @endforeach
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-12 text-center">
        <div class="w-14 h-14 bg-stone-100 rounded-full flex items-center justify-center mx-auto mb-3">
            <i class="fas fa-clock text-stone-300 text-xl"></i>
        </div>
        <p class="text-stone-500 font-medium">No available slots</p>
        <p class="text-xs text-stone-400 mt-1">Teachers haven't set their availability yet, or all slots are booked</p>
    </div>
    @endif
</div>

{{-- Booking Modal --}}
<div id="bookModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-sm">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
            <h3 class="font-bold text-stone-800"><i class="fas fa-calendar-check text-amber-500 mr-2"></i>Book Slot</h3>
            <button onclick="document.getElementById('bookModal').classList.add('hidden')" class="text-stone-400 hover:text-stone-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="bookForm" method="POST" class="p-6 space-y-4">
            @csrf
            <div class="bg-amber-50 rounded-xl p-3 text-center">
                <p class="font-semibold text-stone-800 text-sm" id="bookTeacher"></p>
                <p class="text-xs text-amber-600 mt-0.5" id="bookTime"></p>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">For Child <span class="text-red-400">*</span></label>
                <select name="student_id" required class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                    @foreach($children as $child)
                    <option value="{{ $child->id }}">{{ $child->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Notes <span class="text-stone-400">(optional)</span></label>
                <textarea name="notes" rows="2" maxlength="500" placeholder="Any specific topics to discuss..."
                          class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm resize-none"></textarea>
            </div>
            <div class="flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('bookModal').classList.add('hidden')"
                        class="px-4 py-2 text-sm text-stone-600">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition">
                    <i class="fas fa-check mr-1.5"></i> Confirm Booking
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openBookModal(slotId, teacher, time) {
    document.getElementById('bookForm').action = '/ptm/slot/' + slotId + '/book';
    document.getElementById('bookTeacher').textContent = teacher;
    document.getElementById('bookTime').textContent = time;
    document.getElementById('bookModal').classList.remove('hidden');
}
</script>
@endsection