@extends('layouts.app')
@section('title', 'Parent-Teacher Meetings')
@section('page-title', 'Parent-Teacher Meetings')

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

    {{-- Header --}}
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-xl font-bold text-stone-800">
                <i class="fas fa-handshake text-amber-500 mr-2"></i>Parent-Teacher Meetings
            </h2>
            <p class="text-sm text-stone-500 mt-0.5">
                @if(auth()->user()->role === 'admin') Create and manage PTM events
                @elseif(auth()->user()->role === 'teacher') Set your availability and view bookings
                @elseif(auth()->user()->role === 'parent') Book meeting slots with teachers
                @else View upcoming PTM schedules
                @endif
            </p>
        </div>
        @if(auth()->user()->role === 'admin')
        <button onclick="document.getElementById('createEventModal').classList.remove('hidden')"
                class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
            <i class="fas fa-plus mr-1.5"></i> Create PTM Event
        </button>
        @endif
    </div>

    {{-- Parent: My Bookings Summary --}}
    @if(auth()->user()->role === 'parent' && $myBookings->where('status', 'booked')->isNotEmpty())
    <div class="bg-amber-50 rounded-2xl ring-1 ring-amber-200/60 p-5">
        <h3 class="font-bold text-amber-800 text-sm mb-3"><i class="fas fa-bookmark mr-1.5"></i>My Upcoming Bookings</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-3 ring-1 ring-amber-200/40">
                <div class="flex items-center gap-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 class="min-w-0">
                        <p class="font-semibold text-stone-800 text-sm truncate">{{ $booking->slot->teacher->name ?? '—' }}</p>
                        <p class="text-[10px] text-stone-400">{{ $booking->slot->formatted_time }} · {{ $booking->slot->event->date->format('d M') }}</p>
                    </div>
                </div>
                <p class="text-[10px] text-stone-400 mt-1.5">For: {{ $booking->student->name ?? '—' }}</p>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Teacher: My Upcoming Slots --}}
    @if(auth()->user()->role === 'teacher' && $mySlots->isNotEmpty())
    <div class="bg-blue-50 rounded-2xl ring-1 ring-blue-200/60 p-5">
        <h3 class="font-bold text-blue-800 text-sm mb-3"><i class="fas fa-calendar-check mr-1.5"></i>My Upcoming Bookings</h3>
        @foreach($mySlots as $eventId => $slots)
        @php $bookedSlots = $slots->where('is_booked', true); @endphp
        @if($bookedSlots->isNotEmpty())
        <p class="text-xs text-blue-600 font-medium mb-2">{{ $bookedSlots->first()->event->title }} – {{ $bookedSlots->first()->event->date->format('d M Y') }}</p>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-2 mb-3">
            @foreach($bookedSlots as $slot)
            <div class="bg-white rounded-xl p-3 ring-1 ring-blue-200/40">
                <p class="font-semibold text-stone-800 text-sm">{{ $slot->formatted_time }}</p>
                <p class="text-xs text-stone-500 mt-0.5">{{ $slot->booking->parent_->name ?? '—' }}</p>
                <p class="text-[10px] text-stone-400">Student: {{ $slot->booking->student->name ?? '—' }}</p>
                @if($slot->booking->notes)
                <p class="text-[10px] text-amber-600 mt-1 italic">"{{ Str::limit($slot->booking->notes, 60) }}"</p>
                @endif
            </div>
            @endforeach
        </div>
        @endif
        @endforeach
    </div>
    @endif

    {{-- Events List --}}
    <div class="space-y-4">
        @forelse($events as $event)
        @php
            $statusColors = [
                'upcoming' => 'bg-green-100 text-green-700',
                'ongoing' => 'bg-amber-100 text-amber-700',
                'completed' => 'bg-stone-100 text-stone-500',
                'cancelled' => 'bg-red-100 text-red-600',
            ];
            $totalSlots = $event->slots()->count();
            $bookedSlots = $event->slots()->where('is_booked', true)->count();
            $teacherCount = $event->slots()->distinct('teacher_id')->count('teacher_id');
        @endphp
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden hover:shadow-md transition">
            <div class="p-5">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex items-start gap-4">
                        {{-- Date box --}}
                        <div class="w-14 h-14 rounded-xl flex flex-col items-center justify-center flex-shrink-0 {{ $event->date->isFuture() || $event->date->isToday() ? 'bg-amber-500 text-white' : 'bg-stone-200 text-stone-500' }}">
                            <span class="text-lg font-bold leading-none">{{ $event->date->format('d') }}</span>
                            <span class="text-[9px] font-semibold uppercase">{{ $event->date->format('M') }}</span>
                        </div>
                        <div>
                            <div class="flex items-center gap-2 flex-wrap">
                                <h3 class="font-bold text-stone-800">{{ $event->title }}</h3>
                                <span class="px-2 py-0.5 rounded-full text-[9px] font-bold {{ $statusColors[$event->status] ?? 'bg-stone-100 text-stone-500' }}">
                                    {{ ucfirst($event->status) }}
                                </span>
                            </div>
                            <p class="text-sm text-stone-400 mt-0.5">
                                <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
                                · {{ $event->slot_duration }} min/slot
                            </p>
                            @if($event->description)
                            <p class="text-xs text-stone-400 mt-1">{{ $event->description }}</p>
                            @endif
                            <div class="flex items-center gap-4 mt-2 text-xs text-stone-400">
                                <span><i class="fas fa-user-tie mr-1"></i>{{ $teacherCount }} teachers</span>
                                <span><i class="fas fa-th mr-1"></i>{{ $totalSlots }} slots</span>
                                <span><i class="fas fa-check-circle mr-1 text-green-500"></i>{{ $bookedSlots }} booked</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 flex-shrink-0">
                        @if($event->status !== 'cancelled')
                        <a href="{{ route('ptm.show', $event) }}"
                           class="px-4 py-2 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
                            @if(auth()->user()->role === 'parent') Book Slots
                            @elseif(auth()->user()->role === 'teacher') Manage Slots
                            @else View Details
                            @endif
                        </a>
                        @endif
                        @if(auth()->user()->role === 'admin')
                        <div class="flex items-center gap-1">
                            <form method="POST" action="{{ route('ptm.event.update', $event) }}">
                                @csrf @method('PUT')
                                <select name="status" onchange="this.form.submit()" class="text-xs border border-stone-200 rounded-lg px-2 py-1.5">
                                    @foreach(['upcoming','ongoing','completed','cancelled'] as $s)
                                    <option value="{{ $s }}" {{ $event->status === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                                    @endforeach
                                </select>
                            </form>
                            <form method="POST" action="{{ route('ptm.event.destroy', $event) }}" onsubmit="return confirm('Delete this PTM event?')">
                                @csrf @method('DELETE')
                                <button class="p-1.5 text-stone-400 hover:text-red-500 rounded-lg transition">
                                    <i class="fas fa-trash text-xs"></i>
                                </button>
                            </form>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-12 text-center">
            <div class="w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-handshake text-2xl text-amber-300"></i>
            </div>
            <p class="text-stone-500 font-medium">No PTM events scheduled</p>
            <p class="text-xs text-stone-400 mt-1">Events will appear here when created by admin</p>
        </div>
        @endforelse
    </div>

    @if($events->hasPages())
    <div class="mt-4">{{ $events->links() }}</div>
    @endif
</div>

{{-- Create Event Modal (Admin) --}}
@if(auth()->user()->role === 'admin')
<div id="createEventModal" 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-lg max-h-[90vh] overflow-y-auto">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between sticky top-0 bg-white rounded-t-2xl z-10">
            <h3 class="text-lg font-bold text-stone-800"><i class="fas fa-plus-circle text-amber-500 mr-2"></i>Create PTM Event</h3>
            <button onclick="document.getElementById('createEventModal').classList.add('hidden')" class="text-stone-400 hover:text-stone-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('ptm.event.store') }}" class="p-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Event Title <span class="text-red-400">*</span></label>
                <input type="text" name="title" required maxlength="255" placeholder="e.g. Monthly PTM - February 2026"
                       class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Date <span class="text-red-400">*</span></label>
                    <input type="date" name="date" required min="{{ today()->format('Y-m-d') }}"
                           class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Slot Duration <span class="text-red-400">*</span></label>
                    <select name="slot_duration" class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                        <option value="10" selected>10 minutes</option>
                        <option value="15">15 minutes</option>
                        <option value="20">20 minutes</option>
                        <option value="30">30 minutes</option>
                    </select>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Start Time <span class="text-red-400">*</span></label>
                    <input type="time" name="start_time" required value="09:00"
                           class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">End Time <span class="text-red-400">*</span></label>
                    <input type="time" name="end_time" required value="13:00"
                           class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Venue <span class="text-stone-400">(optional)</span></label>
                <input type="text" name="venue" maxlength="255" placeholder="e.g. School Auditorium"
                       class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Description <span class="text-stone-400">(optional)</span></label>
                <textarea name="description" rows="2" maxlength="1000"
                          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 pt-2">
                <button type="button" onclick="document.getElementById('createEventModal').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 shadow-sm">
                    <i class="fas fa-calendar-plus mr-1.5"></i> Create Event
                </button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection