@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)


                                            @php
                                                $is_custom_svc = isset($value['is_custom_service']) && $value['is_custom_service'] == 1;
                                                $main_stype_id = isset($value['main_session_type_id']) ? $value['main_session_type_id'] : '';
                                                // Determine checked state
                                                if($is_custom_svc){
                                                    $is_checked = in_array((string)$value['session_type_id'], $cart_bundle_original_ids ?? []);
                                                } else {
                                                    $is_checked = in_array($value['session_type_id'], $cart_regular_ids ?? $cart_services_ids);
                                                }
                                            @endphp
                                            <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 }}" data-is-custom-service="{{ $is_custom_svc ? 1 : 0 }}" data-main-session-type-id="{{ $main_stype_id }}">
                                                    <input id="{{ $value['session_type_id'] }}" program-id="{{ $key }}" value="{{ $value['session_type_id'] }}" type="checkbox"  name="serives" class="service-accord-services-item-check" {{ $is_checked ? 'checked' : '' }} aria-label="services" >
                                                    @if(isset($value['is_most_popular']) && $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
                                     $val_cpeel   = isset($val['custom_peel']) ? $val['custom_peel'] : 0;
                                     $val_origid  = isset($val['original_custom_service_id']) ? $val['original_custom_service_id'] : '';
                                     $price = round($price + ($val['price'] ?? $val['non_member_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']}}" data-original-custom-service-id="{{$val_origid}}" data-custom-peel="{{$val_cpeel}}">
                                        <div class="service-accord-services-item-lft">{{$val['name']}}</div>
                                        <div class="service-accord-services-item-rgt text-end">
                                            @if($val['type']=="service")
                                            <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">
                                                    <strong>NEW GUEST<span>${{ $val['intro_price'] }}</span></strong>
                                                </div>
                                            @endif
                                            @else
                                            <div class="service-accord-services-item-member pink-color-txt">+<span>${{$val['non_member_price']}}</span></div>
                                            @endif
                                        </div>
                                        <div class="service-accord-services-item-close">  
                                            <span onclick="return deleteCard('{{$val['id']}}','{{$val['type']}}','{{$val_origid}}')"> <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 Provider 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();
        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;
    }

    // ── Disable/enable service rows that conflict with currently-checked services ──
    function updateOverlapDisabledState() {
        // First clear all overlap-disabled states
        $('.service-accord-services-item.disabled-by-overlap').each(function(){
            $(this).find('.service-accord-services-item-check').prop('disabled', false);
            $(this).removeClass('disabled-service disabled-by-overlap');
        });
        // Re-apply based on what is currently checked
        $('.service-accord-services-item-check:checked').each(function(){
            var $parent         = $(this).closest('.service-accord-services-item');
            var serviceId       = $parent.attr('data-service-id');
            var mainSTypeId     = $parent.attr('data-main-session-type-id') || '';
            var isCustomService = $parent.attr('data-is-custom-service');
            var currentIds      = [serviceId];
            if(isCustomService == '1' && mainSTypeId){
                mainSTypeId.split(',').map(function(s){ return s.trim(); }).filter(Boolean).forEach(function(id){
                    if(currentIds.indexOf(id) === -1) currentIds.push(id);
                });
            }
            $('.service-accord-services-item').not($parent).each(function(){
                var $other        = $(this);
                var otherSvcId    = $other.attr('data-service-id');
                var otherMain     = ($other.attr('data-main-session-type-id') || '').toString();
                var otherIsCustom = $other.attr('data-is-custom-service');
                var otherMainIds  = otherMain ? otherMain.split(',').map(function(s){ return s.trim(); }) : [];
                var overlap = (currentIds.indexOf(otherSvcId) !== -1) ||
                              (otherIsCustom == '1' && otherMainIds.some(function(id){ return currentIds.indexOf(id) !== -1; }));
                if(overlap){
                    $other.find('.service-accord-services-item-check').prop('disabled', true);
                    $other.addClass('disabled-service disabled-by-overlap');
                }
            });
        });
    }

    $(document).ready(function(){
        var p_id = @json(session('program_id'));
        $('#last_sel_program_id').val(p_id);
        $('.addOns-list').hide();
        var listn = $('#last_sel_service_id1').val();
        $('#last_sel_service_id').val(JSON.parse(listn));
        add_on_popupclick("", p_id);

        // On load: apply overlap-disabled state for any pre-checked items
        setTimeout(function(){ updateOverlapDisabledState(); }, 200);

        // ── First event handler: track list + addonlist ajax ──────────────────
        var list = new Array();
        $('.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();
            var boxval = $(this).val();
            if($(this).is(':checked')){
                list.push(boxval);
                if(n != ''){
                    if(typeof n === 'string') n = n.split(',');
                }
                list = mergeAndUnique(list, n);
            } else {
                list = $.grep(list, function(item){ return boxval !== item; });
                if(n != ''){
                    if(typeof n === 'string') n = n.split(',');
                    var idx = n.indexOf(boxval);
                    if(idx > -1) n.splice(idx, 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(){}
                });
            }
        });
    });

    $(document).on('click', '.find-Availability', function(e){
        var sel_session_ids = $('#sel_session_ids').val();
        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');

        // ── Main change handler: cart + addons + mutual exclusivity ───────────
        $('.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');
            var programId       = parentItem.attr('data-program-id');
            var mainSTypeId     = parentItem.attr('data-main-session-type-id') || '';
            var isCustomService = parentItem.attr('data-is-custom-service') || '0';

            $('#last_sel_program_id').val(programId);
            $('#add_on_service_id_hidden').val(serviceId);
            $('.addOns-list').hide();

            if(this.checked){
                // ── Mutual exclusivity: disable overlapping services ───────────
                var currentIds = [serviceId];
                if(isCustomService == '1' && mainSTypeId){
                    mainSTypeId.split(',').map(function(s){ return s.trim(); }).filter(Boolean).forEach(function(id){
                        if(currentIds.indexOf(id) === -1) currentIds.push(id);
                    });
                }
                $('.service-accord-services-item').not(parentItem).each(function(){
                    var $other        = $(this);
                    var otherSvcId    = $other.attr('data-service-id');
                    var otherMain     = ($other.attr('data-main-session-type-id') || '').toString();
                    var otherIsCustom = $other.attr('data-is-custom-service');
                    var otherMainIds  = otherMain ? otherMain.split(',').map(function(s){ return s.trim(); }) : [];
                    var isSame        = (currentIds.indexOf(otherSvcId) !== -1);
                    var bundleContains = (otherIsCustom == '1' && otherMainIds.some(function(id){ return currentIds.indexOf(id) !== -1; }));
                    if(isSame || bundleContains){
                        var $cb = $other.find('.service-accord-services-item-check');
                        if($cb.is(':checked')){
                            // It was checked — remove it from cart first
                            var deleteId = (otherIsCustom == '1' && otherMain)
                                         ? otherMain.split(',')[0].trim() : otherSvcId;
                            var origCust = (otherIsCustom == '1') ? otherSvcId : '';
                            $.ajax({
                                url: "{{ route('deleteCart', $businessslug) }}",
                                type: "POST",
                                data: {"_token":"{{ csrf_token() }}", serviceId: deleteId, type:'service'},
                                success: function(){}
                            });
                        }
                        $cb.prop('checked', false).prop('disabled', true);
                        $other.addClass('disabled-service disabled-by-overlap');
                    }
                });
                // ─────────────────────────────────────────────────────────────

                $('.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, isCustomService: isCustomService},
                    success: function(data1){
                        var data = JSON.parse(data1);
                        if(data.qty != ''){
                            $('.loader').hide();
                            $('.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);
                        }
                    }
                });

                // Load add-ons: custom bundles use their own id (serviceId) so the controller
                // can query plus_custom_service_addons; regular services use serviceId directly.
                $('#addon_data').html("");
                if(serviceId != ''){
                    $.ajax({
                        url: "{{ route('get_addons', $businessslug) }}",
                        type: "POST",
                        data: {"_token":"{{ csrf_token() }}", serviceId: serviceId, is_custom_service: isCustomService},
                        success: function(data1){
                            if(data1 != ''){
                                $('.add_on_list'+programId).show();
                                $('#addon_data').html(data1);
                                $('#addOnsModal').modal('show');
                            } else {
                                $('.add_on_list'+programId).hide();
                            }
                        }
                    });
                }

            } else {
                // Unchecked: remove from cart + re-enable overlap-disabled items
                var deleteId = serviceId;
                // For bundles, pass the first main service ID as the cart key
                if(isCustomService == '1' && mainSTypeId != ''){
                    deleteId = mainSTypeId.split(',')[0].trim();
                }
                deleteCard(deleteId, 'service');
                // Re-enable anything that was disabled due to this selection
                updateOverlapDisabledState();
            }
        });

        $(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);
        });

        // Info icon click — show service description modal
        $(document).on('click', '.service-accord-services-item-lft span', function(e){
            e.stopPropagation();
            e.preventDefault();
            var sid          = $(this).closest('label').attr('data-service-id');
            var service_name = $('#service_name_'+sid).val();
            var service_desc = $('#service_desc_'+sid).val();
            $('#modal_service_title').html(service_name);
            $('#modal_service_desc').html(service_desc);
            $('#serviceDesc').modal('show');
        });
    });

    window.addEventListener('popstate', function(event){
        if(event.state){ console.log('State object:', event.state); }
    });

    function add_on_popupclick(m, id, service_id){
        m          = m          || "";
        id         = id         || "";
        service_id = service_id || "";
        var all_service_ids = $('#last_sel_service_id').val();
        if(typeof all_service_ids === 'string'){
            all_service_ids = all_service_ids.split(',');
        }
        var serviceId = all_service_ids[all_service_ids.length - 1];
        if(serviceId != "" && serviceId != 0 && serviceId != undefined){
            var progId = $('#'+serviceId).attr("program-id");
            if(progId) id = progId;
            $('#add_on_service_id_hidden').val(serviceId);
        } else {
            serviceId = service_id;
        }
        // For bundles: use the first main session type ID for addon lookup
        var $lbl = $('.service-accord-services-item[data-service-id="'+serviceId+'"]');
        if($lbl.attr('data-is-custom-service') == '1'){
            var msid = $lbl.attr('data-main-session-type-id') || '';
            if(msid) serviceId = msid.split(',')[0].trim();
        }
        $('.addOns-list').hide();
        if(serviceId != ''){
            $.ajax({
                url: "{{ route('get_addons', $businessslug) }}",
                type: "POST",
                data: {"_token":"{{ csrf_token() }}", serviceId: serviceId},
                success: function(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(){}
            });
        }
    }

    // id       = cart entry id (for bundles = first main service session_type_id)
    // type     = 'service' | 'addon'
    // origCust = bundle's original_custom_service_id (empty string for regular services)
    function deleteCard(id, type, origCust){
        type     = type     || 'service';
        origCust = origCust || '';
        if(id == '') return;

        $('.loader').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();
        if(typeof all_service_ids === 'string') all_service_ids = all_service_ids.split(',');
        var idx = all_service_ids.indexOf(String(id));
        if(idx > -1) all_service_ids.splice(idx, 1);
        $('#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){
                $('.loader').hide();
                if(data1 != ''){
                    var data = JSON.parse(data1);
                    if(data.qty !== undefined && data.qty !== '' && data.qty > 0){
                        if(type == 'service'){
                            // Uncheck the direct service row (regular services)
                            $('label.service-accord-services-item[data-service-id="'+id+'"] .service-accord-services-item-check').prop('checked', false);
                            // Uncheck bundle row whose main_session_type_id contains this id
                            $('.service-accord-services-item[data-is-custom-service="1"]').each(function(){
                                var mids = ($(this).attr('data-main-session-type-id') || '').split(',').map(function(s){ return s.trim(); });
                                if(mids.indexOf(String(id)) !== -1){
                                    $(this).find('.service-accord-services-item-check').prop('checked', false);
                                }
                            });
                            // Re-enable any overlap-disabled items
                            updateOverlapDisabledState();
                        } 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);
                        $('.service-accord-services-item[data-is-custom-service="1"]').each(function(){
                            var mids = ($(this).attr('data-main-session-type-id') || '').split(',').map(function(s){ return s.trim(); });
                            if(mids.indexOf(String(id)) !== -1){
                                $(this).find('.service-accord-services-item-check').prop('checked', false);
                            }
                        });
                        updateOverlapDisabledState();
                        $('.selected-services').html('<p class="no-selected-services">There are currently no services selected.</p>');
                        $('#non_memberprice').text("$0.00");
                        $('.selected-services-price').hide();
                    }
                } else {
                    $('label.service-accord-services-item[data-service-id="'+id+'"] .service-accord-services-item-check').prop('checked', false);
                    updateOverlapDisabledState();
                    $('#non_memberprice').text("$0.00");
                    $('.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');
        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(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>
<style>
    .service-accord-services-item.disabled-service {
        opacity: 0.38;
        cursor: not-allowed;
        pointer-events: none;
    }
</style>
@endsection