@extends('layouts.admin')

@section('content')

    <div class="card">
        <div class="card-header">
            Cash Payment Requests
        </div>
        <div class="card-body">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            <table class="table table-bordered table-hover ajaxTable datatable datatable-Cod">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Product</th>
                        <th>Buyer</th>
                        <th>Seller</th>
                        <th>Status</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Change Status Modal -->
    <div class="modal fade" id="statusModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update COD Payment Request Status</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="cod_request_id">
                    <div class="form-group">
                        <label>Status</label>
                        <select class="form-control" id="cod_status">
                            <option value="">Select Status</option>
                            <option value="Approved">Approved</option>
                            <option value="Rejected">Rejected</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveStatus">Update</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')

@parent
<script>
    $(function () {
        let dtOverrideGlobals = {
            processing: true,
            serverSide: true,
            retrieve: true,
            aaSorting: [],
            ajax: "{{ route('admin.cod_payment.cod_payment_request') }}",
            columns: [
                { data: 'id', name: 'id' },
                { data: 'product_name', name: 'product_name' },
                { data: 'buyer_name', name: 'buyer_name' },
                { data: 'seller_name', name: 'seller_name' },
                { data: 'status', name: 'status' }
            ],
            order: [[3, 'desc']], // sort by status
            pageLength: 10,
        };

        $('.datatable-Cod').DataTable(dtOverrideGlobals);
        
        // Open modal on change status button click
        $(document).on('click', '.changeStatus', function () {
            let id = $(this).data('id');
            $('#cod_request_id').val(id);
            $('#cod_status').val('');

            $('#statusModal').modal('show');
        });

        $('#saveStatus').click(function () {
            let id = $('#cod_request_id').val();
            let status = $('#cod_status').val();

            if(status === ''){
                alert('Please select status');
                return;
            }

            $.ajax({
                url: "{{ route('admin.cod_payment.cod_payment_request_status', ':id') }}".replace(':id', id),
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    status: status
                },
                success: function (response) {
                    $('#statusModal').modal('hide');
                    $('.datatable-Cod').DataTable().ajax.reload(null, false);
                },
                error: function () {
                    alert('Something went wrong!');
                }
            });
        });
    });
</script>
@endsection