@extends('layouts.header')
@section('content')
<div class="ob-mian-content">
    @include('layouts.navbar')
    <div class="ob-mian-container">
                    <div class="section-head">
                        <a href="{{route('service',$businessslug)}}" class="back-btn"><img src="{{ asset('images/back-btn.svg') }}" alt="back" width="6" height="12" /> Back to Services + Add-ons</a>
                        <h2 class="h2-head">Find an Appointment</h2>
                        <p>Search for openings by date or search by stylist if you know who you'd like to book with.</p>
                    </div>
                    <div class="ob-mian-container-inner">
                        <div class="service-selection-category">
                            <div class="service-selection-category-lft availability-cont">
                                <div class="availability-cont-head">
                                    <h3 class="availability-cont-heading">Availability by:</h3>
                                    <div class="swicth-btns text-center">
                                        <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked />
                                        <label class="btn btn-outline-info swicth-btn" for="option1">
                                            <span class="swicth-btn-icon">
                                                <img src="{{ asset('images/day.svg') }}" width="15" height="15" alt="day icon" />
                                            </span>
                                            Day
                                        </label>

                                        <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" />
                                        <label class="btn btn-outline-info swicth-btn" for="option2">
                                            <span class="swicth-btn-icon">
                                                <img src="{{ asset('images/stylist.svg') }}" width="15" height="15" alt="stylist icon" />
                                            </span>
                                            Stylist
                                        </label>
                                    </div>
                                </div>
                                 <div class="section-head" id="service-back" style="display:none;">
                                     <a href="javascript:" onclick="StaffServiceBack()" class="back-btn"><img src="{{ asset('images/back-btn.svg') }}" alt="back" width="6" height="12"> Select a different Stylist</a>
                                                
                                </div>
                                <div class="text-end masterStylist">
                                    <span class="master-label me-2 mt-1">Master Stylist Only</span>
                                    <div class="form-group form-check form-check-inline form-switch blue-color me-0">
                                        <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked1" />
                                        <label class="form-check-label font-16" for="flexSwitchCheckChecked1">&nbsp;</label>
                                    </div>
                                </div>
                                <div class="availability-cont-btm">
                                    <div class="mobiscrollCalnedar">
                                        <div class="slotSelected">
                                            
                                        </div>
                                        <div id="mobi-calendar" class="mobi-calendar-week"></div>
                                    </div>
                                    <div class="px-md-4 px-4"><hr class="hr-line-2 m-0"/></div>
                                    <div class="px-md-3 px-4">
                                        <div class="slotsWrapper border-0">
                                            <!-- Day Slot -->
                                            <div class="availabilityDay-section">
                                                <!-- <div class="row">
                                                    <div class="col-md-4 col-sm-6 col-12">
                                                        <div class="availabilityDay-Cont">
                                                            <h2>Morning</h2>
                                                            <div class="availabilityDay-slotGird" id="accordionFlushExample">
                                                                <div class="availabilityDay-slotList" onclick="location.href='{{route("login",$businessslug)}}';">
                                                                    <input class="form-check-input" type="checkbox" value="" id="morning1" />
                                                                    <label class="service-accord-services-item" for="morning1">
                                                                        <div class="service-accord-services-item-lft pink-color-txt">
                                                                            10:00 AM
                                                                        </div>
                                                                        <div class="service-accord-services-item-rgt text-end">
                                                                            <div class="service-accord-services-item-member text-decoration-underline">
                                                                                <span><img src="{{ asset('images/slot-icon.svg') }}" width="16" height="16" alt="icon" /></span>Jenny McCarthy
                                                                            </div>
                                                                        </div>
                                                                    </label>
                                                                </div>
                                                                <div class="availabilityDay-slotList serviceAccordion">
                                                                    <input class="form-check-input" type="checkbox" value="" id="morning2" />
                                                                    <label class="service-accord-services-item p-0" for="morning2"> 
                                                                            <div class="service-accord-services-item-lft pink-color-txt">11:00 AM</div>  
                                                                    </label> 
                                                                    <div class="accordionFlex" id="flush-headingOne">
                                                                    <div class="service-accord-services-item-rgt text-end">
                                                                                <div
                                                                                    class="service-accord-services-item-member collapsed"
                                                                                    data-bs-toggle="collapse"
                                                                                    data-bs-target="#flush-collapseOne"
                                                                                    aria-expanded="false"
                                                                                    aria-controls="flush-collapseOne"
                                                                                >
                                                                                    Multiple Stylists
                                                                                </div>
                                                                            </div>
                                                                    </div> 
                                                                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                                                            <div class="multipleStylists">
                                                                                <div class="multipleStylists-slot">
                                                                                    <input class="form-check-input" type="checkbox" value="" id="select1" />
                                                                                    <label class="service-accord-services-item" for="select1">
                                                                                        <div class="service-accord-services-item-lft btn btn-primary">Select</div>
                                                                                        <div class="service-accord-services-item-rgt text-end">
                                                                                            <div class="service-accord-services-item-member text-decoration-underline">
                                                                                                <span><img src="{{ asset('images/slot-icon.svg') }}" width="16" height="16" alt="icon" /></span>Jenny McCarthy
                                                                                            </div>
                                                                                        </div>
                                                                                    </label>
                                                                                </div>
                                                                                <div class="multipleStylists-slot">
                                                                                    <input class="form-check-input" type="checkbox" value="" id="select2" />
                                                                                    <label class="service-accord-services-item" for="select2">
                                                                                        <div class="service-accord-services-item-lft btn btn-primary">Select</div>
                                                                                        <div class="service-accord-services-item-rgt text-end">
                                                                                            <div class="service-accord-services-item-member text-decoration-underline">
                                                                                                <span><img src="{{ asset('images/slot-icon.svg') }}" width="16" height="16" alt="icon" /></span>Emily D.
                                                                                            </div>
                                                                                        </div>
                                                                                    </label>
                                                                                </div>
                                                                                <div class="multipleStylists-slot">
                                                                                    <input class="form-check-input" type="checkbox" value="" id="select3" />
                                                                                    <label class="service-accord-services-item" for="select3">
                                                                                        <div class="service-accord-services-item-lft btn btn-primary">Select</div>
                                                                                        <div class="service-accord-services-item-rgt text-end">
                                                                                            <div class="service-accord-services-item-member text-decoration-underline">
                                                                                                <span><img src="{{ asset('images/slot-icon.svg') }}" width="16" height="16" alt="icon" /></span>Emily D.
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="multipleStylists-addOn">
                                                                                            <div class="addOnLeft"><img src="images/team-icon.svg" width="22" height="14" alt="team icon" /></div>
                                                                                            <div class="addOnRight">Madeline Xin</div>
                                                                                        </div>
                                                                                    </label>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4 col-sm-6 col-12">
                                                        <div class="availabilityDay-Cont">
                                                            <h2>Afternoon</h2>
                                                            <div class="availabilityDay-NoSlots">
                                                                <p class="d-none d-md-block px-1">No availability at this time for all your selected services update your cart to see more availability</p>
                                                                <p class="d-block d-md-none">No availability at this time for all your selected services. Update your update your cart to see more availability.</p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4 col-sm-6 col-12">
                                                        <div class="availabilityDay-Cont">
                                                            <h2>Evening</h2>
                                                            <div class="availabilityDay-slotGird">
                                                                <div class="availabilityDay-slotList" onclick="location.href='{{route("login",$businessslug)}}';">
                                                                    <input class="form-check-input" type="checkbox" value="" id="evening1" />
                                                                    <label class="service-accord-services-item" for="evening1">
                                                                        <div class="service-accord-services-item-lft pink-color-txt">5:30 PM</div>
                                                                        <div class="service-accord-services-item-rgt text-end">
                                                                            <div class="service-accord-services-item-member text-decoration-underline">
                                                                                <span><img src="{{ asset('images/slot-icon.svg') }}" width="16" height="16" alt="icon" /></span>Emily D.
                                                                            </div>
                                                                        </div>
                                                                    </label>
                                                                </div>
                                                                <div class="availabilityDay-slotList" onclick="location.href='{{route("login",$businessslug)}}';">
                                                                    <input class="form-check-input" type="checkbox" value="" id="evening2" />
                                                                    <label class="service-accord-services-item" for="evening2">
                                                                        <div class="service-accord-services-item-lft pink-color-txt">
                                                                            5:45 PM
                                                                        </div>
                                                                        <div class="service-accord-services-item-rgt text-end">
                                                                            <div class="service-accord-services-item-member text-decoration-underline">
                                                                                Madeline Xin
                                                                            </div>
                                                                        </div>
                                                                    </label>
                                                                </div>
                                                                <div class="availabilityDay-slotList" >
                                                                    <input class="form-check-input" type="checkbox" value="" id="evening3" />
                                                                    <label class="service-accord-services-item" for="evening3">
                                                                        <div class="service-accord-services-item-lft pink-color-txt">
                                                                            6:00 PM
                                                                        </div>
                                                                        <div class="service-accord-services-item-rgt text-end">
                                                                            <div data-bs-target="#parkerModal" data-bs-toggle="modal" class="service-accord-services-item-member text-decoration-underline">
                                                                                <span><img src="{{ asset('images/slot-icon.svg') }}" width="16" height="16" alt="icon" /></span>Parker
                                                                            </div>
                                                                        </div>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> -->
                                            </div>
                                            <!-- Day Slot -->
                                            <!-- Stylist Slot -->
                                            <div class="availabilityStylist-section">
                                                
                                            </div>
                                            <!-- Stylist Slot -->
                                            <!-- time Slot -->
                                            <div class="availabilityTime-section">
                                                
                                            </div>
                                            <!-- time Slot -->
                                        </div>
                                    </div>
                                    <div class="additionalCost-section">
                                        <ul>
                                            <li>
                                                <strong><img src="{{ asset('images/slot-icon.svg') }}" width="24" height="24" alt="slot icon" /> Master Stylist</strong> • Additional cost for service
                                            </li>
                                            <li>
                                                <span><img src="{{ asset('images/team-icon.svg') }}" width="25.14" height="16" alt="team icon" /></span>• Multiple providers will perform services
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="service-selection-category-rgt d-none d-mb-block d-sm-block">
                                <div class="service-selection-selected">
                                    <h2 class="service-selection-selected-head m-0">Services Selected</h2>
                                    <div class="selected-services">
                                                                                @if($cart_services)
                                            @foreach($cart_services as $key=>$val)
                                             @php $price = round($price+$val['price'],2); @endphp
                                        <label class="service-accord-services-item" data-service-id="cart_service_{{$val['id']}}" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;">
                                            <div class="service-accord-services-item-lft">
                                                {{$val['name']}}
                                                @if($val['service_desc'])
                                                <span><img src="{{ asset('images/info.svg') }}" width="12" height="12" alt="img" /></span>
                                                 @endif
                                            </div>
                                            <div class="service-accord-services-item-rgt text-end">
                                                <div class="service-accord-services-item-member pink-color-txt">MEMBER<span>${{ $val['member_price'] }}</span></div>
                                                <div class="service-accord-services-item-member">NON-MEMBER<span>${{ $val['non_member_price'] }}</span></div>
                                                 @if(isset($val['intro_price']) && $val['intro_price']!='0.00')
                                                <div class="service-accord-services-item-member blue-color-txt">NEW GUEST<span>${{ $val['intro_price'] }}</span></div>
                                                @endif
                                            </div>
                                        </label>
                                        @endforeach
                                     @else
                                    <p class="no-selected-services">There are currently no services selected.</p>
                                     @endif
                                     @php $dis= (($cart_services)) ? "": "disabled=disabled";
                                     $price_show = (($cart_services)) ? "style=display:flex": "";

                                    @endphp
                                    <div class="text-center font-14"><a href="{{route('service',$businessslug)}}" class="link-btn">Modify Services + Add-ons</a></div>
                                    </div>
                                    <p class="selected-services-price" {{ $price_show }}>Estimated Total (Non-Member Rate): <span>${{ (number_format($price, 2, '.', '')) ?? "" }}</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="search_staff_id" id="search_staff_id">
                <input type="hidden" name="selected_date" id="selected_date">
        


</div>

 <div class="modal hide fade parkerPopup" id="parkerModal" tabindex="-1" aria-labelledby="parkerModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" style="max-width: 306px;">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="parkerSection" id="parkerSectionId">
                           <!--  <h3>
                                <span><img src="{{ asset('images/slot-icon.svg')}}" width="24" height="24" alt="icon" /></span>Parker
                            </h3>
                            <p>Loren ipsum dolor sit amen, consectetur adipsiscing elit. Quam non nisl morbi nisl nulla duis ut. Bibendum ames pretium sit sed pharetra. Et Faucibus mattis vel viverra ut odio viverra phasellus.</p>
                            <div class="text-center">
                                <a href="" class="btn btn-outline-info pink-color-txt">6:00 PM</a>
                            </div>
                            <h6>See more availability with this provider</h6> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection
@section('customJs')
<link href="{{ asset('css/mobiscroll.jquery.min.css')}}" rel="stylesheet" media="all" />
        <script src="{{ asset('js/mobiscroll.jquery.min.js') }} "></script>
        <script type="text/javascript">

            function show_staff_desc(staff_id,time="",slot_info){
                //console.log(slot_info);
                if(staff_id!=''){
                    $.ajax({
                      url: "{{ route('get_staff_details', $businessslug) }}",
                      type: "POST",
                      data: {"_token": "{{ csrf_token() }}",staff_id:staff_id,time:time,slot_info:slot_info},
                      success: function(data1){
                        
                        if(data1!=''){
                            $('#parkerSectionId').html(data1);
                            $('#parkerModal').modal('show');

                          
                        }
                      }
                    });
                }
                
                

            }
           
            function getSlotId(slot_id,service_id,start_time,id){
                var is_master_stylist=0;
                if($("#flexSwitchCheckChecked1").prop('checked')==true){
                    var is_master_stylist=1;
                }
                console.log(is_master_stylist);
                if(slot_id!=''){
                    $.ajax({
                      url: "{{ route('add_slot', $businessslug) }}",
                      type: "POST",
                      data: {"_token": "{{ csrf_token() }}",slot_id:slot_id,service_id:service_id,start_time:start_time,id:id,is_master_stylist:is_master_stylist},
                      success: function(data1){
                        
                        if(data1!='' && data1=="success"){
                          window.location.href = "{{ route('login', $businessslug)}}";
                          
                        }
                      }
                    });
                }

            }
       
            $(document).ready(function () {
                $('.loader').show();
                $('.availabilityDay-section').html('loading..');
                let weekText;
                mobiscroll.setOptions({
                    theme: "ios",
                    themeVariant: "light",
                });

                var dateMobi = "";
                var now = new Date(),
                    year = now.getFullYear(),
                    month = now.getMonth();
                var myCalendar = $("#mobi-calendar")
                    .mobiscroll()
                    .datepicker({
                        controls: ["calendar"],
                        display: "inline",
                        calendarType: "week",
                        min: now,
                        dayNamesMin: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
                        calendarSize: 1,
                        renderCalendarHeader: function () {
                            return (
                                "<div mbsc-calendar-prev></div>" +
                                '<div mbsc-calendar-nav class="custom-view-nav"></div><div class="custom-view">' +
                                '<label class="week-icon"><input type="radio" name="view" value="week" class="view-change" checked aria-label="week"><span class="visually-hidden">Week</span></label>' +
                                '<label class="month-icon"><input type="radio" name="view" value="month" class="view-change" aria-label="month"><span class="visually-hidden">Month</span></label></div>' +
                                "<div mbsc-calendar-next></div>"
                            );
                        },
                        onInit: function (event, inst) {
                            console.log("onInit", event, inst);
                            console.log("onInit", now);
                            //console.log("event.date", event.month.getFullYear());
                            //console.log("event.value.date", event.value.date);
                            $('#selected_date').val(now);
                            var is_master_stylist=0;
                            if($("#flexSwitchCheckChecked1").prop('checked')==true){
                                var is_master_stylist=1;
                            }

                            $.ajax({
                              url: "{{ route('get_slots', $businessslug) }}",
                              type: "POST",
                              data: {"_token": "{{ csrf_token() }}",is_master_stylist:is_master_stylist},
                              success: function(data1){
                                $('.loader').hide();
                                //console.log(data1);
                                if(data1!=''){
                                  $('.availabilityDay-section').html(data1);
                                  reizeLeftCol();
                                  
                                  
                                }
                              }
                            });
                        },
                        onCellClick: function (event, inst) { 
                            $('.loader').show();
                            $(".availabilityTime-section").hide();
                            $('.availabilityTime-section').html('');
                            $(".availabilityDay-section").show();
                            $('.availabilityDay-section').html('');
                            $('.availabilityDay-section').html('loading..');
                            var staff_id=$('#search_staff_id').val(); 
                            $('#selected_date').val(event.date);
                            console.log("onInit", event, inst);
                            console.log("event.date", event.date);
                            var is_master_stylist=0;
                            if($("#flexSwitchCheckChecked1").prop('checked')==true){
                                var is_master_stylist=1;
                            }
                            $.ajax({
                              url: "{{ route('get_slots', $businessslug) }}",
                              type: "POST",
                              data: {"_token": "{{ csrf_token() }}",start_date:event.date,staff_id:staff_id,is_master_stylist:is_master_stylist},
                              success: function(data1){
                                $('.loader').hide();
                                //console.log(data1);
                                if(data1!=''){
                                  $('.availabilityDay-section').html(data1);
                                  reizeLeftCol();
                                  
                                  
                                }
                              }
                            });
                    },
                        onPageChange: function (event, inst) {
                            console.log("onPageChange", event, inst);
                        },
                        onPageLoaded: function (event, inst) {},
                        // .custom-view-nav
                    })
                    .mobiscroll("getInst");

                $(document).on("click", ".weekText", function () {
                    $(".custom-view-nav .mbsc-calendar-button").click();
                });

                $(".view-change").change(function (ev) {
                    switch (ev.target.value) {
                        case "week":
                            myCalendar.setOptions({
                                calendarType: "week",
                            });
                            $(".week-icon").hide();
                            $(".month-icon").show();
                            break;
                        case "month":
                            myCalendar.setOptions({
                                calendarType: "month",
                            });
                            $(".week-icon").show();
                            $(".month-icon").hide();
                            break;
                    }
                });
            });
        </script>

        <script>
            function StaffServiceBack() {
                $('.loader').show();
                 $(".availabilityStylist-section").show();
                 $('.availabilityStylist-section').html("Loading..");
                $('.availabilityTime-section').html('');
                $('.availabilityTime-section').hide('');
               var is_master_stylist=0;
                if($("#flexSwitchCheckChecked1").prop('checked')==true){
                    var is_master_stylist=1;
                }
                $("#option1").removeClass("active");
                $("#option2").addClass("active");
                $("#option1").removeAttr("checked","checked");
                $("#option2").attr("checked","checked");
                $.ajax({
                      url: "{{ route('get_service_staff', $businessslug) }}",
                      type: "POST",
                      data: {"_token": "{{ csrf_token() }}",is_master_stylist:is_master_stylist},
                      success: function(data1){
                       
                        if(data1!=''){
                            $('.loader').hide();
                          $('#service-back').css("display","none");
                          $(".availabilityStylist-section").show();
                          $('.availabilityStylist-section').html(data1);
                          $(".availabilityDay-section").hide();
                          $(".mobiscrollCalnedar").hide();
                        }
                      }
                    });                
            }
            $(document).ready(function () {
                $("#flexSwitchCheckChecked1").on("change", function () {
                    $('.loader').show();
                    $('.availabilityStylist-section').html("");
                    $('.availabilityTime-section').html("");
                    $('.availabilityTime-section').hide("");
                    $(".availabilityDay-section").show();
                      $(".mobiscrollCalnedar").show();
                     $('.availabilityDay-section').html('');
                    $('.availabilityDay-section').html('loading..');
                    var is_master_stylist=0;
                    if ($(this).prop('checked')==true){ 
                        var is_master_stylist=1;   
                    }
                    var staff_id=$('#search_staff_id').val(); 
                    var date=$('#selected_date').val(); 
                    var is_master_stylist=0;
                    if($("#flexSwitchCheckChecked1").prop('checked')==true){
                        var is_master_stylist=1;
                    }
                    var route="{{ route('get_slots', $businessslug) }}";
                    if($("#option1").prop('checked')==true){
                         route="{{ route('get_slots', $businessslug) }}";
                         
                    }
                    if($("#option2").prop('checked')==true){
                         route="{{ route('get_service_staff', $businessslug) }}";

                    }
                    if($("#flexSwitchCheckChecked1").prop('checked')==true){
                        var is_master_stylist=1;
                    }
                    //console.log(route);

                    $.ajax({
                      url: route,
                      type: "POST",
                      data: {"_token": "{{ csrf_token() }}",staff_id:staff_id,start_date:date,is_master_stylist:is_master_stylist},
                      success: function(data1){
                        //console.log(data1);
                        if(data1!=''){
                            $('.loader').hide();
                          
                          if($("#option2").prop('checked')==true){
                            $('.availabilityDay-section').html('');
                             $(".availabilityStylist-section").html("");
                             $(".availabilityStylist-section").show();
                             $('.availabilityStylist-section').html(data1);
                             reizeLeftCol();
                            $(".mobiscrollCalnedar").hide();
                        }else{
                             $('.availabilityDay-section').html(data1);
                             reizeLeftCol();
                            $(".mobiscrollCalnedar").show();
                        }

                          
                          
                        }
                      }
                    });
                });
                // Listen for changes on either radio button
                $('input[name="options"]').on("change", function () {
                    console.log('stylist');
                    $('.loader').show();
                    if ($("#option2").is(":checked")) {
                        var is_master_stylist=0;
                        if($("#flexSwitchCheckChecked1").prop('checked')==true){
                            var is_master_stylist=1;
                        }
                        $(this).closest(".service-selection-category-lft").addClass("active");
                        $.ajax({
                              url: "{{ route('get_service_staff', $businessslug) }}",
                              type: "POST",
                              data: {"_token": "{{ csrf_token() }}",is_master_stylist:is_master_stylist},
                              success: function(data1){
                               $('.loader').hide();
                                if(data1!=''){
                                  $(".availabilityStylist-section").show();
                                  $('.availabilityStylist-section').html(data1);
                                  $(".availabilityDay-section").hide();
                                  $(".mobiscrollCalnedar").hide();
                                }
                              }
                            });
                        
                       
                    } else if ($("#option1").is(":checked")) {
                        $('.loader').show();
                         $('#search_staff_id').val("");
                         $(".availabilityDay-section").show();
                         $('.availabilityDay-section').html('');
                            $('.availabilityDay-section').html('loading..');
                            var staff_id=$('#search_staff_id').val(); 
                            var date=$('#selected_date').val(); 
                            var is_master_stylist=0;
                            if($("#flexSwitchCheckChecked1").prop('checked')==true){
                                var is_master_stylist=1;
                            }
                            $.ajax({
                              url: "{{ route('get_slots', $businessslug) }}",
                              type: "POST",
                              data: {"_token": "{{ csrf_token() }}",start_date:date,is_master_stylist:is_master_stylist},
                              success: function(data1){
                                $('.loader').hide();
                                //console.log(data1);
                                if(data1!=''){
                                  $('.availabilityDay-section').html(data1);
                                  reizeLeftCol();
                                  
                                  
                                }
                              }
                            });

                        $(this).closest(".service-selection-category-lft").removeClass("active");
                        $(".availabilityStylist-section").hide();
                        $(".mobiscrollCalnedar").show();
                        $(".availabilityTime-section").hide();
                        $(".slotSelected").css("display", "none");
                        $(".mobiscrollCalnedar").show();
                    }
                });

                $('input[id="stylist1"]').on("click", function () {
                     console.log('stylist date');
                    // Add a class to the parent div with class availability-cont-btm
                    $(".availabilityStylist-section").hide();
                    $(".availabilityTime-section").show();
                    $(".mobiscrollCalnedar").show();
                    $(".slotSelected").css("display", "inline-block");
                });


                
                $(".collapsed").on("click", function () {
        if($(this).hasClass('accordion')){
        }
        else{
        $(this).parent().parent().parent().toggleClass('border-black');
        }
    }); 
                
            });

             

            function serviceStaffAvailability(id,name){
                $('.loader').show();
                 $("#option1").removeClass("active");
                $("#option2").addClass("active");
                $("#option1").removeAttr("checked","checked");
                $("#option2").attr("checked","checked");
                $("#parkerModal").modal('hide');
                $(".availabilityDay-section").html('');
                $(".availabilityDay-section").hide();
                $(".availabilityStylist-section").hide();
                $(".availabilityTime-section").show();
                $('.availabilityTime-section').html('loading...');
                $('#search_staff_id').val(id);

               //var staff_name= $("#stylist"+id).attr("data-name");
               var staff_name= name;
               var date=$('#selected_date').val(); 
               var is_master_stylist=0;
                if($("#flexSwitchCheckChecked1").prop('checked')==true){
                    var is_master_stylist=1;
                }
                 $.ajax({
                              url: "{{ route('get_slots', $businessslug) }}",
                              type: "POST",
                              data: {"_token": "{{ csrf_token() }}",start_date:date,staff_id:id,is_master_stylist:is_master_stylist},
                              success: function(data1){
                                //console.log('here');
                               // console.log(data1);
                                $('.loader').hide();
                                if(data1!=''){
                                     $('#service-back').css("display","block");
                                    $(".mobiscrollCalnedar").show();
                                    $(".slotSelected").css("display", "inline-block");
                                    $('.availabilityTime-section').html(data1);
                                    var is_stylist=$('#is_staff_master_stylist').val();
                                   // console.log(is_stylist);
                                    var cnt ='<span><small>';
                                    if(is_stylist==1){
                                         cnt +='<img src="{{ asset("images/slot-icon.svg") }}"width="24" height="24" alt="slot icon"/>';

                                    }
                                    
                                    cnt += '</small>'+staff_name+'</span>';
                                    $(".slotSelected").html(cnt);
                                  //$('.availabilityTime-section').html(data1);
                                  
                                  
                                }
                              }
                            });

            }

           /* $('input.form-check-input:checkbox:checked').each(function () {
                    var sThisVal = $(this).val();
                    alert(sThisVal);
                });*/
// $('.service-accord-services-item-lft-cursor').css('width', `calc(100% - 100px)`)
            function reizeLeftCol(){
                $('.service-accord-services-item').each(function() {
                    var leftCursor = $(this).find('.service-accord-services-item-lft-cursor');
                    var rightItem = $(this).find('.service-accord-services-item-rgt');
                    
                    var leftWidth = leftCursor.outerWidth();
                    var rightWidth = rightItem.outerWidth();
                    
                    console.log(`Left Width: ${leftWidth}, Right Width: ${rightWidth}`);

                    leftCursor.css('width', 'calc(100% - '+rightWidth+'px)');
                });
            }
     // $(window).on('load', function(){
     //    setTimeout(function(){
     //        $('.service-accord-services-item').each(function() {
     //            var leftCursor = $(this).find('.service-accord-services-item-lft-cursor');
     //            var rightItem = $(this).find('.service-accord-services-item-rgt');
                
     //            var leftWidth = leftCursor.outerWidth();
     //            var rightWidth = rightItem.outerWidth();
                
     //            console.log(`Left Width: ${leftWidth}, Right Width: ${rightWidth}`);

     //            leftCursor.css('width', 'calc(100% - '+rightWidth+'px)');
     //        });
     //    }, 1000)
         
     // })
   
 


           

            
        </script>
        @endsection