@extends('teacher.teacher_dashboard')

@section('customcss')
<style>
    .required-star {
        color: #ef4444;
    }
    .file-upload-box {
        border: 2px dashed #cbd5e1;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        background: #f8fafc;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .file-upload-box:hover {
        border-color: #3b82f6;
        background: #eff6ff;
    }
</style>
@endsection

@section('admin')

<!--**********************************
    Content body start
***********************************-->
<div class="content-body default-height">
    <div class="container-fluid">

        <!-- Breadcrumb -->
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('teacher.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('teacher.unofficial-exams.index') }}">Class Test</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Create</a></li>
            </ol>
        </div>

        <!-- Back Button -->
        <div class="mb-4 pb-3">
            <a href="{{ route('teacher.unofficial-exams.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fa fa-arrow-left me-1"></i> Back to List
            </a>
        </div>

        <!-- Validation Errors -->
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong class="d-block mb-1"><i class="fa fa-exclamation-triangle me-1"></i> Please fix the following errors:</strong>
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Form Card / cm-content-box -->
        <div class="row">
            <div class="col-xl-12">
                <div class="filter cm-content-box box-primary">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa">
                            <i class="fa-solid fa-pen-to-square me-2"></i>Create New Class Test
                        </div>
                        <div class="tools">
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>
                    <div class="cm-content-body form excerpt">
                        <div class="card-body">
                            <form action="{{ route('teacher.unofficial-exams.store') }}" method="POST" enctype="multipart/form-data" id="createExamForm">
                                @csrf

                                <div class="row">
                                    <!-- Academic Session -->
                                    <div class="col-xl-4 col-sm-6 mb-3">
                                        <label class="form-label">Academic Session <span class="required-star">*</span></label>
                                        <select name="academic_session_id" id="session_id" class="form-control default-select h-auto wide @error('academic_session_id') is-invalid @enderror" required>
                                            <option value="">-- Select Session --</option>
                                            @foreach($sessions as $session)
                                                <option value="{{ $session->id }}" {{ old('academic_session_id', $currentSession->id ?? '') == $session->id ? 'selected' : '' }}>
                                                    {{ $session->name }} {{ $session->is_current ? '(Current)' : '' }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('academic_session_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Class -->
                                    <div class="col-xl-4 col-sm-6 mb-3">
                                        <label class="form-label">Class <span class="required-star">*</span></label>
                                        <select name="class_id" id="class_id" class="form-control default-select h-auto wide @error('class_id') is-invalid @enderror" required>
                                            <option value="">-- Select Class --</option>
                                            @foreach($classes as $c)
                                                <option value="{{ $c->id }}" {{ old('class_id') == $c->id ? 'selected' : '' }}>
                                                    {{ $c->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('class_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Section -->
                                    <div class="col-xl-4 col-sm-6 mb-3">
                                        <label class="form-label">Section <small class="text-muted">(Optional)</small></label>
                                        <select name="section_id" id="section_id" class="form-control default-select h-auto wide @error('section_id') is-invalid @enderror">
                                            <option value="">-- All Sections --</option>
                                        </select>
                                        @error('section_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Group -->
                                    <div class="col-xl-4 col-sm-6 mb-3" id="groupWrapper">
                                        <label class="form-label">Group <small class="text-muted">(Optional)</small></label>
                                        <select name="group_id" id="group_id" class="form-control default-select h-auto wide @error('group_id') is-invalid @enderror">
                                            <option value="">-- None / General --</option>
                                        </select>
                                        @error('group_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Subject -->
                                    <div class="col-xl-4 col-sm-6 mb-3">
                                        <label class="form-label">Subject <span class="required-star">*</span></label>
                                        <select name="subject_id" id="subject_id" class="form-control default-select h-auto wide @error('subject_id') is-invalid @enderror" required>
                                            <option value="">-- Select Subject --</option>
                                        </select>
                                        @error('subject_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Exam Title -->
                                    <div class="col-xl-4 col-sm-6 mb-3">
                                        <label class="form-label">Exam Title <span class="required-star">*</span></label>
                                        <input type="text" name="exam_title" id="exam_title" class="form-control @error('exam_title') is-invalid @enderror" 
                                               placeholder="e.g. Class Test 1, Quiz 2, Weekly CQ" value="{{ old('exam_title') }}" required>
                                        @error('exam_title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Total Marks -->
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label class="form-label">Total Marks <span class="required-star">*</span></label>
                                        <input type="number" step="0.5" min="1" max="1000" name="total_marks" id="total_marks" 
                                               class="form-control @error('total_marks') is-invalid @enderror" placeholder="e.g. 20, 50, 100" value="{{ old('total_marks', 20) }}" required>
                                        @error('total_marks')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Pass Marks -->
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label class="form-label">Pass Marks <small class="text-muted">(Optional)</small></label>
                                        <input type="number" step="0.5" min="0" max="1000" name="pass_marks" id="pass_marks" 
                                               class="form-control @error('pass_marks') is-invalid @enderror" placeholder="Defaults to 33%" value="{{ old('pass_marks') }}">
                                        @error('pass_marks')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Exam Date -->
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label class="form-label">Exam Date <span class="required-star">*</span></label>
                                        <input type="date" name="exam_date" id="exam_date" 
                                               class="form-control @error('exam_date') is-invalid @enderror" value="{{ old('exam_date', date('Y-m-d')) }}" required>
                                        @error('exam_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Result Publish Date -->
                                    <div class="col-xl-3 col-sm-6 mb-3">
                                        <label class="form-label">Result Publish Date <small class="text-muted">(Optional)</small></label>
                                        <input type="date" name="result_publish_date" id="result_publish_date" 
                                               class="form-control @error('result_publish_date') is-invalid @enderror" value="{{ old('result_publish_date') }}">
                                        @error('result_publish_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Description -->
                                    <div class="col-xl-12 mb-3">
                                        <label class="form-label">Description / Syllabus Covered <small class="text-muted">(Optional)</small></label>
                                        <textarea name="description" id="description" rows="3" class="form-control @error('description') is-invalid @enderror" 
                                                  placeholder="Provide details about exam topics, syllabus chapters, instructions for students...">{{ old('description') }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Question Paper Upload -->
                                    <div class="col-xl-12 mb-4">
                                        <label class="form-label">Upload Question Paper <small class="text-muted">(PDF or Image, max 10MB)</small></label>
                                        <div class="file-upload-box" onclick="document.getElementById('question_paper').click();">
                                            <i class="fa fa-cloud-upload fa-2x text-primary mb-2 d-block"></i>
                                            <span class="fw-semibold text-dark d-block" id="fileNameDisplay">Click to browse or drop file here</span>
                                            <span class="small text-muted">Supported formats: PDF, JPG, PNG (Max 10MB)</span>
                                            <input type="file" name="question_paper" id="question_paper" class="d-none" accept=".pdf,.jpg,.jpeg,.png" onchange="previewFile(this)">
                                        </div>
                                        @error('question_paper')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Form Buttons -->
                                    <div class="col-xl-12 d-flex justify-content-end gap-2 pt-3 border-top">
                                        <a href="{{ route('teacher.unofficial-exams.index') }}" class="btn btn-danger light">Cancel</a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fa fa-save me-1"></i> Save Exam & Continue
                                        </button>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!--**********************************
    Content body end
***********************************-->

@endsection

@section('customjs')
<script>
    function previewFile(input) {
        if (input.files && input.files[0]) {
            document.getElementById('fileNameDisplay').innerHTML = '<i class="fa fa-file text-success me-1"></i> ' + input.files[0].name;
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const classSelect = document.getElementById('class_id');
        const sectionSelect = document.getElementById('section_id');
        const groupSelect = document.getElementById('group_id');
        const subjectSelect = document.getElementById('subject_id');

        function loadSections(classId) {
            sectionSelect.innerHTML = '<option value="">Loading sections...</option>';
            fetch(`{{ url('teacher/unofficial-exams/ajax/sections') }}/${classId}`)
                .then(res => res.json())
                .then(data => {
                    sectionSelect.innerHTML = '<option value="">-- All Sections --</option>';
                    if (data.sections && data.sections.length > 0) {
                        data.sections.forEach(s => {
                            sectionSelect.innerHTML += `<option value="${s.id}">${s.name}</option>`;
                        });
                    }
                })
                .catch(() => {
                    sectionSelect.innerHTML = '<option value="">-- All Sections --</option>';
                });
        }

        function loadGroups(classId) {
            groupSelect.innerHTML = '<option value="">Loading groups...</option>';
            fetch(`{{ url('teacher/unofficial-exams/ajax/groups') }}/${classId}`)
                .then(res => res.json())
                .then(data => {
                    groupSelect.innerHTML = '<option value="">-- None / General --</option>';
                    if (data.groups && data.groups.length > 0) {
                        data.groups.forEach(g => {
                            groupSelect.innerHTML += `<option value="${g.id}">${g.name}</option>`;
                        });
                    }
                })
                .catch(() => {
                    groupSelect.innerHTML = '<option value="">-- None / General --</option>';
                });
        }

        function loadSubjects(classId, groupId = '') {
            subjectSelect.innerHTML = '<option value="">Loading subjects...</option>';
            let url = `{{ url('teacher/unofficial-exams/ajax/subjects') }}/${classId}`;
            if (groupId) {
                url += `?group_id=${groupId}`;
            }

            fetch(url)
                .then(res => res.json())
                .then(data => {
                    subjectSelect.innerHTML = '<option value="">-- Select Subject --</option>';
                    if (data.subjects && data.subjects.length > 0) {
                        data.subjects.forEach(s => {
                            subjectSelect.innerHTML += `<option value="${s.id}">${s.name}</option>`;
                        });
                    }
                })
                .catch(() => {
                    subjectSelect.innerHTML = '<option value="">-- Select Subject --</option>';
                });
        }

        classSelect.addEventListener('change', function() {
            const classId = this.value;
            if (classId) {
                loadSections(classId);
                loadGroups(classId);
                loadSubjects(classId);
            } else {
                sectionSelect.innerHTML = '<option value="">-- All Sections --</option>';
                groupSelect.innerHTML = '<option value="">-- None / General --</option>';
                subjectSelect.innerHTML = '<option value="">-- Select Subject --</option>';
            }
        });

        groupSelect.addEventListener('change', function() {
            const classId = classSelect.value;
            if (classId) {
                loadSubjects(classId, this.value);
            }
        });

        // Trigger on load if old value exists
        if (classSelect.value) {
            loadSections(classSelect.value);
            loadGroups(classSelect.value);
            loadSubjects(classSelect.value, groupSelect.value);
        }
    });
</script>
@endsection