@section('page-title')
    - {{ $clientDetails->name }}
@endsection

@include('pages.dashboard.includes.client.common.client-header')


<div class="container-fixed">
    <div
        class="flex flex-nowrap items-center lg:items-end justify-between border-b border-b-gray-200 dark:border-b-coal-100 gap-6 mb-5 lg:mb-10">

        @include('pages.dashboard.super-admin.clients.includes.tab-links')


    </div>
</div>

<livewire:pages.client-admin.subscription.client-subscription :client="$clientDetails"/>

<livewire:pages.client-admin.subscription.upgrade-plan :client="$clientDetails"/>

<script>
    
    var user_ids = []
    const selectBtn = document.querySelector(".select-btn");
    const items = document.querySelectorAll(".item-tag");
    const check_boxes = document.querySelectorAll(".tags-checkbox");
    let btnText = document.querySelector(".btn-text");

    selectBtn.addEventListener("click", () => {
        selectBtn.classList.toggle("open")
    })

    items.forEach((item) => {
        item.addEventListener("click", () => {

            const user_id = item.id;

            if(user_ids.includes(user_id)){
                user_ids = user_ids.filter(user_id_to_remove => user_id_to_remove !== user_id);
                const check_box = document.getElementById("checkbox_"+ item.id).checked = false;
            } else {
                    user_ids.push(item.id)
                    const check_box = document.getElementById("checkbox_"+ item.id).checked = true;
            }

            if (user_ids.length > 0) {
                btnText.innerText = `${user_ids.length} Selected`
            } else {
                btnText.innerText = `Select an option`
            }

            Livewire.dispatch('selectedEmployees',{selected_employees: user_ids})
        })
    })

    document.addEventListener('livewire:init', function () {

            Livewire.on('updatedEmployees', function (values) {
                user_ids = values[0];
                user_ids.forEach(user_id => {
                    const check_box = document.getElementById("checkbox_"+ user_id).checked = true;
                });

                if (user_ids.length > 0) {
                    btnText.innerText = `${user_ids.length} Selected`
                } else {
                    btnText.innerText = `Select an option`
                }
            });
    });

    function cancelSubscription() {

            Swal.fire({
                text: "Are you sure you want to cancel your subscription?!!",
                icon: "warning",
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: "Yes, cancel!",
                cancelButtonText: "No, cancel",
                customClass: {
                    confirmButton: "btn fw-bold btn-danger",
                    cancelButton: "btn fw-bold btn-active-light-primary"
                }
            }).then(function (result) {
                if (result.value) {
                    Swal.fire({
                        text: "You have canceled your subscription!.",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn fw-bold btn-primary",
                        }
                    }).then(function () {
                    });

                } else if (result.dismiss === 'cancel') {
                    Swal.fire({
                        text: "Subscription was not canceled.",
                        icon: "error",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn fw-bold btn-primary",
                        }
                    }).then(function () {
                    });
                }
            });
        }


</script>