@props(['active', 'url', 'id'])

<td>
    <label class="switch">
        <input type="checkbox"
               onchange="handleToggle(event)"
               class="toggle-switch"
               value="{{ $id }}"
               data-url="{{ $url }}"
            {{ $active ? 'checked' : '' }}>
        <span class="slider round"></span>
    </label>
</td>

<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 20px;
    }
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 34px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: #fff;
        transition: 0.4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #2196F3;
    }
    input:checked + .slider:before {
        transform: translateX(14px);
    }
</style>

<script>
    function handleToggle(event) {

        const checkbox = event.target;
        const oldState = !checkbox.checked;
        const url = checkbox.dataset.url;

        Swal.fire({
            title: checkbox.checked
                ? "{{ __('Confirm activation') }}"
                : "{{ __('Confirm deactivation') }}",

            text: checkbox.checked
                ? "{{ __('Are you sure you want to activate this item?') }}"
                : "{{ __('Are you sure you want to deactivate this item?') }}",

            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: "{{ __('Yes') }}",
            cancelButtonText: "{{ __('Cancel') }}",
            reverseButtons: true
        }).then((result) => {

            if (!result.isConfirmed) {
                checkbox.checked = oldState;
                return;
            }

            checkbox.disabled = true;

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    id: checkbox.value,
                    active: checkbox.checked
                })
            })
                .then(response => {
                    if (!response.ok) throw new Error();
                    return response.json();
                })
                .then(() => {
                    Swal.fire({
                        icon: 'success',
                        title: "{{ __('Success') }}",
                        text: "{{ __('Status updated successfully') }}",
                        timer: 1500,
                        showConfirmButton: false
                    });
                })
                .catch(() => {
                    checkbox.checked = oldState;

                    Swal.fire({
                        icon: 'error',
                        title: "{{ __('Error') }}",
                        text: "{{ __('Something went wrong while updating status') }}"
                    });
                })
                .finally(() => {
                    checkbox.disabled = false;
                });
        });
    }
</script>