@extends('layouts.header')
@section('content')
<div class="ob-mian-content">
            @include('layouts.navbar')
           
                        <div class="ob-mian-container">
                <div class="section-head">
                    <a href="{{ url($businessslug) }}" class="back-btn"><img src="{{ asset('images/back-btn.svg') }}" alt="back" width="6" height="12"> Back to Category</a>
                    <h2 class="h2-head">Select Your Services</h2>
                    <p>Select any number of services you'd like to schedule, then click "Find Availability" to see openings.</p>
                </div>
                <div class="ob-mian-container-inner">
                    <div class="service-selection-category">
                         <div class="service-selection-category-lft">
                            <div class="accordion service-accord" id="accordionExample">
                                @if(isset($services) && !empty($services))
                                 @foreach($services as $key=>$services)
                                <div class="accordion-item">
                                  <h2 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $key }}" aria-expanded="true" aria-controls="{{$key }}">
                                        
                                     <img class="service-accord-img" src="{{ $categories[$key]['category_image'] ? $categories[$key]['category_image'] : asset('images/default_logo.png') }}" width="40" height="40" alt="service"> 
                                      <span>{{ $categories[$key]['cat_name'] }}</span>
                                    </button>
                                    <div class="addOns-list add_on_list{{ $key }}" data-custom-attr="{{$key}}" role="button" data-bs-toggle="modal" data-bs-target="#addOnsModal">Add-ons</div>
                                  </h2>
                                  <div id="{{ $key }}" class="accordion-collapse collapse {{ ($key==session('program_id')) ?'show':''}} " data-bs-parent="#accordionExample">
                                    <div class="accordion-body service-accord-services">
                                        
                                        <div class="row service-accord-services-row">
                                            @foreach($services as $key1=>$value)


                                            <div class="col-12 col-sm-6 service-accord-services-col">
                                                <label class="service-accord-services-item" data-service-id="{{ $value['session_type_id'] }}" data-program-id="{{ $key }}">
                                                    <input id="{{ $value['session_type_id'] }}" program-id="{{ $key }}" value="{{ $value['session_type_id'] }}" type="checkbox"  name="serives" class="service-accord-services-item-check" {{ (in_array($value['session_type_id'],$cart_services_ids)?'checked':'')}} aria-label="services" >
                                                    @if($value['is_most_popular']==1)
                                                      <span class="most-popular">MOST POPULAR!</span>
                                                     @endif
                                                    <div class="service-accord-services-item-lft">
                                                        {{ ($value['service_display_name'])??$value['name'] }}
                                                        @if($value['service_desc'])
                                                        <span><img src="{{ asset('images/info.svg') }}" width="12" height="12" alt="img" ></span>
                                                        @endif
                                                        <input type="hidden" name="service_name" id="service_name_{{ $value['session_type_id'] }}" value="{{ ($value['service_display_name'])??$value['name']  }}">
                                                        <input type="hidden" name="service_desc" id="service_desc_{{ $value['session_type_id'] }}" value="{{ $value['service_desc'] }}">
                                                    </div>
                                                    <div class="service-accord-services-item-rgt text-end">
                                                        <div class="service-accord-services-item-member pink-color-txt">
                                                            MEMBER<span>${{ $value['member_price'] }}</span>
                                                        </div>
                                                        <div class="service-accord-services-item-member">
                                                            NON-MEMBER<span>${{ $value['non_member_price'] }}</span>
                                                        </div>
                                                        @if($value['intro_price']!='0.00')
                                                        <div class="service-accord-services-item-member blue-color-txt">
                                                           <strong> NEW GUEST<span>${{ $value['intro_price'] }}</span></strong>
                                                        </div>
                                                        @endif
                                                    </div>
                                                 <div class="service-accord-services-item-close">
                                                        <img src="{{ asset('images/service-close.svg') }}" width="12" height="12" alt="close">
                                                    </div>
                                                </label>
                                            </div> 
                                            @endforeach


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

                                  <input type="hidden" name="last_sel_service_id" id="last_sel_service_id">
                                 
                                  <input type="hidden" name="last_sel_program_id" id="last_sel_program_id">
                                 
                              </div>
                         </div>
                         <div class="service-selection-category-rgt">
                            <div class="service-selection-selected">
                                <h2 class="service-selection-selected-head m-0">Services Selected</h2>
                                                                <div class="selected-services">
                                     @php $all_session_ids ="" @endphp
                                     @php $all_sessionids=[] @endphp
                                    @if($cart_services)
                                   
                                    @foreach($cart_services as $key=>$val)
                                     @php $price = round($price+$val['price'],2); 
                                     $all_session_ids .=$val['id'].",";
                                     if($val['type']=="service"){
                                         $all_sessionids[]=$val['id'];
                                     }
                                    

                                     @endphp

                                    <label class="service-accord-services-item class_cart_service_{{$val['id']}}" data-service-id="cart_service_{{$val['id']}}">
                                        <div class="service-accord-services-item-lft">{{$val['name']}}</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($val['intro_price']!='0.00')
                                                <div class="service-accord-services-item-member blue-color-txt">
                                                    <strong>NEW GUEST<span>${{ $val['intro_price'] }}</span></strong>
                                                </div>
                                                @endif
                                        </div>
                                        <div class="service-accord-services-item-close">  
                                            <span onclick="return deleteCard({{$val['id']}})"> <img src="{{asset('images/service-close.svg')}}" width="12" height="12" alt="close">
                                            </span>
                                        </div>
                                    </label>
                                    @endforeach
                                    @else
                                    <p class="no-selected-services">There are currently no services selected.</p>
                                     @endif
                                     <input type="hidden" name="sel_session_ids" id="sel_session_ids" value="{{  trim($all_session_ids,',') }}">
                                </div>
                               
                                 <input type="hidden" name="last_sel_service_id1" id="last_sel_service_id1" value="{{json_encode($all_sessionids,true)}}">
                                @php $dis= (($cart_services)) ? "": "disabled=disabled";
                                     $price_show = (($cart_services)) ? "style=display:flex": "";

                                 @endphp
                                <!-- <p class="selected-services-price" {{ $price_show }}>Estimated Total (Non-Member Rate): <span id="non_memberprice">${{ (number_format($price, 2, '.', '')) ?? ""  }}</span></p> -->
                            </div>
                            <p class="no-selected-services-error" style="display:none;text-align: center;color: #C21300;" >Please select a service to find availability.</p>
                            
                            <div class="service-find-Availability"><a href="{{route('availability',$businessslug)}}" class="btn btn-primary py-1 line-height-1 w-100 find-Availability"  >Find Availability<span class="find-Availability-cart">{{ count($cart_services) }}</span></a>
                            </div>

                         </div>
                    </div>
                </div>


            </div>


              <!-- Modal -->
    <div class="modal fade" id="serviceDesc" tabindex="-1" aria-labelledby="serviceDescModalLabel" 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="minor-cont">
                        <h2 id="modal_service_title" class="font-barlow fw-medium"></h2>
                        <p id="modal_service_desc"></p>
                    </div>
                    <div class="text-center py-4">
                        <button type="button" class="btn btn-info" data-bs-dismiss="modal">Got it!</button>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>
    
            <!-- addOns Modal -->
            <div class="modal fade" id="addOnsModal" tabindex="-1" aria-labelledby="addOnsModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" style="max-width: 735px;">
                <div class="modal-content">
                    <div class="modal-header flex-wrap border-0">
                        <h2 class="modal-title w-100" id="addOnsModalLabel">Optional Add-ons</h2>
                        <p class="w-100 modal-title-sub"> Upgrade your lash look with enhanced styles.<br>
                            Not sure which style is best for you? Talk to your Lash Stylist when you arrive!</p>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="service-accord-services pb-0">
                             <input type="hidden" name="add_on_service_id_hidden" id="add_on_service_id_hidden">           
                            <div class="row" id="addon_data"> 

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer flex-wrap border-0 pt-0">
                        <div class="w-100 modal-title-sub"><a href="javascript:" onclick="remove_service_addons();">I don’t want any add-ons right now</a></div>
                        <div class="w-100 text-center">
                            <button type="button" class="btn btn-primary py-1 line-height-1 w-100 addAddon"  data-bs-dismiss="modal" style="max-width: 384px;">Add + Continue</button>
                        </div>
                    </div>
                </div>
                </div>
            </div>

        </div>
@endsection
@section('customJs')
    <!---this page -->
 <script>

    function remove_service_addons() {
        var serviceId=$('#add_on_service_id_hidden').val();
        console.log(serviceId);
         deleteCard(serviceId,"addon");
         $('#addOnsModal').modal('hide');

    }
    function mergeAndUnique(arr1, arr2) {
        const mergedArray = [...arr1, ...arr2];
        const cleanedArray = mergedArray.filter(item => item !== ',' && item.trim() !== '');
        const uniqueArray = [...new Set(cleanedArray)];
        return uniqueArray;
    }
      $(document).ready(function () {
       var p_id= @json(session('program_id'));
        $('#last_sel_program_id').val(p_id);
       $('.addOns-list').hide();
       var listn=new Array();
       var listn= $('#last_sel_service_id1').val();
       console.log(JSON.parse(listn));
       $('#last_sel_service_id').val(JSON.parse(listn));
        add_on_popupclick("",p_id);
        
        var list = new Array(); // a place to store the selection order
        $('.service-accord-services-item-check').on("change", function(e) {
            var parentItem = $(this).closest('.service-accord-services-item');
            var programId = parentItem.attr('data-program-id');
              $('#last_sel_program_id').val(programId);
          var n= $('#last_sel_service_id').val();
          let boxval = $(this).val();
          if ($(this).is(':checked')) {
            list.push(boxval);
              if(n!=''){
                if (typeof n === 'string') {
                n = n.split(',');  // Converts string to array
                 }
            let index = n.indexOf(boxval);
            console.log(index);
                /*if (index > -1) {
                  n.splice(index, 1);
                }*/
            } 
            list = mergeAndUnique(list, n);
          } 
          else {
            list = $.grep(list, function(item) {
             return boxval !== item;
            });

            if(n!=''){
                if (typeof n === 'string') {
                n = n.split(',');  // Converts string to array
            }
            let index = n.indexOf(boxval);
                if (index > -1) {
                  n.splice(index, 1);
                }
            }
            list = mergeAndUnique(list, n);
          }
          $('#last_sel_service_id').val(list);
          if(list != 'undefined'){
            $.ajax({
              url: "{{ route('ajaxservice_addonlist', $businessslug) }}",
              type: "POST",
              data: {_token: "{{ csrf_token() }}",sel_service_list:JSON.stringify(list)},
              success: function(data1){
               
               
              }
            });

          }
          
        })
})

     $(document).on('click', '.find-Availability', function(e) {
            
            var sel_session_ids=$('#sel_session_ids').val();
            //console.log(sel_session_ids);
            if(sel_session_ids=="" || sel_session_ids==undefined){
                $('.no-selected-services-error').css("display","block");
                 return false;

            }else{
                $('.no-selected-services-error').css("display","none");
               return true; 
            }
           
        });


       $(document).ready(function () {
        $('.no-selected-services-error').delay(5000).fadeOut('slow');
        //$('.find-Availability').attr('disabled', 'disabled');
        var cartNumber = document.querySelector('.find-Availability-cart'); 
        // Handle change events on checkboxes inside .service-accord-services-item
        $('.service-accord-services-item-check').on('change', function () {
            $('.no-selected-services-error').delay(500).fadeOut('slow');
            $('.no-selected-services-error').css("display","none");
            var parentItem = $(this).closest('.service-accord-services-item');
            var serviceId = parentItem.attr('data-service-id'); // Get unique service ID
            var programId = parentItem.attr('data-program-id'); // Get unique program ID
              $('#last_sel_program_id').val(programId);
              $('#add_on_service_id_hidden').val(serviceId);
               $('.addOns-list').hide();
             

            if (this.checked) {
                $('.loader').show();
                $('.selected-services').html("Loading...");
                $('#non_memberprice').text("");
                $('.find-Availability-cart').text("");
                $.ajax({
                      url: "{{ route('addTocart', $businessslug) }}",
                      type: "POST",
                      data: {"_token": "{{ csrf_token() }}",serviceId:serviceId},
                      success: function(data1){
                        var data=JSON.parse(data1);
                        if(data.qty!=''){
                            $('.loader').hide();
                            $('.selected-services').html("");
                            $('.selected-services').html(data.content);
                            $('.selected-services-price').css('display', 'flex');
                             $('.find-Availability').removeAttr('disabled');
                            $('#non_memberprice').text("$"+data.price);
                             $('.find-Availability-cart').text(data.qty);
                        }
                      }
                    });
                //setTimeout(() => {
                    $('#addon_data').html("");
                    if(serviceId!=''){
                        $.ajax({
                              url: "{{ route('get_addons', $businessslug) }}",
                              type: "POST",
                              data: {"_token": "{{ csrf_token() }}",serviceId:serviceId},
                              success: function(data1){
                                //console.log(data1);
                                if(data1!=''){
                                  $('.add_on_list'+programId).show();
                                  $('#addon_data').html(data1);
                                  
                                  $('#addOnsModal').modal('show');
                                  
                                }else{
                                    $('.add_on_list'+programId).hide();
                                }
                                
                              }
                            });
                    }
                //}, 500);
            } else {
                deleteCard(serviceId,"service");
            
            }
           
            
        });


         $(document).on('click', '.addOns-list', function(e) {
            var id=$(this).attr('data-custom-attr');
            $('#last_sel_program_id').val(id);
            
            add_on_popupclick("popup",id);
        });



        // Handle clicks on the info icon span to trigger a click on the checkbox
        $(document).on('click', '.service-accord-services-item-lft span', function(e) {
            e.stopPropagation(); // Prevent any parent elements from being triggered
            e.preventDefault(); 
           var serviceId= $(this).closest('label').attr('data-service-id');
           var service_name= $('#service_name_'+serviceId).val();
           var service_desc= $('#service_desc_'+serviceId).val();
            $('#modal_service_title').html(service_name);
            $('#modal_service_desc').html(service_desc);
            $('#serviceDesc').modal('show');
        });

    });


    window.addEventListener('popstate', function(event) {
    // Your code here
    console.log('Back or forward button was clicked.');
    // You can check the event.state to get the state object associated with the history entry
    if (event.state) {
        console.log('State object:', event.state);
    }
});
    function add_on_popupclick(m="",id="",service_id=""){
             var all_service_ids = $('#last_sel_service_id').val(); 
             if (typeof all_service_ids === 'string') {
                console.log("string");
                all_service_ids = all_service_ids.split(',');  // Converts string to array
            } 
             var serviceId= all_service_ids[all_service_ids.length - 1]; 
            console.log(id);
            console.log(serviceId);
            console.log(service_id);

             if(serviceId != "" && serviceId!=0 && serviceId != undefined){
                console.log("get pro");
                var id=$('#'+serviceId).attr("program-id");
                $('#add_on_service_id_hidden').val(serviceId);
             }
             else{
                var serviceId=service_id;
             }
             $('.addOns-list').hide();
            if(serviceId!=''){
                $.ajax({
                  url: "{{ route('get_addons', $businessslug) }}",
                  type: "POST",
                  data: {"_token": "{{ csrf_token() }}",serviceId:serviceId},
                  success: function(data1){
                    //console.log(data1);
                    if(data1!=''){
                         $('.add_on_list'+id).show();
                        if(m!='' && m=="popup"){
                            $('#addon_data').html(data1);
                            $('#addOnsModal').modal('show');
                        }
                      
                    }else{
                        $('.add_on_list'+id).hide();
                    }
                  }
                });

            }
            
            if(all_service_ids != 'undefined'){
            $.ajax({
              url: "{{ route('ajaxservice_addonlist', $businessslug) }}",
              type: "POST",
              data: {_token: "{{ csrf_token() }}",sel_service_list:JSON.stringify(all_service_ids)},
              success: function(data1){
               
               
              }
            });

          }
            
        }


    function  deleteCard(id,type="service") {
        if(id!=''){
            $('.loader').show();
           // $('.addOns-list').show();
            $('.selected-services').html("Loading...");
            $('#non_memberprice').text("");
            $('.find-Availability-cart').text("");
            var all_service_ids = $('#last_sel_service_id').val(); 
           var pr_id= $('#last_sel_program_id').val();
           //$('.add_on_list'+pr_id).show();
            if (typeof all_service_ids === 'string') {
                all_service_ids = all_service_ids.split(',');  // Converts string to array
            }
            let index = all_service_ids.indexOf(id);
                if (index > -1) {
                  all_service_ids.splice(index, 1);
                }
                console.log(all_service_ids);
               
               
                $('#last_sel_service_id').val(all_service_ids);
            $.ajax({
                      url: "{{ route('deleteCart', $businessslug) }}",
                      type: "POST",
                      data: {"_token": "{{ csrf_token() }}",serviceId:id,type:type},
                      success: function(data1){
                        if(data1!=''){
                            $('.loader').hide();
                            var data=JSON.parse(data1);
                            if(data.qty!=''){
                                $('.selected-services').html("");
                                if(type=="service"){
                                 $('label.service-accord-services-item[data-service-id="' + id + '"] .service-accord-services-item-check').prop('checked', false);
                                }else{
                                    
                                     $('label.service-accord-services-item .addon-services-item-check').prop('checked', false);
                                }

                                $('.selected-services').html(data.content);
                                $('.selected-services-price').css('display', 'flex');
                                 $('.find-Availability').removeAttr('disabled');
                                $('#non_memberprice').text("$"+data.price);
                                $('.find-Availability-cart').text(data.qty);
                            }else{
                                 $('label.service-accord-services-item[data-service-id="' + id + '"] .service-accord-services-item-check').prop('checked', false);

                                $('.selected-services').html("");
                                 $('#non_memberprice').text("$0.00");
                                //$('.find-Availability').attr('disabled', 'disabled');
                                 $('.selected-services-price').hide();
                                $('.selected-services').html('<p class="no-selected-services">There are currently no services selected.</p>');
                            }

                        }else{
                            $('.loader').hide();
                             $('label.service-accord-services-item[data-service-id="' + id + '"] .service-accord-services-item-check').prop('checked', false);
                            $('.selected-services').html("");
                             $('#non_memberprice').text("$0.00");
                           // $('.find-Availability').attr('disabled', 'disabled');
                             $('.selected-services-price').hide();
                            $('.selected-services').html('<p class="no-selected-services">There are currently no services selected.</p>');
                        }

                        if(type=="service"){
                            id="";
                        }
                        add_on_popupclick("",pr_id,id);
                      }
                    });
        }
    }


  
    $(document).on('click', '.addon-services-item-check', function(e) {

        var parentItem = $(this).closest('.service-accord-services-item');
            var serviceId = parentItem.attr('data-service-id'); // Get unique service ID
            
            if (this.checked) {
                $('.selected-services').html("Loading...");
                $('#non_memberprice').text("");
                $('.find-Availability-cart').text("");
                var service_selected_id = $("#service_selected_id").val();
                $.ajax({
                      url: "{{ route('addTocart', $businessslug) }}",
                      type: "POST",
                      data: {"_token": "{{ csrf_token() }}",serviceId:serviceId,type:"addon",service_selected_id:service_selected_id},
                      success: function(data1){
                        var data=JSON.parse(data1);
                        if(data.qty!=''){
                            $('.selected-services').html("");
                            $('.selected-services').html(data.content);
                            $('.selected-services-price').css('display', 'flex');
                             $('.find-Availability').removeAttr('disabled');
                            $('#non_memberprice').text("$"+data.price);
                             $('.find-Availability-cart').text(data.qty);
                        }
                      }
                    });
            }else{
                 deleteCard(serviceId,"service");
            }

    });
    </script>
@endsection