@section('externalcss')
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>


    <style>
        .date_box {
            min-height: 50px;
            border: var(--dark-green-color) dashed thin;
            border-radius: 10px;
            color: #000;
            font-weight: bold;
            cursor: pointer;
        }

        .date_box:hover {
            color: #fff;
            background-color: var(--dark-green-color);
            cursor: pointer;
        }

        .date_box_selected {
            min-height: 50px;
            border: var(--dark-green-color) dashed thin;
            background-color: var(--dark-green-color);
            color: #fff;
            font-weight: bold;
            cursor: pointer;
            border-radius: 10px;
        }


        .token_box {
            min-height: 20px;
            max-height: 40px;
            border: var(--dark-green-color) dashed thin;
            border-radius: 10px;
            color: #000;

            cursor: pointer;
        }

        .token_box:hover {
            color: #fff;
            background-color: var(--dark-green-color);
            cursor: pointer;
        }

        .token_box_selected {
            min-height: 20px;
            max-height: 40px;
            border: var(--dark-green-color) dashed thin;
            border-radius: 10px;
            background-color: var(--dark-green-color);
            /* font-weight: bold; */
            cursor: pointer;
            color: #fff;
        }

        .patient_box {
            border: var(--dark-green-color) dashed thin;
            border-radius: 10px;
        }

        .patient_box:hover {
            border: var(--dark-green-color) dashed thin;
            color: #fff;
            background-color: var(--dark-green-color);
            border-radius: 10px;
        }

        .patient_box_selected {
            color: #fff;
            background-color: var(--dark-green-color);
            border-radius: 10px;
        }
    </style>
@endsection

<div class="site-main single">


    <section class="ttm-row overview-section  res-991-mt_15 clearfix">
        <div class="ttm-team-member-single-content-wrapper ttm-team-member-view-default">
            <div class="container">
                <div class="row d-flex justify-content-center" style="margin-bottom: 100px;">
                    <select class="form-select" wire:model="location_name"
                        style="border: 1px solid #ccc; height: calc(3rem + 2px) !important; border-radius:0; width:300px;">
                        <option value="">Location</option>
                        @foreach ($locations as $location)
                            <option value="{{ $location['city'] }}">{{ $location['city'] }}</option>
                        @endforeach

                    </select>
                    {{-- <input type="text" class="form-control search-slt" wire:model="search_data"
                        style=" display: block; width: 500px; font-size: 0.875rem; line-height: 1.5; color: #55595c; background-color: #fff; background-image: none; border: 1px solid #ccc; height: calc(3rem + 2px) !important; border-radius:0;"
                        placeholder="Search doctor, speciality, clinic, etc."> --}}
                    <input class="form-control search-slt"
                        style=" display: block; width: 500px; font-size: 0.875rem; line-height: 1.5; color: #55595c; background-color: #fff; background-image: none; border: 1px solid #ccc; height: calc(3rem + 2px) !important; border-radius:0;"
                        placeholder="Search doctor, speciality, clinic, etc." list="drs" id="dr_data"
                        name="dr_data" autocomplete="off" wire:model="search_data" />
                    <!--end::Input-->
                    <datalist id="drs">
                        <option value=""></option>
                        @if (sizeof($dr_search_data) > 0)
                            @foreach ($dr_search_data as $dr_dt)
                                <option value="{{ $dr_dt }}"></option>
                            @endforeach
                        @endif
                    </datalist>
                </div>
                @if (sizeof($doctors) > 0)
                    @foreach ($doctors as $key => $dr)
                        <div class="row mt-4">
                            <div class="col-md-3 mb-3 mt-3 fw-bold">
                                <div class="featured-thumbnail padding_left20 py-6" style="margin-top: -30px;">
                                    @if ($dr['image'] == null)
                                        <img src="{{ global_asset('assets/icons/no-pictures.png') }}" width="80%"
                                            height="160" />
                                    @else
                                        <img src="{{ \Illuminate\Support\Facades\Storage::url($dr['image']) }}"
                                            width="80%" height="140" />
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="ttm-team-member-single-list">
                                    <h4 class="ttm-team-member-single-title">
                                        {{ $dr['doctor_name'] }}
                                    </h4>
                                    <h5 class="ttm-team-member-single-position">
                                        {{ $dr['specialist_name'] }}
                                    </h5>
                                    <div class="ttm-team-details-wrapper">
                                        <ul class="ttm-team-details-list clearfix">

                                            <li>
                                                <div class="ttm-team-list-title">
                                                    <i class="ti ti-support"></i> Clinic Details:
                                                </div>
                                                <div class="ttm-team-list-value">

                                                    {{ $dr['clinic_name'] }}
                                                </div>
                                            </li>
                                            <li>
                                                <div class="ttm-team-list-title">
                                                    <i class="ti ti-location-pin"></i> Address:
                                                </div>
                                                <div class="ttm-team-list-value">
                                                    {{ $dr['clinic_address'] }},
                                                    {{ $dr['clinic_city'] }},
                                                    {{ $dr['clinic_district'] }}
                                                    {{ $dr['clinic_state'] }}
                                                    {{ $dr['clinic_country'] }}
                                                    -{{ $dr['clinic_pincode'] }}
                                                </div>
                                            </li>
                                        </ul>
                                    </div>



                                </div>
                            </div>
                            <div class="col-md-3 d-flex justify-content-center align-items-center">
                                <button class="btn mt-4" style="background-color: var(--dark-green-color); color:white;"
                                    wire:key='{{ $dr['id'] }}_{{ $key }}'
                                    wire:click="show_slots({{ $key }}, {{ $dr['id'] }})"
                                    type="submit">Book Appointment</button>
                            </div>
                        </div>
                        <hr style="margin-top: -5px">
                        @if ($session_show != null && $session_show[$key] == true)
                            <div class="row">
                                <div class="col-md-12">
                                    @if ($session_show != null && $session_show[$key] == true)
                                        <div class="row d-flex justify-content-center  align-items-center">
                                            <div class="col-md-1 col-2 text-center">
                                                <span
                                                    style="border: 1px solid #bbb; border-radius: 50%; width: 40px; height: 40px; padding:5px; display: inline-block;  @if (Carbon\Carbon::parse($date1)->format('D, d M') == Carbon\Carbon::now()->format('D, d M')) pointer-events: none; cursor: not-allowed; background-color: #ffffff; @else cursor: pointer; background-color: var(--skin-color); @endif  color: #bbb;"
                                                    wire:key='{{ $dr['id'] }}_{{ $key }}'
                                                    wire:click="date_backward('{{ $key }}', '{{ $dr['id'] }}')">
                                                    <h5>
                                                        < </h5>
                                                </span>
                                            </div>
                                            <div class="col-md-2 col-2 text-center border-bottom"
                                                style="border-width:4px !important; @if ($dt1_selected[$key] == true) border-color: var(--dark-green-color) !important; @endif padding-bottom:3px; cursor: pointer;"
                                                wire:key='{{ $dr['id'] }}_{{ $key }}'
                                                wire:click="dt1_slot('{{ $key }}', '{{ $date1 }}', '{{ $dr['id'] }}')">
                                                @if (Carbon\Carbon::parse($date1)->format('D, d M') == Carbon\Carbon::now()->format('D, d M'))
                                                    <span>Today</span>
                                                @else
                                                    <span>{{ Carbon\Carbon::parse($date1)->format('D, d M') }}</span>
                                                @endif

                                                <br>
                                                @if ($today_slotcount[$key] != null)
                                                    <span
                                                        style="font-size: 12px; font-weight:500; color:#01a400">{{ $today_slotcount[$key] }}
                                                        Slots Available</span>
                                                @else
                                                    <span style="font-size: 12px; font-weight:500;">No Slots
                                                        Available</span>
                                                @endif
                                            </div>

                                            <div class="col-md-2 col-2 text-center border-bottom"
                                                style="border-width:4px !important; @if ($dt2_selected[$key] == true) border-color: var(--dark-green-color) !important; @endif padding-bottom:3px; cursor: pointer;"
                                                wire:key='{{ $dr['id'] }}_{{ $key }}'
                                                wire:click="dt2_slot('{{ $key }}', '{{ $date2 }}', {{ $dr['id'] }})">
                                                @if (Carbon\Carbon::parse($date2)->format('D, d M') == Carbon\Carbon::tomorrow()->format('D, d M'))
                                                    <span>Tomorrow</span>
                                                @else
                                                    <span>{{ Carbon\Carbon::parse($date2)->format('D, d M') }}</span>
                                                @endif
                                                <br>
                                                @if ($tmrw_slotcount[$key] != null)
                                                    <span
                                                        style="font-size: 12px; font-weight:500; color:#01a400">{{ $tmrw_slotcount[$key] }}
                                                        Slots Available</span>
                                                @else
                                                    <span style="font-size: 12px; font-weight:500;">No Slots
                                                        Available</span>
                                                @endif
                                            </div>
                                            <div class="col-md-2 col-2 text-center border-bottom"
                                                style="border-width:4px !important; @if ($dt3_selected[$key] == true) border-color: var(--dark-green-color) !important; @endif padding-bottom:3px; cursor: pointer;"
                                                wire:key='{{ $dr['id'] }}_{{ $key }}'
                                                wire:click="dt3_slot('{{ $key }}', '{{ $date3 }}', {{ $dr['id'] }})">
                                                @if ($date3 != null)
                                                    <span>{{ Carbon\Carbon::parse($date3)->format('D, d M') }}</span>
                                                @endif
                                                <br>
                                                @if ($dafttmrw_slotcount[$key] != null)
                                                    <span
                                                        style="font-size: 12px; font-weight:500; color:#01a400">{{ $dafttmrw_slotcount[$key] }}
                                                        Slots Available</span>
                                                @else
                                                    <span style="font-size: 12px; font-weight:500;">No Slots
                                                        Available</span>
                                                @endif
                                            </div>
                                            <div class="col-md-1 col-2 text-center">
                                                <span
                                                    style="border: 1px solid #bbb; border-radius: 50%; width: 40px; height: 40px; padding:5px; display: inline-block;  color: #bbb; @if (
                                                        $last_session != null &&
                                                            Carbon\Carbon::parse($date3)->format('Y-m-d') <
                                                                Carbon\Carbon::parse($last_session[$key]['session_date'])->format('Y-m-d')) cursor: pointer; background-color: var(--skin-color); @else  pointer-events: none; cursor: not-allowed; background-color: #ffffff; @endif"
                                                    wire:key='{{ $dr['id'] }}_{{ $key }}'
                                                    wire:click="date_forward('{{ $key }}', '{{ $dr['id'] }}')">
                                                    <h5>></h5>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row" style="height: 600px; overflow-y: scroll;">
                                            <div class="col-md-12">
                                                @if (sizeof($appointment_sessions[$key]) > 0 && $appointment_sessions[$key] != null)
                                                    @foreach ($appointment_sessions[$key] as $session)
                                                        <div class='row mt-4 d-flex' style="padding:0px; justify-content: center;">
                                                            <div class="col-md-2 d-flex ml-5"
                                                                style=" justify-content: center; align-items:center;">
                                                                <span>{{ $session['session_name'] }}</span>
                                                            </div>
                                                            <div class="col-md-8 offset-md-2 col-12 " style="margin-left: -18px;">
                                                                <div class="row" style="min-height: 100px; overflow-y: scroll;">
                                                                    @if ($session != null && sizeof($session['get_free_slot_tokens']) > 0)
                                                                        @foreach ($session['get_free_slot_tokens'] as $tokens)
                                                                            <div
                                                                                class="col-sm-2 col-3 px-4 py-2 mb-1 text-center" >
                                                                                <div class="row">
                                                                                    <div class="col-12  text-center @if (session('session_token_id') == $tokens['id']) token_box_selected @else token_box @endif"
                                                                                        wire:click="selectedtoken('{{ $tokens['id'] }}')">

                                                                                        <div style="margin-top:-4px;"><span
                                                                                                style="font-size: 10px;">TOKEN-{{ $tokens['token_id'] }}</span>
                                                                                        </div>

                                                                                        <div style="margin-top:-6px;"><span
                                                                                                style="font-size: 12px; ">{{ Carbon\Carbon::parse($tokens['start_time'])->format('h:i A') }}</span>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        <h5
                                                                            class="text-danger d-flex justify-content-center align-items-center">
                                                                            No Slots Available</h5>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @else
                                                <h5 class="text-danger d-flex justify-content-center align-items-end mt-5">
                                                    No Sessions Available</h5>
                                                @endif
                                            </div>
                                        </div>

                                    @endif
                                </div>
                            </div>
                            <hr>
                        @endif
                    @endforeach

                @else
                    <div class="row d-flex justify-content-center">
                        <h1>Doctors not available</h1>
                    </div>
                @endif

                {{-- <div class="row" style="margin-top: 0px; margin-bottom:10px;">
                    <div class="col-md-12  ">
                        <div class="card p-4" style="box-shadow: 0px 5px 5px #ccc;">
                            <div class="row">
                                <div class="col-md-3 mb-3 fw-bold">
                                    <div class="featured-thumbnail padding_left20 py-6" style="margin-top: -30px;">
                                        @if ($doctors->image == null)

                                                <img src="{{ global_asset('assets/icons/no-pictures.png') }}" width="100%"
                                                height="200" />
                                        @else
                                           <img src="{{ \Illuminate\Support\Facades\Storage::url($doctors->image) }}"
                                                width="100%" height="200" />
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="ttm-team-member-single-list">
                                        <h3 class="ttm-team-member-single-title">
                                            {{ $doctors->doctor_name }}
                                        </h3>
                                        <h5 class="ttm-team-member-single-position">
                                            {{ $doctors->specialist_name }}
                                        </h5>
                                        <div class="ttm-team-details-wrapper">
                                            <ul class="ttm-team-details-list clearfix">

                                                <li>
                                                    <div class="ttm-team-list-title">
                                                        <i class="ti ti-support"></i> Clinic :
                                                    </div>
                                                    <div class="ttm-team-list-value">

                                                        {{ $doctors->clinic_name }}
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="ttm-team-list-title">
                                                        <i class="ti ti-location-pin"></i> Address
                                                        Info
                                                        :
                                                    </div>
                                                    <div class="ttm-team-list-value">
                                                        {{ $doctors->clinic_address }},
                                                        {{ $doctors->clinic_city }},
                                                        {{ $doctors->clinic_district }}
                                                        {{ $doctors->clinic_state }}
                                                        {{ $doctors->clinic_country }}
                                                        -{{ $doctors->clinic_pincode }}
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>



                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}

            </div>
        </div>

    </section>

</div>


@section('externaljs')
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
        // window.onload = function () {
        //     var fiveMinutes = {{ $otptimediff }},
        //         display = document.querySelector('#time');
        //     if ( /*___directives_script_0___*/
        // ) {
        //     startTimer(fiveMinutes, display);
        // }





        function startTimer(duration, display) {
            var timer = duration,
                minutes, seconds;
            setInterval(function() {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;

                if (--timer < 0) {
                    timer = duration;
                    Livewire.emit('otpexpired');
                }
            }, 1000);
        }


        function popupmodal() {
            Swal.fire({
                text: "Are you sure you would like to close?",
                icon: "warning",
                showCancelButton: !0,
                buttonsStyling: !1,
                confirmButtonText: "Yes, close it!",
                cancelButtonText: "No, return",
                customClass: {
                    confirmButton: "btn btn-info",
                    cancelButton: "btn btn-active-light"
                }
            }).then((function(result) {

                if (result.isConfirmed) {
                    closemodal();
                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your imaginary file is safe :)',
                        'error'
                    )
                }


            }))
        }

        window.addEventListener('starttimer', event => {
            var otptimediff = event.detail.otptimediff
            var fiveMinutes = otptimediff,
                display = document.querySelector('#time');

            startTimer(fiveMinutes, display);

        });

        window.addEventListener('showsuccessmsg', event => {
            if (event.detail.type == "success") {
                showsuccessmsg(event.detail.message);
            } else {
                showerrorsmsg(event.detail.message);
            }
            //showsuccessmsg();
        });

        function showsuccessmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "success",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-success"
                }
            });
        }

        function showerrorsmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-danger"
                }
            });
        }

        var totalamount = 0;
        var ownername;
        var owneremail;
        var ownermoblieno;
        window.addEventListener('proceedtopayment', event => {

            totalamount = event.detail.netamount * 100;
            ownername = event.detail.ownername;
            owneremail = event.detail.owneremail;
            ownermoblieno = event.detail.ownermoblieno;

            var options = {
                "key": "{{ env('RAZORPAY_KEY') }}", // Enter the Key ID generated from the Dashboard
                "amount": totalamount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                "currency": "INR",
                "name": "YODR.",
                "description": "YODR. E-Clinic Management",
                "image": "{{ global_asset('assetsweb/images/finalYodrlogo.png') }}",
                "handler": function(response) {
                    paymentsuccess(response);
                    /*  alert(response.razorpay_payment_id);
                      alert(response.razorpay_order_id);
                      alert(response.razorpay_signature)*/
                },
                "prefill": {
                    "name": ownername,
                    "email": owneremail,
                    "contact": ownermoblieno
                },
                "theme": {
                    "color": "#3399cc"
                }
            };
            var rzp1 = new Razorpay(options);
            rzp1.on('payment.failed', function(response) {
                paymentfailed(response);

            });

            rzp1.open();
            //e.preventDefault();


        });

        function paymentsuccess(response) {

            Livewire.emit('paymentsuccess', response.razorpay_payment_id);
        }

        function paymentfailed(response) {

            //alert(response.error.code);
            showerrorsmsg("Sorry !!!, Payment Failed, Please Try Again !")
        }


        document.addEventListener('livewire:load', function() {
            Livewire.on('closeModal', function() {
                closeModal();
            });

            function openModal() {
                const modal = document.getElementById("myModal");
                modal.style.display = "block";
            }

            function closeModal() {
                const modal = document.getElementById("myModal");
                modal.style.display = "none";
            }
        });
    </script>
@endsection