{{-- @extends(BaseHelper::getAdminMasterLayoutTemplate())

@section('content')
    <style>
        .custom-btn {
            background: var(--gradient-primary) !important;
            border-color: #704594;
            border-radius: 15px;
        }
        .custom-btn:hover {
            background: #fff;
            border-color: #704594;
            color: #704594;
        }
        .custom-select {
            width: 80px;
            padding: 5px 10px;
            border-radius: 8px;
            border: 1px solid #704594;
            background-color: #fff;
            color: #333;
        }
      .aiz-switch {
            position: relative;
            display: inline-block;
            width: 40px;  
            height: 22px;  
        }

        .aiz-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: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;   /* reduced from 26px */
            width: 16px;    /* reduced from 26px */
            left: 3px;      /* adjusted for smaller knob */
            bottom: 3px;
            background-color: white;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(18px); /* adjusted for smaller width */
        }

        .slider.round {
            border-radius: 22px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

    </style>


    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <form class="" id="sort_charges" action="" method="GET">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <div class="d-flex align-items-center flex-nowrap gap-2">
                                <label for="entries" class="text-muted fw-bold mb-0">Show</label>
                                <select id="entries" class="form-select form-select-sm custom-select" name="entries">
                                    <option value="10" {{ request('entries', 10) == 10 ? 'selected' : '' }}>10</option>
                                    <option value="20" {{ request('entries') == 20 ? 'selected' : '' }}>20</option>
                                    <option value="30" {{ request('entries') == 30 ? 'selected' : '' }}>30</option>
                                    <option value="50" {{ request('entries') == 50 ? 'selected' : '' }}>50</option>
                                    <option value="75" {{ request('entries') == 75 ? 'selected' : '' }}>75</option>
                                    <option value={{ $charges->total() }} {{ request('entries') == 'all' ? 'selected' : '' }}>All</option>
                                </select>
                                <span class="text-muted fw-bold mb-0">entries</span>
                            </div>

                            <div class="d-flex align-items-center gap-2">
                                <div class="mb-0">
                                    <input type="text" class="form-control" id="search" name="search"
                                        @isset($sort_search) value="{{ $sort_search }}" @endisset
                                        placeholder="Type charges name" style="width: 200px;">
                                </div>
                                <div class="page-title-right">
                                    @if (Auth::user()->hasPermission('charges.create'))
                                    <a href="{{ route('charges.create') }}" class="btn btn-primary">
                                        <i class="fas fa-plus"></i>Add New
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="card-body" id="charges_listing">
                    @include('backend.charges.charges_listing')
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script type="text/javascript">
        function update_charges_status(el) {
            if (el.checked) {
                var status = 1;
            } else {
                var status = 0;
            }
            
            $.post('{{ route('charges.status') }}', {
                _token: '{{ csrf_token() }}',
                id: el.value,
                status: status
            }, function(data) {
                if (data.success) {
                    if (typeof toastr !== 'undefined') {
                        Botble.showSuccess('Status updated successfully');
                    } else {
                        Botble.showSuccess('Status updated successfully');
                    }
                } else {
                    if (typeof toastr !== 'undefined') {
                        Botble.showError('Something went wrong');
                    } else {
                        Botble.showError('Something went wrong');
                    }
                }
            }).fail(function() {
                if (typeof toastr !== 'undefined') {
                    Botble.showError('Something went wrong');
                } else {
                    Botble.showError('Something went wrong');
                }
            });
        }

        $(document).ready(function() {
            $('#search').on('input', function() {
                $("#main_loader").show();
                loadCharges($('#sort_charges').serialize());
            });

            $('#entries').on('change', function() {
                $("#main_loader").show();
                loadCharges($('#sort_charges').serialize());
            });

            $(document).on('click', '.aiz-pagination a', function(e) {
                $("#main_loader").show();
                e.preventDefault();
                let url = $(this).attr('href');
                loadCharges(url.split('?')[1]);
            });

            function loadCharges(params) {
                $("#main_loader").show();
                $.ajax({
                    url: "{{ route('charges.index') }}",
                    type: "GET",
                    data: params,
                    success: function(response) {
                        $('#charges_listing').html(response);
                        $("#main_loader").hide();
                    },
                    error: function(xhr) {
                        console.error("Error loading charges:", xhr.responseText);
                    }
                });
            }

            $('.delete-btn').on('click', function() {
                var deleteUrl = $(this).data('url');
                $('#deleteForm').attr('action', deleteUrl);
            });
        });
    </script>
@endsection --}}

@extends(BaseHelper::getAdminMasterLayoutTemplate())

@section('content')
    {!! $dataTable->renderTable() !!}
@endsection

@section('javascript')
    <script type="text/javascript">
function update_charges_status(el) {
    var status = el.checked ? 1 : 0;
    
    $.post('{{ route('charges.status') }}', {
        _token: '{{ csrf_token() }}',
        id: el.value,
        status: status
    }, function(data) {
        if (data.success) {
            Botble.showSuccess('Status updated successfully');
        } else {
            Botble.showError('Something went wrong');
        }
    }).fail(function() {
        Botble.showError('Something went wrong');
    });
}
 </script>
@endsection