@extends('layouts.admin')

@section('title', 'Create Datesheet')
@section('header-title', 'Create Datesheet')

@section('content')
<div class="p-6">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold font-display text-ink-900">Create Datesheet</h1>
        <a href="{{ route('admin.datesheets.index') }}" class="text-graphite-400 hover:text-ink-600">&larr; Back</a>
    </div>

    @if($errors->any())
        <div class="mb-6 rounded bg-redpen-600/10 p-4">
            <p class="text-sm font-medium text-redpen-600">Please fix the following errors:</p>
            <ul class="mt-2 list-disc list-inside text-sm text-redpen-600">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('admin.datesheets.store') }}" id="datesheet-form">
        @csrf

        <div class="bg-white border border-graphite-400/30 rounded p-6 mb-6">
            <h2 class="text-lg font-semibold text-ink-900 mb-4">Datesheet Details</h2>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="exam_id" class="block text-sm font-medium text-ink-600 mb-1">Exam *</label>
                    <select name="exam_id" id="exam_id" required class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full"
                            onchange="if(this.value)window.location='{{ route('admin.datesheets.create') }}?exam_id='+this.value">
                        <option value="">Select Exam</option>
                        @foreach($exams as $exam)
                            <option value="{{ $exam->id }}" {{ old('exam_id', request('exam_id')) == $exam->id ? 'selected' : '' }}>
                                {{ $exam->name }} ({{ $exam->academic_year }} - Class {{ $exam->class }}) - {{ $exam->subjects->count() }} subjects
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="title" class="block text-sm font-medium text-ink-600 mb-1">Datesheet Title *</label>
                    <input type="text" name="title" id="title" required value="{{ old('title') }}"
                           placeholder="e.g. Matric Annual Examination 2026 Datesheet"
                           class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full">
                </div>
                <div class="col-span-2">
                    <label for="notes" class="block text-sm font-medium text-ink-600 mb-1">Notes (optional)</label>
                    <textarea name="notes" id="notes" rows="2" class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full"
                              placeholder="Any special instructions for students or invigilators...">{{ old('notes') }}</textarea>
                </div>
            </div>
        </div>

        @if($subjects->count() > 0)
        <div class="bg-white border border-graphite-400/30 rounded p-6 mb-6">
            <h2 class="text-lg font-semibold text-ink-900 mb-4">Subject Schedules</h2>
            <p class="text-sm text-graphite-400 mb-4">Set the exam date and start time for each subject. End time is calculated automatically based on the subject duration.</p>

            @if($existingSchedules->isNotEmpty())
            <div class="mb-4 rounded bg-seal-blue-100 p-4">
                <p class="text-sm text-seal-blue-700">
                    <span class="font-medium">Existing schedules found:</span> Date and time fields have been pre-filled from previously created exam schedules. You can modify them before saving.
                </p>
            </div>
            @endif

            <table class="min-w-full divide-y divide-graphite-400/30">
                <thead class="bg-paper-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Subject</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Code</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Duration</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Marks</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Exam Date *</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Start Time *</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">End Time</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Slot</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-graphite-400/30">
                    @foreach($subjects as $index => $subject)
                    @php
                        $existing = $existingSchedules->get($subject->id);
                        $savedDate = old("schedules.{$index}.exam_date", $existing ? $existing->exam_date->format('Y-m-d') : '');
                        $savedTime = old("schedules.{$index}.start_time", $existing ? $existing->start_time : '09:00');
                    @endphp
                    <tr>
                        <td class="px-4 py-3 text-sm font-medium text-ink-900">{{ $subject->name }}</td>
                        <td class="px-4 py-3 text-sm text-graphite-400">{{ $subject->code }}</td>
                        <td class="px-4 py-3 text-sm text-graphite-400">{{ $subject->duration_minutes }} min</td>
                        <td class="px-4 py-3 text-sm text-graphite-400">{{ $subject->total_marks }}</td>
                        <td class="px-4 py-3">
                            <input type="date" name="schedules[{{ $index }}][exam_date]" required
                                   value="{{ $savedDate }}"
                                   class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full">
                            <input type="hidden" name="schedules[{{ $index }}][subject_id]" value="{{ $subject->id }}">
                        </td>
                        <td class="px-4 py-3">
                            <input type="time" name="schedules[{{ $index }}][start_time]" required
                                   value="{{ $savedTime }}"
                                   class="border border-graphite-400/50 rounded px-3 py-2 text-sm w-full"
                                   onchange="calcRowEnd(this, {{ $subject->duration_minutes }}, {{ $index }})">
                        </td>
                        <td class="px-4 py-3">
                            <input type="time" id="end_time_{{ $index }}" readonly
                                   class="border border-graphite-400/30 rounded px-3 py-2 text-sm w-full bg-paper-50">
                        </td>
                        <td class="px-4 py-3">
                            <span id="slot_{{ $index }}" class="px-2 py-1 text-xs rounded bg-paper-100 text-ink-600">-</span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('admin.datesheets.index') }}" class="px-4 py-2 border border-graphite-400/50 rounded text-ink-600 hover:bg-paper-50 text-sm">Cancel</a>
            <input type="hidden" name="action" id="action-field" value="draft">
            <button type="button" onclick="submitAction('draft')"
                    class="bg-ink-600 text-white px-6 py-2 rounded hover:bg-ink-900 text-sm font-medium">Save as Draft</button>
            <button type="button" onclick="submitAction('issue')"
                    class="bg-ledger-green-700 text-white px-6 py-2 rounded hover:bg-ledger-green-700/90 text-sm font-medium">Issue Datesheet</button>
        </div>
        @elseif(request('exam_id'))
        <div class="bg-amber-600/10 border border-yellow-200 rounded p-4 text-center">
            <p class="text-sm text-amber-600">This exam has no subjects. Please add subjects before creating a datesheet.</p>
        </div>
        @endif
    </form>
</div>

<script>
    function submitAction(action) {
        document.getElementById('action-field').value = action;

        if (action === 'issue') {
            if (!confirm('Are you sure you want to issue this datesheet? It will be made public and the exam will become active.')) {
                return;
            }
        }

        document.getElementById('datesheet-form').submit();
    }

    function calcEndTime(startTime, duration) {
        if (!startTime || !duration) return '';
        const [h, m] = startTime.split(':').map(Number);
        const total = h * 60 + m + Number(duration);
        const endH = Math.floor(total / 60) % 24;
        const endM = total % 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 getSlotColor(time) {
        if (!time) return 'bg-paper-100 text-ink-600';
        return parseInt(time.split(':')[0], 10) >= 12
            ? 'bg-orange-100 text-orange-700'
            : 'bg-yellow-100 text-yellow-700';
    }

    function calcRowEnd(input, duration, index) {
        const end = calcEndTime(input.value, duration);
        document.getElementById('end_time_' + index).value = end;
        const slot = getSlotLabel(input.value);
        const el = document.getElementById('slot_' + index);
        el.textContent = slot;
        el.className = 'px-2 py-1 text-xs rounded ' + getSlotColor(input.value);
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('input[name$="[start_time]"]').forEach(function (input) {
            const match = input.name.match(/schedules\[(\d+)\]/);
            if (match) {
                const idx = match[1];
                const row = input.closest('tr');
                const durCell = row.querySelector('td:nth-child(3)');
                if (durCell) {
                    const dur = parseInt(durCell.textContent);
                    if (input.value && dur) calcRowEnd(input, dur, idx);
                }
            }
        });
    });
</script>
@endsection