@extends('admin.layouts')

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">


                    <div class="col d-flex justify-content-between align-items-center">
                        <h1>Users</h1>
                        <a href="{{ route('admin.users.create') }}" class="btn btn-primary">Add New User</a>
                    </div>

                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">

                            <div class="card-body">

                                <table id="usersTable" class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Username</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Credit Ref</th>
                                            <th>Wallet</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->


                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div class="modal fade" id="editCreditRefModal" tabindex="-1" aria-labelledby="editCreditRefModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editCreditRefModalLabel">Edit Credit Reference</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="creditrefForm">
                        <div class="mb-3">

                            <textarea type="text" class="form-control" id="creditrefInput" name="creditref" rows="5"></textarea>
                            <input type="hidden" id="customerIdInput" name="id">
                        </div>
                    </form>
                    <div class="text-danger error-message"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveCreditRefBtn">Save changes</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).on('click', '.edit-creditref_admin', function() {
            var creditref = $(this).data('creditref_admin');
            var customerId = $(this).data('id');
            $("#editCreditRefModal .error-message").html("");
            $('#creditrefInput').val(creditref);
            $('#customerIdInput').val(customerId);
            $('#editCreditRefModal').modal('show');
        });

        $('#saveCreditRefBtn').click(function() {
            var creditref = $('#creditrefInput').val();
            var customerId = $('#customerIdInput').val();

            $.ajax({
                url: "{{ route('admin.updateCreditRef', '') }}/" + customerId,
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}", // CSRF token for security
                    creditref: creditref
                },
                success: function(response) {
                    // Close the modal
                    if (response.success) {
                        $('#editCreditRefModal').modal('hide');
                        $('#usersTable').DataTable().ajax.reload(null, false);
                    } else {
                        $("#editCreditRefModal .error-message").html(response.message);
                    }
                    console.log(response);
                },
                error: function(xhr) {
                    alert('Something went wrong while updating Credit Ref.');
                }
            });
        });
        $(function() {
            $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.users.index') }}",
                    data: function(d) {
                        d.broker_id = "{{ $broker_id }}";
                    },
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'username',
                        name: 'username'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'creditref_admin',
                        name: 'creditref_admin',
                        render: function(data, type, row) {
                            return `${data} <button class="btn btn-sm btn-primary edit-creditref_admin" data-id="${row.id}" data-creditref_admin="${data}">Edit</button>`;
                        }
                    },
                    {
                        data: 'wallet',
                        name: 'wallet'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                order: [
                    [0, 'desc']
                ]
            });
        });
    </script>
@endpush