<?php $__env->startSection('content'); ?>

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

<div class="card">
    <div class="card-header"><?php echo e(trans('cruds.country.title')); ?></div>
    <div class="card-body">
        <table class="table table-bordered table-hover ajaxTable datatable datatable-Make">
            <thead>
                <tr>
                    <th>
                        <?php echo e(trans('cruds.country.fields.id')); ?>

                    </th>
                    <th>
                        <?php echo e(trans('cruds.country.fields.icon')); ?>

                    </th>
                    <th>
                        <?php echo e(trans('cruds.country.fields.phone_code')); ?>

                    </th>
                    <th>
                        <?php echo e(trans('cruds.country.fields.name')); ?>

                    </th>
                    <th>
                        <?php echo e(trans('cruds.country.fields.currency')); ?>

                    </th>
                    <th>
                        <?php echo e(trans('cruds.country.fields.rate')); ?>

                    </th>
                    <th>
                        <?php echo e(trans('cruds.country.fields.is_seller_flag')); ?>

                    </th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('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>

<?php echo \Illuminate\View\Factory::parentPlaceholder('scripts'); ?>
<script>
    $(function () {
        let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)

        let dtOverrideGlobals = {
            buttons: dtButtons,
            processing: true,
            serverSide: true,
            retrieve: true,
            aaSorting: [],
            ajax: "<?php echo e(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: '<?php echo e(csrf_token()); ?>',
                    is_seller_flag: value
                },
                success: function (res) {
                    console.log('Updated successfully');
                },
                error: function () {
                    alert('Failed to update flag');
                }
            });
        });
    });

</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.admin', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/resources/views/admin/countries/index.blade.php ENDPATH**/ ?>