@extends('layouts.admin')
@section('content')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap4-toggle/css/bootstrap4-toggle.min.css">

<div class="card">
    <div class="card-header">{{ trans('cruds.country.title') }}</div>
    <div class="card-body">
        <table class="table table-bordered table-hover ajaxTable datatable datatable-Make">
            <thead>
                <tr>
                    <th>
                        {{ trans('cruds.country.fields.id') }}
                    </th>
                    <th>
                        {{ trans('cruds.country.fields.icon') }}
                    </th>
                    <th>
                        {{ trans('cruds.country.fields.phone_code') }}
                    </th>
                    <th>
                        {{ trans('cruds.country.fields.name') }}
                    </th>
                    <th>
                        {{ trans('cruds.country.fields.currency') }}
                    </th>
                    <th>
                        {{ trans('cruds.country.fields.rate') }}
                    </th>
                    <th>
                        {{ trans('cruds.country.fields.is_seller_flag') }}
                    </th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

@parent
<script>
    $(function () {
        let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)

        let dtOverrideGlobals = {
            buttons: dtButtons,
            processing: true,
            serverSide: true,
            retrieve: true,
            aaSorting: [],
            ajax: "{{ route('admin.country.index') }}",
            columns: [
                { data: 'id', name: 'id' },
                { data: 'top_level_domain', name: 'top_level_domain' },
                { data: 'phone_code', name: 'phone_code' },
                { data: 'country_name', name: 'country_name' },
                { data: 'currency', name: 'currency' },
                { data: 'rates', name: 'rates' },
                { data: 'is_seller_flag', name: 'is_seller_flag' }
            ],
            orderCellsTop: true,
            order: [[1, 'desc']],
            pageLength: 10,
        };

        let table = $('.datatable-Make').DataTable(dtOverrideGlobals);

        // Re-initialize toggle after table draw
        table.on('draw', function () {
            $('.toggle-flag').bootstrapToggle({
                on: 'Yes',
                off: 'No',
                size: 'small',
                onstyle: 'success',
                offstyle: 'danger'
            });
        });

        // Handle toggle change
        $(document).on('change', '.toggle-flag', function () {
            let id = $(this).data('id');
            let value = $(this).prop('checked') ? 1 : 0;

            $.ajax({
                url: 'country/' + id + '/toggle-seller-flag',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    is_seller_flag: value
                },
                success: function (res) {
                    console.log('Updated successfully');
                },
                error: function () {
                    alert('Failed to update flag');
                }
            });
        });
    });

</script>
@endsection