@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"><a href="{{ route('teacher.unofficial-exams.show', $unofficialExam->id) }}">{{ $unofficialExam->exam_title }}</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Edit</a></li>
            </ol>
        </div>

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

        @if($unofficialExam->is_published)
            <div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
                <i class="fa fa-lock fa-2x me-3"></i>
                <div>
                    <h6 class="fw-bold mb-0">This exam is currently published</h6>
                    <small>To make changes, please unpublish the exam first from the exam details page.</small>
                </div>
            </div>
        @endif

        <!-- 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

        <!-- Edit 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>Edit Exam: {{ $unofficialExam->exam_title }}
                        </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.update', $unofficialExam->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')

                                <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 {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                            @foreach($sessions as $session)
                                                <option value="{{ $session->id }}" {{ old('academic_session_id', $unofficialExam->academic_session_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 {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                            <option value="">-- Select Class --</option>
                                            @foreach($classes as $c)
                                                <option value="{{ $c->id }}" {{ old('class_id', $unofficialExam->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" {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                            <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" {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                            <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 {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                            <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" 
                                               value="{{ old('exam_title', $unofficialExam->exam_title) }}" required {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                        @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" value="{{ old('total_marks', $unofficialExam->total_marks) }}" required {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                        @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" value="{{ old('pass_marks', $unofficialExam->pass_marks) }}" {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                        @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', $unofficialExam->exam_date ? $unofficialExam->exam_date->format('Y-m-d') : '') }}" required {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                        @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', $unofficialExam->result_publish_date ? $unofficialExam->result_publish_date->format('Y-m-d') : '') }}" {{ $unofficialExam->is_published ? 'disabled' : '' }}>
                                        @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" {{ $unofficialExam->is_published ? 'disabled' : '' }}>{{ old('description', $unofficialExam->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">Question Paper</label>
                                        @if($unofficialExam->question_paper)
                                            <div class="d-flex align-items-center gap-2 mb-2 p-2 bg-light rounded border">
                                                <i class="fa fa-file-pdf fa-2x text-danger"></i>
                                                <div class="flex-fill">
                                                    <span class="d-block fw-semibold text-dark">Current Question Paper</span>
                                                    <a href="{{ asset($unofficialExam->question_paper) }}" target="_blank" class="small text-primary text-decoration-none">
                                                        <i class="fa fa-external-link-alt me-1"></i> View / Download File
                                                    </a>
                                                </div>
                                            </div>
                                        @endif

                                        @if(!$unofficialExam->is_published)
                                            <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">
                                                    {{ $unofficialExam->question_paper ? 'Click to replace question paper' : '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>
                                        @endif
                                        @error('question_paper')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Form Buttons -->
                                    @if(!$unofficialExam->is_published)
                                        <div class="col-xl-12 d-flex justify-content-end gap-2 pt-3 border-top">
                                            <a href="{{ route('teacher.unofficial-exams.show', $unofficialExam->id) }}" class="btn btn-danger light">Cancel</a>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fa fa-sync-alt me-1"></i> Update Exam
                                            </button>
                                        </div>
                                    @endif

                                </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');

        const initialSectionId = "{{ old('section_id', $unofficialExam->section_id) }}";
        const initialGroupId = "{{ old('group_id', $unofficialExam->group_id) }}";
        const initialSubjectId = "{{ old('subject_id', $unofficialExam->subject_id) }}";

        function loadSections(classId, selectedId = '') {
            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 => {
                            const isSel = (s.id == selectedId) ? 'selected' : '';
                            sectionSelect.innerHTML += `<option value="${s.id}" ${isSel}>${s.name}</option>`;
                        });
                    }
                })
                .catch(() => {
                    sectionSelect.innerHTML = '<option value="">-- All Sections --</option>';
                });
        }

        function loadGroups(classId, selectedId = '') {
            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 => {
                            const isSel = (g.id == selectedId) ? 'selected' : '';
                            groupSelect.innerHTML += `<option value="${g.id}" ${isSel}>${g.name}</option>`;
                        });
                    }
                })
                .catch(() => {
                    groupSelect.innerHTML = '<option value="">-- None / General --</option>';
                });
        }

        function loadSubjects(classId, groupId = '', selectedId = '') {
            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 => {
                            const isSel = (s.id == selectedId) ? 'selected' : '';
                            subjectSelect.innerHTML += `<option value="${s.id}" ${isSel}>${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);
            }
        });

        // Initialize with existing data
        if (classSelect.value) {
            loadSections(classSelect.value, initialSectionId);
            loadGroups(classSelect.value, initialGroupId);
            loadSubjects(classSelect.value, initialGroupId, initialSubjectId);
        }
    });
</script>
@endsection