@extends('parts.container')

@section('styles')
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/src/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/light/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/dark/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/light/components/modal.css') }}"  />
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/dark/components/modal.css') }}"  />

    <!-- END PAGE LEVEL STYLES -->
@endsection

@section('content')
    <div class="row layout-spacing">
        <div class="col-lg-12">
            <div class="statbox widget box box-shadow">
                <div class="widget-content widget-content-area">
                    <div class="table-responsive backoffice-table-scroll">
                        <table id="style-3" class="table style-3  dt-table-hover">
                            <thead>
                                <thead>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Email</th>
                                        <th>Date Registered</th>
                                        <th>Daily Max Amount</th>
                                        <th>Daily Txn Count</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- Modal for Top Up -->
    <div class="modal fade" id="topUpModal" tabindex="-1" role="dialog" aria-labelledby="topUpModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="topUpModalLabel">Top Up User's Wallet</h5>
                </div>
                <div class="modal-body">
                    <p>You're about to top up the wallet of <strong><span id="userName"></span></strong>.</p>
                    <form id="topUpForm">
                        <div class="form-group">
                            <label for="walletSelect">Wallet</label>
                            <select class="form-control" id="walletSelect" name="wallet_no" required>
                                <option value="" disabled selected>Select wallet</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="amount">Amount</label>
                            <input type="number" class="form-control" id="topUpAmount" name="amount" min="0.01" step="0.01" required disabled>
                        </div>
                        <!-- Hidden input field for the user ID -->
                        <input type="hidden" id="userId" name="user_id" value="">
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" id="canceltopUp"><i class="flaticon-cancel-12"></i> Close</button>
                    <button type="button" class="btn btn-primary" id="topUpSaveBtn">Save</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="expenditureModal" tabindex="-1" role="dialog" aria-labelledby="expenditureModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="expenditureModalLabel">User Expenditure Override</h5>
                </div>
                <div class="modal-body">
                    <p>Configure user-specific limits for <strong><span id="expenditureUserName"></span></strong>. Leave fields blank to use global defaults.</p>
                    <form id="expenditureForm">
                        <div class="form-group">
                            <label for="expenditureMaxAmount">Max transaction amount per day (base currency)</label>
                            <input type="number" class="form-control" id="expenditureMaxAmount" name="max_daily_amount" min="0" step="0.01">
                        </div>
                        <div class="form-group">
                            <label for="expenditureMaxCount">Max number of transactions per day</label>
                            <input type="number" class="form-control" id="expenditureMaxCount" name="max_daily_transactions" min="0" step="1">
                        </div>
                        <input type="hidden" id="expenditureUserId" value="">
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" id="cancelExpenditure"><i class="flaticon-cancel-12"></i> Close</button>
                    <button type="button" class="btn btn-primary" id="saveExpenditureBtn">Save</button>
                </div>
            </div>
        </div>
    </div>

@endsection



@section('scripts')
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>

    <script>
        c3 = $('#style-3').DataTable({
            processing: true,
            serverSide: true,
            ajax: "/admin/users/list",
            columns: [{
                    data: 'first_name',
                    name: 'First Name'
                },
                {
                    data: 'last_name',
                    name: 'Last Name'
                },
                {
                    data: 'email',
                    name: 'Email'
                },
                {
                    data: 'created_at',
                    name: 'Date Created'
                },
                {
                    data: 'max_daily_amount',
                    render: function(data) {
                        return data === null ? 'Default' : data;
                    }
                },
                {
                    data: 'max_daily_transactions',
                    render: function(data) {
                        return data === null ? 'Default' : data;
                    }
                },
                {
                    data: 'id',
                    render: function(data, type, row) {
                        return `<button class='btn btn-success topUpBtn' 
                                        data-user-id='${data}' 
                                        data-first-name='${row.first_name}' 
                                        data-last-name='${row.last_name}'>
                                        Top Up
                                    </button>
                                    <button class='btn btn-warning editExpenditureBtn'
                                        data-user-id='${data}'
                                        data-first-name='${row.first_name}'
                                        data-last-name='${row.last_name}'
                                        data-max-daily-amount='${row.max_daily_amount ?? ''}'
                                        data-max-daily-transactions='${row.max_daily_transactions ?? ''}'>
                                        Expenditure
                                    </button>
                                    <a class='btn btn-primary' href='/admin/users/${data}/statement'>User statement</a>`;
                    }

                }

            ],
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [5, 10, 20, 50],
            "pageLength": 10
        });

        multiCheck(c3);

        $(document).on('click', '.topUpBtn', function() {
            const userId = $(this).data('user-id');
            const firstName = $(this).data('first-name');
            const lastName = $(this).data('last-name');

            $('#userId').val(userId);
            $('#userName').text(firstName + ' ' + lastName);

            // reset and load wallets
            const $walletSelect = $('#walletSelect');
            $walletSelect.empty();
            $walletSelect.append('<option value="" disabled selected>Loading wallets...</option>');

            $.ajax({
                url: `users/${userId}/wallets`,
                method: 'GET',
                success: function(resp) {
                    $walletSelect.empty();
                    if (resp.success && resp.wallets && resp.wallets.length > 0) {
                        $walletSelect.append('<option value="" disabled selected>Select wallet</option>');
                        resp.wallets.forEach(function(w) {
                            const label = `${w.alias ? w.alias + ' - ' : ''}${w.currency_code} (${w.wallet_no})`;
                            $walletSelect.append(`<option value="${w.wallet_no}">${label}</option>`);
                        });
                        $('#topUpAmount').prop('disabled', true).val('');
                    } else {
                        $walletSelect.append('<option value="" disabled>No wallets found</option>');
                        $('#topUpAmount').prop('disabled', true).val('');
                    }
                },
                error: function(xhr) {
                    $walletSelect.empty();
                    $walletSelect.append('<option value="" disabled>Error loading wallets</option>');
                    $('#topUpAmount').prop('disabled', true).val('');
                }
            });

            $('#topUpModal').modal('show');
        });
        $(document).on('click', '#canceltopUp', function() {
            $('#topUpModal').modal('hide');
        });

        $('#topUpSaveBtn').click(function() {
            const amount = $('#topUpAmount').val();
            const userId = $('#userId').val();
            const walletNo = $('#walletSelect').val();

            if (amount && userId && walletNo) {
                $.ajax({
                    url: 'users/topUp', 
                    method: 'POST',
                    data: {
                        user_id: userId,
                        amount: amount,
                        wallet_no: walletNo,
                        _token: '{{ csrf_token() }}' 
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#topUpModal').modal('hide');
                            c3.ajax.reload(); 
                        } else {
                            alert('Failed to top up.');
                        }
                    },
                    error: function(xhr) {
                        try {
                            const msg = xhr && xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unknown error';
                            console.error(msg);
                            alert('An error occurred: ' + msg);
                        } catch (e) {
                            alert('An error occurred while processing your request.');
                        }
                    }
                });
            } else {
                alert('Please enter an amount and select a wallet.');
            }
        });

        // Enable amount only after wallet selection
        $(document).on('change', '#walletSelect', function() {
            if ($(this).val()) {
                $('#topUpAmount').prop('disabled', false).focus();
            } else {
                $('#topUpAmount').prop('disabled', true).val('');
            }
        });

        $(document).on('click', '.editExpenditureBtn', function() {
            const userId = $(this).data('user-id');
            const firstName = $(this).data('first-name');
            const lastName = $(this).data('last-name');

            $('#expenditureUserId').val(userId);
            $('#expenditureUserName').text(firstName + ' ' + lastName);
            $('#expenditureMaxAmount').val($(this).data('max-daily-amount'));
            $('#expenditureMaxCount').val($(this).data('max-daily-transactions'));
            $('#expenditureModal').modal('show');
        });

        $(document).on('click', '#cancelExpenditure', function() {
            $('#expenditureModal').modal('hide');
        });

        $('#saveExpenditureBtn').click(function() {
            const userId = $('#expenditureUserId').val();
            $.ajax({
                url: `users/${userId}/expenditure-settings`,
                method: 'POST',
                data: {
                    max_daily_amount: $('#expenditureMaxAmount').val() || null,
                    max_daily_transactions: $('#expenditureMaxCount').val() || null,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        $('#expenditureModal').modal('hide');
                        c3.ajax.reload();
                    } else {
                        alert('Failed to save expenditure settings.');
                    }
                },
                error: function(xhr) {
                    const msg = xhr && xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unknown error';
                    alert('An error occurred: ' + msg);
                }
            });
        });

    </script>
    <!-- END PAGE LEVEL SCRIPTS -->
@endsection