@extends('layouts.app')

@section('title', 'Step 1 – Personal Information')

@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">Personal Information</span>
        </div>
        <div class="step-connector"></div>
        <div class="step-item">
            <div class="step-circle">2</div>
            <span class="step-label">Payment</span>
        </div>
        <div class="step-connector"></div>
        <div class="step-item">
            <div class="step-circle">3</div>
            <span class="step-label">Document Upload</span>
        </div>
    </div>

    <div class="hint-box mb-4">
        <i class="bi bi-info-circle me-1"></i>
        <strong>Instructions:</strong> Fill in all fields marked with <span style="color:#c0392b">*</span> carefully. Use
        <strong>BLOCK LETTERS</strong> for your name, father's name and mother's name. Ensure details match your mark sheet
        exactly.
        <ul class="mt-2">
            <li>Select your category, course and subject carefully — changes are not permitted after submission.</li>
            <li>Enter all subjects from your H.S. / Equivalent mark sheet in the table below.</li>
        </ul>
    </div>

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

        {{-- ── SECTION A: Course & Category ── --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="section-icon"><i class="bi bi-mortarboard-fill"></i></div>
                <h3>Course & Category Details</h3>
            </div>
            <div class="form-card-body">
                <div class="row g-4">

                    {{-- Category --}}
                    <div class="col-12">
                        <label class="form-label">Category <span class="required-star">*</span></label>
                        <div class="check-group">
                            @foreach (['General', 'SC', 'ST', 'OBC', 'Catholic'] as $cat)
                                <label class="check-item">
                                    <input type="radio" name="category" value="{{ $cat }}"
                                        {{ old('category') === $cat ? 'checked' : '' }} required>
                                    <span>{{ $cat }}</span>
                                </label>
                            @endforeach
                        </div>
                        @error('category')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        {{-- Course --}}
                        <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="">Select Course</option>

                                @foreach (['B.A.', 'B.Sc.', 'B.Com', 'BBA', 'BCA'] as $c)
                                    <option value="{{ $c }}" {{ old('course') === $c ? 'selected' : '' }}>
                                        {{ $c }}
                                    </option>
                                @endforeach
                            </select>

                            @error('course')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Subject --}}
                        <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="">Select Subject</option>
                            </select>

                            @error('subject')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

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

        {{-- ── SECTION B: 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">

                    {{-- Gender --}}
                    <div class="col-12">
                        <label class="form-label">Gender <span class="required-star">*</span></label>
                        <div class="check-group">
                            <label class="check-item">
                                <input type="radio" name="gender" value="Male"
                                    {{ old('gender') === 'Male' ? 'checked' : '' }} required>
                                <span>Male</span>
                            </label>
                            <label class="check-item">
                                <input type="radio" name="gender" value="Female"
                                    {{ old('gender') === 'Female' ? 'checked' : '' }}>
                                <span>Female</span>
                            </label>
                        </div>
                        @error('gender')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Applicant Name --}}
                    <div class="col-12">
                        <label class="form-label" for="applicant_name">1. Name of the Applicant (In Block Letters) <span
                                class="required-star">*</span></label>
                        <input type="text" name="applicant_name" id="applicant_name"
                            class="form-control @error('applicant_name') is-invalid @enderror"
                            value="{{ old('applicant_name') }}" placeholder="FULL NAME IN CAPITAL LETTERS"
                            style="text-transform:uppercase" required>
                        @error('applicant_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Father's Name --}}
                    <div class="col-md-6">
                        <label class="form-label" for="father_name">2. Father's Name <span
                                class="required-star">*</span></label>
                        <input type="text" name="father_name" id="father_name"
                            class="form-control @error('father_name') is-invalid @enderror"
                            value="{{ old('father_name') }}" placeholder="FATHER'S FULL NAME"
                            style="text-transform:uppercase" required>
                        @error('father_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Mother's Name --}}
                    <div class="col-md-6">
                        <label class="form-label" for="mother_name">3. Mother's Name <span
                                class="required-star">*</span></label>
                        <input type="text" name="mother_name" id="mother_name"
                            class="form-control @error('mother_name') is-invalid @enderror"
                            value="{{ old('mother_name') }}" placeholder="MOTHER'S FULL NAME"
                            style="text-transform:uppercase" required>
                        @error('mother_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Date of Birth --}}
                    <div class="col-md-4">
                        <label class="form-label" for="date_of_birth">4. Date of Birth <span
                                class="required-star">*</span></label>
                        <input type="date" name="date_of_birth" id="date_of_birth"
                            class="form-control @error('date_of_birth') is-invalid @enderror"
                            value="{{ old('date_of_birth') }}" required>
                        @error('date_of_birth')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

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

                    {{-- Email --}}
                    <div class="col-md-4">
                        <label class="form-label" for="email">9. E-mail ID <span
                                class="required-star">*</span></label>
                        <input type="email" name="email" id="email"
                            class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}"
                            placeholder="applicant@email.com" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Differently Abled --}}
                    <div class="col-md-4">
                        <label class="form-label">6. Differently Abled <span class="required-star">*</span></label>
                        <div class="check-group mt-1">
                            <label class="check-item">
                                <input type="radio" name="differently_abled" value="0"
                                    {{ old('differently_abled', '0') === '0' ? 'checked' : '' }}>
                                <span>No</span>
                            </label>
                            <label class="check-item">
                                <input type="radio" name="differently_abled" value="1"
                                    {{ old('differently_abled') === '1' ? 'checked' : '' }}>
                                <span>Yes</span>
                            </label>
                        </div>
                        @error('differently_abled')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Nationality --}}
                    <div class="col-md-4">
                        <label class="form-label" for="nationality">7. Nationality <span
                                class="required-star">*</span></label>
                        <input type="text" name="nationality" id="nationality"
                            class="form-control @error('nationality') is-invalid @enderror"
                            value="{{ old('nationality', 'Indian') }}" required>
                        @error('nationality')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Religion --}}
                    <div class="col-md-4">
                        <label class="form-label" for="religion">8. Religion <span class="required-star">*</span></label>
                        <input type="text" name="religion" id="religion"
                            class="form-control @error('religion') is-invalid @enderror" value="{{ old('religion') }}"
                            placeholder="e.g. Hinduism, Christianity" required>
                        @error('religion')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Address --}}
                    <div class="col-12">
                        <label class="form-label" for="address">10. Address for Correspondence <span
                                class="required-star">*</span></label>
                        <textarea name="address" id="address" rows="3" class="form-control @error('address') is-invalid @enderror"
                            placeholder="Full postal address including village/town, district, state" required>{{ old('address') }}</textarea>
                        @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Pincode --}}
                    <div class="col-md-3">
                        <label class="form-label" for="pincode">PIN Code <span class="required-star">*</span></label>
                        <input type="text" name="pincode" id="pincode"
                            class="form-control @error('pincode') is-invalid @enderror" value="{{ old('pincode') }}"
                            placeholder="700000" maxlength="6" required>
                        @error('pincode')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

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

        {{-- ── SECTION C: 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">

                    {{-- Year of Passing --}}
                    <div class="col-md-4">
                        <label class="form-label" for="hs_passing_year">11. Year of Passing H.S. / Equiv. Exam <span
                                class="required-star">*</span></label>
                        <input type="number" name="hs_passing_year" id="hs_passing_year"
                            class="form-control @error('hs_passing_year') is-invalid @enderror"
                            value="{{ old('hs_passing_year') }}" placeholder="e.g. 2024" min="2000"
                            max="{{ date('Y') + 1 }}" required>
                        @error('hs_passing_year')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Board Name --}}
                    <div class="col-md-8">
                        <label class="form-label" for="board_name">12. Name of the Board / Council <span
                                class="required-star">*</span></label>
                        <input type="text" name="board_name" id="board_name"
                            class="form-control @error('board_name') is-invalid @enderror"
                            value="{{ old('board_name') }}" placeholder="e.g. W.B.C.H.S.E., CBSE, ICSE" required>
                        @error('board_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Previous Institution --}}
                    <div class="col-md-6">
                        <label class="form-label" for="prev_institution">13. Name of Previous Institution <span
                                class="required-star">*</span></label>
                        <input type="text" name="prev_institution" id="prev_institution"
                            class="form-control @error('prev_institution') is-invalid @enderror"
                            value="{{ old('prev_institution') }}" required>
                        @error('prev_institution')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Previous Institution Address --}}
                    <div class="col-md-6">
                        <label class="form-label" for="prev_institution_address">Address of Previous Institution</label>
                        <input type="text" name="prev_institution_address" id="prev_institution_address"
                            class="form-control" value="{{ old('prev_institution_address') }}">
                    </div>

                    {{-- Reg No --}}
                    <div class="col-md-6">
                        <label class="form-label" for="hs_reg_no">H.S. / Equiv. Registration No.</label>
                        <input type="text" name="hs_reg_no" id="hs_reg_no" class="form-control"
                            value="{{ old('hs_reg_no') }}" placeholder="Registration Number">
                    </div>

                    {{-- Unique ID / Roll No --}}
                    <div class="col-md-6">
                        <label class="form-label" for="hs_unique_id_roll">Unique ID / Roll No.</label>
                        <input type="text" name="hs_unique_id_roll" id="hs_unique_id_roll" class="form-control"
                            value="{{ old('hs_unique_id_roll') }}" placeholder="Unique ID or Roll No.">
                    </div>

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

        {{-- ── SECTION D: Subjects & Marks ── --}}
        <div class="form-card">
            <div class="form-card-header">
                <div class="section-icon"><i class="bi bi-table"></i></div>
                <h3>Subjects and Marks in H.S. / Equiv. Exam</h3>
            </div>
            <div class="form-card-body">

                <div class="hint-box mb-4">
                    <strong>Note:</strong>
                    <ul class="mb-0">
                        <li><strong>W.B.C.H.S.E. students:</strong> Language subjects + Best of 3. Physical Education &amp;
                            Environmental Science may be considered if compulsory elective.</li>
                        <li><strong>Other Boards:</strong> Best of 4 subjects. Physical Education &amp; Environmental
                            Science may be considered if compulsory elective.</li>
                        <li>Enter marks exactly as printed in your mark sheet.</li>
                    </ul>
                </div>

                <div class="table-responsive">
                    <table class="table subjects-table align-middle">
                        <thead>
                            <tr>
                                <th width="40">#</th>
                                <th>Subject</th>
                                <th width="130">Full Marks</th>
                                <th width="150">Marks Obtained</th>
                                <th width="60" class="text-center">Remove</th>
                            </tr>
                        </thead>
                        <tbody id="subjects-tbody">
                            @php
                                $oldSubjects = old('subjects', [
                                    ['name' => '', 'full_marks' => '', 'marks_obtained' => ''],
                                    ['name' => '', 'full_marks' => '', 'marks_obtained' => ''],
                                    ['name' => '', 'full_marks' => '', 'marks_obtained' => ''],
                                    ['name' => '', 'full_marks' => '', 'marks_obtained' => ''],
                                    ['name' => '', 'full_marks' => '', 'marks_obtained' => ''],
                                ]);
                            @endphp
                            @foreach ($oldSubjects as $i => $sub)
                                <tr>
                                    <td>{{ $i + 1 }}</td>
                                    <td>
                                        <input type="text" name="subjects[{{ $i }}][name]"
                                            class="form-control" placeholder="Subject name"
                                            value="{{ $sub['name'] ?? '' }}" required>
                                    </td>
                                    <td>
                                        <input type="number" name="subjects[{{ $i }}][full_marks]"
                                            class="form-control" min="0" max="500" placeholder="100"
                                            value="{{ $sub['full_marks'] ?? '' }}">
                                    </td>
                                    <td>
                                        <input type="number" name="subjects[{{ $i }}][marks_obtained]"
                                            class="form-control" min="0" max="500" placeholder="0"
                                            value="{{ $sub['marks_obtained'] ?? '' }}" oninput="calcAggregate()">
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-remove-row"
                                            onclick="removeSubjectRow(this)">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr style="background:#f8f9fc">
                                <td colspan="2" class="fw-bold text-end pe-3" style="font-size:0.85rem">Aggregate</td>
                                <td colspan="2">
                                    <input type="number" name="aggregate_marks" id="aggregate_marks"
                                        class="form-control" readonly value="{{ old('aggregate_marks') }}"
                                        placeholder="Auto-calculated">
                                </td>
                                <td></td>
                            </tr>
                            <tr style="background:#f8f9fc">
                                <td colspan="2" class="fw-bold text-end pe-3" style="font-size:0.85rem">Percentage (%)
                                </td>
                                <td colspan="2">
                                    <input type="number" name="percentage" id="percentage" class="form-control"
                                        readonly step="0.01" value="{{ old('percentage') }}"
                                        placeholder="Auto-calculated">
                                </td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <button type="button" id="add-subject-row" class="btn btn-sm btn-outline-primary btn-add-row mt-2">
                    <i class="bi bi-plus-circle me-1"></i> Add Subject Row
                </button>

                @error('subjects')
                    <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                @enderror

            </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 above is true and correct to the best of my
                        knowledge.
                        I understand that any false information may result in cancellation of my admission.
                    </label>
                </div>
            </div>
        </div>

        {{-- ── Submit ── --}}
        <div class="d-flex justify-content-between align-items-center mt-4 mb-5">
            <a href="{{ route('application.resume') }}" class="btn-secondary-custom text-decoration-none">
                <i class="bi bi-arrow-left me-2"></i>Resume Existing Application
            </a>
            <button type="submit" class="btn-primary-custom">
                Save &amp; Continue to Payment <i class="bi bi-arrow-right ms-2"></i>
            </button>
        </div>

    </form>

@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            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 courseDropdown = document.getElementById('course');
            const subjectDropdown = document.getElementById('subject');

            const oldCourse = "{{ old('course') }}";
            const oldSubject = "{{ old('subject') }}";
            function loadSubjects(course, selectedSubject = null) {
                subjectDropdown.innerHTML = '<option value="">Select Subject</option>';
                if (courseSubjects[course]) {
                    courseSubjects[course].forEach(subject => {
                        let option = document.createElement('option');
                        option.value = subject;
                        option.textContent = subject;

                        if (selectedSubject && subject === selectedSubject) {
                            option.selected = true;
                        }
                        subjectDropdown.appendChild(option);
                    });
                }
            }
            // ✅ On course change
            courseDropdown.addEventListener('change', function() {
                loadSubjects(this.value);
            });
            // ✅ Load old values (for validation errors)
            if (oldCourse) {
                loadSubjects(oldCourse, oldSubject);
            }
        });
    </script>
    <script>
        // uppercase on blur
        ['applicant_name', 'father_name', 'mother_name'].forEach(function(id) {
            var el = document.getElementById(id);
            if (el) el.addEventListener('input', function() {
                this.value = this.value.toUpperCase();
            });
        });
    </script>
@endpush