@extends('layouts.app')
@section('title', 'Confirmed Employment Application Form')
@section('content')
<div class="container page-content">
    <div class="row page-col pb-3">
        <div class="col-12">
            <h1 class="font-weight-bold typography-4 mb-0">Confirmed Employment Application</h1>
        </div>
    </div>
    <div class="page-col text-end pb-3">
        @if( !$confirmed_application->confirmed_by )
            <a class="ms-2 btn btn-purple btn-custom btn" data-id="{{ $confirmed_application->id }}" data-bs-toggle="modal" data-bs-target="#generateConfirmedEditModal">
                <span><i class="far fa-paper-plane pe-1"></i>Send Edit Link</span>
            </a>
        @endif
        <a class="ms-2 btn btn-black btn-custom" href="{{ route('employee-application-index') }}">Back</a>
    </div>
    <div class="row justify-content-start page-col pb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3 row">
                        @if( $confirmed_application->pdf_appointment_letter )
                        <div class="col-12">
                            <div class="mb-3 row">
                                <div class="col-12">
                                    <div class="form-control-plaintext">
                                        <a href="{{ Storage::disk('public')->url($confirmed_application->pdf_appointment_letter) }}" class="btn btn-link d-flex align-items-center" target="_blank">
                                            <i class="far fa-2x fa-file-pdf text-dark-red pe-2"></i>Appointment Letter
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="col-md-6 col-12">
                            <div class="mb-3 row">
                                <label for="full_name" class="col-12 col-form-label">
                                    {{ __('Full Name') }}
                                </label>
                                <div class="col-12">
                                    <input id="full_name" type="text" class="form-control" name="full_name" value="{{ $confirmed_application->full_name }}" readonly />
                                </div>
                            </div>
                        </div><!-- Full Name -->
                        <div class="col-md-6 col-12">
                            <div class="mb-3 row">
                                <label for="email" class="col-12 col-form-label">
                                    {{ __('Email') }}
                                </label>
                                <div class="col-12">
                                    <input id="email" type="text" class="form-control" name="email" value="{{ $confirmed_application->personal_email }}" readonly />
                                </div>
                            </div>
                        </div><!-- Email -->
                        <div class="col-md-6 col-12">
                            <div class="mb-3 row">
                                <label for="nric" class="col-12 col-form-label">
                                    {{ __('NRIC No.') }}
                                </label>
                                <div class="col-12">
                                    <input id="nric" type="text" class="form-control" name="nric" value="{{ $confirmed_application->nric }}" readonly />
                                </div>
                            </div>
                        </div><!-- NRIC -->
                        <div class="col-md-6 col-12">
                            <div class="mb-3 row">
                                <label for="commencement_date" class="col-12 col-form-label">
                                    {{ __('Commencement date') }}
                                </label>
                                <div class="col-12">
                                    <input id="commencement_date" type="text" class="form-control" name="commencement_date" value="{{ $confirmed_application->commencement_date ? Carbon\Carbon::parse($confirmed_application->commencement_date)->format('d/m/Y') : '' }}" readonly />
                                </div>
                            </div>
                        </div><!-- Commencement Date -->
                    </div><!-- Personal Info -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3 row">
                                <label for="address_line" class="col-12 col-form-label">
                                    {{ __('Address') }}
                                </label>
                                <div class="col-12">
                                    <input id="address_line" type="text" class="form-control" name="address_line" value="{{ $confirmed_application->address_line }}" readonly />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-3 row">
                                <label for="postcode" class="col-12 col-form-label">
                                    {{ __('Postcode') }}
                                </label>
                                <div class="col-12">
                                    <input id="postcode" type="text" class="form-control" name="postcode" value="{{ $confirmed_application->postcode }}" readonly />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-3 row">
                                <label for="city" class="col-12 col-form-label">
                                    {{ __('City') }}
                                </label>
                                <div class="col-12">
                                    <input id="city" type="text" class="form-control" name="city" value="{{ $confirmed_application->city }}" readonly />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-3 row">
                                <label for="state" class="col-12 col-form-label">
                                    {{ __('State') }}
                                </label>
                                <div class="col-12">
                                    <input id="state" type="text" class="form-control" name="state" value="{{ $confirmed_application->state }}" readonly />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-3 row">
                                <label for="country" class="col-12 col-form-label">
                                    {{ __('Country') }}
                                </label>
                                <div class="col-12">
                                    <input id="country" type="text" class="form-control" name="country" value="{{ $confirmed_application->country }}" readonly />
                                </div>
                            </div>
                        </div>
                    </div><!-- Address -->
                </div>
            </div>
        </div>
    </div>
    <div class="page-col text-end">
        <a class="ms-2 btn btn-danger btn-custom btn text-white" data-id="{{ $confirmed_application->id }}" data-bs-toggle="modal" data-bs-target="#rejectModal">
            Reject
        </a>
        @if( $confirmed_application->checkHiringApplication() )
            <a class="ms-2 btn btn-success btn-custom btn text-white" data-id="{{ $confirmed_application->id }}" data-bs-toggle="modal" data-bs-target="#confirmedEmploymentModal">
                Confirm Application
            </a>
        @endif
        @if( $confirmed_application->checkHiredApplication() )
            <a class="ms-2 btn btn-purple btn-custom btn" href="{{ route('create-wisdom', ['id'=>$confirmed_application->id]) }}">
                Create WISDOM
            </a>
        @endif
    </div>
</div>
@push('modal')
<div class="modal fade" id="generateConfirmedEditModal" 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="generateConfirmedEditForm" action="" autocomplete="off">
                @csrf
                <input type="hidden" name="id" value="{{ $confirmed_application->id }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Send Edit URL to User's Email</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="remarks" class="col-12 col-form-label required-label">
                            {{ __('Remarks') }}
                        </label>
                        <div class="col-12">
                            <textarea id="remarks" class="form-control @error('remarks') is-invalid @enderror" name="remarks" rows="3" placeholder="Write a note to this candidate...">{{ old('remarks') }}</textarea>
                            <span class="invalid-feedback" role="alert">
                                <strong id="error_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
@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
                <input type="hidden" name="id" value="{{ $confirmed_application->id }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Reject Employment 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 @error('reject_remarks') is-invalid @enderror" name="reject_remarks" rows="3" placeholder="Write your remarks here...">{{ old('reject_remarks') }}</textarea>
                            <span class="invalid-feedback" role="alert">
                                <strong id="error_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
@push('modal')
<div class="modal fade" id="confirmedEmploymentModal" 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="confirmedEmploymentForm" action="" autocomplete="off">
                @csrf
                <input type="hidden" name="id" value="{{ $confirmed_application->id }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Confirmed Employment 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="double_check_email" class="col-12 col-form-label required-label">
                            {{ __('Email') }}
                        </label>
                        <div class="col-12">
                            <input id="double_check_email" type="email" class="form-control" name="double_check_email" value="{{ old('double_check_email') }}" />
                            <span class="invalid-feedback" role="alert">
                                <strong id="error_double_check_email"></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">Confirm</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush
@endsection
@push('js')
<script type="text/javascript">
    $(document).ready(function(){
        $('#generateConfirmedEditModal').on('show.bs.modal', function (event) {
            var id = $(event.relatedTarget).data('id');
            var url = "{{ route('confirmed-application-generate-edit', ['id'=>":id"]) }}";
            url = url.replace(":id", id);
            $('#generateConfirmedEditForm').attr("action", url);
        });
        $("#generateConfirmedEditForm").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: 'Sent!',
                                text: 'Generated edit URL has been sent to user email.',
                                showConfirmButton:false,
                                timer: 1500
                            })
                            $('#generateConfirmedEditModal').modal('hide');
                            $('.btn-modal-save').prop('disabled', false);
                            setTimeout(function() {
                                location.reload();
                            }, 500);
                        }else{
                            $('textarea[name='+k+']').addClass('is-invalid');
                            $('#error_'+k).html(v);
                            $('.btn-modal-save').prop('disabled', false);
                            $('.btn-modal-save').html('Save');
                        }
                    });
                }
            });
        });
        $('#generateConfirmedEditModal').on('hidden.bs.modal', function(e){
            $('#remarks').val('');
        });

        // Confirm Employment Application
        $('#confirmedEmploymentModal').on('show.bs.modal', function (event) {
            var id = $(event.relatedTarget).data('id');
            var url = "{{ route('confirm-employment-application', ['id'=>":id"]) }}";
            url = url.replace(":id", id);
            $('#confirmedEmploymentForm').attr("action", url);
        });
        $("#confirmedEmploymentForm").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: 'Confirmed!',
                                text: 'Employment Application has been Confirmed.',
                                showConfirmButton:false,
                                timer: 1500
                            })
                            $('#confirmedEmploymentModal').modal('hide');
                            $('.btn-modal-save').prop('disabled', false);
                            setTimeout(function() {
                                window.location.href = '{{ route('employee-application-index') }}';
                            }, 500);
                        }else{
                            $('input[name='+k+']').addClass('is-invalid');
                            $('#error_'+k).html(v);
                            $('.btn-modal-save').prop('disabled', false);
                            $('.btn-modal-save').html('Confirm');
                        }
                    });
                }
            });
        });
        $('#confirmedEmploymentModal').on('hidden.bs.modal', function(e){
            $('#double_check_email').val('');
        });

        // Reject Employment Application
        $('#rejectModal').on('show.bs.modal', function (event) {
            var id = $(event.relatedTarget).data('id');
            var url = "{{ route('employment-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 employment application has been rejected.',
                                showConfirmButton:false,
                                timer: 1500
                            })
                            $('#rejectModal').modal('hide');
                            $('.btn-modal-save').prop('disabled', false);
                            setTimeout(function() {
                                // location.reload();
                                window.location.href = "{{ route('employee-application-index') }}";
                            }, 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){
            $('#remarks').val('');
        });
    });
</script>
@endpush