@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">{{ $department->name }}</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/">home</a></li>
                                <li class="breadcrumb-item"><a href="{{ route('frontend.departments') }}">Departments</a></li>
                                <li class="breadcrumb-item active">{{ $department->name }}</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->
  <!-- Page Service Single Start -->
    <div class="page-service-single">
        <div class="container">
                    <!-- Service Single Content Start -->
                    <div class="service-single-content">

                        
                        
                        <!-- Service Entry Start -->
                        <div class="service-entry">

                            <div class="service-empower-box mt-0">
                                <!-- Service Empower Content Start -->
                                <div class="service-empower-content">
                                    <h2 class="text-anime-style-3">Empower with to recovery strengt</h2>
                                @if(!empty($department->description))
                                        <p class="wow fadeInUp">{{ $department->description}}</p>
                                  @else
                                  <p class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">We understand that true recovery takes time, trust &amp; the right guidance. That's why we've built our services around continuous care, 
                                        empathetic support, and proven clinical practices. We understand that true recovery takes time, trust &amp; the right guidance. That's why we've built our services around continuous care, 
                                        empathetic support, and proven clinical practices.</p>
                                        <p class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">We understand that true recovery takes time, trust &amp; the right guidance. That's why we've built our services around continuous care, 
                                        empathetic support, and proven clinical practices.</p>
                                   @endif
                                </div>
                                <!-- Service Empower Content End --> 

                                <!-- Service Empower Image Start -->
                                <div class="service-empower-image">
                                    <figure class="image-anime reveal">
                                         @if(!empty($department->filename))
                                        <img src="{{ asset("storage/uploads/department/$department->filename")}}" alt="Example Image" >
                                         @else
                                        <img src="{{ asset("images/service-empower-image.jpg")}}"" alt="">
                                         @endif
                                    </figure>
                                </div>
                                <!-- Service Empower Image End -->
                            </div>


                            <!-- Service Support Step Start -->
                            <div class="service-support-step">
                                
                                <!-- Support Step Box Start -->
                                <div class="support-step-box">

                                    <!-- Support Step Item List Start -->
                                    <div class="support-step-item-list">
                                        <!-- Care Counter Item Start -->
                                        <div class="care-counter-item">
                                            <div class="icon-box">
                                                <img src="{{ asset('images/icon-care-counter-1.svg')}}" alt="">
                                            </div>
                                            <div class="care-counter-item-content">
                                                <h2><span class="counter">{{ $department->wide_respected }}</span>+</h2>
                                                <p>{{ $department->treatment_description }}</p>
                                            </div>
                                        </div>
                                        <!-- Care Counter Item End -->
                                        
                                        <div class="care-counter-item">
                                            <div class="icon-box">
                                                <img src="{{ asset('images/icon-care-counter-2.svg')}}" alt="">
                                            </div>
                                            <div class="care-counter-item-content">
                                                <h2><span class="counter">{{ $department->greatly_valued }}</span>%</h2>
                                                <p>Greatly Valued</p>
                                            </div>
                                        </div>
                                        <!-- Care Counter Item End -->
                                        
                                        <!-- Care Counter Item Start -->
                                        <div class="care-counter-item">
                                            <div class="icon-box">
                                                <img src="{{ asset('images/icon-care-counter-3.svg')}}" alt="">
                                            </div>
                                            <div class="care-counter-item-content">
                                                <h2><span class="counter">{{ $department->deeply_trusted }}</span>+</h2>
                                                <p>Deeply Trusted</p>
                                            </div>
                                        </div>
                                        <!-- Care Counter Item End -->
                                        
                                        <!-- Care Counter Item Start -->
                                        <div class="care-counter-item">
                                            <div class="icon-box">
                                                <img src="{{ asset('images/icon-care-counter-4.svg')}}" alt="">
                                            </div>
                                            <div class="care-counter-item-content">
                                                <h2><span class="counter">{{ $department->strongly_guided }}</span>+</h2>
                                                <p>Strongly Guided</p>
                                            </div>
                                        </div>
                                        <!-- Care Counter Item End -->
                                    </div>
                                    <!-- Support Step Item List End -->
                                </div>
                                <!-- Support Step Box End -->
                            </div>
                            <!-- Service Support Step End -->
                           

                            <!-- Service Priority Box Start -->
                            <div class="service-priority-box">
                                <h2 class="text-anime-style-3">Treatments and procedures</h2>
                                <p class="wow fadeInUp">{{ $department->treatments_description }}</p>

                                <!-- Service Priority Item List Start -->
                                <div class="service-priority-item-list">
                                    <!-- What We Item Start -->
                                      @if($department->treatments->count() > 0)
                                      @foreach($department->treatments as $treatment)
                                    <div class="what-we-item wow fadeInUp" data-wow-delay="0.2s">
                                        <div class="icon-box">
                                            <h3>01</h3>
                                        </div>
                                        <div class="what-we-item-content">
                                            <h3>{{ $treatment->title }}</h3>
                                            <p>We tailor every program to meet your unique needs, ensuring you receive care that's effective, compassionate, and aligned with your recovery goals.</p>
                                        </div>
                                    </div>
                                     @endforeach
                                     @endif
                                    <!-- What We Item End -->
                                    
                                
                                    <!-- What We Item End -->
                                </div>
                                <!-- Service Priority Item List End -->
                            </div>
                            <!-- Service Priority Box End -->


                           


                        </div>
                        <!-- Service Entry End -->

                        
                    </div>
                    <!-- Service Single Content End -->
        </div>
    </div>
 <!-- Page Service Single End -->
      <!-- facilities slider start -->
                             <div class="department_slider bg-section">
                             <div class="container">
                                <div class="facilities-slider-department">
                                    <div class="section-title">
                                          <h2 class="text-anime-style-3" data-cursor="-opaque">Facilities</h2>
                                     </div>
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    @if(isset($department->facilities) && $department->facilities->count() > 0)
                                        @foreach($department->facilities as $facility)
                                            <div class="swiper-slide">
                                                <div class="facilities-item wow fadeInUp">
                                                    <div class="facilities_image">
                                                        @php
                                                            $facilityImage = $facility->galleries($facilities_category_id)->first();
                                                        @endphp
                                                        @if($facilityImage)
                                                            <img src="{{ asset('storage/uploads/gallery/' . $facilityImage->filename) }}" alt="{{ $facility->name }}">
                                                        @else
                                                            <img src="{{ asset('images/facilities01.jpg') }}" alt="Default Facility Image">
                                                        @endif
                                                    </div>
                                                     <h3>{{ $facility->name }}</h3>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                             @foreach($facilities as $facility)
                                            <div class="swiper-slide">
                                                <div class="facilities-item wow fadeInUp">
                                                    <div class="facilities_image">
                                                        @php
                                                            $facilityImage = $facility->galleries(4)->first();
                                                        @endphp
                                                        @if($facilityImage)
                                                            <img src="{{ asset('storage/uploads/gallery/' . $facilityImage->filename) }}" alt="{{ $facility->name }}">
                                                        @else
                                                            <img src="{{ asset('images/facilities01.jpg') }}" alt="Default Facility Image">
                                                        @endif
                                                    </div>
                                                     <h3>{{ $facility->name }}</h3>
                                                </div>
                                            </div>
                                        @endforeach
                                        <!-- <div class="swiper-slide">
                                            <div class="facilities-item wow fadeInUp">
                                                <div class="facilities_image">
                                                    <img src="{{ asset('images/facilities01.jpg') }}">
                                                </div>
                                                 <h3>No facilities available</h3>
                                            </div>
                                        </div> -->
                                    @endif
                                </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>
                             </div>
                               </div>
                            <!-- facilities slider End -->

                                <div class="department_doctors">
                             <div class="container">
                                <div class="facilities-slider-doctors">
                                    <div class="section-title">
                                          <h2 class="text-anime-style-3" data-cursor="-opaque">Our Doctors</h2>
                                     </div>
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    @if(isset($department->doctors) && $department->doctors->count() > 0)
                                        @foreach($department->doctors as $doctor)
                                            <!-- slide start -->
                                            <div class="swiper-slide">
                                                <div href="#" class="doctors-item h-100 d-flex flex-column text-center justify-space-between" aria-label="">
                                                    <div class="doctors-item-content">
                                                          <div class="doctor_image">
                                                             <div class="doctors_buttons">
                                                                     <ul>
                                                                        <li><a href="{{ route('frontend.bookappointment', $doctor->slug) }}">Book an Appointment</a></li>
                                                                        <li><a href="{{ route('frontend.doctor.detail', $doctor->slug) }}">Profile</a></li>
                                                                     </ul>
                                                             </div>
                                                             @php
                                                                $doctorImage = $doctor->galleries(3)->first();
                                                             @endphp
                                                             @if($doctorImage)
                                                                <img src="{{ asset('storage/uploads/gallery/' . $doctorImage->filename) }}" alt="{{ $doctor->name }}">
                                                             @else
                                                                <img src="{{ asset('images/doctor01.jpg') }}" alt="Default Doctor Image">
                                                             @endif
                                                            </div>
                                                             <div class="doctor_content">
                                                             <h4>{{ $doctor->name }}</h4>
                                                                 <p>{{ $doctor->designation }}</p>
                                                             </div>
                                                    </div>
                                                </div>
                                           </div>
                                             <!-- slide End -->
                                        @endforeach
                                    @else
                                         @foreach($doctors as $doctor)
                                            <!-- slide start -->
                                            <div class="swiper-slide">
                                                <div href="#" class="doctors-item h-100 d-flex flex-column text-center justify-space-between" aria-label="">
                                                    <div class="doctors-item-content">
                                                          <div class="doctor_image">
                                                             <div class="doctors_buttons">
                                                                     <ul>
                                                                        <li><a href="{{ route('frontend.bookappointment', $doctor->slug) }}">Book an Appointment</a></li>
                                                                        <li><a href="{{ route('frontend.doctor.detail', $doctor->slug) }}">Profile</a></li>
                                                                     </ul>
                                                             </div>
                                                             @php
                                                                $doctorImage = $doctor->galleries($categoryId)->first();
                                                             @endphp
                                                             @if($doctorImage)
                                                                <img src="{{ asset('storage/uploads/gallery/' . $doctorImage->filename) }}" alt="{{ $doctor->name }}">
                                                             @else
                                                                <img src="{{ asset('images/doctor01.jpg') }}" alt="Default Doctor Image">
                                                             @endif
                                                            </div>
                                                             <div class="doctor_content">
                                                             <h4>{{ $doctor->name }}</h4>
                                                                 <p>{{ $doctor->designation }}</p>
                                                             </div>
                                                    </div>
                                                </div>
                                           </div>
                                             @endforeach
                                        <!-- <div class="swiper-slide">
                                            <p>No doctors found for this department.</p>
                                        </div> -->
                                    @endif
                                </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>
                             </div>
                               </div>


                            <!-- Page Single FAQs Start -->
                        <div class="department_dtls_bttm">
                            <div class="container">
                             

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="page-single-faqs">
                            <!-- Section Title Start -->
                            <div class="section-title">
                                <h2 class="text-anime-style-3" data-cursor="-opaque">Faq</h2>
                            </div>
                            <!-- Section Title End -->

                            <!-- FAQ Accordion Start -->
                            <div class="faq-accordion" id="faqaccordion">
                                @if(isset($faqs) && $faqs->count() > 0)
                                    @foreach($faqs as $faq)
                                        <!-- FAQ Item Start -->
                                        <div class="accordion-item wow fadeInUp" data-wow-delay="{{ $loop->index * 0.2 }}s">
                                            <h2 class="accordion-header" id="heading{{ $loop->index }}">
                                                <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $loop->index }}" aria-expanded="{{ $loop->first ? 'true' : 'false' }}" aria-controls="collapse{{ $loop->index }}">
                                                    Q{{ $loop->iteration }}. {{ $faq->name }}
                                                </button>
                                            </h2>
                                            <div id="collapse{{ $loop->index }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" aria-labelledby="heading{{ $loop->index }}" data-bs-parent="#faqaccordion">
                                                <div class="accordion-body">
                                                    <p> {!! $faq->description !!}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- FAQ Item End -->
                                    @endforeach
                                @else
                                    <p>No FAQs available for this department.</p>
                                @endif
                            </div>
                            <!-- FAQ Accordion End -->
                        </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 appointment</h3>
                            <h2 class="text-anime-style-3" data-cursor="-opaque">Book an Appointment</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.bookappointment.post') }}" method="POST" data-toggle="validator">
                                @csrf
                                <input type="hidden" name="department_id" value="{{ $department->id }}">
                                <div class="row">                                
                                    <div class="form-group col-md-6 mb-4">
                                        <input type="text" name="firstname" 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="speciality_id" class="form-control form-select" id="services" required>
                                            <option value="" disabled selected>Select Services</option>
                                                                                         @php
                                $department_services= services();                                
                                @endphp
                                           
                                                @foreach($department_services as $key => $value)
                                                    <option value="{{ $key }}">{{ $value }}</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 min="{{ date('Y-m-d') }}">
                                        <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"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- Book Appointment Form End -->
                    </div>
                    <!-- Book Appointment Content End -->
                                    </div>
                                </div>
                               
                            </div>
                            
                        </div>
                                @endsection
                          @section('script')
                        <!-- Page Single FAQs End -->
                          <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