@extends('layouts.main')

@section('content')
    <section class="container">
        <div class="row">
            @include('layouts.brokersidebar')

            <div class="col-xl-9 col-md-9 col-12 rightbar mt-5 gametimeContainer">

                <div class="d-flex justify-content-end mb-3">
                    <a href="{{ route('broker.customercreate') }}" class="btn btn-primary">Add New</a>
                </div>

                <table class="table" id="customerDataTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Username</th>
                            <th>Wallet</th>
                            <th>Credit Ref.</th>
                            <th>Date Registered</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>



            </div>
        </div>
    </section>
    <!-- Modal -->
    <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>
        $(document).ready(function() {
            $(document).on('click', '.edit-creditref', function() {
                var creditref = $(this).data('creditref');
                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('broker.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');
                            $('#customerDataTable').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.');
                    }
                });
            });

            $('#customerDataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('broker.showCustomers') }}", // Adjust the route
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'username',
                        name: 'username'
                    },
                    {
                        data: 'wallet',
                        name: 'wallet'
                    },
                    {
                        data: 'creditref',
                        name: 'creditref',
                        render: function(data, type, row) {
                            return `${data} <button class="btn btn-sm btn-primary edit-creditref" data-id="${row.id}" data-creditref="${data}">Edit</button>`;
                        }
                    },

                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                order: [
                    [0, 'desc']
                ] // Order by the 'Date' column by default
            });
        });
    </script>
@endpush