@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>
                                    <p class="wow fadeInUp">We understand that true recovery takes time, trust & 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 & 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">We understand that true recovery takes time, trust & the right guidance. That's why we've built our services around continuous care, 
                                        empathetic support, and proven clinical practices.</p>
                                  
                                </div>
                                <!-- Service Empower Content End --> 

                                <!-- Service Empower Image Start -->
                                <div class="service-empower-image">
                                    <figure class="image-anime reveal">
                                        <img src="images/service-empower-image.jpg" alt="">
                                    </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="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="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="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="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">
                                    <!-- slide start -->
                                    <div class="swiper-slide">
                                        <div class="facilities-item wow fadeInUp">
                                            <div class="facilities_image">
                                                <img src="images/facilities01.jpg">
                                            </div>
                                             <h3>Operation Theatres with HEPA Filter & Laminar Flow</h3>
                                        </div>
                                    </div>
                                     <!-- slide End -->
                                      <!-- slide start -->
                                    <div class="swiper-slide">
                                        <div class="facilities-item wow fadeInUp">
                                            <div class="facilities_image">
                                                <img src="images/facilities02.jpg">
                                            </div>
                                             <h3>C Arm Advanced Patient Monitors</h3>
                                        </div>
                                    </div>
                                     <!-- slide End -->
                                      <!-- slide start -->
                                    <div class="swiper-slide">
                                        <div class="facilities-item wow fadeInUp">
                                            <div class="facilities_image">
                                                <img src="images/facilities03.jpg">
                                            </div>
                                             <h3>MGB Germany Laparoscopic System</h3>
                                        </div>
                                    </div>
                                     <!-- slide End -->
                                      <!-- slide start -->
                                    <div class="swiper-slide">
                                        <div class="facilities-item wow fadeInUp">
                                            <div class="facilities_image">
                                                <img src="images/facilities01.jpg">
                                            </div>
                                             <h3>Operation Theatres with HEPA Filter & Laminar Flow</h3>
                                        </div>
                                    </div>
                                     <!-- slide End -->
                                      <!-- slide start -->
                                    <div class="swiper-slide">
                                        <div class="facilities-item wow fadeInUp">
                                            <div class="facilities_image">
                                                <img src="images/facilities02.jpg">
                                            </div>
                                             <h3>C Arm Advanced Patient Monitors</h3>
                                        </div>
                                    </div>
                                     <!-- slide End -->
                                      <!-- slide start -->
                                    <div class="swiper-slide">
                                        <div class="facilities-item wow fadeInUp">
                                            <div class="facilities_image">
                                                <img src="images/facilities03.jpg">
                                            </div>
                                             <h3>MGB Germany Laparoscopic System</h3>
                                        </div>
                                    </div>
                                     <!-- slide End -->
                                </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">
                                    <!-- 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="#">Book an Appointment</a></li>
                                                                <li><a href="#">Profile</a></li>
                                                             </ul>
                                                     </div>
                                                     <img src="images/doctor01.jpg">
                                                    </div>
                                                     <div class="doctor_content">
                                                     <h4>Dr. Hafeez Rahman Padiyath</h4>
                                                         <p>Anaesthesiology</p>
                                                     </div>
                                            </div>
                                        </div>
                                   </div>
                                     <!-- slide End -->
                                      <!-- 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="#">Book an Appointment</a></li>
                                                                <li><a href="#">Profile</a></li>
                                                             </ul>
                                                     </div>
                                                     <img src="images/doctor01.jpg">
                                                    </div>
                                                     <div class="doctor_content">
                                                     <h4>Dr. Hafeez Rahman Padiyath</h4>
                                                         <p>Anaesthesiology</p>
                                                     </div>
                                            </div>
                                        </div>
                                   </div>
                                     <!-- slide End -->
                                      <!-- 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="#">Book an Appointment</a></li>
                                                                <li><a href="#">Profile</a></li>
                                                             </ul>
                                                     </div>
                                                     <img src="images/doctor01.jpg">
                                                    </div>
                                                     <div class="doctor_content">
                                                     <h4>Dr. Hafeez Rahman Padiyath</h4>
                                                         <p>Anaesthesiology</p>
                                                     </div>
                                            </div>
                                        </div>
                                   </div>
                                     <!-- slide End -->
                                      <!-- 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="#">Book an Appointment</a></li>
                                                                <li><a href="#">Profile</a></li>
                                                             </ul>
                                                     </div>
                                                     <img src="images/doctor01.jpg">
                                                    </div>
                                                     <div class="doctor_content">
                                                     <h4>Dr. Hafeez Rahman Padiyath</h4>
                                                         <p>Anaesthesiology</p>
                                                     </div>
                                            </div>
                                        </div>
                                   </div>
                                     <!-- slide End -->
                                      <!-- 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="#">Book an Appointment</a></li>
                                                                <li><a href="#">Profile</a></li>
                                                             </ul>
                                                     </div>
                                                     <img src="images/doctor01.jpg">
                                                    </div>
                                                     <div class="doctor_content">
                                                     <h4>Dr. Hafeez Rahman Padiyath</h4>
                                                         <p>Anaesthesiology</p>
                                                     </div>
                                            </div>
                                        </div>
                                   </div>
                                     <!-- slide End -->
                                      <!-- 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="#">Book an Appointment</a></li>
                                                                <li><a href="#">Profile</a></li>
                                                             </ul>
                                                     </div>
                                                     <img src="images/doctor01.jpg">
                                                    </div>
                                                     <div class="doctor_content">
                                                     <h4>Dr. Hafeez Rahman Padiyath</h4>
                                                         <p>Anaesthesiology</p>
                                                     </div>
                                            </div>
                                        </div>
                                   </div>
                                     <!-- slide End -->
                                      <!-- 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="#">Book an Appointment</a></li>
                                                                <li><a href="#">Profile</a></li>
                                                             </ul>
                                                     </div>
                                                     <img src="images/doctor01.jpg">
                                                    </div>
                                                     <div class="doctor_content">
                                                     <h4>Dr. Hafeez Rahman Padiyath</h4>
                                                         <p>Anaesthesiology</p>
                                                     </div>
                                            </div>
                                        </div>
                                   </div>
                                     <!-- slide End -->
                                     <!-- slide End -->
                                </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>
                                            @if($department->treatments->count() > 0)
                                                @foreach($department->treatments as $treatment)
                                                    <option value="{{ $treatment->id }}">{{ $treatment->title }}</option>
                                                @endforeach
                                            @endif
                                        </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"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- Book Appointment Form End -->
                    </div>
                    <!-- Book Appointment Content End -->
                                    </div>
                                </div>
                               
                            </div>
                            
                        </div>
                        <!-- Page Single FAQs End -->
@endsection