@extends('layoutsfrontend.master')
@section('content')
    <!-- Page Header Start -->
    @php
$imagePath=getbannerimage();
@endphp
    <!-- Page Header Start -->
    <div class="page-header bg-section parallaxie" style="background-image: url({{$imagePath}});" >
        <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">{{ $hospital->name }}</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">home</a></li>
                                <li class="breadcrumb-item">{{ $hospital->name }}</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <div class="about-us wow fadeInUp hospital_branch_outer">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="about-us-images">
                     
                        <div class="about-img-1">
                            <figure class="image-anime">
                                 @php
                                        $gallery = $hospital->galleries(16)->first();
                                        $imagePath = getgallery($gallery);
                                        @endphp
                                        <img src="{{$imagePath}}">                 
                            </figure>      
                        </div>
                      
                        <div class="about-img-2">
                            <figure class="image-anime">
                                  @php
                               
                                if($hospital && isset($hospital->filename) && $hospital->filename) {
                                $imagePath =asset('storage/uploads/hospital/' .$hospital->filename);
                            @endphp
                           
                            <img src="{{ $imagePath }}" alt="{{ $hospital->name }}">
                                  @php
}
                              @endphp
                            </figure>
                        </div>
                              
                    </div>
                </div>

                <div class="col-md-6">
                    <!-- Hero Content Box Start -->
                    <div class="branches_content">
                        <!-- Section Title Start -->
                        <div class="section-title">
                            <h3 class="wow">{{ $hospital->location }} Branch</h3>
                            <h2 data-cursor="-opaque">{{ $hospital->name }}</h2>
                        </div>
                        <!-- Section Title End -->

                        <div class="branch_loaction_content">
                                            <p>{!! nl2br(e($hospital->address)) !!}</p>    
                                            @if($hospital->email)
                                            <p>
                                                <img src="{{ asset('images/icon-mail.svg') }}" alt="">
                                                {{ $hospital->email }}
                                            </p>
                                            @endif
                                            @if($hospital->phone)
                                            <p>
                                                <img src="{{ asset('images/icon-phone.svg') }}" alt="">
                                                {{ $hospital->phone }}
                                            </p>
                                            @endif
                                            <a href="#branches_form" class="btn-default btn-dark">Enquire Now</a>
                                        </div>
                    </div>
                    <!-- Hero Content Box End -->
                </div>
            </div>
        </div>
    </div>

    <div class="branches_overview">
        <div class="container">
            <!-- Section Title Start -->
                        <div class="section-title">
                            <h3 class="wow fadeInUp">About {{ $hospital->name }}</h3>
                            <h2 class="text-anime-style-3" data-cursor="-opaque">{{ $hospital->location ?? 'Healthcare Network' }}</h2>
                        </div>
                        <!-- Section Title End -->
                         <div class="wow fadeInUp" data-wow-delay="0.2s">
                            {!! nl2br(e($hospital->about_us)) !!}
                         </div>
        </div>
    </div>


    <!-- Our Programs Section Start -->
    <div class="our-programs bg-section mb_100">
        <div class="container">
            <div class="brach_faciliy_head">
                <h3 class="text-anime-style-3" data-cursor="-opaque">Our facilities </h3>
            </div>
                    <!-- facilities Slider Start -->
                        <div class="facilities-slider">
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    @foreach($facilities as $facility)
                                    <!-- slide start -->
                                    <div class="swiper-slide">
                                        <div class="facilities-item wow fadeInUp">
                                            <div class="facilities_image">
                                                                         @php
                              $havenImage = $facility->galleries(4)->first();
                              $imagePath = getgallery($havenImage);
                             
                              @endphp
                              @if($imagePath)
                                <img src="{{$imagePath}}" alt="">
                                @endif
                                              
                                            </div>
                                             <h3>{{ $facility->name }}</h3>
                                        </div>
                                    </div>
                                     <!-- slide End -->
                                    @endforeach
                                </div>
                                <div class="facilities_control">
                                    <div class="facilities-slider-btn">
                                        <div class="facilities-button-prev"></div>
                                        <div class="facilities-button-next"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- facilities Slider End -->
               
        </div>
    </div>
    <!-- Our Programs Section End -->

    <div class="branches_contact">
        <div class="container">
            <div class="row">
            <div class="col-lg-6">
                    <!-- Contact Us Form Start -->
                    <div class="contact-us-form" id="branches_form">
                        <!-- Section Title Start -->
                        <div class="section-title">
                            <h2 class="text-anime-style-3" data-cursor="-opaque">Get in touch with us</h2>
                        </div>
                        <!-- Section Title End -->

                        <!-- Contact Form Start -->
                        <div class="contact-form">
          <form data-toggle="validator" class="wow fadeInUp" data-wow-delay="0.2s" id="appointmentForm" action="{{ route('frontend.sentcontact.post') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                              <div class="row">                                
                                
                                       <div class="form-group col-md-6 mb-4">
                                        <input type="text" name="firstname" class="form-control" id="firstname" placeholder="First Name" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
       <div class="form-group col-md-6 mb-4">
                                        <input type="text" name ="lastname" class="form-control" id="lastname" placeholder="Last 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" 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" required>
                                        <div class="help-block with-errors"></div>
                                    </div>


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

                                    <div class="col-md-12">
                                        <button type="submit" class="btn-default">Submit Message</button>
                                        <div id="msgSubmit" class="h3 hidden"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- Contact Form End -->
                    </div>
                    <!-- Contact Us Form End -->
                </div>
                <div class="col-lg-6">
                    <!-- Google Map IFrame Start -->
                    <div class="google-map">
                        @if($hospital->google_map)
                            {!! $hospital->google_map !!}
                        @else
                          
                                @endif
                    </div>
                    <!-- Google Map IFrame End -->
                </div>
        </div>
        </div>
    </div>
                                @endsection
                          @section('script')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(document).ready(function() {
      // 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