@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">Packages</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">home</a></li>
                                <li class="breadcrumb-item">About us</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

   
<!-- Our Feature Section Start -->
<div class="our-feature ourpackage bg-section">
    <div class="container">
        <div class="row feature-item-box">
@php
$i=0;
@endphp
            @foreach($healthpackages as $package)
                @php
                    $packageImage = $package->galleries(5)->first();
                    $imagePath = getgallery($packageImage);
                    $i++;
                @endphp

                <div class="col-lg-4 col-sm-6">
                    <!-- Feature Item Start -->
                    <div class="feature-item @if($i==1) active @endif wow fadeInUp">

                        <div class="icon-box">
                            @if(!empty($package) && !empty($package->filename))
                                @php
                                    $ext = strtolower(pathinfo($package->filename, PATHINFO_EXTENSION));
                                @endphp

                                @if(in_array($ext, ['jpg','jpeg','png','gif','svg']))
                                    <img src="{{ asset('storage/uploads/gallery/'.$package->filename) }}" alt="">
                                @endif
                            @endif
                        </div>

                        <div class="feature-item-header">
                            <h3>{{ $package->name }}</h3>
                        </div>

                        <div class="feature-item-content package_top_cont">
                            <p>{{ $package->title }}</p>
                        </div>

                        <div class="package_image">
                            <figure class="image-anime">
                                @if(!empty($imagePath))
                                <img src="{{ $imagePath }}" alt="Package Image">
                                @endif
                            </figure>
                        </div>

                        <div class="feature-item-content">
                            <p>{!! $package->description !!}</p>
                        </div>

                        <div class="feature-counter-item">
                            <div class="feature-counter-content">
                                <h2>
                                    {{ $package->package_rate }} Rs
                                    <span>
                                        @if(!empty($package->package_rate_age_limit))
                                            ({{ $package->package_rate_age_limit }})
                                        @endif
                                    </span>
                                </h2>
                            </div>
                        </div>

                        <div class="feature-counter-item">
                            <div class="feature-counter-content">
                                <a href="{{ route('frontend.packages.detail', $package->slug) }}" class="viewpackages">View Details</a>
                            </div>
                            <div class="feature-counter-content">
                                <a href="{{ route('frontend.packages.detail', $package->slug) }}" class="viewpackages">Book Package</a>
                            </div>
                        </div>

                    </div>
                    <!-- Feature Item End -->
                </div>
            @endforeach

        </div>
    </div>
</div>
    <!-- Our Feature Section End -->


    <div class="package_bttm">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <!-- Section Title Start -->
                    <div class="section-title">
                        <h3 class="wow fadeInUp">Health package</h3>
                        <h4 class="text-anime-style-3" data-cursor="-opaque">Health package Steps</h4>
                    </div>
                    <!-- Section Title End -->
                      <div class="flowchart">
                            <div class="flow-box">
                                <div class="flow-title">Step 1</div>
                                <div class="flow-desc">Company Submits Application via MyStartup</div>
                            </div>
                            <div class="arrow"></div>
                            <div class="flow-box">
                                <div class="flow-title">Step 2</div>
                                <div class="flow-desc">Company Submits Application via MyStartup</div>
                            </div>
                            <div class="arrow"></div>
                            <div class="flow-box">
                                <div class="flow-title">Step 3</div>
                                <div class="flow-desc">Company Submits Application via MyStartup</div>
                            </div>
                            <div class="arrow"></div>
                            <div class="flow-box">
                                <div class="flow-title">Step 4</div>
                                <div class="flow-desc">Company Submits Application via MyStartup</div>
                            </div>
                    </div>
                </div>
                <div class="col-lg-6">
                     <!-- 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($healthpackages as $item)
                                            <option value="{{$item->id}}">{{$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>
        </div>
    </div>
        @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