@extends('Admin.layout')

@section('content')

<!-- PAGE HEADER -->
<div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ route('pending_ga_cases') }}"
       class="btn btn-icon btn-outline-primary">
        <i class="ti ti-arrow-left"></i>
    </a>

    <h5 class="mb-0 fw-bold" style="color: var(--gold-soft);">
        Approved GA Cases
    </h5>
</div>

<!-- BANK CARD -->
<div class="card bank-card p-3 p-md-4 p-lg-5">

    <!-- FILTERS -->
    <div class="row g-2 align-items-center mb-4">

        <div class="col-12 col-sm-4 col-md-3 col-lg-2">
            <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>
                </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">
        <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"
                        aria-label="Close">
                </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>

<!-- 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('approved_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
                }
            ]
        });

        // 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;

        // APPROVE STATUS
        $(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');
            }
        });

        // CONFIRM APPROVAL
        $('#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: "{{ url('/pending_ga_cases_approve') }}/" + 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;
                }
            });
        });

    });
</script>

@endsection