@extends('admin.layout.app')
@section('title', __('admin.add_student'))

@section('body')
<div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-4">
    <div>
        <h3 class="fw-bold mb-1">{{ __('admin.add_new_student') }}</h3>
        <p class="text-muted mb-0">{{ __('admin.create_a_student_profile_with_personal_and_academic_det') }}</p>
    </div>
    <a href="{{ route('students.index') }}" class="btn btn-outline-secondary rounded-pill px-4 py-2">
        <i class="fas fa-arrow-left me-2"></i> {{ __('admin.back_to_reports') }}
    </a>
</div>

<div class="card shadow-sm border-0 rounded-4">
    <div class="card-body p-4">
        @if(request('from_application'))
            <div class="alert alert-info rounded-3">
                <strong>Online application imported.</strong> Review the data, set password and academic placement, then save the student.
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger rounded-3">
                <ul class="mb-0">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('students.store') }}" method="POST">
            @csrf

            {{-- Personal Information --}}
            <div class="row g-3 mb-4">
                <div class="col-12">
                    <div class="bg-light rounded-4 p-3">
                        <h6 class="fw-semibold mb-3"><i class="fas fa-id-card me-2 text-primary"></i> {{ __('admin.personal_information') }}</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{{ __('admin.full_name') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name" value="{{ old('name', request('name')) }}" class="form-control rounded-pill" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{{ __('admin.father_s_name') }}</label>
                                <input type="text" name="father_name" value="{{ old('father_name', request('father_name')) }}" class="form-control rounded-pill">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('admin.date_of_birth') }}</label>
                                <input type="date" name="dob" value="{{ old('dob', request('dob')) }}" class="form-control rounded-pill">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('admin.gender') }}</label>
                                <select name="gender" class="form-select rounded-pill">
                                    <option value="" {{ old('gender') === '' ? 'selected' : '' }}>{{ __('admin.select') }}</option>
                                    <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>{{ __('admin.male') }}</option>
                                    <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>{{ __('admin.female') }}</option>
                                    <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>{{ __('admin.other') }}</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('admin.tazkira_id_no') }}</label>
                                <input type="text" name="tazkira_no" value="{{ old('tazkira_no', request('tazkira_no')) }}" class="form-control rounded-pill">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Contact Information --}}
            <div class="row g-3 mb-4">
                <div class="col-12">
                    <div class="bg-light rounded-4 p-3">
                        <h6 class="fw-semibold mb-3"><i class="fas fa-address-book me-2 text-success"></i> {{ __('admin.contact_information') }}</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{{ __('admin.email_address') }} <span class="text-danger">*</span></label>
                                <input type="email" name="email" value="{{ old('email', request('email')) }}" class="form-control rounded-pill" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{{ __('admin.phone_number') }}</label>
                                <input type="text" name="phone" value="{{ old('phone', request('phone')) }}" class="form-control rounded-pill">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('admin.country') }}</label>
                                <input type="text" name="country" value="{{ old('country', request('country')) }}" class="form-control rounded-pill">
                            </div>
                            <div class="col-md-8">
                                <label class="form-label fw-semibold">{{ __('admin.address') }}</label>
                                <textarea name="address" rows="2" class="form-control rounded-3">{{ old('address', request('address')) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Academic Placement (New) --}}
            <div class="row g-3 mb-4">
                <div class="col-12">
                    <div class="bg-light rounded-4 p-3">
                        <h6 class="fw-semibold mb-3"><i class="fas fa-graduation-cap me-2 text-info"></i> {{ __('admin.academic_placement') }}</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">{{ __('admin.faculty') }}</label>
                                <select name="faculty_id" id="facultySelect" class="form-select">
                                    <option value="">{{ __('admin.select_faculty') }}</option>
                                    @foreach($faculties as $fac)
                                        <option value="{{ $fac->id }}" {{ old('faculty_id') == $fac->id ? 'selected' : '' }}>{{ $fac->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ __('admin.department') }}</label>
                                <select name="department_id" id="departmentSelect" class="form-select" disabled>
                                    <option value="">{{ __('admin.select_department') }}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ __('admin.program') }}</label>
                                <select name="program_id" id="programSelect" class="form-select" disabled>
                                    <option value="">{{ __('admin.select_program') }}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ __('admin.current_semester') }}</label>
                                <select name="semester_id" id="semesterSelect" class="form-select" disabled>
                                    <option value="">{{ __('admin.select_semester') }}</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input type="checkbox" name="auto_enroll" value="1" class="form-check-input" id="autoEnroll" checked>
                                    <label class="form-check-label" for="autoEnroll">
                                        {{ __('admin.auto_enroll_in_courses') }}
                                    </label>
                                    <small class="text-muted d-block">{{ __('admin.auto_enroll_description') }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Education & Job --}}
            <div class="row g-3 mb-4">
                <div class="col-12">
                    <div class="bg-light rounded-4 p-3">
                        <h6 class="fw-semibold mb-3"><i class="fas fa-graduation-cap me-2 text-info"></i> {{ __('admin.education_job') }}</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('admin.highest_education') }}</label>
                                <input type="text" name="last_education" value="{{ old('last_education', request('last_education')) }}" class="form-control rounded-pill">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('admin.current_job') }}</label>
                                <input type="text" name="current_job" value="{{ old('current_job', request('current_job')) }}" class="form-control rounded-pill">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('admin.desired_course') }}</label>
                                <input type="text" name="desired_course" value="{{ old('desired_course', request('desired_course')) }}" class="form-control rounded-pill">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Account Security --}}
            <div class="row g-3 mb-4">
                <div class="col-12">
                    <div class="bg-light rounded-4 p-3">
                        <h6 class="fw-semibold mb-3"><i class="fas fa-lock me-2 text-warning"></i> {{ __('admin.account_security') }}</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{{ __('admin.password') }} <span class="text-danger">*</span></label>
                                <input type="password" name="password" class="form-control rounded-pill" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{{ __('admin.confirm_password') }} <span class="text-danger">*</span></label>
                                <input type="password" name="password_confirmation" class="form-control rounded-pill" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-check mb-4">
                <input class="form-check-input" type="checkbox" name="agreement" value="1" id="agreement" {{ old('agreement') ? 'checked' : '' }}>
                <label class="form-check-label" for="agreement">
                    {{ __('admin.i_agree_to_the_terms_and_conditions') }}
                </label>
            </div>

            <div class="d-flex justify-content-end gap-2">
                <a href="{{ route('students.index') }}" class="btn btn-outline-secondary rounded-pill px-4">{{ __('admin.cancel') }}</a>
                <button type="submit" class="btn btn-primary rounded-pill px-5">
                    <i class="fas fa-save me-2"></i> {{ __('admin.save_student') }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // Dynamic dropdowns for academic placement
    const facultySelect = document.getElementById('facultySelect');
    const departmentSelect = document.getElementById('departmentSelect');
    const programSelect = document.getElementById('programSelect');
    const semesterSelect = document.getElementById('semesterSelect');

    facultySelect.addEventListener('change', function() {
        const facultyId = this.value;
        if (!facultyId) {
            departmentSelect.disabled = true; departmentSelect.innerHTML = '<option value="">{{ __("admin.select_department") }}</option>';
            programSelect.disabled = true; semesterSelect.disabled = true;
            return;
        }
        fetch(`/admin/placement/departments/${facultyId}`)
            .then(res => res.json())
            .then(data => {
                departmentSelect.disabled = false;
                departmentSelect.innerHTML = '<option value="">{{ __("admin.select_department") }}</option>';
                data.forEach(dept => departmentSelect.innerHTML += `<option value="${dept.id}">${dept.name}</option>`);
                programSelect.disabled = true; semesterSelect.disabled = true;
            });
    });

    departmentSelect.addEventListener('change', function() {
        const deptId = this.value;
        if (!deptId) { programSelect.disabled = true; semesterSelect.disabled = true; return; }
        fetch(`/admin/placement/programs/${deptId}`)
            .then(res => res.json())
            .then(data => {
                programSelect.disabled = false;
                programSelect.innerHTML = '<option value="">{{ __("admin.select_program") }}</option>';
                data.forEach(prog => programSelect.innerHTML += `<option value="${prog.id}">${prog.name}</option>`);
                semesterSelect.disabled = true;
            });
    });

    programSelect.addEventListener('change', function() {
        const progId = this.value;
        if (!progId) { semesterSelect.disabled = true; return; }
        fetch(`/admin/placement/semesters/${progId}`)
            .then(res => res.json())
            .then(data => {
                semesterSelect.disabled = false;
                semesterSelect.innerHTML = '<option value="">{{ __("admin.select_semester") }}</option>';
                data.forEach(sem => semesterSelect.innerHTML += `<option value="${sem.id}">${sem.name}</option>`);
            });
    });
</script>
@endsection