@extends('layouts.app')

@section('title', 'Admission Form – U.G.')

@section('content')

    {{-- Stepper --}}
    <div class="step-indicator mt-4">
        <div class="step-item">
            <div class="step-circle active">1</div>
            <span class="step-label active">Admission Form</span>
        </div>
        <div class="step-connector"></div>
        <div class="step-item">
            <div class="step-circle">2</div>
            <span class="step-label">Document Upload</span>
        </div>
        <div class="step-connector"></div>
        <div class="step-item">
            <div class="step-circle">3</div>
            <span class="step-label">Payment</span>
        </div>
    </div>

    {{-- Info bar --}}
    <div class="form-topbar mb-0">
        <div class="form-number-badge">
            Form No: <strong>{{ $application->form_number }}</strong>
        </div>
        <div style="font-size:0.85rem;color:#6b7280;">
            <i class="bi bi-person me-1"></i>{{ $application->applicant_name }}
            &nbsp;&bull;&nbsp;
            <i class="bi bi-mortarboard me-1"></i>{{ $application->course }}
        </div>
    </div>

    <div class="hint-box mt-3 mb-4">
        <i class="bi bi-check-circle-fill me-1" style="color:#15803d"></i>
        <strong>Congratulations!</strong> Your application has been selected for admission to
        <strong>St. Xavier's College, Burdwan</strong>. Please fill in the admission form below carefully.
        All fields marked <span style="color:#c0392b">*</span> are required.
    </div>

    @if ($errors->any())
        <div class="alert" style="background:#fef2f2;border:1.5px solid #fca5a5;border-radius:8px;padding:14px 18px;margin-bottom:1rem;color:#b91c1c;font-size:0.88rem">
            <i class="bi bi-exclamation-circle-fill me-2"></i>
            Please correct the errors below and try again.
            <ul class="mb-0 mt-1 ps-3">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('application.admissionStore', $application->form_number) }}" method="POST" class="needs-validation" novalidate>
        @csrf

        {{-- ── SECTION 1: Course Details ── --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="section-icon"><i class="bi bi-mortarboard-fill"></i></div>
                <h3>Course Details</h3>
            </div>
            <div class="form-card-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="form-label" for="course">Course <span class="required-star">*</span></label>
                        <select name="course" id="course" class="form-select @error('course') is-invalid @enderror" required>
                            <option value="{{ $application->course }}" selected>{{ $application->course }}</option>
                            {{-- <option value="">Select Course</option>
                            @foreach (['B.A.', 'B.Sc.', 'B.Com', 'BBA', 'BCA'] as $c)
                                <option value="{{ $c }}"
                                    {{ (old('course', $application->course) === $c) ? 'selected' : '' }}>
                                    {{ $c }}
                                </option>
                            @endforeach --}}
                        </select>
                        @error('course') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="subject">Subject / Honours <span class="required-star">*</span></label>
                        <select name="subject" id="subject" class="form-select @error('subject') is-invalid @enderror" required>
                            <option value="{{ $application->subject }}" selected>{{ $application->subject }}</option>
                            {{-- <option value="">Select Subject</option> --}}
                        </select>
                        @error('subject') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- ── SECTION 2: Personal Details ── --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="section-icon"><i class="bi bi-person-fill"></i></div>
                <h3>Personal Details</h3>
            </div>
            <div class="form-card-body">
                <div class="row g-4">

                    {{-- Name (pre-filled, read-only) --}}
                    <div class="col-md-8">
                        <label class="form-label">Name of Applicant</label>
                        <input type="text" class="form-control" value="{{ $application->applicant_name }}" disabled>
                    </div>

                    {{-- Gender (read-only) --}}
                    <div class="col-md-4">
                        <label class="form-label">Gender</label>
                        <input type="text" class="form-control" value="{{ $application->gender }}" disabled>
                    </div>

                    {{-- WhatsApp --}}
                    <div class="col-md-4">
                        <label class="form-label" for="whatsapp_no">WhatsApp No. <span class="required-star">*</span></label>
                        <input type="tel" name="whatsapp_no" id="whatsapp_no"
                            class="form-control @error('whatsapp_no') is-invalid @enderror"
                            value="{{ old('whatsapp_no', $application->contact_no) }}"
                            placeholder="10-digit number" maxlength="15" required>
                        @error('whatsapp_no') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Contact (read-only) --}}
                    <div class="col-md-4">
                        <label class="form-label">Contact No.</label>
                        <input type="text" class="form-control" value="{{ $application->contact_no }}" disabled>
                    </div>

                    {{-- Aadhaar --}}
                    <div class="col-md-4">
                        <label class="form-label" for="aadhaar_no">Aadhaar No. <span class="required-star">*</span></label>
                        <input type="text" name="aadhaar_no" id="aadhaar_no"
                            class="form-control @error('aadhaar_no') is-invalid @enderror"
                            value="{{ old('aadhaar_no') }}"
                            placeholder="12-digit Aadhaar" maxlength="12" required>
                        @error('aadhaar_no') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Religion (read-only) --}}
                    <div class="col-md-4">
                        <label class="form-label">Religion</label>
                        <input type="text" class="form-control" value="{{ $application->religion }}" disabled>
                    </div>

                    {{-- Category (read-only) --}}
                    <div class="col-md-4">
                        <label class="form-label">Category / Community</label>
                        <input type="text" class="form-control" value="{{ $application->category }}" disabled>
                    </div>

                    {{-- Email (read-only) --}}
                    <div class="col-md-4">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" value="{{ $application->email }}" disabled>
                    </div>

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

        {{-- ── SECTION 3: Academic Details ── --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="section-icon"><i class="bi bi-journal-text"></i></div>
                <h3>Academic Details</h3>
            </div>
            <div class="form-card-body">
                <div class="row g-4">

                    {{-- H.S. info (read-only) --}}
                    <div class="col-md-4">
                        <label class="form-label">H.S. Passing Year</label>
                        <input type="text" class="form-control" value="{{ $application->hs_passing_year }}" disabled>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Board Name</label>
                        <input type="text" class="form-control" value="{{ $application->board_name }}" disabled>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Percentage (H.S.)</label>
                        <input type="text" class="form-control" value="{{ $application->percentage }}%" disabled>
                    </div>

                    {{-- Madhyamik subjects --}}
                    <div class="col-12">
                        <label class="form-label" for="subject_combination">
                            Subject Combination in Madhyamik / Std. X <span class="required-star">*</span>
                        </label>
                        <textarea name="subject_combination" id="subject_combination" rows="3"
                            class="form-control @error('subject_combination') is-invalid @enderror"
                            placeholder="Enter subjects studied in Madhyamik / Class X" required>{{ old('subject_combination') }}</textarea>
                        @error('subject_combination') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Madhyamik percentage --}}
                    <div class="col-md-4">
                        <label class="form-label" for="percentage_of_madhyamik">
                            Percentage of Madhyamik / Std. X <span class="required-star">*</span>
                        </label>
                        <input type="text" name="percentage_of_madhyamik" id="percentage_of_madhyamik"
                            class="form-control @error('percentage_of_madhyamik') is-invalid @enderror"
                            value="{{ old('percentage_of_madhyamik') }}"
                            placeholder="e.g. 75.50" required>
                        @error('percentage_of_madhyamik') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    
                    <div class="col-md-8">
                        <label class="form-label">ABC ID</label>
                        <input type="text" class="form-control" name="abc_id" id="abc_id" value="{{ $application->nad_abc_id }}" placeholder="Enter ABC ID">
                    </div>

                    {{-- Previous institution (read-only) --}}
                    <div class="col-md-4">
                        <label class="form-label">Previous Institution XII</label>
                        <input type="text" class="form-control" value="{{ $application->prev_institution }}" disabled>
                    </div>

                    <div class="col-md-8">
                        <label class="form-label">Previous Institution Address</label>
                        <input type="text" class="form-control" value="{{ $application->prev_institution_address }}" disabled>
                    </div>

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

        {{-- ── SECTION 4: Parent / Guardian Details ── --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="section-icon"><i class="bi bi-people-fill"></i></div>
                <h3>Parent / Guardian Details</h3>
            </div>
            <div class="form-card-body">
                <div class="row g-4">

                    {{-- Father --}}
                    <div class="col-md-4">
                        <label class="form-label">Father's Name</label>
                        <input type="text" class="form-control" value="{{ $application->father_name }}" disabled>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="father_occupation">Father's Occupation</label>
                        <input type="text" name="father_occupation" id="father_occupation"
                            class="form-control @error('father_occupation') is-invalid @enderror"
                            value="{{ old('father_occupation') }}" placeholder="Occupation" style="text-transform:uppercase">
                        @error('father_occupation') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="father_mobile">Father's Mobile No.</label>
                        <input type="tel" name="father_mobile" id="father_mobile"
                            class="form-control @error('father_mobile') is-invalid @enderror"
                            value="{{ old('father_mobile') }}" placeholder="10-digit number" maxlength="15">
                        @error('father_mobile') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Mother --}}
                    <div class="col-md-4">
                        <label class="form-label">Mother's Name</label>
                        <input type="text" class="form-control" value="{{ $application->mother_name }}" disabled>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="mother_occupation">Mother's Occupation</label>
                        <input type="text" name="mother_occupation" id="mother_occupation"
                            class="form-control @error('mother_occupation') is-invalid @enderror"
                            value="{{ old('mother_occupation') }}" placeholder="Occupation" style="text-transform:uppercase">
                        @error('mother_occupation') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="mother_mobile">Mother's Mobile No.</label>
                        <input type="tel" name="mother_mobile" id="mother_mobile"
                            class="form-control @error('mother_mobile') is-invalid @enderror"
                            value="{{ old('mother_mobile') }}" placeholder="10-digit number" maxlength="15">
                        @error('mother_mobile') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Guardian --}}
                    <div class="col-md-6">
                        <label class="form-label" for="guardian_name">Guardian's Name
                            <small class="text-muted">(if parents not available / outstation)</small>
                        </label>
                        <input type="text" name="guardian_name" id="guardian_name"
                            class="form-control @error('guardian_name') is-invalid @enderror"
                            value="{{ old('guardian_name') }}" placeholder="Guardian's Full Name" style="text-transform:uppercase">
                        @error('guardian_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Annual income --}}
                    <div class="col-md-6">
                        <label class="form-label" for="annual_family_income">Annual Family Income (from all sources)</label>
                        <input type="text" name="annual_family_income" id="annual_family_income"
                            class="form-control @error('annual_family_income') is-invalid @enderror"
                            value="{{ old('annual_family_income') }}" placeholder="e.g. 3,00,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="10"
>
                        @error('annual_family_income') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

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

        {{-- ── SECTION 5: Correspondence Address ── --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="section-icon"><i class="bi bi-house-fill"></i></div>
                <h3>Correspondence Address</h3>
            </div>
            <div class="form-card-body">
                <div class="row g-4">
                    <div class="col-12">
                        <label class="form-label" for="corr_address">Address <span class="required-star">*</span></label>
                        <textarea name="corr_address" id="corr_address" rows="3"
                            class="form-control @error('corr_address') is-invalid @enderror"
                            placeholder="House / Village / Street" required>{{ old('corr_address', $application->address) }}</textarea>
                        @error('corr_address') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="corr_po">Post Office <span class="required-star">*</span></label>
                        <input type="text" name="corr_po" id="corr_po"
                            class="form-control @error('corr_po') is-invalid @enderror"
                            value="{{ old('corr_po') }}" placeholder="Post Office" required>
                        @error('corr_po') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="corr_district">District <span class="required-star">*</span></label>
                        <input type="text" name="corr_district" id="corr_district"
                            class="form-control @error('corr_district') is-invalid @enderror"
                            value="{{ old('corr_district') }}" placeholder="District" required>
                        @error('corr_district') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="corr_pin">Pin Code <span class="required-star">*</span></label>
                        <input type="text" name="corr_pin" id="corr_pin"
                            class="form-control @error('corr_pin') is-invalid @enderror"
                            value="{{ old('corr_pin', $application->pincode) }}" placeholder="Pin Code" maxlength="10" required>
                        @error('corr_pin') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- ── SECTION 6: Permanent Address ── --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="section-icon"><i class="bi bi-geo-alt-fill"></i></div>
                <h3>Permanent Address</h3>
            </div>
            <div class="form-card-body">
                <div class="row g-4">

                    {{-- Same as correspondence checkbox --}}
                    <div class="col-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="same_as_corr">
                            <label class="form-check-label" for="same_as_corr" style="font-size:0.88rem">
                                Same as Correspondence Address
                            </label>
                        </div>
                    </div>

                    <div class="col-12">
                        <label class="form-label" for="permanent_address">Address <span class="required-star">*</span></label>
                        <textarea name="permanent_address" id="permanent_address" rows="3"
                            class="form-control @error('permanent_address') is-invalid @enderror"
                            placeholder="House / Village / Street" required>{{ old('permanent_address') }}</textarea>
                        @error('permanent_address') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="permanent_district">District <span class="required-star">*</span></label>
                        <input type="text" name="permanent_district" id="permanent_district"
                            class="form-control @error('permanent_district') is-invalid @enderror"
                            value="{{ old('permanent_district') }}" placeholder="District" required>
                        @error('permanent_district') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="permanent_pin">Pin Code <span class="required-star">*</span></label>
                        <input type="text" name="permanent_pin" id="permanent_pin"
                            class="form-control @error('permanent_pin') is-invalid @enderror"
                            value="{{ old('permanent_pin') }}" placeholder="Pin Code" maxlength="10" required>
                        @error('permanent_pin') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- ── SECTION 7: Activities ── --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="section-icon"><i class="bi bi-trophy-fill"></i></div>
                <h3>Sports &amp; Activities</h3>
            </div>
            <div class="form-card-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="form-label" for="sports_games">Sports &amp; Games</label>
                        <input type="text" name="sports_games" id="sports_games"
                            class="form-control @error('sports_games') is-invalid @enderror"
                            value="{{ old('sports_games') }}" placeholder="e.g. Cricket, Football">
                        @error('sports_games') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="co_curricular_activities">Co-Curricular Activities</label>
                        <input type="text" name="co_curricular_activities" id="co_curricular_activities"
                            class="form-control @error('co_curricular_activities') is-invalid @enderror"
                            value="{{ old('co_curricular_activities') }}" placeholder="e.g. Debate, NSS, NCC">
                        @error('co_curricular_activities') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Declaration ── --}}
        <div class="form-card">
            <div class="form-card-body">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="declaration" required>
                    <label class="form-check-label" for="declaration" style="font-size:0.88rem">
                        I hereby declare that all information provided is true and correct to the best of my knowledge.
                        I understand that any false information may result in cancellation of my admission.
                        I agree to abide by all the rules and regulations of the college.
                    </label>
                </div>
            </div>
        </div>

        {{-- Submit --}}
        <div class="d-flex justify-content-end align-items-center mt-4 mb-5">
            <button type="submit" class="btn-primary-custom" id="submit-btn" disabled>
                Save &amp; Continue to Documents <i class="bi bi-arrow-right ms-2"></i>
            </button>
        </div>

    </form>

@endsection

@push('scripts')
<script>
    // Enable submit only after declaration checked
    document.getElementById('declaration').addEventListener('change', function () {
        document.getElementById('submit-btn').disabled = !this.checked;
    });

    // Course → Subject dynamic loader
    const courseSubjects = {
        "B.Sc.": ["Biotechnology (Major)", "Computer Science (Major)", "Data Science (Major)", "Geography (Major)", "Economics (Major)"],
        "B.Com": ["Accounting & Management (Major)"],
        "B.A.":  ["English (Major)", "Geography (Major)", "Sociology (Major)", "Economics (Major)", "Mass Communication & Journalism (Major)", "Psychology (Major)", "Tourism & Hospitality Management (Major)"],
        "BBA":   ["Bachelor of Business Administration (Major)"],
        "BCA":   ["Bachelor of Computer Application (Major)"]
    };

    const courseEl   = document.getElementById('course');
    const subjectEl  = document.getElementById('subject');
    const oldSubject = "{{ old('subject', $application->subject) }}";

    function loadSubjects(course, selected = null) {
        subjectEl.innerHTML = '<option value="">Select Subject</option>';
        (courseSubjects[course] || []).forEach(s => {
            const opt = document.createElement('option');
            opt.value = s; opt.textContent = s;
            if (selected && s === selected) opt.selected = true;
            subjectEl.appendChild(opt);
        });
    }

    // courseEl.addEventListener('change', function () { loadSubjects(this.value); });
    // loadSubjects(courseEl.value, oldSubject);

    // Same as correspondence checkbox
    document.getElementById('same_as_corr').addEventListener('change', function () {
        if (this.checked) {
            document.getElementById('permanent_address').value = document.getElementById('corr_address').value;
            document.getElementById('permanent_district').value = document.getElementById('corr_district').value;
            document.getElementById('permanent_pin').value     = document.getElementById('corr_pin').value;
        }
    });
</script>
@endpush