@extends('layouts.website_layout')

@section('content')

<!-- Main Content -->
<main id="main-content">
    <!-- Page Header -->
    <div class="position-relative page-header text-white overflow-hidden">
        <div class="container position-relative">
            <div>
                @if($parentPageTitle)
                <span class="badge bg-white text-primary mb-2">{{ $parentPageTitle }}</span>
                @endif
                <h3 class="display-6 fw-bold mb-1">
                    {{ $pageTitle }}
                </h3>
            </div>
        </div>
    </div>


    <div class="container">
        <!-- Application Header -->
        <div class="application-header">
            <div class="w-100 text-center mt-3">
                <h1 class="application-title">Apply for Caregiver Training</h1>
                <p class="application-subtitle">
                    Join our nationally recognized caregiver training programs and make a difference in elderly care.
                    Complete your application with all required details and documents.
                </p>
            </div>
        </div>


        <div class="bg-white shadow-sm rounded mb-5">
            <!-- SmartWizard html -->
            <div id="smartwizard">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button" href="#step-1">
                            <div class="num">1</div>
                            Step
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button" href="#step-2">
                            <span class="num">2</span>
                            Step
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button" href="#step-3">
                            <span class="num">3</span>
                            Step
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button " href="#step-4">
                            <span class="num">4</span>
                            Step
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button " href="#step-5">
                            <span class="num">5</span>
                            Step
                        </a>
                    </li>
                </ul>

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

                    <!-- Step 1: Personal Information -->
                    <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                        <div class="preview-section">
                            <h3 class="preview-section-title">Personal Information</h3>
                            <div class="preview-grid">
                                <div class="preview-item">
                                    <label class="preview-label">Full Name:</label>
                                    <span class="preview-value">{{ ($personalDetails->first_name ?? '') . ' ' . ($personalDetails->last_name ?? '') ?: 'Not provided' }}</span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">Email:</label>
                                    <span class="preview-value">{{ $personalDetails->email ?? 'Not provided' }}</span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">Phone:</label>
                                    <span class="preview-value">{{ $personalDetails->phone ?? 'Not provided' }}</span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">Date of Birth:</label>
                                    <span class="preview-value">{{ $personalDetails->dob ?? 'Not provided' }}</span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">Gender:</label>
                                    <span class="preview-value">
                                        @if($personalDetails && $personalDetails->gender)
                                        @if($personalDetails->gender == 'M') Male
                                        @elseif($personalDetails->gender == 'F') Female
                                        @else Other
                                        @endif
                                        @else
                                        Not provided
                                        @endif
                                    </span>
                                </div>
                                <div class="preview-item full-width">
                                    <label class="preview-label">Address:</label>
                                    <span class="preview-value">{{ $personalDetails->address ?? 'Not provided' }}</span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">City:</label>
                                    <span class="preview-value">{{ $personalDetails->city ?? 'Not provided' }}</span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">PIN Code:</label>
                                    <span class="preview-value">{{ $personalDetails->pincode ?? 'Not provided' }}</span>
                                </div>
                            </div>
                            <h4 class="preview-subsection-title">Emergency Contact</h4>
                            <div class="preview-grid">
                                <div class="preview-item">
                                    <label class="preview-label">Contact Name:</label>
                                    <span class="preview-value">{{ $personalDetails->emergency_name ?? 'Not provided' }}</span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">Contact Phone:</label>
                                    <span class="preview-value">{{ $personalDetails->emergency_phone ?? 'Not provided' }}</span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">Relationship:</label>
                                    <span class="preview-value">{{ $personalDetails->relationship ?? 'Not provided' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back">Go Back</button>
                            <button type="button" class="btn btn-primary btn_next">Next</button>
                        </div>
                    </div>

                    <!-- Step 2: Educational Background -->
                    <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                        <div class="preview-section">
                            <h3 class="preview-section-title">Educational Details</h3>
                            @if(isset($educationDetails) && $educationDetails->count() > 0)
                            @foreach($educationDetails as $index => $education)
                            <div class="education-preview-item">
                                <h4 class="education-preview-title">Education {{ $index + 1 }}</h4>
                                <div class="preview-grid">
                                    <div class="preview-item">
                                        <label class="preview-label">Qualification:</label>
                                        <span class="preview-value">{{ $education->qualification->name ?? 'Not provided' }}</span>
                                    </div>
                                    <div class="preview-item">
                                        <label class="preview-label">Board/University:</label>
                                        <span class="preview-value">{{ $education->board ?? 'Not provided' }}</span>
                                    </div>
                                    <div class="preview-item">
                                        <label class="preview-label">Institution:</label>
                                        <span class="preview-value">{{ $education->institution ?? 'Not provided' }}</span>
                                    </div>
                                    <div class="preview-item">
                                        <label class="preview-label">Year of Passing:</label>
                                        <span class="preview-value">{{ $education->year ?? 'Not provided' }}</span>
                                    </div>
                                    <div class="preview-item">
                                        <label class="preview-label">Percentage/Grade:</label>
                                        <span class="preview-value">{{ $education->grade ?? 'Not provided' }}</span>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            @else
                            <p class="no-data">No educational details provided</p>
                            @endif
                        </div>
                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back">Go Back</button>
                            <button type="button" class="btn btn-primary btn_next">Next</button>
                        </div>
                    </div>

                    <!-- Step 3: Course Selection -->
                    <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                        <div class="preview-section">
                            <h3 class="preview-section-title">Course Selection</h3>
                            <div class="preview-grid">
                                <div class="preview-item full-width">
                                    <label class="preview-label">Selected Training Program:</label>
                                    <span class="preview-value">
                                        @if($courseSelection && $courseSelection->trainingProgram)
                                        {{ $courseSelection->trainingProgram->title }}
                                        (Duration: {{ $courseSelection->trainingProgram->total_hours }} hours,
                                        Type: {{ $courseSelection->trainingProgram->course_type_desc }})
                                        @else
                                        Not selected
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back">Go Back</button>
                            <button type="button" class="btn btn-primary btn_next">Next</button>
                        </div>
                    </div>

                    <!-- Step 4: Training Center Selection -->
                    <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                        <div class="preview-section">
                            <h3 class="preview-section-title">Training Center Selection</h3>
                            <div class="preview-grid">
                                <div class="preview-item full-width">
                                    <label class="preview-label">Selected Training Center:</label>
                                    <span class="preview-value">
                                        @if($trainingCenterPreference && $trainingCenterPreference->trainingCentre)
                                        {{ $trainingCenterPreference->trainingCentre->basicInformation->centre_name ?? 'Not available' }}
                                        <br>
                                        <small>{{ $trainingCenterPreference->trainingCentre->address->address ?? 'Address not available' }}</small>
                                        @else
                                        Not selected
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back">Go Back</button>
                            <button type="button" class="btn btn-primary btn_next">Next</button>
                        </div>
                    </div>

                    <!-- Step 5: Document Upload -->
                    <div id="step-5" class="tab-pane" role="tabpanel" aria-labelledby="step-5">
                        <div class="preview-section">
                            <h3 class="preview-section-title">Uploaded Documents</h3>
                            <div class="preview-grid">
                                <div class="preview-item">
                                    <label class="preview-label">Photograph:</label>
                                    <span class="preview-value">
                                        @if($document && $document->photo_full_path)
                                        <a href="{{ $document->photo_full_path }}" class="btn btn-outline btn-sm" target="_blank">
                                            <i class="fa fa-eye"></i> View Photo
                                        </a>
                                        @else
                                        Not uploaded
                                        @endif
                                    </span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">Address Proof:</label>
                                    <span class="preview-value">
                                        @if($document && $document->address_proof_full_path)
                                        <a href="{{ $document->address_proof_full_path }}" class="btn btn-outline btn-sm" target="_blank">
                                            <i class="fa fa-eye"></i> View Document
                                        </a>
                                        @else
                                        Not uploaded
                                        @endif
                                    </span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">Experience Certificate:</label>
                                    <span class="preview-value">
                                        @if($document && $document->experience_certificate_full_path)
                                        <a href="{{ $document->experience_certificate_full_path }}" class="btn btn-outline btn-sm" target="_blank">
                                            <i class="fa fa-eye"></i> View Document
                                        </a>
                                        @else
                                        Not uploaded
                                        @endif
                                    </span>
                                </div>
                                <div class="preview-item">
                                    <label class="preview-label">Medical Certificate:</label>
                                    <span class="preview-value">
                                        @if($document && $document->medical_certificate_full_path)
                                        <a href="{{ $document->medical_certificate_full_path }}" class="btn btn-outline btn-sm" target="_blank">
                                            <i class="fa fa-eye"></i> View Document
                                        </a>
                                        @else
                                        Not uploaded
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back">Go Back</button>
                            <button type="button" class="btn btn-success" id="btn_final_submit">Final Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@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 Back Button
     */
    $(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");
    })

    // Final submit button click handler
    $(document).on('click', '#btn_final_submit', function() {
        Swal.fire({
            title: 'Confirm Submission',
            text: "Are you sure you want to submit your application?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, submit it!'
        }).then((result) => {
            if (result.isConfirmed) {
                // Submit the form or perform final submission logic
                $.ajax({
                    url: "{{ route('student-registration.final-submit') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                    },
                    success: function(response) {
                        if (response.success === true) {
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success",
                                confirmButtonText: "OK"
                            }).then(() => {
                                window.location.href = response.redirect_url;
                            });
                        } 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