@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>Brokers</h1>
                        <a href="{{ route('admin.brokers.create') }}" class="btn btn-primary">Add New Broker</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>
        $(function() {
            $(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.');
                    }
                });
            });
            $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.brokers.index') }}",
                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