@props(['id','url','active'=>false])

<span class="d-inline-flex align-items-center">
  <label class="mb-0 switch js-ajax-toggle-paid"
         data-id="{{ $id }}"
         data-url="{{ $url }}">
    <input type="checkbox" {{ $active ? 'checked' : '' }}>
    <span class="slider round"></span>
  </label>
  <span class="ml-2 badge js-paid-badge {{ $active ? 'badge-success' : 'badge-secondary' }}">
      {{ $active ? __('Paid') : __('Unpaid') }}
  </span>
</span>

@once
@push('styles')
<style>
    .switch { position: relative; display: inline-block; width: 44px; height: 22px; }
    .switch input { opacity:0; width:0; height:0; }
    .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
        background:#ccc; transition:.3s; border-radius:22px; }
    .slider:before { position:absolute; content:""; height:18px; width:18px; left:2px; bottom:2px;
        background:#fff; transition:.3s; border-radius:50%; }
    .switch input:checked + .slider { background:#28a745; }
    .switch input:checked + .slider:before { transform: translateX(22px); }
</style>
@endpush

@push('scripts')
<script>
    (function(){
        function csrf(){ const m=document.querySelector('meta[name="csrf-token"]'); return m?m.content:'{{ csrf_token() }}'; }
        $(document).on('change', '.js-ajax-toggle-paid input[type="checkbox"]', function(){
            const $cb = $(this);
            const $wrap = $cb.closest('.js-ajax-toggle-paid');
            const $root = $wrap.closest('span');
            const $badge = $root.find('.js-paid-badge');

            $cb.prop('disabled', true);
            $.post($wrap.data('url'), { id: $wrap.data('id'), _token: csrf() })
                .done(function(resp){
                    if (resp && resp.status){
                        if (resp.value){
                            $badge.removeClass('badge-secondary').addClass('badge-success').text('{{ __('Paid') }}');
                        } else {
                            $badge.removeClass('badge-success').addClass('badge-secondary').text('{{ __('Unpaid') }}');
                        }
                    } else {
                        // فشل منطقي — رجّع الحالة
                        $cb.prop('checked', !$cb.prop('checked'));
                    }
                })
                .fail(function(){
                    // فشل شبكة — رجّع الحالة
                    $cb.prop('checked', !$cb.prop('checked'));
                })
                .always(function(){ $cb.prop('disabled', false); });
        });
    })();
</script>
@endpush
@endonce