@extends('layouts.master')

@section('title', 'OAP 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">

                            <form id="oapForm" method="POST" action="{{ url('/application_edit') }}">
                                @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="oap"> --}}

                                <div class="step" id="step-1">
                                    <h4 class="mb-4">Application Form</h4>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label>Name – Surname</label>
                                            <input type="text" class="form-control" name="fullname" required>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label>Student ID</label>
                                            <input type="text" class="form-control" name="student_id" required>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label>Year</label>
                                            <input type="number" class="form-control" name="year" required>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label>Program</label><br>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="ISI">
                                            ISI</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="ChE">
                                            ChE</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="CE">
                                            CE</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="IE">
                                            IE</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="ME">
                                            ME</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="CPE">
                                            CPE</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="DE">
                                            DE</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="EE">
                                            EE</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="BA">
                                            BA</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="EM">
                                            EM</label>
                                        <label class="me-2"><input type="checkbox" name="program[]" value="MT">
                                            MT</label>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label>Mobile</label>
                                            <input type="text" class="form-control" name="mobile" required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label>E-mail</label>
                                            <input type="email" class="form-control" name="email" required>
                                        </div>
                                    </div>

                                    <hr>

                                    <h5>Supporting Documents</h5>
                                    <label><input type="checkbox" name="docs[]" value="certificates"> Certificates /
                                        Photos</label><br>
                                    <label><input type="checkbox" name="docs[]" value="video"> Video Clip Presentation
                                        (.mp4)</label>

                                    <hr>

                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" required>
                                        <label class="form-check-label">
                                            I certify that all information provided is true and allow SIIT to use my data
                                            for scholarship consideration.
                                        </label>
                                    </div>

                                    <div class="mt-3">
                                        <label>Applicant Signature</label>
                                        <input type="text" class="form-control">
                                        <label class="mt-2">Date</label>
                                        <input type="date" class="form-control">
                                    </div>
                                </div>

                                <div class="step d-none" id="step-2">
                                    <h4 class="mb-4">PART I : Summary Performance</h4>

                                    <table class="table table-bordered">
                                        <thead>
                                            <tr class="text-center">
                                                <th>AP Number</th>
                                                <th>Date</th>
                                                <th>Activity Detail</th>
                                                <th colspan="4">Duty</th>
                                                <th>Documents</th>
                                                <th>Remarks</th>
                                            </tr>
                                            <tr class="text-center">
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th>O1</th>
                                                <th>O2</th>
                                                <th>S</th>
                                                <th>P</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><input type="text" class="form-control"></td>
                                                <td><input type="date" class="form-control"></td>
                                                <td><input type="text" class="form-control"></td>
                                                <td class="text-center"><input type="radio" name="duty1"></td>
                                                <td class="text-center"><input type="radio" name="duty1"></td>
                                                <td class="text-center"><input type="radio" name="duty1"></td>
                                                <td class="text-center"><input type="radio" name="duty1"></td>
                                                <td class="text-center"><input type="checkbox"></td>
                                                <td><input type="text" class="form-control"></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <h5 class="mt-4">PART II : Present Activity (if any)</h5>
                                    <textarea class="form-control" rows="4"></textarea>
                                </div>

                                <div class="step d-none" id="step-3">
                                    <h4>Activity Detail</h4>

                                    <div class="mb-3">
                                        <label>Name of Activity</label>
                                        <input type="text" class="form-control">
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label>Date of Activity</label>
                                            <input type="date" class="form-control">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label>Location / Venue</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label>Organized by</label>
                                        <input type="text" class="form-control">
                                    </div>

                                    <div class="mb-3">
                                        <label>Applicant’s Duty</label><br>
                                        <label><input type="radio" name="duty"> Head Organizer</label>
                                        <label><input type="radio" name="duty"> Assistant Head Organizer</label>
                                        <label><input type="radio" name="duty"> Staff</label>
                                        <label><input type="radio" name="duty"> Competitor</label>
                                    </div>

                                    <div class="mb-3">
                                        <label>% Contribution</label>
                                        <input type="number" class="form-control">
                                    </div>

                                    <div class="mb-3">
                                        <label>Detail of Work</label>
                                        <textarea class="form-control" rows="4"></textarea>
                                    </div>

                                    <h5>Award Achieving</h5>
                                    <label><input type="checkbox"> First Prize</label><br>
                                    <label><input type="checkbox"> 1st Runner-Up</label><br>
                                    <label><input type="checkbox"> 2nd Runner-Up</label><br>
                                    <label><input type="checkbox"> Consolation Prize</label>
                                </div>

                                <hr>

                                <!-- Progress bar (ถ้าไม่ใช้ ลบได้) -->
                                <div class="progress mb-3">
                                    <div id="progressBar" class="progress-bar" style="width: 33%"></div>
                                </div>

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

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

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


                            </form>

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

@section('script')
    <script>
        let currentStep = 1;
        const totalSteps = 3;

        function showStep(step) {
            document.querySelectorAll('.step').forEach(el => {
                el.classList.add('d-none');
            });

            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'
            });
        }

        function changeStep(n) {
            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 + '%';
        }

        showStep(currentStep);
    </script>
@endsection


@include('layouts.footer')

@endsection