@extends('layouts.admin')
@section('content')

@if(session('message'))
    <div class="alert alert-success">{{ session('message') }}</div>
@endif

<div class="card">
    <div class="card-header">Approvals</div>
    <div class="card-body">
        <div class="form-inline mb-3">
            <select id="filter-status" class="form-control mr-2">
                <option value="">All statuses</option>
                <option value="pending">Pending</option>
                <option value="approved">Approved</option>
                <option value="rejected">Rejected</option>
            </select>
            <select id="filter-type" class="form-control">
                <option value="">All types</option>
                <option value="profile_change">Profile change</option>
                <option value="payment_plan">Payment plan</option>
                <option value="maintenance">Maintenance</option>
                <option value="access">Access</option>
            </select>
        </div>
        <table class="table table-bordered table-striped table-hover datatable datatable-Approval">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Type</th>
                    <th>Requested by</th>
                    <th>Status</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@endsection
@section('scripts')
@parent
<script>
    $(function () {
        let dtOverrideGlobals = {
            processing: true,
            serverSide: true,
            retrieve: true,
            aaSorting: [],
            ajax: {
                url: "{{ route('admin.approvals.index') }}",
                data: function (d) {
                    d.status = $('#filter-status').val();
                    d.type = $('#filter-type').val();
                }
            },
            columns: [
                { data: 'id', name: 'id' },
                { data: 'type', name: 'type' },
                { data: 'requester', name: 'requester', orderable: false, searchable: false },
                { data: 'status', name: 'status' },
                { data: 'actions', name: '{{ trans('global.actions') }}', orderable: false, searchable: false }
            ],
            order: [[ 0, 'desc' ]],
            pageLength: 50,
        };
        let table = $('.datatable-Approval').DataTable(dtOverrideGlobals);
        $('#filter-status, #filter-type').on('change', function () { table.ajax.reload(); });
    });
</script>
@endsection