@extends('admin.admin_dashboard')

@section('admin')
    <div class="content-body">
        <div class="container-fluid">
            <div class="row page-titles">
                <div class="col-md-9">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item active"><a href="javascript:void(0)">Home </a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Create Exam Routine</a></li>
                    </ol>
                </div>

            </div>


            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="card">
                <div class="card-header">
                    <h3> Add Exam Routine {{ $exam->exam_name }}</h3>
                </div>
                <div class="card-body">

                    <!-- Global Time Setting -->
                    <div class="card mb-4" style="background-color: #f8f9fa;">
                        <div class="card-body">
                            <h5 class="mb-3">Set Default Time for All Subjects</h5>
                            <div class="row">
                                <div class="col-md-4">
                                    <label>Default Start Time</label>
                                    <input type="time" id="global-start-time" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label>Default End Time</label>
                                    <input type="time" id="global-end-time" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label>&nbsp;</label>
                                    <button type="button" id="apply-global-time" class="btn btn-primary form-control">
                                        Apply to All Subjects
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form action="{{ route('admin.exams.routine.store.bulk') }}" method="POST">
                        @csrf
                        <input type="hidden" name="exam_id" value="{{ $exam->id }}">

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Subject</th>
                                    <th>Exam Date</th>
                                    <th>Start Time</th>
                                    <th>End Time</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($subjects as $index => $sub)
                                    <tr>
                                        <td>{{ $sub->subject->name }}</td>
                                        <td>
                                            <input type="date" name="subjects[{{ $index }}][exam_date]"
                                                class="form-control exam-date" data-index="{{ $index }}">
                                        </td>
                                        <td>
                                            <input type="time" name="subjects[{{ $index }}][start_time]"
                                                class="form-control start-time" data-index="{{ $index }}">
                                        </td>
                                        <td>
                                            <input type="time" name="subjects[{{ $index }}][end_time]"
                                                class="form-control end-time" data-index="{{ $index }}">
                                        </td>
                                        <td>
                                            <span class="conflict-msg text-danger" id="conflict-{{ $index }}"></span>
                                        </td>
                                        <input type="hidden" name="subjects[{{ $index }}][subject_id]"
                                            value="{{ $sub->subject->id }}">
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <button type="submit" class="btn btn-success">Save All Routines</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('customjs')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            
            // Apply global time to all subjects
            document.getElementById('apply-global-time').addEventListener('click', function() {
                const globalStartTime = document.getElementById('global-start-time').value;
                const globalEndTime = document.getElementById('global-end-time').value;

                if (!globalStartTime || !globalEndTime) {
                    alert('Please enter both start and end time.');
                    return;
                }

                // Apply to all time inputs
                document.querySelectorAll('.start-time').forEach(function(input) {
                    input.value = globalStartTime;
                });

                document.querySelectorAll('.end-time').forEach(function(input) {
                    input.value = globalEndTime;
                });

                // Show success message
                alert('Default time applied to all subjects successfully!');
            });

            // Conflict check
            document.querySelectorAll('.exam-date, .start-time, .end-time').forEach(function (input) {
                input.addEventListener('change', function () {
                    const rowIndex = this.dataset.index;
                    const examDate = document.querySelector(`input[name="subjects[${rowIndex}][exam_date]"]`).value;
                    const startTime = document.querySelector(`input[name="subjects[${rowIndex}][start_time]"]`).value;
                    const endTime = document.querySelector(`input[name="subjects[${rowIndex}][end_time]"]`).value;

                    if (examDate && startTime && endTime) {
                        fetch("{{ route('admin.exams.routine.checkConflict') }}", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                                "X-CSRF-TOKEN": "{{ csrf_token() }}"
                            },
                            body: JSON.stringify({
                                exam_id: "{{ $exam->id }}",
                                exam_date: examDate,
                                start_time: startTime,
                                end_time: endTime
                            })
                        })
                            .then(res => res.json())
                            .then(data => {
                                const conflictMsg = document.getElementById(`conflict-${rowIndex}`);
                                conflictMsg.innerText = data.conflict ? "Conflict! Another exam exists." : "";
                            });
                    }
                });
            });
        });
    </script>
@endsection