@extends('front.layouts.master')

@section('css')
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css"
        rel="stylesheet">
@endsection

@section('content')
    <!-- banner section start -->
    <section class="description-banner">
        <div class="container">
            <div class="banner-content">
                <h1 class="text-light font-heavy">Appointment</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item font-medium text-light"><a href="{{ route('front.home') }}">Home</a></li>
                        <li class="breadcrumb-item text-light font-medium">Appointment</li>
                    </ol>
                </nav>
            </div>
        </div>
    </section>
    <!-- banner section end -->

    <!-- start book-appointment -->
    <section class="book-appointment">
        <div class="container">
            <div class="row">
                <div class="heading facility-heading mb-4">
                    <h2>Book An Appointment</h2>
                </div>
                <div class="col-12 col-xl-8">
                    <div class="appointment-list">
                        <form action="{{ route('front.book-appointment') }}" class="row">
                            <div class="col-12 col-md-2 mb-3">
                                <input type="text" placeholder="Doctor..." value="{{ $inputs['name'] ?? null }}"
                                    name="name" class="form-control font-medium">
                            </div>
                            <div class="col-12 col-md-3 mb-3">
                                {{ Form::select('department', $departments, $inputs['department'] ?? null, ['class' => 'form-select font-medium', 'style' => 'color: #4C4C4C;']) }}
                            </div>
                            <div class="col-12 col-md-3 mb-3">
                                {{ Form::select('designation', $designations, $inputs['designation'] ?? null, ['class' => 'form-select font-medium', 'style' => 'color: #4C4C4C;']) }}
                            </div>
                            <div class="col-12 col-md-2 mb-3">
                                {{ Form::select('gender', gender(true, '', 'Gender'), $inputs['gender'] ?? null, ['class' => 'form-select font-medium', 'style' => 'color: #4C4C4C;']) }}
                            </div>
                            <div class="col-12 col-md-2 mb-3">
                                <button type="submit" class="btn btn-primary border-0">
                                    <i class="fa fa-search"></i>
                                </button>
                                <a href="{{ route('front.book-appointment') }}" class="btn btn-danger border-0">
                                    <i class="fa fa-refresh"></i>
                                </a>
                            </div>
                        </form>
                        <div class="apointment">

                            @if (isset($doctors) && count($doctors) > 0)
                                @php $path = DOCTOR_PATH; @endphp

                                @foreach ($doctors as $row)
                                    <div class="appointment-box mb-4">
                                        <div
                                            class="row text-center text-md-left justify-content-md-between align-items-md-center">
                                            <div class="col-12 col-md-5">
                                                <div class="doctor-details d-flex align-items-md-center">
                                                    <img src="{!! image($row->image, $path) !!}" alt="{{ $row->name }}" />
                                                    <div class="detail mt-3 mt-md-0  text-start ms-3">
                                                        <h4 class="font-bold text-uppercase mb-md-0">{{ $row->name }}
                                                        </h4>
                                                        <p class="font-medium text-primary">{{ $row->designations }}</p>

                                                        <h5 class="font-bold mb-md-0">
                                                            Specialties: <span class="text-primary font-extraBold">
                                                                {{ $row->departments }}</span>
                                                        </h5>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-4 mt-2 mt-md-0">
                                                <div class="schedule">
                                                    <h4 class="font-bold m-0">Days Availability</h4>
                                                    <p class="font-medium my-1">
                                                        @php
                                                            $weekDaysNames = days();
                                                            $disableDays = array_keys($weekDaysNames);
                                                            $opdDays = explode(',', $row->opd_days);
                                                            $disableDays = array_diff($disableDays, explode(',', $row->opd_days));
                                                            echo implode(', ', array_intersect_key($weekDaysNames, array_flip($opdDays)));
                                                        @endphp
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-3 mt-3 mt-md-0">
                                                <button data-days="{{ implode(',', $disableDays) }}"
                                                    data-doctor="{{ $row->id }}"
                                                    class="btn btn-primary text-uppercase border-0 font-semiBold book-btn">
                                                    Book An Appointment
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="row">
                                    <div class="col-md-12">{!! $doctors->links('pagination::bootstrap-4') !!}</div>
                                </div>
                            @else
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="alert alert-warning" role="alert">
                                            <i class="fa fa-exclamation-triangle"></i>
                                            No Matches Found !!!
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="row">
                        <div class="col-12 col-md-5 col-xl-12">
                            <div class="need-help mt-4 mt-xl-0">
                                <h3 class="font-bold mb-0">Need any help?</h3>
                                <p>Contact Feel Free to Us</p>
                                <a href="tel:+0181 5017777" class="font-extraBold mt-3 d-block">
                                    <i class="fa-solid fa-phone text-primary"></i>
                                    0181 5017777 ,+91 81451 81451</a>
                            </div>
                        </div>
                        <div class="col-12 col-md-7 col-xl-12">
                            <div class="emergency mt-4">
                                <div class="heading facility-heading mb-4">
                                    <h2 class="font-heavy text-uppercase">Emergency <span
                                            class="text-primary">Service</span>
                                    </h2>
                                </div>
                                <p>Bad times come without a warning. The Ambulances of Hospital are specially
                                    designed
                                    to keep the critically ill or severely hurt patients safe. There is an Advanced
                                    Cardiac Life
                                    Support facility in-built in our Ambulances.</p>
                                <span class="d-block mt-4">
                                    <img src="{{ asset('front/assets/img/emergency-number.png') }}" class="w-100 h-100"
                                        alt="">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end book-appointment -->

    <!-- start modal -->
    <div class="modal fade" id="bookAppointment">
        <div class="modal-dialog modal-dialog-centered  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5 font-heavy text-uppercase mx-auto" id="exampleModalLabel">Book an
                        Appointment</h1>
                    <span type="button" class="" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa-solid fa-xmark text-primary fs-5"></i>
                    </span>
                </div>
                <div class="modal-body">
                    <form id="book_appointment" name="book_appointment" action="{{ route('front.booking-summary') }}"
                        class="row">
                        <div class="col-12">
                            <div class="alert alert-warning" role="alert" id="message" style="display:none"></div>
                        </div>
                        <!-- Image loader -->
                        <div class="col-12">
                            <div id='loader' style='display: none; text-align: center;'>
                                <img src="{{ asset('front/assets/loader.gif') }}" width='32px' height='32px'>
                            </div>
                        </div>
                        <!-- Image loader -->
                        <input type="hidden" class="" name="d" id="doctor_id">
                        {{-- <input type="hidden" class="" name="_token" id="doctor_id" value="{{ csrf_token() }}"> --}}

                        <div class="col-12 col-lg-6">
                            <div class="apointment-slot">
                                <div class="input-container">
                                    <label for="" class="font-bold ps-2 mb-2">Date of Appointment</label>
                                    <input type="text" class="form-control" name="booking_date" id="booking_date"
                                        readonly="readonly">
                                </div>
                                <div class="slot_div">

                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6 mt-4 mt-lg-0">
                            <div class="input-container mb-3">
                                <label for="" class="font-bold ps-2 mb-2">Full Name</label>
                                <input type="text" placeholder="Eg. John" class="form-control font-medium"
                                    name="full_name" id="full_name">
                            </div>
                            <div class="input-container mb-3">
                                <label for="" class="font-bold ps-2 mb-2">Email Address</label>
                                <input type="email" placeholder="Eg.johndoe@gmail.com" class="form-control font-medium"
                                    name="email_id" id="email_id">
                            </div>
                            <div class="input-container mb-3">
                                <label for="" class="font-bold ps-2 mb-2">Phone Number</label>
                                <input type="text" placeholder=" " class="form-control font-medium"
                                    name="phone_no" id="phone_no">
                            </div>
                            <div class="input-container mb-3">
                                <label for="" class="font-bold ps-2 mb-2">Message (Optional)</label>
                                <textarea name="message" class="form-control" id="" cols="30" rows="3"></textarea>
                            </div>
                        </div>
                        <input type="hidden" name="proceed_to_pay" value="proceed_to_pay">
                        <div class="col-12">
                            <button type="submit"
                                class="btn btn-primary rounded-0 text-uppercase border-0 ms-auto d-block"
                                style="padding: 10px 25px;">PROCEED TO PAY</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--end  modal -->

@endsection

@section('bottom_script')
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
    <script>
        let doctor_id = 0;
        let booking_date = '';
        $(document).ready(function() {


            $('#booking_date').datepicker({
                format: 'dd-mm-yyyy',
                startDate: '0d',
                autoclose: true
            });

            $('.book-btn').click(function() {
                doctor_id = $(this).data('doctor');
                $('#doctor_id').val(doctor_id);

                let days = $(this).data('days');
                $('#booking_date').val('');
                $('#booking_date').datepicker('destroy');
                $('#booking_date').datepicker({
                    format: 'dd-mm-yyyy',
                    startDate: '0d',
                    daysOfWeekDisabled: days,
                    autoclose: true
                });

                //getSlots();
                document.getElementById("book_appointment").reset();
                $(".slot_div .slot").remove();
                $("#message").hide();
                $('#bookAppointment').modal('show');

            });
        });

        $('#booking_date').change(function() {
            booking_date = $(this).val();
            getSlots();
        });

        function getSlots() {
            $(".slot_div").html('');
            $.ajax({
                method: 'POST',
                url: '{{ route('front.get-slots') }}',
                data: {
                    _token: '{{ csrf_token() }}',
                    doctor_id: doctor_id,
                    booking_date: booking_date,
                },
                beforeSend: function() {
                    $('#loader').show();
                },
                success: function(response) {
                    $('#loader').hide();

                    if (response.success) {
                        //console.log(response.extra.active_slot_html);
                        $(".slot_div").html(response.extra.active_slot_html);
                        $('#message').hide();

                    } else {
                        $('#message').html(response.message);
                    }

                    //$('#bookAppointment').modal('show');
                }
            });
        }
        $(document).on("click", ".slot_timing_div", function() {
            let elm = $(this).closest('.slot');
            $('.slots').attr("checked", false);
            $('.slot_type').attr("checked", false);
            $(this).find('.slots').attr("checked", true);
            elm.find('.slot_type').attr("checked", true);
        })




 let submitformStatus = false;

$("#book_appointment").on("submit", function (event) {
    event.preventDefault(); // Prevent the default form submission

    let formData = $(this).serialize();
    formData += "&_token={{ csrf_token() }}"; // Corrected formData assignment

    $.ajax({
        method: 'POST',
        url: '{{ route('front.get-slots') }}',
        data: formData,
        beforeSend: function () {
            $('#loader').show();
        },
        success: function (response) {
            $('#loader').hide();

            if (response.success) {
                // $(".slot_div").html(response.extra.active_slot_html);
                // Do something with the successful response, e.g., update the UI

                $('#message').hide();
                submitformStatus = true; // Use a boolean value
                $("#book_appointment")[0].submit(); // Submit the form programmatically

            } else {
                $('#message').show();
                $('#message').html(response.message);
                submitformStatus = false; // Use a boolean value
            }
        }
    });
});


    </script>
@endsection