@extends('layouts.student_layout')

@section('content')
    <div class="row">
        <div class="col-12">
            <!-- SmartWizard html -->
            <div id="smartwizard">
                <ul class="nav">
                    {{-- <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button" href="#step-1">
                        <div class="num">1</div>
                        Step
                    </a>
                </li> --}}
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button" href="#step-1">
                            <span class="num">1</span>
                            Step
                        </a>
                    </li>
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button" href="#step-2">
                            <span class="num">2</span>
                            Step
                        </a>
                    </li>
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button " href="#step-3">
                            <span class="num">3</span>
                            Step
                        </a>
                    </li>
                    <li class="nav-item mb-0">
                        <a class="nav-link apply-now-stepper-button " href="#step-4">
                            <span class="num">4</span>
                            Step
                        </a>
                    </li>
                </ul>

                <div class="tab-content px-3 py-4 bg-white">

                    <!-- Step 1: Personal Information -->
                    {{-- <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                    <div class="mb-3">
                        <div class="step-header text-center">
                            <h2 class="step-title">Personal Information</h2>
                            <p class="step-subtitle">Please provide your basic personal details</p>
                        </div>

                        <div class="form-grid">
                            <div class="form-group">
                                <label for="first_name" class="form-label">First Name <span class="text-danger">*</span></label>
                                <p class="view_detail">John</p>
                            </div>

                            <div class="form-group">
                                <label for="last_name" class="form-label">Last Name <span class="text-danger">*</span></label>
                                <p class="view_detail">Smith</p>
                            </div>

                            <div class="form-group">
                                <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                                <p class="view_detail">john.smith@email.com</p>
                            </div>

                            <div class="form-group">
                                <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                                <p class="view_detail">+1 (555) 123-4567</p>
                            </div>

                            <div class="form-group">
                                <label for="dob" class="form-label">Date of Birth <span class="text-danger">*</span></label>
                                <p class="view_detail">1985-06-15</p>
                                <div class="form-help" id="ageDisplay">Age: 38 years</div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Gender <span class="text-danger">*</span></label>
                                <p class="view_detail">Male</p>
                            </div>
                        </div>

                        <div class="address-section">
                            <h3 class="section-title">Address Information</h3>

                            <div class="form-grid">
                                <div class="form-group full-width">
                                    <label for="address" class="form-label">Complete Address <span class="text-danger">*</span></label>
                                    <p class="view_detail">123 Main Street, Apartment 4B, Downtown District</p>
                                </div>

                                <div class="form-group">
                                    <label for="state" class="form-label">State <span class="text-danger">*</span></label>
                                    <p class="view_detail">California</p>
                                </div>

                                <div class="form-group">
                                    <label for="district" class="form-label">District <span class="text-danger">*</span></label>
                                    <p class="view_detail">Los Angeles</p>
                                </div>

                                <div class="form-group">
                                    <label for="city" class="form-label">City <span class="text-danger">*</span></label>
                                    <p class="view_detail">Los Angeles</p>
                                </div>

                                <div class="form-group">
                                    <label for="pincode" class="form-label">ZIP Code <span class="text-danger">*</span></label>
                                    <p class="view_detail">90210</p>
                                </div>
                            </div>
                        </div>

                        <div class="emergency-section">
                            <h3 class="section-title">Emergency Contact</h3>

                            <div class="form-grid">
                                <div class="form-group">
                                    <label for="emergency_name" class="form-label">Contact Name <span class="text-danger">*</span></label>
                                    <p class="view_detail">Jane Smith</p>
                                </div>

                                <div class="form-group">
                                    <label for="emergency_phone" class="form-label">Contact Phone <span class="text-danger">*</span></label>
                                    <p class="view_detail">+1 (555) 987-6543</p>
                                </div>

                                <div class="form-group">
                                    <label for="relationship" class="form-label">Relationship <span class="text-danger">*</span></label>
                                    <p class="view_detail">Spouse</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt-4">
                        <button type="button" id="btn_save_step_one" class="btn btn-primary btn-next">Save & Next</button>
                    </div>
                </div> --}}

                    <!-- Step 2: Educational Background -->
                    <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                        <div class="mb-3">
                            <div class="step-header text-center">
                                <h2 class="step-title">Educational Details</h2>
                                {{-- <p class="step-subtitle">Add your educational qualifications (you can add multiple)</p> --}}
                            </div>

                            <!-- Show the list here -->
                            <div id="educationDetailsContainer">
                                <div class="row">
                                    @if ($educationDetails->count() > 0)
                                        @foreach ($educationDetails as $details)
                                            <div class="col-12 mb-3">
                                                <div class="card shadow-sm border-0">
                                                    <div class="card-header bg-primary py-3">
                                                        <h5 class="card-title mb-0 text-white gap-1">
                                                            <i class="fas fa-graduation-cap text-white"></i>
                                                            {{ $details->qualification->name ?? 'Not Specified' }}
                                                        </h5>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="row mb-2">
                                                                    <div class="col-sm-4"><strong>Board/University:</strong>
                                                                    </div>
                                                                    <div class="col-sm-8">
                                                                        {{ $details->board ?? 'Not Available' }}</div>
                                                                </div>
                                                                <div class="row mb-2">
                                                                    <div class="col-sm-4"><strong>Institution:</strong>
                                                                    </div>
                                                                    <div class="col-sm-8">
                                                                        {{ $details->institution ?? 'Not Available' }}</div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="row mb-2">
                                                                    <div class="col-sm-4"><strong>Year of Passing:</strong>
                                                                    </div>
                                                                    <div class="col-sm-8">
                                                                        <div class="col-sm-8">
                                                                            {{ $details->year ?? 'Not Available' }}</div>
                                                                    </div>
                                                                </div>
                                                                <div class="row mb-2">
                                                                    <div class="col-sm-4"><strong>Grade:</strong></div>
                                                                    <div class="col-sm-8">
                                                                        {{ $details->grade ?? 'Not Available' }}</div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="row">
                                                                    <div class="col-sm-4"><strong>Document:</strong></div>

                                                                    <div class="col-sm-8">
                                                                        @if ($details->file_path_url)
                                                                            <a href="{{ $details->file_path_url }}"
                                                                                class="btn btn-outline btn-sm ms-2" target="_blank">
                                                                                <i class="fas fa-file-pdf me-1"></i>
                                                                                View Certificate
                                                                            </a>
                                                                        @else
                                                                            <span class="text-muted fst-italic">No document
                                                                                uploaded</span>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="text-center mt-4">
                            {{-- <button type="button" id="btn_back_step_one" class="btn btn-outline btn_go_back">Go Back</button> --}}
                            <a class="btn btn-primary btn-next" href="{{ route('student.my-application.apply-now') }}">Go to Edit</a>
                            <button type="button" id="btn_save_step_two" class="btn btn-primary btn-next"><i
                                    class="fa fa-send"></i>Next</button>
                        </div>
                    </div>

                    <!-- Step 3: Course Selection -->
                    <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                        <div class="mb-3">
                            <div class="step-header text-center">
                                <h2 class="step-title">Course Selected</h2>
                            </div>
                            @if ($courseSelection->count() > 0)
                                {{-- @foreach ($courseSelection as $courseDetails) --}}

                                {{-- {{ dd($courseDetails->course) }} --}}
                                <div class="form-group">
                                    <div class="program-options">
                                        <label class="program-option">
                                            <input type="radio" class="training_program_id" name="training_program"
                                                value="1" checked>
                                            <div class="program-card-option">
                                                <div class="program-header">
                                                    <h3 class="program-name">{{ $courseSelection->course->title }}</h3>
                                                    <div class="program-meta">
                                                        <span class="program-duration">Total Hours :
                                                            {{ $courseSelection->course->total_hours }}</span>
                                                        <span class="program-type">Type:
                                                            {{ $courseSelection->course->course_type_desc }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                {{-- @endforeach --}}
                            @endif


                        </div>
                        <div class="text-center mt-4">
                            <a class="btn btn-primary btn-next" href="{{ route('student.my-application.apply-now') }}">Go to Edit</a>
                            <button type="button" id="btn_back_step_two" class="btn btn-outline btn_go_back">Go
                                Back</button>
                            <button type="button" id="btn_save_step_three" class="btn btn-primary btn-next"><i
                                    class="fa fa-send"></i>Next</button>
                        </div>
                    </div>

                    <!-- Step 4: Training Center Selection -->
                    <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                        <div class="mb-3">
                            <div class="step-header text-center">
                                <h2 class="step-title">Training Center Selection</h2>
                                <p class="step-subtitle">Select your preferred training centers</p>
                            </div>

                            <div class="training-centers" id="trainingCentresContainer">
                                <label class="center-option">
                                    <input type="radio" name="training_centre" value="1" checked />
                                    <div class="center-card">
                                        <div class="center-header">
                                            <h3 class="center-name">Oldage Care Training Center</h3>
                                        </div>
                                        <div class="center-address">123 Main Street, Los Angeles, CA 90210</div>
                                        <div class="center-features">
                                            <span class="feature bg-info text-white">Modern Equipment</span>
                                            <span class="feature bg-info text-white">Parking Available</span>
                                            <span class="feature bg-info text-white">Public Transit</span>
                                            <span class="feature bg-info text-white">Cafeteria</span>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="text-center mt-4">
                            <a class="btn btn-primary btn-next" href="{{ route('student.my-application.apply-now') }}">Go to Edit</a>
                            <button type="button" id="btn_back_step_three"
                                class="btn btn-outline btn_go_back btn_go_back">Go Back</button>
                            <button type="button" id="btn_save_step_four" class="btn btn-primary btn-next"><i
                                    class="fa fa-send"></i>Next</button>
                        </div>
                    </div>

                    <!-- Step 5: Document Upload -->
                    <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                        <form action="" id="student_registration_final_submission_form">
                            @csrf
                            <div class="mb-3">

                                {{-- {{ dd($student) }} --}}

                                <div class="step-header text-center">
                                    <h2 class="step-title">Document Upload</h2>
                                    <p class="step-subtitle">Upload required documents (optional for now)</p>
                                </div>

                                @if ($document->count() > 0)
                                    {{-- {{ dd($document) }} --}}

                                    <div class="upload-grid">
                                        <div class="upload-group">
                                            <label for="photo" class="upload-label">Passport Size Photograph <span
                                                    class="text-danger">*</span></label>
                                            <div class="upload-preview mt-2">
                                                <a href="{{ $document->photo_full_path }}" class="btn btn-outline btn-sm"
                                                    target="_blank"><i class="fa fa-eye"></i> View File</a>
                                            </div>
                                        </div>

                                        <div class="upload-group">
                                            <label for="address_proof" class="upload-label">Address Proof <span
                                                    class="text-danger">*</span></label>
                                            <div class="upload-preview mt-2">
                                                <a href="{{ $document->address_proof_full_path }}"
                                                    class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i>
                                                    View File</a>
                                            </div>
                                        </div>

                                        <div class="upload-group">
                                            <label for="experience_certificate" class="upload-label">Experience
                                                Certificate</label>
                                            <div class="upload-preview mt-2">
                                                <a href="{{ $document->experience_certificate_full_path }}"
                                                    class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i>
                                                    View File</a>
                                            </div>
                                        </div>

                                        <div class="upload-group">
                                            <label for="medical_certificate" class="upload-label">Medical Certificate</label>
                                            <div class="upload-preview mt-2">
                                                <a href="{{ $document->medical_certificate_full_path }}"
                                                    class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i>
                                                    View File</a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="text-center mt-4">
                                <a class="btn btn-primary btn-next" href="{{ route('student.my-application.apply-now') }}">Go to Edit</a>
                                <button type="button" id="btn_back_step_four" class="btn btn-outline btn_go_back">Go
                                    Back</button>
                                <button type="button" id="btn_save_final_submit" class="btn btn-primary"><i
                                        class="fa fa-send"></i>Submit Application</button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Include optional progressbar HTML -->
                <div class="progress">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('pages-scripts')
    <script>
        $(document).ready(function() {
            $(function() {
                // SmartWizard initialize
                $('#smartwizard').smartWizard({
                    theme: "arrows",
                    autoAdjustHeight: false, // Automatically adjust content height
                    toolbar: {
                        position: 'bottom', // none|top|bottom|both
                        showNextButton: false, // show/hide a Next button
                        showPreviousButton: false, // show/hide a Previous button
                    },
                });
            });
        })

        /** 
         * On Click Button Save Step One
         */
        $(document).on('click', '.btn_go_back', function() {
            // Navigate next
            $('#smartwizard').smartWizard("prev");
        })

        /** 
         * On Click Button Save Step One
         */
        $(document).on('click', '.btn-next', function() {
            // Navigate next
            $('#smartwizard').smartWizard("next");
        })

        $(document).on('click', '#btn_save_final_submit', function () {
        // Optionally trigger form submit if inside a form
            let form = $(this).closest("form");
            if (form.length) {
                form.submit(); // this will trigger jQuery Validate
            } else {
                $('#smartwizard').smartWizard("next");
            }
        });

     $('#student_registration_final_submission_form').validate({
            submitHandler: function(form, e) {
                e.preventDefault(); // prevent double submit

                Swal.fire({
                    title: "Are you sure?",
                    text: "Once submitted, you will not be able to change your details.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, Submit",
                    cancelButtonText: "Cancel"
                }).then((result) => {

                    if (result.isConfirmed) {

                        let formData = new FormData(form);

                        $.ajax({
                            url: "{{ route('student.education-details.update-student-application-id', ['id' => $student_application_id]) }}",
                            method: "POST",
                            data: formData,
                            processData: false,
                            contentType: false,

                            success: function(response) {
                                if (response.success === true) {

                                    Swal.fire({
                                        title: "Success!",
                                        text: response.message,
                                        icon: "success",
                                        confirmButtonText: "OK"
                                    }).then(() => {
                                        window.location.href = "{{ route('student.my-application') }}";
                                    });

                                } else {
                                    Swal.fire({
                                        title: "Error!",
                                        text: response.message || "Something went wrong. Please try again.",
                                        icon: "error"
                                    });
                                }
                            },

                            error: function(xhr) {
                                if (xhr.status === 422) {
                                    let errors = xhr.responseJSON.errors;
                                    let errorMessages = Object.values(errors).flat().join("<br>");

                                    Swal.fire({
                                        title: "Validation Error",
                                        html: errorMessages,
                                        icon: "error"
                                    });

                                } else {
                                    Swal.fire({
                                        title: "Error!",
                                        text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                                        icon: "error"
                                    });
                                }
                            }
                        });
                    }
                });
            }
        });


        

    </script>
@endsection