@extends('Admin.layout')

<style>
    .dt-search,
    .dt-length {
        display: none !important;
    }
</style>

@section('navlink')
    <a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">
        Home
    </a>
    / <span>Withdrawals</span>
@endsection

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css">

    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">Withdrawals</h1>
        </div>
    </div>

    <div class="card card-animated-border mb-4">

        <div class="card-header">
            <h3 class="h6 mb-0 text-gold">Filters</h3>
        </div>

        <div class="card-body">

            <div class="row g-3 align-items-end">

                <div class="col-12 col-md-6 col-lg-5">
                    <label for="fromDate" class="form-label small">
                        From Date
                    </label>

                    <input type="date" id="fromDate" class="form-control">
                </div>

                <div class="col-12 col-md-6 col-lg-5">
                    <label for="toDate" class="form-label small">
                        To Date
                    </label>

                    <input type="date" id="toDate" class="form-control">
                </div>

                <div class="col-6 col-lg-2">
                    <button type="button" id="resetBtn" class="btn btn-secondary w-100">
                        Reset
                    </button>
                </div>

            </div>

        </div>
    </div>


    <div class="card card-animated-border mb-4">

        <div class="card-body">

            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">

                <div>
                    <select id="pageLength" class="form-select" style="width:100px;">

                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>

                    </select>
                </div>

                <div class="d-flex gap-2">

                    <input type="search" id="customSearch" class="form-control" placeholder="Search"
                        style="max-width:250px;">

                </div>

            </div>


            <div class="table-responsive">

                <table class="table table-striped align-middle mb-0" id="withdrawal-table" style="width:100%">

                    <thead>
                        <tr>

                            <th>SNO</th>

                            <th>DATE</th>

                            <th>USER ID</th>

                            <th>USER NAME</th>

                            <th>WITHDRAWAL AMOUNT ($)</th>

                            <th>REMAINING AMOUNT ($)</th>

                            <th>STATUS</th>

                            <th>ADMIN REMARK</th>

                        </tr>
                    </thead>

                    <tbody></tbody>

                </table>

            </div>

        </div>
    </div>


    {{-- Reject Modal --}}
    <div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Reject Withdrawal
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <input type="hidden" id="rejectWithdrawalId">

                    <label class="form-label">
                        Admin Remark <span class="text-danger">*</span>
                    </label>

                    <textarea id="adminRemark" class="form-control" rows="4" placeholder="Enter reason for rejection"></textarea>

                    <div id="remarkError" class="text-danger small mt-1">
                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="button" class="btn btn-danger" id="confirmReject">
                        Reject Withdrawal
                    </button>

                </div>

            </div>

        </div>
    </div>
    <!-- Withdrawal Process Modal -->
    <div class="modal fade" id="withdrawalProcessModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Process Withdrawal
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body">

                    <input type="hidden" id="processWithdrawalId">

                    <div class="text-center mb-3">
                        <p class="mb-1">
                            What do you want to do with this withdrawal?
                        </p>

                        <strong id="processWithdrawalAmount"></strong>
                    </div>

                    <div class="d-flex justify-content-center gap-2">

                        <button type="button" class="btn btn-success" id="modalAcceptWithdrawal">
                            <i class="ti ti-check me-1"></i>
                            Accept
                        </button>

                        <button type="button" class="btn btn-danger" id="modalRejectWithdrawal">
                            <i class="ti ti-x me-1"></i>
                            Reject
                        </button>

                    </div>

                </div>

            </div>

        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function() {

            const table = new DataTable('#withdrawal-table', {

                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('withdraw_data') }}",
                    type: "GET"
                },

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'date',
                        name: 'created_at'
                    },

                    {
                        data: 'user_id',
                        name: 'user.user_id'
                    },

                    {
                        data: 'user_name',
                        name: 'user.name'
                    },

                    {
                        data: 'amount',
                        name: 'usdt_amount',
                        render: function(data) {

                            return '$ ' + Number(data).toLocaleString(
                                'en-IN', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }
                            );
                        }
                    },

                    {
                        data: 'remaining_amount',
                        name: 'user.wallet_amount',
                        render: function(data) {

                            return '$ ' + Number(data).toLocaleString(
                                'en-IN', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }
                            );
                        }
                    },

                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'admin_remark',
                        name: 'admin_remark'
                    }

                ],

                order: [
                    [0, 'desc']
                ],

                pageLength: 10,

                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],

                searching: true,
                ordering: true,
                info: true,
                paging: true,
                autoWidth: false,
                scrollX: true,

                language: {
                    search: "",
                    searchPlaceholder: "Search...",
                    emptyTable: "No withdrawal records available",
                    zeroRecords: "No matching records found",
                    lengthMenu: "_MENU_",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    infoEmpty: "Showing 0 to 0 of 0 entries"
                },

                columnDefs: [{
                    targets: "_all",
                    className: "text-nowrap align-middle"
                }]
            });


            // Custom search

            $('#customSearch').on('input', function() {

                table.search(this.value).draw();

            });


            // Page length

            $('#pageLength').on('change', function() {

                table.page.len($(this).val()).draw();

            });


            // Reset

            $('#resetBtn').on('click', function() {

                $('#fromDate').val('');
                $('#toDate').val('');
                $('#customSearch').val('');

                table.search('').draw();

            });


            // Open process modal

            $(document).on('change', '.withdrawal-status-toggle', function() {

                const checkbox = $(this);

                const withdrawalId = checkbox.data('id');

                checkbox.prop('checked', false);

                $('#processWithdrawalId').val(withdrawalId);

                const modal = new bootstrap.Modal(
                    document.getElementById('withdrawalProcessModal')
                );

                modal.show();

            });


            // Accept withdrawal

            $('#modalAcceptWithdrawal').on('click', function() {

                const withdrawalId = $('#processWithdrawalId').val();

                if (!withdrawalId) {
                    return;
                }

                const button = $(this);

                button.prop('disabled', true);

                $.ajax({

                    url: "{{ route('withdraw_accept') }}",

                    type: "POST",

                    data: {

                        _token: "{{ csrf_token() }}",

                        withdrawal_id: withdrawalId

                    },

                    success: function(response) {

                        if (response.status) {

                            showCustomToast(
                                response.message,
                                'success'
                            );

                            bootstrap.Modal
                                .getInstance(
                                    document.getElementById(
                                        'withdrawalProcessModal'
                                    )
                                )
                                .hide();

                            table.ajax.reload(null, false);

                        } else {

                            showCustomToast(
                                response.message ||
                                'Something went wrong.',
                                'error'
                            );

                        }

                    },

                    error: function(xhr) {

                        let message = 'Something went wrong.';

                        if (xhr.responseJSON?.message) {

                            message = xhr.responseJSON.message;

                        }

                        showCustomToast(
                            message,
                            'error'
                        );

                    },

                    complete: function() {

                        button.prop('disabled', false);

                    }

                });

            });


            // Open reject modal

            $('#modalRejectWithdrawal').on('click', function() {

                const withdrawalId = $('#processWithdrawalId').val();

                if (!withdrawalId) {
                    return;
                }

                const processModal = bootstrap.Modal.getInstance(
                    document.getElementById(
                        'withdrawalProcessModal'
                    )
                );

                if (processModal) {
                    processModal.hide();
                }

                $('#rejectWithdrawalId').val(withdrawalId);

                $('#adminRemark').val('');

                $('#remarkError').text('');

                const modal = new bootstrap.Modal(
                    document.getElementById('rejectModal')
                );

                modal.show();

            });


            // Confirm reject

            $('#confirmReject').on('click', function() {

                const withdrawalId = $('#rejectWithdrawalId').val();

                const remark = $('#adminRemark').val().trim();

                $('#remarkError').text('');

                if (!remark) {

                    $('#remarkError').text(
                        'Admin remark is required for rejection.'
                    );

                    return;
                }

                const button = $(this);

                button.prop('disabled', true);

                $.ajax({

                    url: "{{ route('withdraw_reject') }}",

                    type: "POST",

                    data: {

                        _token: "{{ csrf_token() }}",

                        withdrawal_id: withdrawalId,

                        admin_remark: remark

                    },

                    success: function(response) {

                        if (response.status) {

                            showCustomToast(
                                response.message,
                                'success'
                            );

                            bootstrap.Modal
                                .getInstance(
                                    document.getElementById(
                                        'rejectModal'
                                    )
                                )
                                .hide();

                            table.ajax.reload(null, false);

                        } else {

                            showCustomToast(
                                response.message ||
                                'Something went wrong.',
                                'error'
                            );

                        }

                    },

                    error: function(xhr) {

                        let message = 'Something went wrong.';

                        if (xhr.responseJSON?.message) {

                            message = xhr.responseJSON.message;

                        }

                        showCustomToast(
                            message,
                            'error'
                        );

                    },

                    complete: function() {

                        button.prop('disabled', false);

                    }

                });

            });

        });
    </script>
@endsection