@extends('layouts.admin')
@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <a href="{{ route('admin.exams.index') }}" class="text-graphite-400 hover:text-ink-600 text-sm">&larr; Back to Exams</a>
            <h1 class="text-2xl font-bold font-display text-ink-900 mt-1">{{ $exam->name }}</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.exams.edit', $exam) }}" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition">Edit</a>
            <form action="{{ route('admin.exams.destroy', $exam) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this exam?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="px-4 py-2 bg-redpen-600 text-white rounded hover:bg-redpen-600/90 transition">Delete</button>
            </form>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded border border-graphite-400/30 p-4">
            <p class="text-sm text-graphite-400">Academic Year</p>
            <p class="text-lg font-semibold text-ink-900">{{ $exam->academic_year }}</p>
        </div>
        <div class="bg-white rounded border border-graphite-400/30 p-4">
            <p class="text-sm text-graphite-400">Class</p>
            <p class="text-lg font-semibold text-ink-900">{{ $exam->class }}</p>
        </div>
        <div class="bg-white rounded border border-graphite-400/30 p-4">
            <p class="text-sm text-graphite-400">Status</p>
            @php
                $statusColors = [
                    'draft' => 'bg-amber-600/10 text-amber-600',
                    'active' => 'bg-ledger-green-700/10 text-ledger-green-700',
                    'completed' => 'bg-seal-blue-700/10 text-seal-blue-700',
                    'cancelled' => 'bg-redpen-600/10 text-redpen-600',
                ];
                $statusColor = isset($exam->status) && array_key_exists($exam->status, $statusColors) ? $statusColors[$exam->status] : 'bg-paper-100 text-graphite-400';
            @endphp
            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $statusColor }}">
                {{ ucfirst($exam->status ?? '') }}
            </span>
        </div>
        <div class="bg-white rounded border border-graphite-400/30 p-4">
            <p class="text-sm text-graphite-400">Total Subjects</p>
            <p class="text-lg font-semibold text-ink-900">{{ $exam->subjects->count() }}</p>
        </div>
    </div>

    <div class="bg-white rounded border border-graphite-400/30 overflow-hidden">
        <div class="px-6 py-4 border-b border-graphite-400/30">
            <h2 class="text-lg font-semibold text-ink-900">Subjects & Schedules</h2>
        </div>
        <table class="min-w-full divide-y divide-graphite-400/30">
            <thead class="bg-paper-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Code</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Duration (min)</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Total Marks</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Schedules</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Question Papers</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-graphite-400/30">
                @forelse($exam->subjects as $subject)
                <tr class="hover:bg-paper-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-ink-900">
                        <a href="{{ route('admin.subjects.show', $subject) }}" class="text-seal-blue-700 hover:underline">{{ $subject->name }}</a>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-graphite-400">{{ $subject->code }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-graphite-400">{{ $subject->duration_minutes }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-graphite-400">{{ $subject->total_marks }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-graphite-400">
                        @php
                            $hasMorning = $subject->schedules->contains('time_slot', 'morning');
                            $hasEvening = $subject->schedules->contains('time_slot', 'evening');
                            $bothSlotsFilled = $hasMorning && $hasEvening;
                        @endphp
                        @if($subject->schedules->count() > 0)
                            @foreach($subject->schedules as $schedule)
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm">{{ $schedule->exam_date->format('d M Y') }} {{ $schedule->start_time }} - {{ $schedule->end_time }}</span>
                                <span class="px-1.5 py-0.5 text-xs rounded {{ $schedule->time_slot === 'evening' ? 'bg-amber-600/10 text-amber-600' : 'bg-amber-600/10 text-amber-600' }}">{{ $schedule->time_slot_label }}</span>
                                <button onclick="openEditScheduleModal({{ $schedule->id }}, '{{ $schedule->exam_date->format('Y-m-d') }}', '{{ $schedule->start_time }}')" class="text-indigo-600 hover:text-indigo-800 text-xs">Edit</button>
                                <form action="{{ route('admin.exams.destroy-schedule', [$exam, $schedule]) }}" method="POST" onsubmit="return confirm('Delete this schedule?')" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-redpen-600 hover:text-redpen-600/80 text-xs">Delete</button>
                                </form>
                            </div>
                            @endforeach
                        @else
                            <span class="text-graphite-400 text-xs">No schedule</span>
                        @endif
                        @if($bothSlotsFilled)
                            <span class="ml-2 text-graphite-400 text-xs cursor-not-allowed">+ Add</span>
                        @else
                            <button onclick="openAddScheduleModal({{ $subject->id }}, '{{ $subject->name }}', {{ $subject->duration_minutes }})" class="ml-2 text-seal-blue-700 hover:text-seal-blue-700/80 text-xs font-medium">+ Add</button>
                        @endif
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-graphite-400">{{ optional($subject->question_papers)->count() }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-sm text-graphite-400">No subjects found for this exam.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div id="addScheduleModal" class="fixed inset-0 bg-ink-600 bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-graphite-400/30">
            <h3 class="text-lg font-semibold text-ink-900">Add Exam Schedule</h3>
        </div>
        <form id="addScheduleForm" method="POST" action="">
            @csrf
            <div class="px-6 py-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-ink-600 mb-1">Subject</label>
                    <input type="hidden" name="subject_id" id="addSubjectId">
                    <input type="hidden" id="addSubjectDuration" value="">
                    <p class="text-sm text-ink-900" id="addSubjectName"></p>
                </div>
                <div>
                    <label for="addExamDate" class="block text-sm font-medium text-ink-600 mb-1">Exam Date *</label>
                    <input type="date" name="exam_date" id="addExamDate" required class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full">
                </div>
                <div>
                    <label for="addStartTime" class="block text-sm font-medium text-ink-600 mb-1">Start Time *</label>
                    <input type="time" name="start_time" id="addStartTime" required class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full" value="09:00" onchange="calcAddEndTime()">
                </div>
                <div>
                    <label class="block text-sm font-medium text-ink-600 mb-1">End Time (auto-calculated)</label>
                    <input type="time" id="addEndTime" readonly class="border border-graphite-400/30 rounded px-3 py-2 text-sm w-full bg-paper-50">
                </div>
                <div>
                    <label class="block text-sm font-medium text-ink-600 mb-1">Time Slot</label>
                    <input type="text" id="addTimeSlot" readonly class="border border-graphite-400/30 rounded px-3 py-2 text-sm w-full bg-paper-50">
                </div>
            </div>
            <div class="px-6 py-4 border-t border-graphite-400/30 flex justify-end gap-3">
                <button type="button" onclick="closeAddScheduleModal()" class="px-4 py-2 border border-graphite-400/50 rounded text-ink-600 hover:bg-paper-50 text-sm">Cancel</button>
                <button type="submit" class="bg-seal-blue-700 text-white px-4 py-2 rounded hover:bg-seal-blue-700/90 text-sm font-medium">Save Schedule</button>
            </div>
        </form>
    </div>
</div>

<div id="editScheduleModal" class="fixed inset-0 bg-ink-600 bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-graphite-400/30">
            <h3 class="text-lg font-semibold text-ink-900">Edit Exam Schedule</h3>
        </div>
        <form id="editScheduleForm" method="POST" action="">
            @csrf
            @method('PUT')
            <div class="px-6 py-4 space-y-4">
                <div>
                    <label for="editExamDate" class="block text-sm font-medium text-ink-600 mb-1">Exam Date *</label>
                    <input type="date" name="exam_date" id="editExamDate" required class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full">
                </div>
                <div>
                    <label for="editStartTime" class="block text-sm font-medium text-ink-600 mb-1">Start Time *</label>
                    <input type="time" name="start_time" id="editStartTime" required class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full" onchange="calcEditEndTime()">
                </div>
                <div>
                    <label class="block text-sm font-medium text-ink-600 mb-1">End Time (auto-calculated)</label>
                    <input type="time" id="editEndTime" readonly class="border border-graphite-400/30 rounded px-3 py-2 text-sm w-full bg-paper-50">
                </div>
                <div>
                    <label class="block text-sm font-medium text-ink-600 mb-1">Time Slot</label>
                    <input type="text" id="editTimeSlot" readonly class="border border-graphite-400/30 rounded px-3 py-2 text-sm w-full bg-paper-50">
                </div>
            </div>
            <div class="px-6 py-4 border-t border-graphite-400/30 flex justify-end gap-3">
                <button type="button" onclick="closeEditScheduleModal()" class="px-4 py-2 border border-graphite-400/50 rounded text-ink-600 hover:bg-paper-50 text-sm">Cancel</button>
                <button type="submit" class="bg-seal-blue-700 text-white px-4 py-2 rounded hover:bg-seal-blue-700/90 text-sm font-medium">Update Schedule</button>
            </div>
        </form>
    </div>
</div>

<script>
    let currentDuration = 0;

    function calcEndTime(startTime, duration) {
        if (!startTime || !duration) return '';
        const [h, m] = startTime.split(':').map(Number);
        const totalMinutes = h * 60 + m + Number(duration);
        const endH = Math.floor(totalMinutes / 60) % 24;
        const endM = totalMinutes % 60;
        return String(endH).padStart(2, '0') + ':' + String(endM).padStart(2, '0');
    }

    function getSlotLabel(time) {
        if (!time) return '';
        return parseInt(time.split(':')[0], 10) >= 12 ? 'Evening' : 'Morning';
    }

    function calcAddEndTime() {
        const start = document.getElementById('addStartTime').value;
        const end = calcEndTime(start, currentDuration);
        document.getElementById('addEndTime').value = end;
        document.getElementById('addTimeSlot').value = getSlotLabel(start);
    }

    function calcEditEndTime() {
        const start = document.getElementById('editStartTime').value;
        const end = calcEndTime(start, currentDuration);
        document.getElementById('editEndTime').value = end;
        document.getElementById('editTimeSlot').value = getSlotLabel(start);
    }

    function openAddScheduleModal(subjectId, subjectName, duration) {
        currentDuration = duration;
        document.getElementById('addSubjectId').value = subjectId;
        document.getElementById('addSubjectName').textContent = subjectName + ' (' + duration + ' min)';
        document.getElementById('addSubjectDuration').value = duration;
        document.getElementById('addScheduleForm').action = "{{ route('admin.exams.store-schedule', $exam) }}";
        calcAddEndTime();
        document.getElementById('addScheduleModal').classList.remove('hidden');
        document.getElementById('addScheduleModal').classList.add('flex');
    }

    function closeAddScheduleModal() {
        document.getElementById('addScheduleModal').classList.add('hidden');
        document.getElementById('addScheduleModal').classList.remove('flex');
        document.getElementById('addScheduleForm').reset();
    }

    function openEditScheduleModal(scheduleId, date, startTime) {
        currentDuration = 0;
        document.getElementById('editExamDate').value = date;
        document.getElementById('editStartTime').value = startTime;
        document.getElementById('editScheduleForm').action = "{{ url('admin/exams') }}/{{ $exam->id }}/schedules/" + scheduleId;
        calcEditEndTime();
        document.getElementById('editScheduleModal').classList.remove('hidden');
        document.getElementById('editScheduleModal').classList.add('flex');
    }

    function closeEditScheduleModal() {
        document.getElementById('editScheduleModal').classList.add('hidden');
        document.getElementById('editScheduleModal').classList.remove('flex');
    }
</script>
@endsection