@extends('layouts.admin')

@section('title', 'Edit: ' . $datesheet->title)
@section('header-title', 'Edit 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">Edit Datesheet</h1>
        <a href="{{ route('admin.datesheets.show', $datesheet) }}" 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.update', $datesheet) }}">
        @csrf
        @method('PUT')

        <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 class="col-span-2">
                    <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', $datesheet->title) }}"
                           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">{{ old('notes', $datesheet->notes) }}</textarea>
                </div>
            </div>
        </div>

        <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.</p>

            <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 = $datesheet->schedules->firstWhere('subject_id', $subject->id);
                    @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="{{ old("schedules.{$index}.exam_date", $existing?->exam_date?->format('Y-m-d')) }}"
                                   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="{{ old("schedules.{$index}.start_time", $existing?->start_time) }}"
                                   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
                                   value="{{ $existing?->end_time }}"
                                   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">
                            @php
                                $slot = $existing?->time_slot;
                                $slotColor = $slot === 'evening' ? 'bg-orange-100 text-orange-700' : 'bg-yellow-100 text-yellow-700';
                            @endphp
                            <span id="slot_{{ $index }}" class="px-2 py-1 text-xs rounded {{ $existing ? $slotColor : 'bg-paper-100 text-ink-600' }}">
                                {{ $existing ? ucfirst($slot) : '-' }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('admin.datesheets.show', $datesheet) }}" class="px-4 py-2 border border-graphite-400/50 rounded text-ink-600 hover:bg-paper-50 text-sm">Cancel</a>
            <button type="submit" class="bg-seal-blue-700 text-white px-6 py-2 rounded hover:bg-seal-blue-700/90 text-sm font-medium">Update Datesheet</button>
        </div>
    </form>
</div>

<script>
    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);
    }
</script>
@endsection