@extends('layouts.master')

@section('title', 'NEEDY Form')

@section('style')
    <style>
    </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">

                            <div class="progress mb-4">
                                <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                                    style="width: 20%"></div>
                            </div>

                            <form id="needyForm" method="POST" action="{{ url('/application_edit') }}"
                                enctype="multipart/form-data">
                                @csrf

                                {{-- hidden --}}
                                <input type="hidden" name="application_id"
                                    value="{{ $application->application_id ?? '' }}">
                                <input type="hidden" name="scholarship_id" value="{{ $scholarship->scholarship_id }}">
                                {{-- <input type="hidden" name="student_id" value="{{ $students->student_id }}">
                                <input type="hidden" name="scholarship_type" value="needy"> --}}

                                <!-- STEP 1 -->
                                <div class="step" id="step-1">
                                    <h4 class="mb-3">Student Information</h4>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Name – Surname</label>
                                            <input type="text" name="fullname" class="form-control"
                                                value="{{ $students->student_fullname }}" readonly>
                                        </div>
                                        <div class="col-md-6">
                                            <label>Student ID</label>
                                            <input type="text" name="student_id" class="form-control"
                                                value="{{ $students->student_code }}" readonly>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label>Program</label><br>
                                        @php
                                            $programs = [
                                                'ISI',
                                                'ChE',
                                                'CE',
                                                'IE',
                                                'ME',
                                                'CPE',
                                                'DE',
                                                'EE',
                                                'BA',
                                                'EM',
                                                'MT',
                                            ];
                                        @endphp
                                        @foreach ($programs as $p)
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" name="program[]"
                                                    value="{{ $p }}">
                                                <label class="form-check-label">{{ $p }}</label>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-3">
                                            <label>Year</label>
                                            <input type="number" name="year" class="form-control">
                                        </div>
                                        <div class="col-md-5">
                                            <label>Advisor’s Name</label>
                                            <input type="text" name="advisor_name" class="form-control">
                                        </div>
                                        <div class="col-md-4">
                                            <label>Cumulative GPA</label>
                                            <input type="text" name="gpa" class="form-control">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label>Mobile</label>
                                            <input type="text" name="mobile" class="form-control">
                                        </div>
                                        <div class="col-md-4">
                                            <label>Email</label>
                                            <input type="email" name="email" class="form-control"
                                                value="{{ $students->student_email }}" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label>LINE / Alternative Contact</label>
                                            <input type="text" name="line_contact" class="form-control">
                                        </div>
                                    </div>

                                    <hr>

                                    <h4 class="mb-3">Residence & Basic Living</h4>

                                    <label>Residence while studying</label>
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="residence_type"
                                                value="family">
                                            <label class="form-check-label">With family</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="residence_type"
                                                value="dorm">
                                            <label class="form-check-label">Dorm / Apartment</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="residence_type"
                                                value="relative">
                                            <label class="form-check-label">
                                                With relatives / friends
                                                <input type="text" name="relative_relation" class="form-control mt-1"
                                                    placeholder="Relationship">
                                            </label>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label>Monthly housing cost (baht)</label>
                                            <input type="number" name="housing_cost" class="form-control">
                                        </div>
                                        <div class="col-md-4">
                                            <label>Monthly utilities (baht)</label>
                                            <input type="number" name="utilities_cost" class="form-control">
                                        </div>
                                    </div>

                                    <hr>

                                    <h4 class="mb-3">Transport & Communication</h4>

                                    <label>Main transport modes</label>
                                    <div class="mb-3">
                                        @foreach (['Walk', 'Motorcycle', 'Car', 'Public Transport'] as $t)
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" name="transport[]"
                                                    value="{{ $t }}">
                                                <label class="form-check-label">{{ $t }}</label>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Monthly transport cost (baht)</label>
                                            <input type="number" name="transport_cost" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Monthly mobile / Internet cost (baht)</label>
                                            <input type="number" name="internet_cost" class="form-control">
                                        </div>
                                    </div>

                                    <hr>

                                    <h4 class="mb-3">Student Income & Support</h4>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Monthly support from parents / guardians (baht)</label>
                                            <input type="number" name="parent_support" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Monthly income from part-time (baht)</label>
                                            <input type="number" name="parttime_income" class="form-control">
                                        </div>
                                    </div>

                                    <div class="row mb-4">
                                        <div class="col-md-8">
                                            <label>Part-time job (role)</label>
                                            <input type="text" name="parttime_role" class="form-control">
                                        </div>
                                        <div class="col-md-4">
                                            <label>Hours per week</label>
                                            <input type="number" name="parttime_hours" class="form-control">
                                        </div>
                                    </div>
                                </div>


                                <!-- STEP 2 -->
                                <div class="step d-none" id="step-2">
                                    <h4 class="mb-3">Family Background</h4>

                                    <h5>Parents / Guardians</h5>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Father’s name – surname</label>
                                            <input type="text" name="father_name" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Status</label><br>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" name="father_status" value="alive"
                                                    class="form-check-input">
                                                <label class="form-check-label">Alive</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" name="father_status" value="deceased"
                                                    class="form-check-input">
                                                <label class="form-check-label">Deceased</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Occupation</label>
                                            <input type="text" name="father_occupation" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Workplace</label>
                                            <input type="text" name="father_workplace" class="form-control">
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label>Monthly income (approx.)</label>
                                        <input type="number" name="father_income" class="form-control">
                                    </div>

                                    <hr>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Mother’s name – surname</label>
                                            <input type="text" name="mother_name" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Status</label><br>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" name="mother_status" value="alive"
                                                    class="form-check-input">
                                                <label class="form-check-label">Alive</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" name="mother_status" value="deceased"
                                                    class="form-check-input">
                                                <label class="form-check-label">Deceased</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Occupation</label>
                                            <input type="text" name="mother_occupation" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Workplace</label>
                                            <input type="text" name="mother_workplace" class="form-control">
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label>Monthly income (approx.)</label>
                                        <input type="number" name="mother_income" class="form-control">
                                    </div>

                                    <hr>

                                    <h5>Guardian (if not father/mother)</h5>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Guardian’s name – surname</label>
                                            <input type="text" name="guardian_name" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Relationship</label>
                                            <input type="text" name="guardian_relationship" class="form-control">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Occupation</label>
                                            <input type="text" name="guardian_occupation" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Workplace</label>
                                            <input type="text" name="guardian_workplace" class="form-control">
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label>Monthly income (approx.)</label>
                                        <input type="number" name="guardian_income" class="form-control">
                                    </div>

                                    <hr>

                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <label>Dependents in household</label>
                                            <input type="number" name="dependents_total" class="form-control">
                                        </div>
                                        <div class="col-md-4">
                                            <label>Children (Male)</label>
                                            <input type="number" name="children_male" class="form-control">
                                        </div>
                                        <div class="col-md-4">
                                            <label>Children (Female)</label>
                                            <input type="number" name="children_female" class="form-control">
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label>The student is the ... child in the family</label>
                                        <input type="text" name="student_order" class="form-control">
                                    </div>
                                </div>

                                <!-- STEP 3 -->
                                <div class="step d-none" id="step-3">
                                    <h4>Health & Special Circumstances</h4>

                                    <div class="mb-3">
                                        <label>Health issues affecting study / living costs</label><br>
                                        <div class="form-check form-check-inline">
                                            <input type="radio" name="health_issue" value="none"
                                                class="form-check-input">
                                            <label class="form-check-label">None</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="radio" name="health_issue" value="yes"
                                                class="form-check-input">
                                            <label class="form-check-label">Yes</label>
                                        </div>
                                        <textarea name="health_detail" class="form-control mt-2" placeholder="Specify"></textarea>
                                    </div>

                                    <div class="mb-3">
                                        <label>Other family problems impacting income / expenses</label>
                                        <textarea name="family_problem" class="form-control" rows="3"></textarea>
                                    </div>

                                    <hr>

                                    <h4>Statements</h4>

                                    <div class="mb-3">
                                        <label>Student’s Statement (½ – 1 page)</label>
                                        <textarea name="student_statement" class="form-control" rows="6"></textarea>
                                    </div>

                                    <div class="mb-3">
                                        <label>Guardian’s handwritten letter</label>
                                        <input type="file" name="guardian_letter" class="form-control">
                                    </div>
                                </div>

                                <!-- STEP 4 -->
                                <div class="step d-none" id="step-4">
                                    <h4>Household Monthly Incomes & Expenses</h4>

                                    <h5>Incomes (baht / month)</h5>

                                    <input type="number" name="income_father" class="form-control mb-2"
                                        placeholder="Father income">
                                    <input type="number" name="income_mother" class="form-control mb-2"
                                        placeholder="Mother income">
                                    <input type="number" name="income_guardian" class="form-control mb-2"
                                        placeholder="Guardian income">
                                    <input type="number" name="income_other" class="form-control mb-2"
                                        placeholder="Other incomes">

                                    <h5 class="mt-4">Expenses (baht / month)</h5>

                                    @php
                                        $expenses = [
                                            'Housing',
                                            'Utilities',
                                            'Food & necessities',
                                            'Transport',
                                            'Education',
                                            'Medical',
                                            'Debt instalments',
                                            'Other essential costs',
                                        ];
                                    @endphp

                                    @foreach ($expenses as $e)
                                        <input type="number" name="expense[]" class="form-control mb-2"
                                            placeholder="{{ $e }}">
                                    @endforeach
                                </div>

                                <!-- STEP 5 -->
                                <div class="step d-none" id="step-5">
                                    <h4>Declarations & PDPA Consent</h4>

                                    <div class="form-check mb-3">
                                        <input type="checkbox" name="pdpa_consent" class="form-check-input" required>
                                        <label class="form-check-label">
                                            I certify that all information is true and consent to SIIT using my personal
                                            data
                                        </label>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Student Signature</label>
                                            <input type="text" name="student_signature" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Guardian Signature</label>
                                            <input type="text" name="guardian_signature" class="form-control">
                                        </div>
                                    </div>

                                    <hr>
                                    <h4>Advisor’s Comments (For Office Use)</h4>

                                    <textarea name="advisor_comment" class="form-control mb-3" rows="4"></textarea>

                                    <div class="mb-3">
                                        <label>Recommendation</label><br>
                                        <input type="radio" name="advisor_recommend" value="yes"> Recommend
                                        <input type="radio" name="advisor_recommend" value="no"> Do Not Recommend
                                    </div>

                                    <hr>

                                    <h4>Committee Pre-Interview Sheet</h4>

                                    <textarea name="committee_reason" class="form-control mb-3" rows="3" placeholder="Reason for rating"></textarea>

                                    <div class="mb-3">
                                        <label>Final Recommendation</label><br>
                                        <input type="radio" name="committee_result" value="none"> Not recommend
                                        <input type="radio" name="committee_result" value="quarter"> Quarter
                                        scholarship
                                        <input type="radio" name="committee_result" value="half"> Half scholarship
                                    </div>
                                </div>


                                <!-- Navigation -->
                                <div class="d-flex justify-content-between mt-4">
                                    <button type="button" class="btn btn-secondary" id="prevBtn"
                                        onclick="changeStep(-1)">
                                        Previous
                                    </button>

                                    <button type="button" class="btn btn-primary" id="nextBtn"
                                        onclick="changeStep(1)">
                                        Next
                                    </button>

                                    <button type="submit" class="btn btn-success d-none" id="submitBtn">
                                        Submit Application
                                    </button>
                                </div>
                            </form>

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

@section('script')
    {{-- JS สำหรับ Next / Previous --}}
    <script>
        let currentStep = 1;
        const totalSteps = 5;

        function showStep(step) {
            // ซ่อนทุก step
            document.querySelectorAll('.step').forEach(el => {
                el.classList.add('d-none');
            });

            // แสดง step ปัจจุบัน
            document.getElementById('step-' + step).classList.remove('d-none');

            // ปุ่ม Previous
            document.getElementById('prevBtn').style.display =
                step === 1 ? 'none' : 'inline-block';

            // ปุ่ม Next / Submit
            if (step === totalSteps) {
                document.getElementById('nextBtn').classList.add('d-none');
                document.getElementById('submitBtn').classList.remove('d-none');
            } else {
                document.getElementById('nextBtn').classList.remove('d-none');
                document.getElementById('submitBtn').classList.add('d-none');
            }

            updateProgress();

            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // ✅ ข้อ 4 : validate ก่อน Next
        function validateStep(step) {
            let valid = true;

            document
                .querySelectorAll(`#step-${step} input[required], 
                               #step-${step} textarea[required], 
                               #step-${step} select[required]`)
                .forEach(el => {
                    if (!el.value) {
                        el.classList.add('is-invalid');
                        valid = false;
                    } else {
                        el.classList.remove('is-invalid');
                    }
                });

            return valid;
        }

        function changeStep(n) {
            // ถ้ากด Next ให้ validate ก่อน
            if (n === 1 && !validateStep(currentStep)) {
                alert('กรุณากรอกข้อมูลให้ครบก่อนดำเนินการต่อ');
                return;
            }

            currentStep += n;

            if (currentStep < 1) currentStep = 1;
            if (currentStep > totalSteps) currentStep = totalSteps;

            showStep(currentStep);
        }

        function updateProgress() {
            let percent = (currentStep / totalSteps) * 100;
            document.getElementById('progressBar').style.width = percent + '%';
        }

        // initial
        showStep(currentStep);
    </script>
@endsection

@include('layouts.footer')

@endsection