@extends('layoutsfrontend.master')
@section('content')
<!-- Page Header Start -->
<div class="page-header bg-section parallaxie">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <!-- Page Header Box Start -->
                <div class="page-header-box">
                    <h1 class="text-anime-style-3" data-cursor="-opaque">Golden Health Plan</h1>
                    <nav class="wow fadeInUp">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('frontend.packages') }}">Packages</a></li>
                            <li class="breadcrumb-item">{{ $healthpackages->name }}</li>
                        </ol>
                    </nav>
                </div>
                <!-- Page Header Box End -->
            </div>
        </div>
    </div>
</div>
<!-- Page Header End -->


<!-- Package Details Start -->
<div class="page-service-single">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 package_dtls_links">
                <!-- Page Single Sidebar Start -->
                <div class="page-single-sidebar">
                    <!-- Page Category List Start -->
                    <div class="page-category-list wow fadeInUp">
                        <h3>Our Packages</h3>
                        <ul>
                            @foreach($healthpackagesList as $item)
                            <li>
                                <a href="{{ route('frontend.packages.detail', $item->slug) }}">{{ $item->name }}</a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    <!-- Page Category List End -->

                    <!-- Sidebar CTA Box Start -->
                    <div class="sidebar-cta-box wow fadeInUp" data-wow-delay="0.25s">
                        <!-- Sidebar CTA Content Start -->
                        <div class="sidebar-cta-content">
                            <h3>More information</h3>
                            <p>Contact us for compassionate care and tailored healing plans.</p>
                        </div>
                        <!-- Sidebar CTA Content End -->

                        <!-- Sidebar Contact Box Start -->
                        <div class="sidebar-contact-box">
                            <div class="icon-box">
                                <img src="images/icon-cta-phone.svg" alt="">
                            </div>
                            <div class="sidebar-contact-content">
                                <p>Call us</p>
                                <h3><a href="tel:+123456789">(123) 456 789</a></h3>
                            </div>
                        </div>
                        <!-- Sidebar Contact Box End -->

                        <!-- Sidebar CTA Image Start -->
                        <div class="sidebar-cta-image">
                            <figure class="image-anime">
                                <img src="{{ asset('images/sidebar-cta-image.jpg') }}" alt="">
                            </figure>
                        </div>

                        <!-- Sidebar CTA Image End -->
                    </div>
                    <!-- Sidebar CTA Box End -->
                </div>
                <!-- Page Single Sidebar End -->
            </div>

            <div class="col-lg-8">
                <!-- Service Single Content Start -->
                <div class="service-single-content page-title">
                    <h1 class="text-anime-style-3">{{ $healthpackages->name }}</h1>
                    <div class="package-rate">
                        Package Rate:
                        <h2>
                            {{ $healthpackages->package_rate }} Rs
                            @if(!empty($healthpackages->package_rate_age_limit))
                            <span>({{ $healthpackages->package_rate_age_limit }})</span>
                            @endif
                        </h2>
                    </div>

                    <!-- Page Single Image Start -->
                    <div class="page-single-image">
                        <figure class="image-anime reveal">
                            @php
                            $packageGallery = $healthpackages->galleries($categoryId)->first();
                            $packageImagePath = getgallery($packageGallery);
                            @endphp
                            @if(!empty($packageImagePath))
                            <img src="{{ $packageImagePath }}" alt="{{ $healthpackages->name }}">
                            @else
                            <img src="{{ asset('images/sidebar-cta-image.jpg') }}" alt="{{ $healthpackages->name }}">

                            @endif
                        </figure>
                    </div>
                    <!-- Page Single Image End -->

                    <!-- Service Entry Start -->
                    <div class="service-entry">
                        <p class="wow fadeInUp">{!! $healthpackages->description !!}</p>

                        <!-- why choose health checkup Start -->
                        <div class="why-choose-health-checkup">
                            <h2 class="text-anime-style-3">Why Choose Our Health Checkup Packages?</h2>
                            <div class=" wow fadeInUp" data-wow-delay="0.2s">
                                <ul>
                                    @if($healthpackagescommon)
                                    @foreach($healthpackagescommon as $item)
                                    <li><b>{{$item->name}}:</b> {{$item->description}}.</li>
                                    @endforeach
                                    @endif
                            </ul>
                            </div>

                        </div>
                        <!-- why choose health checkup End -->




                    </div>
                    <!-- Service Entry End -->
                    <div class="support-step-box book-appointment-box">
                        <!-- Book Appointment Content Start -->
                        <div class="book-appointment-content">
                            <!-- Section Title Start -->
                            <div class="section-title">
                                <h3 class="wow fadeInUp">book a Package</h3>
                                <h2 class="text-anime-style-3" data-cursor="-opaque">Book a Package</h2>
                            </div>
                            <!-- Section Title End -->

                            <!-- Book Appointment Form Start -->
                            <div class="appointment-form wow fadeInUp" data-wow-delay="0.4s">
                                <form id="appointmentForm" action="{{ route('frontend.bookpackage.post') }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="form-group col-md-6 mb-4">
                                            <input type="text" name="name" class="form-control" id="name" placeholder="Full Name" required>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="form-group col-md-6 mb-4">
                                            <input type="email" name="email" class="form-control" id="email" placeholder="Email Address" required>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="form-group col-md-6 mb-4">
                                            <input type="text" name="phone" class="form-control" id="phone" placeholder="Phone Number" required>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="form-group col-md-6 mb-4">
                                            <select name="package" class="form-control form-select" id="package" required>
                                                <option value="" disabled selected>Select Package</option>
                                                @foreach($healthpackagesList as $item)
                                                <option value="{{$item->id}}" @if($healthpackages->id==$item->id) selected @endif>{{$item->name}}</option>
                                                @endforeach

                                            </select>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="form-group col-md-6 mb-4">
                                            <input type="date" name="date" class="form-control" id="date" required>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="form-group col-md-6 mb-4">
                                            <input type="time" name="time" class="form-control" id="time" required>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="form-group col-md-12 mb-4">
                                            <textarea name="message" class="form-control" id="message" rows="3" placeholder="Message"></textarea>
                                            <div class="help-block with-errors"></div>
                                        </div>

                                        <div class="col-md-12">
                                            <button type="submit" class="btn-default"><span>Submit now</span></button>
                                            <div id="msgSubmit" class="h3 hidden mt-3"></div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- Book Appointment Form End -->
                        </div>
                        <!-- Book Appointment Content End -->
                    </div>
                </div>
                <!-- Service Single Content End -->
            </div>
        </div>
    </div>
</div>
<!-- Package Details End -->
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Unbind any existing handlers from theme scripts (like function.js) to prevent double submission
    $('#appointmentForm').off('submit').on('submit', function(e) {
        e.preventDefault();
        e.stopPropagation();

        let form = this;
        if (!form.checkValidity()) {
            form.reportValidity();
            return false;
        }
        let formObj = $(this);
        let url = formObj.attr('action');
        let formData = new FormData(form);

        let submitBtn = formObj.find('button[type="submit"]');
        let originalBtnText = submitBtn.html();

        $('.help-block.with-errors').html('');
        $('.form-group').removeClass('has-error');

        submitBtn.prop('disabled', true).html('<span>Sending...</span>');

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                submitBtn.prop('disabled', false).html(originalBtnText);
                if (response.success) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'Great'
                    });
                    $('#appointmentForm')[0].reset();
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).html(originalBtnText);
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    let errorHtml = '<ul>';
                    $.each(errors, function(key, value) {
                        let input = $('[name="' + key + '"]');
                        let errorContainer = input.closest('.form-group').find('.help-block.with-errors');
                        errorContainer.html(value[0]);
                        input.closest('.form-group').addClass('has-error');
                        errorHtml += '<li>' + value[0] + '</li>';
                    });
                    errorHtml += '</ul>';
                    Swal.fire({
                        title: 'Validation Error',
                        html: errorHtml,
                        icon: 'error',
                        confirmButtonText: 'Try Again'
                    });
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Something went wrong. Please try again.',
                        icon: 'error',
                        confirmButtonText: 'Close'
                    });
                }
            }
        });
    });
</script>
@endsection