@section('externalcss')

@endsection
<div class="content content-space">

    <div class="container">

        <!-- Booking -->
        <div class="row">
            <div class="col-lg-8 col-md-12">
                <div class="booking-header">
                    <h4 class="booking-title">Choose One Token From Available Tokens</h4>
                </div>

                <div class="card booking-card">
                    <div class="card-body time-slot-card-body">
                        <div class="booking-date-slider" wire:ignore>
                            <ul class="date-slider slick">
                                @foreach($calenderdates as $key => $date)
                                <li @if($date==$activedate) class="active" @endif  wire:click="setdate('{{$date}}')" style="cursor: pointer;">
                                    <h4>{{\Carbon\Carbon::parse($date)->format('l')}}</h4>
                                    <p @if($date==$activedate) class="text-dark" @endif >{{\Carbon\Carbon::parse($date)->format('M d')}}</p>
                                </li>
                                @endforeach

                            </ul>
                        </div>
                        <div class="row" wire:ignore.self>
                            @if(sizeof($slotschedules)>0)
                                @foreach($slotschedules as $slotschedule)
                                    <div
                                        class="@if(12/sizeof($slotschedules) == 12) col-lg-12 col-md-12 @elseif(12/sizeof($slotschedules) == 6) col-lg-6 col-md-6 @else col-lg-4 col-md-4 @endif"
                                        style="height: 400px; overflow-y: hidden; scrollbar-width: thin; position: relative;"
                                        onmouseover="this.style.overflowY='auto';"
                                        onmouseout="this.style.overflowY='hidden';">
                                        <div class="time-slot time-slot-blk">
                                            <h4>{{$slotschedule->session_name}}</h4>
                                            <div class="time-slot-list">
                                                <ul>
                                                                                                        @foreach($slotschedule->get_free5_online_slot_tokens as $key => $token)
                                                        @if($tokenLimit > $count )
                                                            <li>
                                                                @if($selected_slot == $token->id)

                                                                    <a class="timing" href="javascript:void(0);"
                                                                       style="background-color: #b21b1d; color: #fff;">
                                                                        <span><i class="fa fa-ticket"></i> Token No : <b>{{$token->token_id}}</b>  (<span class="fs-9" style="font-size: 10px;">Expected Time: <i class="feather-clock"></i> {{\Carbon\Carbon::parse($token->start_time)->format('h:i A')}}</span>)</span>
                                                                    </a>
                                                                @else
                                                                    <a class="timing" href="javascript:void(0);"
                                                                       wire:click="selectslot('{{$token->slot_schedule_id}}','{{$token->id}}','{{$token->start_time}}')">
    {{--                                                                    <span><i class="feather-clock"></i> {{\Carbon\Carbon::parse($token->start_time)->format('h:i A')}}</span>--}}
                                                                        <span><i class="fa fa-ticket"></i> Token No : <b>{{$token->token_id}}</b></span>
                                                                    </a>
                                                                @endif

                                                            </li>
                                                                                                                        @else
                                                            @break
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="text-center col-md-12">
                                    <h4 class="text-danger">No Sessions Available</h4>
                                </div>
                            @endif

                        </div>
                    </div>
                </div>
                <div class="booking-btn">
                  {{--  @if($this->selected_slot !="")

                    @else
                        <a href="javascript:void(0);" disabled style="opacity: 0.2;" class="btn btn-secondary justify-content-center align-items-center">
                            Next <i class="feather-arrow-right-circle"></i>
                        </a>
                    @endif--}}

                    <a href="javascript:void(0);"  @if($this->selected_slot !="")  @else disabled style="opacity: 0.2;" @endif wire:click="nextbooking2" @if($this->selected_slot !="")  class="btn btn-primary prime-btn justify-content-center align-items-center" @else class="btn btn-secondary justify-content-center align-items-center" @endif >
                        Next <i class="feather-arrow-right-circle"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-12">
                <div class="booking-header">
                    <h4 class="booking-title">Booking Summary</h4>
                </div>
                <div class="card booking-card">
                    <div class="card-body booking-card-body">
                        <div class="booking-doctor-details">
                            <div class="booking-doctor-left">
                                <div class="booking-doctor-img">
                                    <a href="/DoctorProfile/{{$doctordetails['id']}}">
                                        @if($doctordetails)
                                            @endif
                                            @if($doctordetails['image'])

                                                <img src="{{\Illuminate\Support\Facades\Storage::disk('s3')->url($doctordetails['image'])}}" alt="{{$doctordetails['doctor_name']}}">
                                            @else
                                                @if($doctordetails['gender']=="Male")
                                                    <img src="{{asset('assetswebnew/img/yodr/doctor_men.png')}}"  alt="{{$doctordetails['doctor_name']}}">
                                                @else
                                                    <img src="{{asset('assetswebnew/img/yodr/doctor_women.png')}}" alt="{{$doctordetails['doctor_name']}}">
                                                @endif

                                            @endif

                                    </a>
                                </div>
                                <div class="booking-doctor-info">
                                    <h4><a href="/DoctorProfile/{{$doctordetails['id']}}">{{$doctordetails['doctor_name']}}</a></h4>
                                    <p style="font-size: 14px;">{{$doctordetails['specialist_name']}} <br/>at <strong>{{$doctordetails['clinic_name']}}</strong></p>
                                </div>
                            </div>
                            <div class="booking-doctor-right">
                                <p>
                                    <a href="/Search">Change</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card booking-card">
                    <div class="card-body booking-card-body">
                        <div class="booking-doctor-details">
                            <div class="booking-device">
                                <div class="booking-device-img">
                                    <img src="assetswebnew/img/icons/device-message.svg" alt="device-message">
                                </div>
                                <div class="booking-doctor-info">
                                    <h3>We can help you</h3>
                                    <p class="device-text">{{env('SUPPORT_NO')}}</p>
                                    <a href="tel:{{env('SUPPORT_NO')}}" class="btn">Call Us</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-0 card booking-card">
                    <div class="card-body booking-card-body">
                        <div class="booking-doctor-details">
                            <div class="booking-device">
                                <div class="booking-device-img">
                                    <img src="assetswebnew/img/icons/smart-phone.svg" alt="smart-phone">
                                </div>
                                <div class="booking-doctor-info">
                                    <h3>Get the App</h3>
                                    <p class="device-text">Download our app for better experience and for more feature</p>
                                    <div class="app-images">
                                        <a href="https://play.google.com/store/apps/details?id=com.yobytech.yodr_appointment&pcampaignid=web_share" target="_blank">
                                            <img src="assetswebnew/img/google-img.svg" alt="google-image">
                                        </a>
                                        <a href="javascript:void(0);">
                                            <img src="assetswebnew/img/app-img.svg" alt="app-image">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Booking -->
    </div>

</div>

@section('externaljs')
    <!-- Daterangepikcer JS -->
    <script src="{{asset('assetswebnew/plugins/daterangepicker/daterangepicker.js')}}"></script>

    <script>

        function showmore(classname){
            //$(".time-slot-"+classname).slideUp();
            $(".load-more-"+classname).toggleClass("show");
            $(".time-slot-"+classname).slideToggle();
        }

    </script>

@endsection