@props(['active', 'url'])
<td>
    <label class="switch">
        <input type="checkbox" onchange="handleChange(event)" class="toggle-switch" id="toggle" 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;
        top: 0;
        left: 0;
        right: 0;
        bottom: 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: white;
        transition: 0.4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #2196F3;
    }
    input:checked + .slider:before {
        transform: translateX(14px);
    }
    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
</style>
<script>
    function handleChange(event){
        console.log(event.srcElement.dataset.url);
        var url = event.srcElement.dataset.url
        console.log(url)
        console.log(event.target.value)
        var isActive = event.srcElement.checked
        if (url) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log("Status updated successfully");
                } else if (xhr.readyState === 4) {
                    console.error("Error updating status");
                }
            };
            xhr.send(JSON.stringify({ id: event.target.value }));
        }
        // var url = event.srcElement.dataset
    }
</script>