@extends('layouts/contentNavbarLayout')
@section('title', 'User Bank Accounts')
@section('vendor-style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-bootstrap-4/bootstrap-4.min.css">
@endsection
@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <span>User Bank Accounts</span>
        </div>
        <div class="card-body">
            <!-- Filters -->
            <form id="filter-form" class="mb-3 mt-2">
                <div class="row mb-4 mt-2 g-2">
                    <div class="col-md-2">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="filter_user" class="form-control" placeholder="Search by User Name">
                            <label for="filter_user">Search by User Name</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="filter_account_number" class="form-control" placeholder="Account Number">
                            <label for="filter_account_number">Account Number</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-floating form-floating-outline">
                            <select id="filter_status" class="form-control">
                                <option value="">-- Status --</option>
                                <option value="P">Pending</option>
                                <option value="A">Approved</option>
                                <option value="R">Rejected</option>
                            </select>
                            <label for="filter_status">Status</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-floating form-floating-outline w-100">
                            <input type="date" name="start_date" id="start_date" class="form-control" placeholder="Start Date">
                            <label for="start_date">From (Start date)</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-floating form-floating-outline w-100">
                            <input type="date" name="end_date" id="end_date" class="form-control" placeholder="End Date">
                            <label for="end_date">To (End date)</label>
                        </div>
                    </div>
                    <div class="col-md-1 mt-2">
                        <button type="submit" class="btn btn-primary w-100">Apply</button>
                    </div>
                    
                    <div class="col-md-1 mt-2">
                        <button type="button" class="btn btn-outline-primary w-100" id="reset_filter">Reset</button>
                    </div>
                </div>
            </form>

            <!-- Table -->
            <div class="table-responsive mt-4">
                <table id="accountsTable"
                    class="table table-bordered table-striped table-hover text-center align-middle w-100">
                    <thead class="table-primary">
                        <tr>
                            <th>S.No</th>
                            <th>User Info</th>
                            <th>Bank Name</th>
                            <th>Branch</th>
                            <th>Account Holder</th>
                            <th>Account Number</th>
                            <th>IFSC</th>
                            <th>Status</th>
                            <th>Remark</th>
                            <th>Docs</th>
                            <th>Created</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            let table = $('#accountsTable').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                responsive: true,
                ajax: {
                    url: '{{ route('admin.user-company-accounts.list') }}',
                    data: function(d) {
                        d.user = $('#filter_user').val();
                        d.status = $('#filter_status').val();
                        d.start_date = $('#start_date').val();
                        d.end_date = $('#end_date').val();
                        d.account_number = $('#filter_account_number').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'user_info',
                        name: 'user_info'
                    },
                    {
                        data: 'bank_name',
                        name: 'bank_name'
                    },
                    {
                        data: 'branch_name',
                        name: 'branch_name'
                    },
                    {
                        data: 'account_holder_name',
                        name: 'account_holder_name'
                    },
                    {
                        data: 'account_number',
                        name: 'account_number'
                    },
                    {
                        data: 'ifsc',
                        name: 'ifsc'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'remark',
                        name: 'remark'
                    },
                    {
                        data: 'docs',
                        name: 'docs',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // $('#filter_user, #filter_status, #filter_date, #filter_account_number').on('change keyup', function() {
            //     table.draw();
            // });
             $('#filter-form').on('submit', function(e) {
                e.preventDefault();
                table.draw();
            });

            $('#reset_filter').on('click', function(e) {
                e.preventDefault();
                $('#filter-form')[0].reset();
                table.draw();
            });

            // Approve/Reject Logic
            $(document).on('click', '.btn-approve, .btn-reject', function() {
                let id = $(this).data('id');
                let action = $(this).hasClass('btn-approve') ? 'A' : 'R';
                let remark = '';

                if (action === 'R') {
                    Swal.fire({
                        title: 'Reject Reason?',
                        input: 'text',
                        inputPlaceholder: 'Enter remark',
                        showCancelButton: true,
                        confirmButtonText: 'Reject',
                        cancelButtonText: 'Cancel',
                        inputValidator: (value) => {
                            if (!value) return 'Remark is required!';
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            sendStatusUpdate(id, action, result.value);
                        }
                    });
                } else {
                    sendStatusUpdate(id, action, 'Approved successfully');
                }
            });

            function sendStatusUpdate(id, status, remark) {
                $.ajax({
                    url: '{{ route('admin.user-company-accounts.update-status') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: id,
                        status: status,
                        remark: remark
                    },
                    success: function(response) {
                        Swal.fire('Success', response.message, 'success');
                        table.ajax.reload();
                    },
                    error: function(xhr) {
                        Swal.fire('Error', xhr.responseJSON.message, 'error');
                    }
                });
            }
        });
    </script>
@endsection