@extends('Admin.layout')

@section('content')

<!-- PAGE HEADER -->
<div class="row align-items-center g-3 mb-3">
    <div class="col-12 col-md">
        <h3 class="mb-0 text-nowrap">Requested GA Cases</h3>
    </div>

    <div class="col-12 col-md-auto">
        <div class="d-flex gap-2">
            <a href="{{ route('approved_cases') }}"
               class="btn btn-success text-white flex-fill">
                Approved
            </a>

            <a href="{{ route('rejected_cases') }}"
               class="btn btn-danger text-white flex-fill">
                Rejected
            </a>
        </div>
    </div>
</div>

<!-- BANK CARD -->
<div class="card bank-card p-3">

    <!-- FILTERS -->
    <div class="row g-2 align-items-center mb-4">
        <div class="col-12 col-sm-4 col-md-3 col-lg-1">
            <select id="pageLength" class="form-select w-100">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>
        </div>

        <div class="col-12 col-sm-8 col-md-5 col-lg-4 ms-md-auto">
            <input type="search" id="bankSearch" class="form-control w-100"
                   placeholder="Search">
        </div>
    </div>

    <!-- TABLE -->
    <div class="table-responsive bank-table-wrapper">
        <table id="table" class="table mb-0 text-nowrap w-100">
            <thead>
                <tr>
                    <th>SNO</th>
                    <th>GA ID</th>
                    <th>Name</th>
                    <th>Total Gross</th>
                    <th>Total Net</th>
                    <th>Rate / g</th>
                    <th>Eligible Loan amount</th>
                    <th>View</th>
                    <th>STATUS</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- APPROVE GA MODAL -->
<div class="modal fade" id="approveGaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Approve GA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                Are you sure you want to approve this GA?
            </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="confirmApproveGa">
                    Yes, Sure
                </button>
            </div>

        </div>
    </div>
</div>

<!-- REJECT GA MODAL -->
<div class="modal fade" id="rejectGaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Reject GA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Rejection Reason</label>
                    <textarea id="rejectReason" class="form-control" rows="4"
                              placeholder="Enter rejection reason"></textarea>

                    <div id="rejectReasonError" class="text-danger mt-1" style="display:none;"></div>
                </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="confirmRejectGa">
                    Reject GA
                </button>
            </div>

        </div>
    </div>
</div>

<!-- DATATABLE CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

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

<!-- DATATABLE JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

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

        window.bankTable = $('#table').DataTable({
            processing: true,
            serverSide: true,

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

            pageLength: 10,
            lengthChange: false,
            searching: true,
            ordering: true,
            info: true,
            autoWidth: false,
            dom: 'rtip',

            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'ga_id',
                    name: 'user_id'
                },
                {
                    data: 'name',
                    name: 'customer_name'
                },
                {
                    data: 'total_gross',
                    name: 'total_gross',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'total_net',
                    name: 'total_net',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'rate_per_gram',
                    name: 'rate_per_gram',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'eligible_loan_amount',
                    name: 'eligible_loan_amount',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'view',
                    name: 'view',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        // SEARCH
        $('#bankSearch').on('keyup', function() {
            window.bankTable.search(this.value).draw();
        });

        // PAGE LENGTH
        $('#pageLength').on('change', function() {
            window.bankTable.page.len(parseInt(this.value)).draw();
        });

        let approveGaId = null;
        let rejectGaId = null;

        // STATUS CHANGE
        $(document).on('change', '.status-dropdown', function() {
            let dropdown = $(this);
            let id = dropdown.data('id');
            let status = dropdown.val();

            if (status === 'Approved') {
                approveGaId = id;
                $('#approveGaModal').modal('show');
                return;
            }

            if (status === 'Rejected') {
                rejectGaId = id;
                $('#rejectReason').val('');
                $('#rejectReasonError').hide().text('');
                $('#rejectGaModal').modal('show');
                return;
            }
        });

        // APPROVE GA
        $('#confirmApproveGa').on('click', function() {
            if (!approveGaId) {
                return;
            }

            let button = $(this);
            button.prop('disabled', true);
            button.html('<span class="spinner-border spinner-border-sm me-1"></span> Processing...');

            $.ajax({
                url: "{{ route('pending_ga_cases_approve', ':id') }}".replace(':id', approveGaId),
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}"
                },

                success: function(response) {
                    if (response.success) {
                        $('#approveGaModal').modal('hide');
                        window.bankTable.ajax.reload(null, false);
                    }
                },

                error: function(xhr) {
                    alert(xhr.responseJSON?.message ?? 'Unable to approve GA.');
                },

                complete: function() {
                    button.prop('disabled', false);
                    button.html('Yes, Sure');
                    approveGaId = null;
                }
            });
        });

        // REJECT GA
        $('#confirmRejectGa').on('click', function() {
            if (!rejectGaId) {
                return;
            }

            let reason = $('#rejectReason').val().trim();

            if (reason === '') {
                $('#rejectReasonError')
                    .text('Rejection reason is required.')
                    .show();
                return;
            }

            let button = $(this);
            button.prop('disabled', true);
            button.html('<span class="spinner-border spinner-border-sm me-1"></span> Processing...');

            $.ajax({
                url: "{{ url('/pending_ga_cases_reject') }}/" + rejectGaId,
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    rejection_reason: reason
                },

                success: function(response) {
                    if (response.success) {
                        $('#rejectGaModal').modal('hide');
                        window.bankTable.ajax.reload(null, false);
                    }
                },

                error: function(xhr) {
                    if (xhr.responseJSON?.errors?.rejection_reason) {
                        $('#rejectReasonError')
                            .text(xhr.responseJSON.errors.rejection_reason[0])
                            .show();
                    } else {
                        $('#rejectReasonError')
                            .text(xhr.responseJSON?.message ?? 'Unable to reject GA.')
                            .show();
                    }
                },

                complete: function() {
                    button.prop('disabled', false);
                    button.html('Reject GA');
                    rejectGaId = null;
                }
            });
        });
    });
</script>

@endsection