@extends('layouts.master')

@section('title', 'Scholarship Application Form')

@section('style')
    <style>
        .step {
            display: none;
        }

        .step.active {
            display: block;
        }
    </style>
@endsection

@section('content')

    @include('layouts.header')
    @include('layouts.header-sub')

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">

            <div class="col-lg-12">
                <div class="blog single">
                    <div class="card">
                        <div class="card-body">

                            <h3 class="mb-5">แบบฟอร์มสมัครทุนการศึกษา</h3>

                            <form id="applicationForm" method="POST" action="{{ url('/scholarship_by_studentedit') }}">
                                @csrf

                                <input type="hidden" name="id" value="{{ $application->id ?? '' }}">
                                <input type="hidden" name="student_id" value="{{ $students->student_id ?? '' }}">
                                <input type="hidden" name="scholarship_id" value="{{ $scholarship_id }}">


                                <div class="">
                                    <h4>1) ข้อมูลเบื้องต้น</h4>

                                    <div class="row">

                                        <div class="col-md-6 mb-3">
                                            <label>Email *</label>
                                            <input type="email" name="student_email" class="form-control" required
                                                value="{{ $application->student_email ?? ($students->student_email ?? '') }}">
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label>Student ID *</label>
                                            <input type="text" class="form-control"
                                                value="{{ $students->student_code ?? '' }}" readonly>
                                            <input type="hidden" name="student_id"
                                                value="{{ $students->student_id ?? '' }}">
                                        </div>


                                        <div class="col-md-6 mb-3">
                                            <label>Firstname *</label>
                                            <input type="text" name="student_firstname" class="form-control" required
                                                value="{{ $application->student_firstname ?? ($students->student_firstname ?? '') }}">
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label>Lastname *</label>
                                            <input type="text" name="student_lastname" class="form-control" required
                                                value="{{ $application->student_lastname ?? ($students->student_lastname ?? '') }}">
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label>Program *</label>
                                            <select name="program_id" class="form-select" required>
                                                <option value="">-- เลือก --</option>
                                                @foreach ($programs as $p)
                                                    <option value="{{ $p->program_id }}"
                                                        {{ ($application->program_id ?? ($students->student_program_id ?? '')) == $p->program_id ? 'selected' : '' }}>
                                                        {{ $p->program_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label>Advisor Name *</label>
                                            <select name="advisor_id" class="form-select" required>
                                                <option value="">-- เลือก --</option>
                                                @foreach ($advisors as $advis)
                                                    <option value="{{ $advis->advisor_id }}"
                                                        {{ ($application->advisor_id ?? ($students->student_advisor_id ?? '')) == $advis->advisor_id ? 'selected' : '' }}>
                                                        {{ $advis->title_en_name }} {{ $advis->advisor_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>



                                        <div class="col-md-6 mb-3">
                                            <label>
                                                CGPA of Semester 2/{{ $last_year->academic_year ?? '20XX' }} or
                                                Summer/{{ $last_year->academic_year ?? '20XX' }} *
                                            </label>
                                            <input type="text" name="student_cgpa" class="form-control"
                                                value="{{ $students->student_cgpa ?? '-' }}" readonly>
                                        </div>

                                        <div class="col-md-6 mb-3">

                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    name="consent" id="consent" required>
                                                <label class="form-check-label" for="consent"> I agree to the
                                                    processing of my personal data as stated.
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    name="pdpa" id="pdpa" required>
                                                <label class="form-check-label" for="pdpa"> PDPA
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <br>

                                <div class="">
                                    <h4 class="mb-4">2) Application Sections</h4>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label>Consent & Terms *</label>
                                            <textarea name="section_consent" class="form-control" required>{{ $application->section_consent ?? '' }}</textarea>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label>Personal Details *</label>
                                            <textarea name="section_personal" class="form-control" required>{{ $application->section_personal ?? '' }}</textarea>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label>Education *</label>
                                            <textarea name="section_education" class="form-control" required>{{ $application->section_education ?? '' }}</textarea>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label>Activities and Achievements</label>
                                            <textarea name="section_activities" class="form-control">{{ $application->section_activities ?? '' }}</textarea>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label>Financial & Family</label>
                                            <textarea name="section_financial" class="form-control">{{ $application->section_financial ?? '' }}</textarea>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label>Document & Essay</label>
                                            <textarea name="section_document" class="form-control">{{ $application->section_document ?? '' }}</textarea>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    name="final_confirm" id="final_confirm" required>
                                                <label class="form-check-label" for="final_confirm">
                                                    ยืนยันว่าข้อมูลถูกต้องครบถ้วนและยอมรับเงื่อนไขการสมัครทุน*
                                                </label>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-center gap-2 mt-4">
                                            <button type="submit" id="submitButton" class="btn btn-primary rounded-pill"
                                                disabled>
                                                Confirm & Submit
                                            </button>
                                            <button type="submit" name="mode" value="draft"
                                                class="btn btn-secondary rounded-pill">
                                                Save Draft
                                            </button>

                                        </div>

                                    </div>

                                </div>

                            </form>

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

    @include('layouts.footer')

@endsection

@section('script')
    <script>
        function nextStep(step) {
            document.querySelector('.step.active').classList.remove('active');
            document.getElementById('step' + step).classList.add('active');
        }

        function prevStep(step) {
            document.querySelector('.step.active').classList.remove('active');
            document.getElementById('step' + step).classList.add('active');
        }

        // enable submit button
        document.addEventListener('change', () => {
            const c1 = document.getElementById('consent').checked;
            const c2 = document.getElementById('pdpa').checked;
            document.getElementById('submitButton').disabled = !(c1 && c2);
        });
    </script>
@endsection