@extends('public.layout.app')

@section('body')
<section class="section admission-hero" style="padding-top:110px;">
    <div class="container">
        <div class="row g-4 align-items-stretch">
            <div class="col-lg-4">
                <div class="admission-side-card h-100">
                    <div class="text-center mb-4">
                        <div class="student-illustration mx-auto mb-3">
                            <i class="fa-solid fa-user-graduate"></i>
                        </div>
                        <h3 class="fw-bold mb-2">Afghan Online Education</h3>
                        <p class="mb-0 opacity-75">Online Admission Apply Form</p>
                    </div>
                    <div class="admission-step"><span>1</span><div><strong>Apply Online</strong><small>Fill all student information</small></div></div>
                    <div class="admission-step"><span>2</span><div><strong>Admin Review</strong><small>Pending / Approved / Rejected</small></div></div>
                    <div class="admission-step"><span>3</span><div><strong>Email Notification</strong><small>Student receives status by email</small></div></div>
                    <div class="admission-step"><span>4</span><div><strong>Create Student</strong><small>Academic data moves to student profile</small></div></div>
                    <div class="mt-4 p-3 rounded-4 bg-white bg-opacity-10 small">
                        <i class="fa-solid fa-envelope me-1"></i> admissions@ao-uni.org
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                    <div>
                        <h3 class="fw-bold mb-0">{{ __('front.online_apply') }}</h3>
                        <div class="text-muted small">پوهنځی، څانګه، پروګرام او کورس انتخاب کړئ، بیا مکمل فورم وسپارئ.</div>
                    </div>
                    <a href="{{ route('front.home') }}" class="btn btn-outline-secondary btn-sm rounded-pill">
                        <i class="fa-solid fa-house me-1"></i> {{ __('front.home') }}
                    </a>
                </div>

                @if(session('success'))
                    <div class="alert alert-success d-flex align-items-center gap-2 rounded-4">
                        <i class="fa-solid fa-circle-check"></i>
                        <div>{{ session('success') }}</div>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger rounded-4">
                        <strong>مهرباني وکړئ فورم سم بشپړ کړئ.</strong>
                        <ul class="mb-0 mt-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="card border-0 shadow-lg admission-form-card">
                    <div class="card-body p-4 p-lg-5">
                        <form method="POST" action="{{ route('front.apply.store') }}" enctype="multipart/form-data">
                            @csrf

                            <div class="form-section-title"><i class="fa-solid fa-building-columns"></i> Academic Selection / د زده کړې انتخاب</div>
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label class="form-label">University / پوهنتون <span class="text-danger">*</span></label>
                                    <select name="university_id" id="university_id" class="form-select @error('university_id') is-invalid @enderror" required>
                                        <option value="">Select University</option>
                                        @foreach($universities as $university)
                                            <option value="{{ $university->id }}" {{ old('university_id') == $university->id ? 'selected' : '' }}>{{ $university->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('university_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Faculty / پوهنځی <span class="text-danger">*</span></label>
                                    <select name="faculty_id" id="faculty_id" class="form-select @error('faculty_id') is-invalid @enderror" required>
                                        <option value="">Select Faculty</option>
                                        @foreach($faculties as $faculty)
                                            <option value="{{ $faculty->id }}" data-university="{{ $faculty->university_id }}" {{ old('faculty_id') == $faculty->id ? 'selected' : '' }}>{{ $faculty->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('faculty_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Department / څانګه <span class="text-danger">*</span></label>
                                    <select name="department_id" id="department_id" class="form-select @error('department_id') is-invalid @enderror" required>
                                        <option value="">Select Department</option>
                                        @foreach($departments as $department)
                                            <option value="{{ $department->id }}" data-faculty="{{ $department->faculty_id }}" {{ old('department_id') == $department->id ? 'selected' : '' }}>{{ $department->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('department_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Program / پروګرام <span class="text-danger">*</span></label>
                                    <select name="program_id" id="program_id" class="form-select @error('program_id') is-invalid @enderror" required>
                                        <option value="">Select Program</option>
                                        @foreach($programs as $program)
                                            <option value="{{ $program->id }}" data-department="{{ $program->department_id }}" {{ old('program_id') == $program->id ? 'selected' : '' }}>{{ $program->name }} @if($program->degree_type) - {{ $program->degree_type }} @endif</option>
                                        @endforeach
                                    </select>
                                    @error('program_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-8">
                                    <label class="form-label">Course / کورس</label>
                                    <select name="course_id" id="course_id" class="form-select @error('course_id') is-invalid @enderror">
                                        <option value="">Select Course</option>
                                        @foreach($courses as $course)
                                            <option value="{{ $course->id }}" data-program="{{ $course->semester?->program_id }}" {{ old('course_id') == $course->id ? 'selected' : '' }}>{{ $course->code ? $course->code.' - ' : '' }}{{ $course->title }}</option>
                                        @endforeach
                                    </select>
                                    @error('course_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Other desired course</label>
                                    <input type="text" name="desired_course" value="{{ old('desired_course') }}" class="form-control @error('desired_course') is-invalid @enderror" placeholder="Optional">
                                    @error('desired_course') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>

                            <div class="form-section-title"><i class="fa-solid fa-user"></i> Personal Information / شخصي معلومات</div>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.full_name_2') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" required>
                                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.father_name') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="father_name" value="{{ old('father_name') }}" class="form-control @error('father_name') is-invalid @enderror" required>
                                    @error('father_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">{{ __('front.date_of_birth') }} <span class="text-danger">*</span></label>
                                    <input type="date" name="dob" value="{{ old('dob') }}" class="form-control @error('dob') is-invalid @enderror" required>
                                    @error('dob') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Gender / جنسیت</label>
                                    <select name="gender" class="form-select @error('gender') is-invalid @enderror">
                                        <option value="">Select</option>
                                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                        <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                    @error('gender') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">{{ __('front.current_country') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="country" value="{{ old('country') }}" class="form-control @error('country') is-invalid @enderror" required>
                                    @error('country') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.email') }} <span class="text-danger">*</span></label>
                                    <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" required>
                                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">{{ __('front.whatsapp_phone') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" value="{{ old('phone') }}" class="form-control @error('phone') is-invalid @enderror" required>
                                    @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Emergency Phone</label>
                                    <input type="text" name="emergency_phone" value="{{ old('emergency_phone') }}" class="form-control @error('emergency_phone') is-invalid @enderror">
                                    @error('emergency_phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Address / پته</label>
                                    <input type="text" name="address" value="{{ old('address') }}" class="form-control @error('address') is-invalid @enderror">
                                    @error('address') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.tazkira_number') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="tazkira_no" value="{{ old('tazkira_no') }}" class="form-control @error('tazkira_no') is-invalid @enderror" required>
                                    @error('tazkira_no') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.tazkira_copy_jpg_png_pdf') }}</label>
                                    <input type="file" name="tazkira_file" class="form-control @error('tazkira_file') is-invalid @enderror" accept=".jpg,.jpeg,.png,.pdf">
                                    @error('tazkira_file') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    <div class="text-muted small mt-1">{{ __('front.max_4mb') }}</div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Student Photo / د شاګرد عکس</label>
                                    <input type="file" name="student_photo" class="form-control @error('student_photo') is-invalid @enderror" accept=".jpg,.jpeg,.png">
                                    @error('student_photo') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    <div class="text-muted small mt-1">JPG/PNG max 3MB</div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.current_job') }}</label>
                                    <input type="text" name="current_job" value="{{ old('current_job') }}" class="form-control @error('current_job') is-invalid @enderror">
                                    @error('current_job') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.last_education') }}</label>
                                    <input type="text" name="last_education" value="{{ old('last_education') }}" class="form-control @error('last_education') is-invalid @enderror">
                                    @error('last_education') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12">
                                    <div class="form-check p-3 rounded-4 bg-light">
                                        <input class="form-check-input @error('agreement') is-invalid @enderror" type="checkbox" name="agreement" value="1" id="agree" {{ old('agreement') ? 'checked' : '' }} required>
                                        <label class="form-check-label" for="agree">{{ __('front.i_confirm_my_information_is_correct_and_i_agree_to_foll') }}</label>
                                        @error('agreement') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('front.signature_name_type_your_name') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="signature_name" value="{{ old('signature_name') }}" class="form-control @error('signature_name') is-invalid @enderror" required>
                                    @error('signature_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12 d-flex flex-wrap gap-2 align-items-center mt-3">
                                    <button class="btn btn-primary btn-lg rounded-pill px-4">
                                        <i class="fa-solid fa-paper-plane me-1"></i> {{ __('front.submit') }}
                                    </button>
                                    <span class="text-muted small">{{ __('front.after_submit_you_will_get_a_register_number') }}</span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .admission-hero { background: linear-gradient(180deg, rgba(21,63,45,.06), rgba(255,255,255,1)); }
    .admission-side-card { border-radius: 26px; padding: 28px; color: #fff; background: linear-gradient(145deg, #153f2d, #0d6efd); box-shadow: 0 18px 50px rgba(13, 110, 253, .22); }
    .student-illustration { width: 132px; height: 132px; border-radius: 50%; background: rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; border: 2px solid rgba(255,255,255,.28); }
    .student-illustration i { font-size: 64px; }
    .admission-step { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.15); }
    .admission-step span { width:34px; height:34px; border-radius:50%; background:#fff; color:#153f2d; display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 34px; }
    .admission-step small { display:block; opacity:.72; }
    .admission-form-card { border-radius: 24px; overflow: hidden; }
    .form-section-title { font-weight: 800; color:#153f2d; margin: 6px 0 16px; padding-bottom:10px; border-bottom:1px dashed #d6dde6; }
    .form-section-title i { margin-right: 8px; color:#0d6efd; }
    .form-control, .form-select { border-radius: 14px; min-height: 46px; }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const oldFaculty = @json(old('faculty_id'));
        const oldDepartment = @json(old('department_id'));
        const oldProgram = @json(old('program_id'));
        const oldCourse = @json(old('course_id'));

        const uni = document.getElementById('university_id');
        const faculty = document.getElementById('faculty_id');
        const department = document.getElementById('department_id');
        const program = document.getElementById('program_id');
        const course = document.getElementById('course_id');

        function filterOptions(select, attr, parentValue, oldValue) {
            [...select.options].forEach((option, index) => {
                if (index === 0) return;
                const show = !parentValue || option.dataset[attr] == parentValue;
                option.hidden = !show;
                option.disabled = !show;
            });
            if (oldValue) select.value = oldValue;
            if (select.selectedOptions[0] && select.selectedOptions[0].disabled) select.value = '';
        }

        function refreshAcademic() {
            filterOptions(faculty, 'university', uni.value, oldFaculty);
            filterOptions(department, 'faculty', faculty.value, oldDepartment);
            filterOptions(program, 'department', department.value, oldProgram);
            filterOptions(course, 'program', program.value, oldCourse);
        }

        uni.addEventListener('change', () => { faculty.value=''; department.value=''; program.value=''; course.value=''; refreshAcademic(); });
        faculty.addEventListener('change', () => { department.value=''; program.value=''; course.value=''; refreshAcademic(); });
        department.addEventListener('change', () => { program.value=''; course.value=''; refreshAcademic(); });
        program.addEventListener('change', () => { course.value=''; refreshAcademic(); });
        refreshAcademic();
    });
</script>
@endsection