@extends('admin.layouts.master')
@section('title', 'Clocker')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<style>
/* ─────────────────────────────────────────────────
   Clocker page — scoped to .ck-wrap
───────────────────────────────────────────────── */

/* Status toggle */
.ck-toggle-wrap   { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.ck-toggle-input  { display:none; }
.ck-toggle-track  { position:relative; width:42px; height:22px; background:#d1d5db; border-radius:999px; transition:background .2s; flex-shrink:0; }
.ck-toggle-input:checked + .ck-toggle-track { background:#22c55e; }
.ck-toggle-thumb  { position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .2s; }
.ck-toggle-input:checked + .ck-toggle-track .ck-toggle-thumb { left:23px; }
.ck-toggle-lbl    { font-size:.85rem; font-weight:500; color:#6b7280; }
.ck-toggle-input:checked ~ .ck-toggle-lbl { color:#16a34a; }

/* Tab bar */
.ck-tabs { display:flex; border-bottom:2px solid #e5e7eb; margin-bottom:24px; gap:4px; }
.ck-tab  {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 18px; font-size:.875rem; font-weight:500;
    color:#6b7280; background:none; border:none; cursor:pointer;
    border-bottom:2px solid transparent; margin-bottom:-2px;
    border-radius:6px 6px 0 0; transition:color .15s, background .15s;
}
.ck-tab:hover  { color:#3b82f6; background:#eff6ff; }
.ck-tab.active { color:#3b82f6; border-bottom-color:#3b82f6; background:#eff6ff; }

/* Tab badge */
.ck-cnt {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px;
    background:#3b82f6; color:#fff;
    font-size:.68rem; font-weight:700; border-radius:999px;
}
.ck-tab.active .ck-cnt { background:#fff; color:#3b82f6; }

/* Panes */
.ck-pane          { display:none; }
.ck-pane.active   { display:block; }

/* Field label */
.ck-lbl {
    display:block; margin-bottom:6px;
    font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; color:#6b7280;
}
.ck-lbl small { font-weight:400; text-transform:none; letter-spacing:0; color:#9ca3af; margin-left:4px; }

/* Generic input / textarea */
.ck-field {
    width:100%; padding:8px 12px;
    border:1px solid #d1d5db; border-radius:6px;
    font-size:.875rem; line-height:1.5; color:#1f2937;
    background:#fff; resize:vertical;
    transition:border .15s, box-shadow .15s;
    box-sizing:border-box;
}
.ck-field:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

/* Section divider */
.ck-section { margin-bottom:20px; }

/* Two-column row */
.ck-row2 { display:flex; gap:16px; }
.ck-row2 > div { flex:1 1 0; min-width:0; }

/* Three-column row */
.ck-row3 { display:flex; gap:16px; }
.ck-row3 > div { flex:1 1 0; min-width:0; }

/* Select2 overrides — compact, consistent */
.select2-container { width:100% !important; display:block !important; }
.select2-container--default .select2-selection--multiple {
    border:1px solid #d1d5db !important;
    border-radius:6px !important;
    background:#fff !important;
    min-height:40px !important;
    max-height:120px !important;
    overflow-y:auto !important;
    padding:3px 6px !important;
    height:auto !important;
}
/* Country select — grow to fit every selected tag (must beat the rule above) */
.select2-container--default.s2-country,
.select2-container--default.s2-country .selection {
    height:auto !important;
    max-height:none !important;
    display:block !important;
}
.select2-container--default.s2-country .select2-selection--multiple {
    min-height:220px !important;
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
}
.select2-container--default.s2-country .select2-selection__rendered {
    display:flex !important;
    flex-wrap:wrap !important;
    align-content:flex-start !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    float:none !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color:#3b82f6 !important;
    box-shadow:0 0 0 3px rgba(59,130,246,.15) !important;
    outline:none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:6px !important;
    background:#3b82f6 !important;
    border:none !important;
    color:#fff !important;
    border-radius:999px !important;
    font-size:.78rem !important;
    font-weight:500 !important;
    padding:4px 6px 4px 10px !important;
    margin:3px !important;
    line-height:1.3 !important;
    box-shadow:none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding:0 !important;
    margin:0 !important;
    order:1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    order:2;
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:16px !important;
    height:16px !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    border-right:none !important;
    background:#2563eb !important;
    color:#fff !important;
    border-radius:50% !important;
    font-size:0 !important;
    line-height:1 !important;
    cursor:pointer !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove span,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before {
    display:none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove::after {
    content:"×";
    font-size:12px;
    font-weight:700;
    line-height:1;
    color:#fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background:#1d4ed8 !important;
    color:#fff !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-top:6px !important;
    font-size:16px !important;
    color:#9ca3af !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding:0 !important; }
.select2-dropdown { border:1px solid #d1d5db !important; border-radius:6px !important; box-shadow:0 8px 24px rgba(0,0,0,.1) !important; z-index:9999 !important; }
.select2-search--dropdown .select2-search__field { border:1px solid #d1d5db !important; border-radius:4px !important; padding:6px 8px !important; font-size:.85rem !important; }
.select2-results__option { font-size:.875rem !important; padding:7px 10px !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:#3b82f6 !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background:#eff6ff !important; color:#1d4ed8 !important; }

/* Save footer */
.ck-footer {
    display:flex; justify-content:flex-end;
    padding-top:20px; margin-top:20px;
    border-top:1px solid #e5e7eb;
}

/* Whitelist: add form */
.wl-add-box {
    background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px;
    padding:16px 18px; margin-bottom:20px;
}
.wl-add-box h6 { font-size:.85rem; font-weight:600; color:#15803d; margin:0 0 12px; }
.wl-add-row { display:flex; gap:10px; align-items:flex-end; }
.wl-add-row > div { flex:1 1 0; }
.wl-add-row > .wl-add-btn-wrap { flex:0 0 auto; }

/* Whitelist table */
.wl-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.wl-table thead th {
    padding:10px 14px; font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em;
    color:#6b7280; background:#f9fafb;
    border-bottom:2px solid #e5e7eb; text-align:left;
}
.wl-table tbody td { padding:10px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.wl-table tbody tr:hover td { background:#fafafa; }
.wl-ip-code { background:#f1f5f9; padding:2px 7px; border-radius:4px; font-family:monospace; font-size:.82rem; }
.wl-del-btn {
    font-size:.75rem; padding:3px 10px;
    border:1px solid #fca5a5; color:#dc2626;
    border-radius:4px; background:transparent; cursor:pointer;
    transition:background .15s;
}
.wl-del-btn:hover { background:#fef2f2; }
</style>
@endsection

@section('content')

{{-- Page title + toggle --}}
<div class="page-title-head">
    <div style="display:flex;align-items:center;gap:16px;">
        <h4 class="page-main-title">Clocker</h4>
        @if($clockerExists)
        <label class="ck-toggle-wrap">
            <input class="ck-toggle-input" type="checkbox" id="clocker_status" {{ $clocker->status ? 'checked' : '' }}>
            <div class="ck-toggle-track"><div class="ck-toggle-thumb"></div></div>
            <span class="ck-toggle-lbl" id="ck-lbl">{{ $clocker->status ? 'Enabled' : 'Disabled' }}</span>
        </label>
        @endif
    </div>
    <div class="hidden items-center gap-1.25 text-sm md:flex">
        <a href="{{ route('dashboard') }}" class="text-sm">Dashboard</a>
        <i class="iconify tabler--chevron-right text-sm"></i>
        <span class="text-default-400">Clocker</span>
    </div>
</div>

<div class="container-fluid">
<div class="card">
<div class="card-body" style="padding:24px;">

    {{-- Tab bar --}}
    <div class="ck-tabs">
        <button type="button" class="ck-tab active" data-ck-target="pane-conditions">
            <i class="iconify tabler--filter" style="font-size:1rem;"></i> Conditions
        </button>
        <button type="button" class="ck-tab" data-ck-target="pane-filters">
            <i class="iconify tabler--shield-lock" style="font-size:1rem;"></i> Filters
        </button>
        <button type="button" class="ck-tab" data-ck-target="pane-whitelist">
            <i class="iconify tabler--circle-check" style="font-size:1rem;"></i> Whitelist IPs
            <span class="ck-cnt" id="wl-badge">{{ $whitelistedIps->count() }}</span>
        </button>
    </div>

    {{-- ═══════════ CONDITIONS PANE ═══════════ --}}
    <form id="save_clocker">
    <div class="ck-pane active" id="pane-conditions">

        {{-- Block Countries --}}
        <div class="ck-section" style="margin-bottom:28px; overflow:visible;">
            <label class="ck-lbl">Block Countries</label>
            <select id="country" name="country[]" multiple class="s2">
                @foreach($countries as $c)
                <option value="{{ $c->name }}" @selected(in_array($c->name, $selectedCountries))>{{ $c->name }}</option>
                @endforeach
            </select>
        </div>

        {{-- OS / Device / Browser --}}
        <div class="ck-section ck-row3">
            <div>
                <label class="ck-lbl">Operating System</label>
                <select id="os" name="os[]" multiple class="s2">
                    @foreach(['Windows','Mac OS X','Linux','Ubuntu','iPhone','iPod','Android','BlackBerry'] as $o)
                    <option value="{{ $o }}" @selected(in_array($o, $selectedOS))>{{ $o }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="ck-lbl">Device</label>
                <select id="device" name="device[]" multiple class="s2">
                    @foreach(['Desktop','Mobile','Tablet'] as $d)
                    <option value="{{ $d }}" @selected(in_array($d, $selectedDevices))>{{ $d }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="ck-lbl">Browser</label>
                <select id="browser" name="browser[]" multiple class="s2">
                    @foreach(['IE'=>'Internet Explorer','Edge'=>'Microsoft Edge','Firefox'=>'Firefox','Chrome'=>'Google Chrome','Opera'=>'Opera','Safari'=>'Apple Safari'] as $v=>$l)
                    <option value="{{ $v }}" @selected(in_array($v, $selectedBrowsers))>{{ $l }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- IPs + UAs --}}
        <div class="ck-section ck-row2">
            <div>
                <label class="ck-lbl">Block IPs <small>comma-separated</small></label>
                <textarea id="ips" rows="5" class="ck-field">{{ $clocker->ips ?? '' }}</textarea>
            </div>
            <div>
                <label class="ck-lbl">User Agents <small>comma-separated</small></label>
                <textarea id="ua" rows="5" class="ck-field">{{ $clocker->ua ?? '' }}</textarea>
            </div>
        </div>

        {{-- Referrers + ISPs --}}
        <div class="ck-section ck-row2">
            <div>
                <label class="ck-lbl">Referrers <small>comma-separated</small></label>
                <textarea id="refferer" rows="4" class="ck-field">{{ $clocker->refferer ?? '' }}</textarea>
            </div>
            <div>
                <label class="ck-lbl">ISPs <small>comma-separated</small></label>
                <textarea id="isp" rows="4" class="ck-field">{{ $clocker->isp ?? '' }}</textarea>
            </div>
        </div>

        {{-- ASNs --}}
        <div class="ck-section">
            <label class="ck-lbl">ASNs <small>comma-separated</small></label>
            <textarea id="asn" rows="3" class="ck-field">{{ $clocker->asn ?? '' }}</textarea>
        </div>

        <div class="ck-footer">
            <button type="submit" class="btn btn-primary" id="submit_btn" style="padding:9px 28px;">
                <i class="iconify tabler--device-floppy me-1"></i> Save Clocker
            </button>
        </div>
    </div>
    </form>

    {{-- ═══════════ FILTERS PANE ═══════════ --}}
    <div class="ck-pane" id="pane-filters">
        <form id="save_clocker_filters">
        <div style="max-width:380px;">
            <label class="ck-lbl">Active Filters</label>
            <select id="filters" name="filters[]" multiple class="s2">
                @foreach(['Bot','Black List IPs','Proxy','VPN'] as $f)
                <option value="{{ $f }}" @selected(in_array($f, $selectedFilters))>{{ $f }}</option>
                @endforeach
            </select>
            <p style="margin-top:10px;font-size:.82rem;color:#6b7280;line-height:1.5;">
                Visitors matching any selected filter will be blocked automatically.
            </p>
        </div>
        <div class="ck-footer">
            <button type="submit" class="btn btn-primary" id="submit_filters_btn" style="padding:9px 28px;">
                <i class="iconify tabler--device-floppy me-1"></i> Save Filters
            </button>
        </div>
        </form>
    </div>

    {{-- ═══════════ WHITELIST PANE ═══════════ --}}
    <div class="ck-pane" id="pane-whitelist">

        <div class="wl-add-box">
            <h6><i class="iconify tabler--plus-circle me-1"></i> Add IP to Whitelist</h6>
            <form id="add-whitelist-form" autocomplete="off">
                <div class="wl-add-row">
                    <div>
                        <label class="ck-lbl">IP Address</label>
                        <input type="text" id="wl-ip" class="ck-field" style="resize:none;" placeholder="e.g. 203.0.113.5" required>
                    </div>
                    <div>
                        <label class="ck-lbl">Label <small>optional</small></label>
                        <input type="text" id="wl-label" class="ck-field" style="resize:none;" placeholder="e.g. Office">
                    </div>
                    <div class="wl-add-btn-wrap">
                        <button type="submit" class="btn btn-success" id="wl-add-btn" style="height:40px;padding:0 20px;white-space:nowrap;">
                            <i class="iconify tabler--plus me-1"></i> Add
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <table class="wl-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>IP Address</th>
                    <th>Label</th>
                    <th>Added</th>
                    <th style="text-align:right;">Action</th>
                </tr>
            </thead>
            <tbody id="wl-tbody">
            @forelse($whitelistedIps as $i => $wip)
            <tr id="wl-row-{{ $wip->id }}">
                <td style="color:#9ca3af;width:40px;">{{ $i + 1 }}</td>
                <td><span class="wl-ip-code">{{ $wip->ip_address }}</span></td>
                <td style="color:#6b7280;">{{ $wip->label ?: '—' }}</td>
                <td style="color:#9ca3af;font-size:.8rem;">{{ $wip->created_at?->format('Y-m-d H:i') ?? 'N/A' }}</td>
                <td style="text-align:right;">
                    <button class="wl-del-btn" data-id="{{ $wip->id }}" data-ip="{{ $wip->ip_address }}">
                        <i class="iconify tabler--trash me-1"></i> Remove
                    </button>
                </td>
            </tr>
            @empty
            <tr id="wl-empty">
                <td colspan="5" style="text-align:center;padding:32px;color:#9ca3af;">No IPs whitelisted yet.</td>
            </tr>
            @endforelse
            </tbody>
        </table>
    </div>

</div>
</div>
</div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(function () {

    /* ── Select2 init ─────────────────────────────── */
    $('.s2').not('#country').select2({ width:'100%', placeholder:'Select…', allowClear:true, closeOnSelect:false });
    $('#country').select2({ width:'100%', placeholder:'Select…', allowClear:true, closeOnSelect:false });
    var $countryBox = $('#country').data('select2');
    if ($countryBox && $countryBox.$container) {
        $countryBox.$container.addClass('s2-country');
    } else {
        $('#country').next('.select2-container').addClass('s2-country');
    }

    /* ── Tab switching ────────────────────────────── */
    $(document).on('click', '.ck-tab', function () {
        var t = $(this).attr('data-ck-target');
        $('.ck-tab').removeClass('active');
        $('.ck-pane').removeClass('active');
        $(this).addClass('active');
        $('#' + t).addClass('active');
        $('#' + t + ' .s2').trigger('change.select2');
    });

    /* ── Save Conditions ──────────────────────────── */
    $('#save_clocker').on('submit', function (e) {
        e.preventDefault();
        var btn = $('#submit_btn').prop('disabled', true)
            .html('<i class="iconify tabler--loader-2 animate-spin me-1"></i> Saving…');
        var fd = new FormData();
        fd.append('country',  ($('#country').val()  || []).join(','));
        fd.append('os',       ($('#os').val()       || []).join(','));
        fd.append('device',   ($('#device').val()   || []).join(','));
        fd.append('browser',  ($('#browser').val()  || []).join(','));
        fd.append('ips',      $('#ips').val().trim());
        fd.append('ua',       $('#ua').val().trim());
        fd.append('refferer', $('#refferer').val().trim());
        fd.append('isp',      $('#isp').val().trim());
        fd.append('asn',      $('#asn').val().trim());
        fd.append('filters',  ($('#filters').val()  || []).join(','));
        $.ajax({
            url:'{{ route("save_clocker") }}', type:'POST',
            processData:false, contentType:false, data:fd,
            success:function(r){ var ok=r.status=='true'||r.status===true;
                Swal.fire({icon:r.icon||(ok?'success':'error'),title:ok?'Saved':'Failed',text:r.message})
                    .then(function(){if(ok)location.reload();});
                btn.prop('disabled',false).html('<i class="iconify tabler--device-floppy me-1"></i> Save Clocker');
            },
            error:function(){ Swal.fire({icon:'error',title:'Error',text:'Could not save.'});
                btn.prop('disabled',false).html('<i class="iconify tabler--device-floppy me-1"></i> Save Clocker'); }
        });
    });

    /* ── Save Filters (reuse same endpoint) ───────── */
    $('#save_clocker_filters').on('submit', function (e) {
        e.preventDefault();
        var btn = $('#submit_filters_btn').prop('disabled', true)
            .html('<i class="iconify tabler--loader-2 animate-spin me-1"></i> Saving…');
        var fd = new FormData();
        fd.append('filters', ($('#filters').val() || []).join(','));
        /* Pass current values for other fields so they aren't cleared */
        fd.append('country', ($('#country').val()  || []).join(','));
        fd.append('os',      ($('#os').val()       || []).join(','));
        fd.append('device',  ($('#device').val()   || []).join(','));
        fd.append('browser', ($('#browser').val()  || []).join(','));
        fd.append('ips',     $('#ips').val().trim());
        fd.append('ua',      $('#ua').val().trim());
        fd.append('refferer',$('#refferer').val().trim());
        fd.append('isp',     $('#isp').val().trim());
        fd.append('asn',     $('#asn').val().trim());
        $.ajax({
            url:'{{ route("save_clocker") }}', type:'POST',
            processData:false, contentType:false, data:fd,
            success:function(r){ var ok=r.status=='true'||r.status===true;
                Swal.fire({icon:r.icon||(ok?'success':'error'),title:ok?'Saved':'Failed',text:r.message});
                btn.prop('disabled',false).html('<i class="iconify tabler--device-floppy me-1"></i> Save Filters');
            },
            error:function(){ Swal.fire({icon:'error',title:'Error',text:'Could not save.'});
                btn.prop('disabled',false).html('<i class="iconify tabler--device-floppy me-1"></i> Save Filters'); }
        });
    });

    /* ── Whitelist: Add ───────────────────────────── */
    $('#add-whitelist-form').on('submit', function (e) {
        e.preventDefault();
        var ip  = $('#wl-ip').val().trim();
        var lbl = $('#wl-label').val().trim();
        if (!ip) return;
        var btn = $('#wl-add-btn').prop('disabled', true)
            .html('<i class="iconify tabler--loader-2 animate-spin me-1"></i>');
        var fd = new FormData();
        fd.append('ip_address', ip); fd.append('label', lbl);
        $.ajax({
            url:'{{ route("settings.whitelist-ip") }}', type:'POST',
            processData:false, contentType:false, data:fd,
            success:function(r){
                if(r.status=='true'){
                    Swal.fire({icon:'success',title:'Whitelisted',text:r.message,timer:1600,showConfirmButton:false});
                    $('#wl-empty').remove();
                    var n = $('#wl-tbody tr').length + 1;
                    var si = $('<span>').text(ip).html(), sl = lbl ? $('<span>').text(lbl).html() : '—';
                    $('#wl-tbody').prepend(
                        '<tr><td style="color:#9ca3af;">' + n + '</td>' +
                        '<td><span class="wl-ip-code">' + si + '</span></td>' +
                        '<td style="color:#6b7280;">' + sl + '</td>' +
                        '<td style="color:#9ca3af;font-size:.8rem;">Just now</td>' +
                        '<td style="text-align:right;"><button class="wl-del-btn" data-id="new" data-ip="' + si + '"><i class="iconify tabler--trash me-1"></i> Remove</button></td></tr>'
                    );
                    $('#wl-badge').text($('#wl-tbody tr').length);
                    $('#wl-ip').val(''); $('#wl-label').val('');
                } else { Swal.fire({icon:r.icon||'warning',title:'Failed',text:r.message}); }
                btn.prop('disabled',false).html('<i class="iconify tabler--plus me-1"></i> Add');
            },
            error:function(){ Swal.fire({icon:'error',title:'Error',text:'Could not add IP.'});
                btn.prop('disabled',false).html('<i class="iconify tabler--plus me-1"></i> Add'); }
        });
    });

    /* ── Whitelist: Remove ────────────────────────── */
    $(document).on('click', '.wl-del-btn', function () {
        var id = $(this).data('id'), ip = $(this).data('ip'), row = $(this).closest('tr');
        Swal.fire({
            title:'Remove IP?', icon:'warning',
            html:'Remove <code>' + $('<span>').text(ip).html() + '</code> from whitelist?',
            showCancelButton:true, confirmButtonColor:'#dc2626', confirmButtonText:'Yes, remove'
        }).then(function(r){
            if(!r.isConfirmed) return;
            $.ajax({ url:'/admin/settings/whitelist-ip/'+id, type:'DELETE',
                success:function(r){
                    if(r.status=='true'){
                        row.fadeOut(280, function(){ $(this).remove();
                            var n = $('#wl-tbody tr').length;
                            $('#wl-badge').text(n);
                            if(n===0) $('#wl-tbody').html('<tr id="wl-empty"><td colspan="5" style="text-align:center;padding:32px;color:#9ca3af;">No IPs whitelisted yet.</td></tr>');
                        });
                    } else { Swal.fire({icon:'error',title:'Failed',text:r.message}); }
                }
            });
        });
    });

    /* ── Status toggle ────────────────────────────── */
    $('#clocker_status').on('change', function () {
        var on = $(this).is(':checked');
        var fd = new FormData(); fd.append('status', on ? 1 : 0);
        $.ajax({
            url:'{{ route("update_clocker_status") }}', type:'POST',
            processData:false, contentType:false, data:fd,
            success:function(r){
                $('#ck-lbl').text(on ? 'Enabled' : 'Disabled');
                Swal.fire({icon:r.icon||'success',title:on?'Enabled':'Disabled',text:r.message});
            },
            error:function(){
                $('#clocker_status').prop('checked', !on);
                $('#ck-lbl').text(!on ? 'Enabled' : 'Disabled');
                Swal.fire({icon:'error',title:'Error',text:'Could not update status.'});
            }
        });
    });

});
</script>
@endsection