@extends('layouts.admin')
@section('page-title')
    {{ __('Mobile App Users') }}
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="float-end">
                {{-- <a href="#" data-size="lg" data-url="{{ route('admin.mobile-users.create') }}" data-ajax-popup="true" data-title="{{__('Add New User')}}" class="btn btn-sm btn-primary">
                <i class="ti ti-plus"></i>
            </a> --}}
            </div>
            <h4>{{ __('Mobile User List') }}</h4>
        </div>
        <div class="table-responsive card-body">
            <table id="mobileUserTable" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Role</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@push('script-page')
    <script>
        $(document).ready(function() {
            const table = $('#mobileUserTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.mobile-users.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'username',
                        name: 'username'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'phone',
                        name: 'phone'
                    },
                    {
                        data: 'role',
                        name: 'role'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });


            // ✅ IMPORTANT: Set CSRF header globally
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            // ✅ IMPORTANT: Set CSRF header globally
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(document).on('click', '.delete-btn', function() {
                if (confirm('Permanently delete this user?')) {
                    let id = $(this).data('id');
                    $.ajax({
                        url: "{{ url('admin/mobile-users') }}/" + id + "/destroy",
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function() {
                            table.ajax.reload();
                        }
                    });
                }
            });
        });
    </script>
@endpush