@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">Online Consultation</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Online Consultation</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <div class="international_patient">

        <div class="container">
@php
$title='';
$description='';
          if(isset($onlineconsultaion)){
                     foreach($onlineconsultaion as $onlineconsultaion_res){
                     if($onlineconsultaion_res->type=='heading'){
$title=$onlineconsultaion_res->name;
$description=$onlineconsultaion_res->description;

                     }
}
          }
          @endphp 
                    <div class="plan_trip_top_cont">
                    <!-- Section Title Start -->
                        <div class="section-title">
                            <h3 class="wow fadeInUp">{{$title}}</h3>
                            <h2 class="text-anime-style-3" data-cursor="-opaque">Online Consultation </h2>
                            <p class="wow fadeInUp" data-wow-delay="0.2s">
                            </p>
                        </div>
                        <!-- Section Title End -->
                         </div>
              
            
            <div class="onlineconsultation_outer">
                <div class="row">
                    <div class="col-md-12">
                        <div class="onlineconsult_top">
                        <p class="wow fadeInUp" data-wow-delay="0.2s">
               {{$description}}
                        </p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="step_timeline_outer">
                              @php
                     $i=0;
                     @endphp
                     @isset($onlineconsultaion)
                     @foreach($onlineconsultaion as $onlineconsultaion_res)
                     @if($onlineconsultaion_res->type=='step')
                     @php
                     $i++;
                     @endphp
                    <div class="timeline-step">
                <div class="dot">{{$i}}</div>
                <div class="content">
                <h3>{{$onlineconsultaion_res->name}}</h3>
                <p>{{$onlineconsultaion_res->description}}</p>
                </div>
                </div>
                @endif
                @endforeach
                @endisset
                </div>

                    </div>
                    <div class="col-md-6">
                        <!-- Book Appointment Content Start -->
                    <div class="book-appointment-content">
                        
                        <!-- 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" enctype="multipart/form-data">
                                @csrf
                                <div class="row">      
                                    <div class="form-group col-md-6 mb-4">
                                        <select name="department_id" class="form-control form-select" id="department_id" required>
                                            <option value="" >Choose Department</option>
                                            @foreach($department as $item)
                                                <option value="{{ $item->id }}" >{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <div class="help-block with-errors text-danger"></div>
                                    </div>   
                                    <div class="form-group col-md-6 mb-4">
                                        <select name="speciality_id" class="form-control form-select" id="speciality_id" required>
                                            <option value="" disabled selected>Speciality</option>
                                            @foreach($specialties as $item)
                                                <option value="{{ $item->id }}" >{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <div class="help-block with-errors text-danger"></div>
                                    </div>     
                             
                                      <div class="form-group col-md-6 mb-4">
                                        <select name="doctor_id" class="form-control form-select" id="doctor_id" required>
                                            <option value="" >Choose Doctor</option>
                                            @foreach($doctors as $item)
                                                <option value="{{ $item->id }}" >{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <div class="help-block with-errors text-danger"></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 text-danger"></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-6 mb-4">
                                        <input type="text" name="firstname" class="form-control" id="firstname" placeholder="First Name" required>
                                        <div class="help-block with-errors text-danger"></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 text-danger"></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 text-danger"></div>
                                    </div>
                                    <div class="form-group col-md-12 mb-4">
                                        <label class="toptextform">Upload Your Medical Report</label>
                                        <input type="file" name="file" class="form-control" id="file" >
                                        <div class="help-block with-errors text-danger"></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="form-group col-md-12 mb-4">
                                        <div class="form_agree">
                                        <input  type="checkbox" name="privacy_policy" required >
                                        <div class="form_agree_box">I accept the T&amp;C and <a href="https://www.sunrisehospitalcochin.com/" target="_blank">privacy policy</a> of Sunrise Hospital and agree to be contacted via email &amp; WhatsApp with news &amp; updates.</div>
                                        </div>
                                    </div>
                             
                                    
                                    <div class="col-md-12">
                                        <button type="submit" class="btn-default"><span>Request</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>

                <!------------doctor slider start ----------->
                 <div class="consultaion_slider_doctor">
                                <div class="facilities-slider-doctors">
                                    <div class="section-title">
                                          <h4 class="text-anime-style-3" data-cursor="-opaque">Our Doctors</h4>
                                     </div>
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    <!-- slide start -->
                                       @if(isset($doctor))
  @foreach($doctor as $doctor)
                    <div class="swiper-slide">
                      <div 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
                                $gallery = $doctor->galleries(3)->first();
                                $imagePath = $gallery ? asset('storage/uploads/gallery/' . $gallery->filename) : asset('assets/img/thumbnail-default.jpg');
                            @endphp
                            <img src="{{ $imagePath }}" alt="{{ $doctor->name }}">                           
                          </div>
                          <div class="doctor_content">
                            <h4>{{ $doctor->name }}</h4>
                            <p>{{ $doctor->designation }}</p>
                          </div>
                        </div>
                      </div>
                    </div>             
          @endforeach
           @endif 
                                     <!-- 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>

                <!-----doctor slider end--------->
            </div>
        </div>
    </div> 
    <!-- What We Do Section End -->
@endsection
@section('script')
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(document).ready(function () {
                // Filter Specialties and Doctors by Department
                $('#department_id').change(function() {
                    let departmentId = $(this).val();
                    
                    if(departmentId) {
                        // Fetch Specialties
                        $.get("{{ route('frontend.getSpecialties') }}", { department_id: departmentId }, function(data) {
                            let specialtyDropdown = $('#speciality_id');
                            specialtyDropdown.empty();
                            specialtyDropdown.append('<option value="" disabled selected>Speciality</option>');
                            $.each(data, function(index, item) {
                                specialtyDropdown.append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                        });

                        // Fetch Doctors
                        $.get("{{ route('frontend.getDoctors') }}", { department_id: departmentId }, function(data) {
                            let doctorDropdown = $('#doctor_id');
                            doctorDropdown.empty();
                            doctorDropdown.append('<option value="">Choose Doctor</option>');
                            $.each(data, function(index, item) {
                                doctorDropdown.append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                        });
                    }
                });

                // 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