@extends('layouts.app')
@section('title', 'Pending Perk Applications')
@section('content')
<div class="container page-content">
    <div class="row page-col align-items-center">
        <div class="col-6">
            <h1 class="font-weight-bold typography-4 mb-0">Pending Perk Applications</h1>
        </div>
        <div class="col-6 text-end">
            <a class="btn btn-secondary btn-custom" href="{{ route('perk-application-index') }}" role="button">Back</a>
        </div>
    </div>
    <div class="row justify-content-center page-col">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @include('public.table.perk-applications')
                </div>
            </div>
        </div>
    </div><!-- Perk Applications -->
</div>
@push('modal')
<div class="modal fade" id="rejectModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" id="rejectForm" action="" autocomplete="off">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Reject Perk Application</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="reject_remarks" class="col-12 col-form-label">
                            {{ __('Remarks') }}
                        </label>
                        <div class="col-12">
                            <textarea id="reject_remarks" class="form-control" name="reject_remarks" rows="3" placeholder="Write your remarks here...">{{ old('reject_remarks') }}</textarea>
                            <span class="invalid-feedback" role="alert">
                                <strong id="error_reject_remarks"></strong>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-black" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-purple btn-modal-save">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush
@endsection
@push('js')
<script type="text/javascript">
    $(document).ready(function(){
        $('#rejectModal').on('show.bs.modal', function (event) {
            var id = $(event.relatedTarget).data('id');
            var url = "{{ route('perk-application-reject', ['id'=>":id"]) }}";
            url = url.replace(":id", id);
            $('#rejectForm').attr("action", url);
        });

        $( "#rejectForm" ).submit(function(event) {
            event.preventDefault();
            $('.btn-modal-save').prop('disabled', true);
            $('.btn-modal-save').html('<i class="fas fa-circle-notch  fa-spin"></i> Loading');
            var formData = new FormData(this);
            var action_url = $(this).attr('action');
            $.ajax({
                type: 'POST',
                url: action_url,
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    $.each(data, function(k, v) {
                        console.log(k, v);
                        if (k == 'success'){
                            Swal.fire({
                                icon: 'success',
                                title: 'Rejected!',
                                text: 'The perk application has been rejected.',
                                showConfirmButton:false,
                                timer: 1500
                            })
                            $('#rejectModal').modal('hide');
                            $('.btn-modal-save').prop('disabled', false);
                            setTimeout(function() {
                                window.location.href = "{{ route('perk-application-show-all-pending') }}";
                            }, 500);
                        }else{
                            $('textarea[name='+k+']').addClass('is-invalid');
                            $('#error_'+k).html(v);
                            $('.btn-modal-save').prop('disabled', false);
                            $('.btn-modal-save').html('Save');
                        }
                    });
                }
            });
        });

        $('#rejectModal').on('hidden.bs.modal', function(e){
            $('#reject_remarks').val('');
        });
    });
</script>
@endpush