@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">Partner Registration Preview</h1>
                <p class="application-subtitle">
                    Review your submitted information for becoming our caregiver training partner.
                </p>
            </div>
        </div>

        <div class="bg-white shadow-sm rounded pb-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>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button " href="#step-6">
                            <span class="num">6</span>
                            Step
                        </a>
                    </li>
                </ul>

                <div class="tab-content px-3 py-4">
                    <!-- Step 1: Basic Information -->
                    <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                        <div class="mb-3">
                            <div class="step-header">
                                <h2 class="step-title">Basic Information</h2>
                                <p class="step-description">Centre and contact details</p>
                            </div>

                            <div class="form-grid">
                                <div class="mb-3 span-2">
                                    <label class="form-label">Training Centre Name</label>
                                    <div class="preview-value">{{ $basicInformation->centre_name ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Director/Head Name</label>
                                    <div class="preview-value">{{ $basicInformation->director_name ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Official Email</label>
                                    <div class="preview-value">{{ $basicInformation->official_email ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Primary Phone</label>
                                    <div class="preview-value">{{ $basicInformation->primary_phone ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Alternate Phone</label>
                                    <div class="preview-value">{{ $basicInformation->alternate_phone ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3 span-2">
                                    <label class="form-label">Website</label>
                                    <div class="preview-value">
                                        @if($basicInformation->website ?? '')
                                        <a href="{{ $basicInformation->website }}" target="_blank">{{ $basicInformation->website }}</a>
                                        @else
                                        Not provided
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

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

                    <!-- Step 2: Address Details -->
                    <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                        <div class="mb-3">
                            <div class="step-header">
                                <h2 class="step-title">Address Details</h2>
                                <p class="step-description">Location information</p>
                            </div>

                            <div class="mb-3 span-2">
                                <label class="form-label">Complete Address</label>
                                <div class="preview-value">{{ $address->address ?? 'Not provided' }}</div>
                            </div>

                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-3">
                                    <label class="form-label">State</label>
                                    <div class="preview-value">
                                        @if($address && $address->state)
                                        @foreach ($states as $state)
                                        @if($state->state_code == $address->state)
                                        {{ $state->state_name_en }}
                                        @break
                                        @endif
                                        @endforeach
                                        @else
                                        Not provided
                                        @endif
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-3">
                                    <label class="form-label">District</label>
                                    <div class="preview-value">{{ $address->district ?? 'Not provided' }}</div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-3">
                                    <label class="form-label">City</label>
                                    <div class="preview-value">{{ $address->city ?? 'Not provided' }}</div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-3">
                                    <label class="form-label">Pincode</label>
                                    <div class="preview-value">{{ $address->pincode ?? 'Not provided' }}</div>
                                </div>

                                <div class="col-lg-8 col-md-8 col-sm-6 col-12 mb-3">
                                    <label class="form-label">Landmark</label>
                                    <div class="preview-value">{{ $address->landmark ?? 'Not provided' }}</div>
                                </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 3: Organization Info -->
                    <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                        <div class="mb-3">
                            <div class="step-header">
                                <h2 class="step-title">Organization Info</h2>
                                <p class="step-description">Registration and staff details</p>
                            </div>

                            <div class="form-grid">
                                <div class="mb-3">
                                    <label class="form-label">Type of Organization</label>
                                    <div class="preview-value">
                                        @if($organizationInfo && $organizationInfo->organization_type_id)
                                        @foreach ($organizationTypes as $type)
                                        @if($type->id == $organizationInfo->organization_type_id)
                                        {{ $type->name }}
                                        @break
                                        @endif
                                        @endforeach
                                        @else
                                        Not provided
                                        @endif
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Year Established</label>
                                    <div class="preview-value">{{ $organizationInfo->year_established ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3 span-2">
                                    <label class="form-label">Registration Number</label>
                                    <div class="preview-value">{{ $organizationInfo->registration_number ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3 span-2">
                                    <label class="form-label">Affiliations</label>
                                    <div class="preview-value">{{ $organizationInfo->affiliations ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Total Staff Count</label>
                                    <div class="preview-value">{{ $organizationInfo->total_staff ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Qualified Trainers</label>
                                    <div class="preview-value">{{ $organizationInfo->qualified_trainers ?? 'Not provided' }}</div>
                                </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: Infrastructure -->
                    <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                        <div class="mb-3">
                            <div class="step-header">
                                <h2 class="step-title">Infrastructure</h2>
                                <p class="step-description">Facilities and equipment</p>
                            </div>

                            <div class="form-grid">
                                <div class="mb-3">
                                    <label class="form-label">Total Area (sq ft)</label>
                                    <div class="preview-value">{{ $infrastructure->total_area ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Number of Classrooms</label>
                                    <div class="preview-value">{{ $infrastructure->classrooms ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3 span-2">
                                    <label class="form-label">Classroom Size</label>
                                    <div class="preview-value">{{ $infrastructure->classroom_size ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3 span-2">
                                    <label class="form-label">Number of Laboratories</label>
                                    <div class="preview-value">{{ $infrastructure->number_of_laboratories ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3 span-2">
                                    <label class="form-label">Laboratory Size</label>
                                    <div class="preview-value">{{ $infrastructure->laboratory_size ?? 'Not provided' }}</div>
                                </div>

                                <div class="mb-3 span-2">
                                    <label class="form-label">Available Facilities</label>
                                    <div class="preview-value">
                                        @if(!empty($infrastructureFacilities) && count($infrastructureFacilities) > 0)
                                        @php
                                        $facilityNames = [];
                                        $infrastructureFacilities = $infrastructureFacilities->toArray();
                                        $infrastructureFacilitiesIds = array_column($infrastructureFacilities, 'facility_id');
                                        @endphp
                                        @foreach ($facilities as $facility)
                                        @if(in_array($facility->id, $infrastructureFacilitiesIds))
                                        @php $facilityNames[] = $facility->name; @endphp
                                        @endif
                                        @endforeach
                                        {{ implode(', ', $facilityNames) }}
                                        @else
                                        No facilities selected
                                        @endif
                                    </div>
                                </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: Programs -->
                    <div id="step-5" class="tab-pane" role="tabpanel" aria-labelledby="step-5">
                        <div class="mb-3">
                            <div class="step-header">
                                <h2 class="step-title">Programs</h2>
                                <p class="step-description">Training programs offered</p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Programs Selected</label>
                                <div class="preview-value">
                                    <div class="programs-grid">
                                        @if(!empty($trainingCentrePrograms) && count($trainingCentrePrograms) > 0)
                                        @php
                                        $trainingCentrePrograms = $trainingCentrePrograms->toArray();
                                        $trainingCentreProgramsIds = array_column($trainingCentrePrograms, 'training_program_id');
                                        @endphp
                                        <div class="programs-preview">
                                            @foreach ($trainingPrograms as $trainingProgram)
                                            @if(in_array($trainingProgram->id, $trainingCentreProgramsIds))
                                            <div class="program-preview-item card card-body mb-3">
                                                <div class="program-name">{{ $trainingProgram->title }}</div>
                                                <div class="program-details">
                                                    <span class="me-3">
                                                        <i class="far fa-clock"></i> {{ $trainingProgram->total_hours }} Hours
                                                    </span>
                                                    <span>
                                                        <i class="fas fa-signal"></i> {{ $trainingProgram->course_type }}
                                                    </span>
                                                </div>
                                            </div>
                                            @endif
                                            @endforeach
                                        </div>
                                        @else
                                        No programs selected
                                        @endif
                                    </div>
                                </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 6: Declaration & Documents -->
                    <div id="step-6" class="tab-pane" role="tabpanel" aria-labelledby="step-6">
                        <div class="mb-3">
                            <div class="step-header">
                                <h2 class="step-title">Declaration & Documents</h2>
                                <p class="step-description">Final submission and verification</p>
                            </div>

                            <div class="declaration-section">
                                <h3 class="declaration-title">Document Upload</h3>
                                <div class="upload-grid">
                                    <div class="upload-group">
                                        <label class="upload-label">Registration Certificate</label>
                                        <div class="preview-value">
                                            @if($document && $document->reg_certificate_full_path)
                                            <a href="{{ $document->reg_certificate_full_path }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                            @else
                                            Not uploaded
                                            @endif
                                        </div>
                                    </div>

                                    <div class="upload-group">
                                        <label class="upload-label">NOC from Local Authority</label>
                                        <div class="preview-value">
                                            @if($document && $document->noc_full_path)
                                            <a href="{{ $document->noc_full_path }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                            @else
                                            Not uploaded
                                            @endif
                                        </div>
                                    </div>

                                    <div class="upload-group">
                                        <label class="upload-label">Infrastructure Photos</label>
                                        <div class="preview-value">
                                            @if($document && count($document->photos_full_paths))
                                            @foreach($document->photos_full_paths as $photo)
                                            <a href="{{ $photo }}" class="btn btn-outline btn-sm me-2 mb-2" target="_blank"><i class="fa fa-eye"></i> View Photo</a>
                                            @endforeach
                                            @else
                                            Not uploaded
                                            @endif
                                        </div>
                                    </div>

                                    <div class="upload-group">
                                        <label class="upload-label">Staff Qualification Certificates</label>
                                        <div class="preview-value">
                                            @if($document && count($document->staff_certs_full_paths))
                                            @foreach($document->staff_certs_full_paths as $cert)
                                            <a href="{{ $cert }}" class="btn btn-outline btn-sm me-2 mb-2" target="_blank"><i class="fa fa-eye"></i> View Certificate</a>
                                            @endforeach
                                            @else
                                            Not uploaded
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="declaration-text">
                                    <h3 class="declaration-title">Declaration Status</h3>
                                    <div class="declaration-items">
                                        <div class="declaration-item mb-3">
                                            <div class="declaration-content">
                                                <div class="declaration-text">
                                                    Terms and Conditions Agreement:
                                                    <span class="badge {{ $trainingCentre && $trainingCentre->terms_agree == 1 ? 'bg-success' : 'bg-danger' }}">
                                                        {{ $trainingCentre && $trainingCentre->terms_agree == 1 ? 'Agreed' : 'Not Agreed' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="declaration-item mb-3">
                                            <div class="declaration-content">
                                                <div class="declaration-text">
                                                    Facility Inspection Agreement:
                                                    <span class="badge {{ $trainingCentre && $trainingCentre->inspection_agree == 1 ? 'bg-success' : 'bg-danger' }}">
                                                        {{ $trainingCentre && $trainingCentre->inspection_agree == 1 ? 'Agreed' : 'Not Agreed' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="declaration-item mb-3">
                                            <div class="declaration-content">
                                                <div class="declaration-text">
                                                    Information Accuracy Declaration:
                                                    <span class="badge {{ $trainingCentre && $trainingCentre->accuracy_declaration == 1 ? 'bg-success' : 'bg-danger' }}">
                                                        {{ $trainingCentre && $trainingCentre->accuracy_declaration == 1 ? 'Confirmed' : 'Not Confirmed' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="next-steps-section">
                                    <h3 class="next-steps-title">Next Steps</h3>
                                    <div class="next-steps-list">
                                        <div class="next-step-item">
                                            <div class="step-icon">
                                                <i class="fas fa-search"></i>
                                            </div>
                                            <div class="step-content">
                                                <div class="step-name">Application review</div>
                                                <div class="step-duration">(5-7 business days)</div>
                                            </div>
                                        </div>
                                        <div class="next-step-item">
                                            <div class="step-icon">
                                                <i class="fas fa-file-check"></i>
                                            </div>
                                            <div class="step-content">
                                                <div class="step-name">Document verification</div>
                                            </div>
                                        </div>
                                        <div class="next-step-item">
                                            <div class="step-icon">
                                                <i class="fas fa-building"></i>
                                            </div>
                                            <div class="step-content">
                                                <div class="step-name">Facility inspection</div>
                                                <div class="step-duration">(if required)</div>
                                            </div>
                                        </div>
                                        <div class="next-step-item">
                                            <div class="step-icon">
                                                <i class="fas fa-check-circle"></i>
                                            </div>
                                            <div class="step-content">
                                                <div class="step-name">Final approval and registration</div>
                                            </div>
                                        </div>
                                    </div>
                                </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>

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

@section('pages-scripts')
<script>
    $(document).ready(function() {
        // SmartWizard initialize
        $('#smartwizard').smartWizard({
            theme: "arrows",
            autoAdjustHeight: false,
            toolbar: {
                position: 'bottom',
                showNextButton: false,
                showPreviousButton: false,
            },
        });

        // Next button click handler
        $(document).on('click', '.btn_next', function() {
            $('#smartwizard').smartWizard("next");
        });

        // Go back button click handler
        $(document).on('click', '.btn_go_back', function() {
            $('#smartwizard').smartWizard("prev");
        });

        // 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('training-centers-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