@include('client.common.header',['title' => 'Interview Feedback'])

<main>
    <div class="container">

        @if(!$expiredLink)
        <div class="box white">

            @if($interviews->count())
            @foreach($interviews as $interview)
            <h2 class="form-title">Interview Feedback Form for {{ $interview->user->present()->name }}</h2>

            <form id="frmInterviewFeedback_{{ $interview->id }}" data-id="{{ $interview->id }}" method="post" action="{{ route('client.applicants.interview_feedback_post',['batch' => $batch, 'token' => $token]) }}">
                @csrf

                <input type="hidden" name="jobId" value="{{ $record->job_id }}" />
                <input type="hidden" name="candidateId" value="{{ $interview->user->id }}" />
                <input type="hidden" name="interviewId" value="{{ $interview->id }}" />
                <input type="hidden" name="feedback_source" value="client_contact" />

                <div class="col-md-12">
                    <div class="form-group">
                        <h3>{{@trans('job.did')}} {{ $interview->user->present()->name }}
                            {{@trans('job.arrive_on_time')}}?
                        </h3>

                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input on_time" data-id="{{ $interview->id }}" name="on_time" id="on_time_yes_{{ $interview->id }}" checked="checked" value="yes">
                            <label class="form-check-label" for="on_time_yes_{{ $interview->id }}">{{@trans('job.yes')}}</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input on_time" data-id="{{ $interview->id }}" id="on_time_no_{{ $interview->id }}" name="on_time" value="no">
                            <label class="form-check-label" for="on_time_no_{{ $interview->id }}">{{@trans('job.no')}}</label>
                        </div>
                        <div class="custom-control custom-radio">
                            <input type="radio" class="form-check-input on_time" data-id="{{ $interview->id }}" id="no_show_{{ $interview->id }}" name="on_time" value="no_show">
                            <label class="form-check-label" for="no_show_{{ $interview->id }}">{{@trans('job.show_up')}}</label>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 showBlock_{{ $interview->id }} preparationRatingBlock">
                    <div class="form-group radio-img">
                        <h3>{{@trans('job.was')}} {{ $interview->user->present()->name }}
                            {{@trans('job.well_prepared_for_interview')}} ?
                        </h3>
                        <fieldset class="rating">
                            <input type="radio" id="star5_{{ $interview->id }}" name="preparation_ratings" value="5">
                            <label class="full" for="star5_{{ $interview->id }}" title="Awesome - 5 stars"><i class="material-icons">star</i></label>
                            <input type="radio" id="star4_{{ $interview->id }}" name="preparation_ratings" value="4">
                            <label class="full" for="star4_{{ $interview->id }}" title="Pretty good - 4 stars"><i class="material-icons">star</i></label>
                            <input type="radio" id="star3_{{ $interview->id }}" name="preparation_ratings" value="3">
                            <label class="full" for="star3_{{ $interview->id }}" title="Meh - 3 stars"><i class="material-icons">star</i></label>
                            <input type="radio" id="star2_{{ $interview->id }}" name="preparation_ratings" value="2">
                            <label class="full" for="star2_{{ $interview->id }}" title="Kinda bad - 2 stars"><i class="material-icons">star</i></label>
                            <input type="radio" id="star1_{{ $interview->id }}" name="preparation_ratings" value="1">
                            <label class="full" for="star1_{{ $interview->id }}" title="Sucks big time - 1 star"><i class="material-icons">star</i></label>
                        </fieldset>
                    </div>
                </div>
                <br><br>

                <div class="col-md-12 showBlock_{{ $interview->id }} expertiseRatingBlock">
                    <div class="form-group radio-img">
                        <h3>{{@trans('job.did')}} {{ $interview->user->present()->name }}
                            {{@trans('job.have_relevent_technical_requirements')}}?
                        </h3>
                        <fieldset class="rating">

                            <input type="radio" id="vacancystar5_{{ $interview->id }}" name="expertise_ratings" value="5">
                            <label class="full" for="vacancystar5_{{ $interview->id }}" title="Awesome - 5 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="vacancystar4_{{ $interview->id }}" name="expertise_ratings" value="4">
                            <label class="full" for="vacancystar4_{{ $interview->id }}" title="Pretty good - 4 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="vacancystar3_{{ $interview->id }}" name="expertise_ratings" value="3">
                            <label class="full" for="vacancystar3_{{ $interview->id }}" title="Meh - 3 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="vacancystar2_{{ $interview->id }}" name="expertise_ratings" value="2">
                            <label class="full" for="vacancystar2_{{ $interview->id }}" title="Kinda bad - 2 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="vacancystar1_{{ $interview->id }}" name="expertise_ratings" value="1">
                            <label class="full" for="vacancystar1_{{ $interview->id }}" title="Sucks big time - 1 star"><i class="material-icons">star</i></label>

                        </fieldset>
                    </div>
                </div>
                <br><br>

                <div class="col-md-12 showBlock_{{ $interview->id }} softSkillsRatingBlock">
                    <div class="form-group radio-img">
                        <h3>{{@trans('job.rate')}} {{ $interview->user->present()->name }}
                            {{@trans('job.rate_content')}}?
                        </h3>
                        <fieldset class="rating">

                            <input type="radio" id="skillstar5_{{ $interview->id }}" name="soft_skills_ratings" value="5">
                            <label class="full" for="skillstar5_{{ $interview->id }}" title="Awesome - 5 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="skillstar4_{{ $interview->id }}" name="soft_skills_ratings" value="4">
                            <label class="full" for="skillstar4_{{ $interview->id }}" title="Pretty good - 4 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="skillstar3_{{ $interview->id }}" name="soft_skills_ratings" value="3">
                            <label class="full" for="skillstar3_{{ $interview->id }}" title="Meh - 3 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="skillstar2_{{ $interview->id }}" name="soft_skills_ratings" value="2">
                            <label class="full" for="skillstar2_{{ $interview->id }}" title="Kinda bad - 2 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="skillstar1_{{ $interview->id }}" name="soft_skills_ratings" value="1">
                            <label class="full" for="skillstar1_{{ $interview->id }}" title="Sucks big time - 1 star"><i class="material-icons">star</i></label>

                        </fieldset>
                    </div>
                </div>
                <br><br>

                <div class="col-md-12 showBlock_{{ $interview->id }} proceedInterViewBlock">
                    <div class="form-group radio-opt-parent">
                        <h3>{{@trans('job.is')}} {{ $interview->user->present()->name }}
                            {{@trans('job.good_fit_for_your_vacancy')}}?
                        </h3>
                        <div class="form-check form-check-inline d-block mb-2">
                            <input type="radio" class="form-check-input status" data-id="{{ $interview->id }}" id="next_interview_requested_{{ $interview->id }}" name="status" value="next_interview_requested" checked="checked">
                            <label class="form-check-label" for="next_interview_requested_{{ $interview->id }}">{{@trans('job.setup_another_interview')}}</label>
                        </div>
                        <div class="form-check form-check-inline d-block mb-2">
                            <input type="radio" class="form-check-input status" data-id="{{ $interview->id }}" id="offer_made_{{ $interview->id }}" name="status" value="offer_made">
                            <label class="form-check-label" for="offer_made">Yes - I would like to make an offer</label>
                        </div>
                        <div class="form-check form-check-inline d-block mb-2">
                            <input type="radio" class="form-check-input status" data-id="{{ $interview->id }}" id="document_requested_{{ $interview->id }}" name="status" value="document_requested">
                            <label class="form-check-label" for="document_requested_{{ $interview->id }}">
                                {{@trans('job.request_candidate_document')}}</label>
                        </div>
                        <div class="form-check form-check-inline d-block mb-2">
                            <input type="radio" class="form-check-input status" data-id="{{ $interview->id }}" id="on_hold_{{ $interview->id }}" name="status" value="on_hold">
                            <label class="form-check-label" for="on_hold_{{ $interview->id }}">{{@trans('job.keep_candidate_on_hold')}}</label>
                        </div>
                        <div class="form-check form-check-inline d-block mb-2">
                            <input type="radio" class="form-check-input status" data-id="{{ $interview->id }}" id="reject_static_reason_{{ $interview->id }}" name="status" value="reject_static_reason">
                            <label class="form-check-label" for="reject_static_reason_{{ $interview->id }}">{{@trans('job.another_vacancy')}}</label>
                        </div>
                        <div class="form-check form-check-inline d-block">
                            <input type="radio" class="form-check-input status" data-id="{{ $interview->id }}" id="rejected_{{ $interview->id }}" name="status" value="rejected">
                            <label class="form-check-label" for="rejected_{{ $interview->id }}">{{@trans('job.no_longer_proceed')}}</label>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 showBlock_{{ $interview->id }} interviewBlock interviewBlock_{{ $interview->id }}">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>{{@trans('job.schedule_interview_with')}} {{ $interview->user->present()->name }}
                            </h3>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group date">
                                <label class="control-label">{{@trans('job.interview_date')}}<span class="required">*</span></label>
                                <div class="input-group date">
                                    <input type="text" class="form-control dateselect bg-white" id="date_{{ $interview->id }}" name="date" placeholder="Select Date" value="" readonly>
                                    <div class="input-group-addon">
                                        <span class="material-icons">{{@trans('job.date_range')}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group time">
                                <label class="control-label">{{@trans('job.interview_time')}}<span class="required">*</span></label>
                                <div class="input-group time">
                                    <input placeholder="Selected time" type="text" id="time_{{ $interview->id }}" name="time" class="form-control time_picker">
                                    <div class="input-group-addon">
                                        <span class="material-icons">{{@trans('job.access_time')}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group btm-arrow select">
                                <label class="control-label" for="wallet">{{@trans('job.interview_type')}}<span class="required">*</span></label>
                                <select id="type_{{ $interview->id }}" data-id="{{ $interview->id }}" name="type" class="form-control type">
                                    @foreach($interviewTypes as $interviewType)
                                    <option value="{{ $interviewType->name }}">
                                        {{ ($interviewType->name == 'Skype') ? 'Virtual' : $interviewType->name}}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12 inhouse-block inhouse-block_{{ $interview->id }}">
                            <div class="form-group">
                                <label class="control-label">{{@trans('job.sreening_add')}}<span class="required">*</span>
                                </label>
                                <input name="location" id="location_{{ $interview->id }}" placeholder="Enter screening address here" type="text" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-12 skype-block hidden skype-block_{{ $interview->id }}">
                            <div class="form-group">
                                <label class="control-label">{{@trans('job.virtual')}}<span class="required">*</span></label>
                                <input name="skype" id="skype_{{ $interview->id }}" placeholder="Enter virtual address here" type="text" class="form-control" value="" />
                            </div>
                        </div>
                        <div class="col-md-12 telephone-block hidden telephone-block_{{ $interview->id }}">
                            <div class="form-group">
                                <label class="control-label">{{@trans('job.telephone')}}<span class="required">*</span></label>
                                <input name="telephone" id="telephone_{{ $interview->id }}" placeholder="Enter telephone here" type="text" class="form-control" value="" />
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">{{@trans('job.notes')}}</label>
                                <textarea name="notes" id="notes" class="form-control"></textarea>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-md-12 showBlock_{{ $interview->id }} documentBlock hidden documentBlock_{{ $interview->id }}">
                    <div class="form-group">
                        <h3>{{@trans('job.select_document')}}</h3>

                        @foreach($documents as $document)
                        <div class="custom-control custom-checkbox mr-3">
                            <input type="checkbox" class="custom-control-input docCheck" id="document_{{ $interview->id }}_{{ $document->id }}" value="{{ $document->id }}" name="documents[]">
                            <label class="custom-control-label" for="document_{{ $interview->id }}_{{ $document->id }}">{{ $document->name
                                    }}</label>
                        </div>
                        <div class="form-group hidden note">
                            <textarea class="form-control" id="note_{{ $document->id }}" name="note[{{ $document->id }}]" placeholder="Add a note for {{ $document->name }}"></textarea>
                        </div>
                        @endforeach
                        <div class="custom-control custom-checkbox d-inline-block">
                            <input type="checkbox" class="custom-control-input reference_chk" id="reference_check_{{ $interview->id }}" data-id="{{ $interview->id }}" name="reference_check">
                            <label class="custom-control-label" for="reference_check_{{ $interview->id }}">{{@trans('job.reference_check')}}</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 showBlock_{{ $interview->id }} offerBlock_{{ $interview->id }} hidden">
                    <div class="form-group">
                        <label class="control-label">Notes for offer<span class="required">*</span></label>
                        <textarea class="form-control" name="offerNote" placeholder="Type here" rows="3"></textarea>
                        <span></span>
                    </div>
                </div>

                <div class="col-md-12 showBlock_{{ $interview->id }} reasonBlock hidden reasonBlock_{{ $interview->id }}">
                    <h3>{{@trans('job.provide_comment')}}
                        {{ $interview->user->present()->name }} {{@trans('job.feedback')}}
                    </h3>
                    <div class="form-group">
                        <label class="control-label">
                            {{ $interview->user->present()->name }}#'s Feedback
                        </label>
                        <textarea class="form-control" name="reason" placeholder="Type here" rows="3"></textarea>
                        <span></span>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="d-flex justify-content-between">
                        <button type="submit" class="btn btn-em mb-5 submit_{{ $interview->id }}">{{@trans('job.submit_feedback')}}</button>
                        <!-- <button type="submit" class="btn btn-bordered ml-auto" data-dismiss="modal">Send Reminder</button> -->
                    </div>
                </div>
                <div class="col-md-12">
                    <hr class="hr mt-0">
                </div>
            </form>
            @endforeach
            @else
            <p>
                @if($client_feedback)
                Thank you for submitting your feedback, it has been sent to your Talent Advisor.
                @else
                Sorry, it looks like your Talent Advisor has already submitted the interview feedback on your behalf
                OR re-scheduled the candidate(s) interview! Please contact him/her for further assistance.
                @endif
            </p>
            @endif
        </div>
        @else
        <div class="box white">
            <p>This is an invalid feedback link! Kindly contact your Talent Advisor at Empower for further assistance..</p>
        </div>
        @endif
    </div>
</main>
@include('client.common.footer')


<script type="text/javascript" src="{{ asset('js/vendor/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/popper.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/owl.carousel.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/wow.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/datepicker.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/jquery.timepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/snackbar.min.js') }}"></script>

@if(!$expiredLink)
<script type="text/javascript">
    new WOW().init();



    $(document).ready(function() {


        @if(Session::has('message'))
        Snackbar.show({
            pos: 'bottom-right',
            text: "{!! session('message') !!}",
            actionText: 'Okay'
        });
        @endif

        $.validator.addMethod("timeGreaterThanCurrent", function(value, element) {
            var ids = $(element).attr('id').split('_');
            var id = ids[1];
            var date = $('#date_' + id).val().split('/');
            var dateYmd = date[1] + '/' + date[0] + '/' + date[2];
            var dateTime = new Date(dateYmd + ' ' + value);
            var today = new Date();
            return today < dateTime;
        }, 'Invalid time');

        @foreach($interviews as $interview)

        $('#frmInterviewFeedback_{{ $interview->id }}').validate({
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            rules: {
                date: {
                    required: function(element) {
                        return ($("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'yes' ||
                                $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'no') &&
                            $('#frmInterviewFeedback_{{ $interview->id }} .status:checked')
                            .val() == 'next_interview_requested';
                    }
                },
                time: {
                    required: function(element) {
                        return ($("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'yes' ||
                                $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'no') &&
                            $('#frmInterviewFeedback_{{ $interview->id }} .status:checked')
                            .val() == 'next_interview_requested';
                    },
                    //timeGreaterThanCurrent: true
                },
                'documents[]': {
                    required: function(element) {
                        return ($("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'yes' ||
                                $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'no') &&
                            $('#frmInterviewFeedback_{{ $interview->id }} .status:checked')
                            .val() == 'document_requested' &&
                            $('#reference_check_{{ $interview->id }}').prop('checked') == false;
                    },
                },
                'reason': {
                    required: function(element) {
                        return ($("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'yes' ||
                                $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'no') &&
                            $('#frmInterviewFeedback_{{ $interview->id }} .status:checked')
                            .val() == 'rejected';
                    },
                },
                'offerNote': {
                    required: function(element) {
                        return ($("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'yes' ||
                                $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'no') &&
                            $('#frmInterviewFeedback_{{ $interview->id }} .status:checked')
                            .val() == 'offer_made';
                    },
                },
                location: {
                    required: function(element) {
                        return ($("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'yes' ||
                                $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'no') &&
                            $("#frmInterviewFeedback_{{ $interview->id }} .type").val() ==
                            'Face To Face' &&
                            $('#frmInterviewFeedback_{{ $interview->id }} .status:checked')
                            .val() == 'next_interview_requested';
                    }
                },
                skype: {
                    required: function(element) {
                        return ($("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'yes' ||
                                $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'no') &&
                            $("#frmInterviewFeedback_{{ $interview->id }} .type").val() ==
                            'Skype' &&
                            $('#frmInterviewFeedback_{{ $interview->id }} .status:checked')
                            .val() == 'next_interview_requested';
                    }
                },
                telephone: {
                    required: function(element) {
                        return ($("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'yes' ||
                                $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                                .val() == 'no') &&
                            $("#frmInterviewFeedback_{{ $interview->id }} .type").val() ==
                            'Telephone' &&
                            $('#frmInterviewFeedback_{{ $interview->id }} .status:checked')
                            .val() == 'next_interview_requested';
                    }
                },
                preparation_ratings: {
                    required: function(element) {
                        return $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                            .val() == 'yes' || $(
                                "#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                            .val() == 'no' && $(
                                '#frmInterviewFeedback_{{ $interview->id }} input[name="preparation_ratings"]:checked'
                            ).val() == undefined;
                    }
                },
                expertise_ratings: {
                    required: function(element) {
                        return $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                            .val() == 'yes' || $(
                                "#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                            .val() == 'no' && $(
                                '#frmInterviewFeedback_{{ $interview->id }} input[name="expertise_ratings"]:checked'
                            ).val() == undefined;
                    }
                },
                soft_skills_ratings: {
                    required: function(element) {
                        return $("#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                            .val() == 'yes' || $(
                                "#frmInterviewFeedback_{{ $interview->id }} .on_time:checked")
                            .val() == 'no' && $(
                                '#frmInterviewFeedback_{{ $interview->id }} input[name="soft_skills_ratings"]:checked'
                            ).val() == undefined;
                    }
                }
            },
            messages: {
                date: {
                    required: 'Date is required'
                },
                time: {
                    required: 'Time is required'
                },
                'documents[]': {
                    required: 'At least one document is required'
                },
                reason: {
                    required: 'Feedback is required'
                },
                location: {
                    required: 'Location is required'
                },
                skype: {
                    required: 'Virtual Address is required'
                },
                telephone: {
                    required: 'Telephone is required'
                },
                preparation_ratings: {
                    required: 'Preparation Ratings is required'
                },
                expertise_ratings: {
                    required: 'Expertise Ratings is required'
                },
                soft_skills_ratings: {
                    required: 'Soft Skill Ratings is required'
                }
            },
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            ignore: false,

            errorPlacement: function(error, element) {

                if (element.hasClass('dateselect')) {
                    error.insertAfter(element.parent('.date'))
                } else if (element.hasClass('time_picker')) {
                    error.insertAfter(element.parent('.time'))
                } else if (element.parent('.rating').length) {
                    error.insertAfter(element.parents('.radio-img'));
                } else if (element.parent('.input-group').length || element.prop('type') ===
                    'checkbox' || element.prop('type') === 'radio') {
                    error.insertAfter(element.parents('.form-group'));
                } else if (element.is("textarea")) {
                    error.insertAfter(element.next());
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function(element) {
                $(element).closest('.form-control').removeClass('is-valid').addClass(
                    'is-invalid');
            },

            unhighlight: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass(
                    'is-valid');
            },

            success: function(element) {
                $(element).closest('.form-control').removeClass('is-invalid').addClass(
                    'is-valid');
            },
        });

        @endforeach

        $('.reference_chk').on('change', function() {
            var interviewId = $(this).data('id');
            $('#frmInterviewFeedback_' + interviewId + '').valid();
        });


        $("body").on("click", '#addDocBtn', function() {
            $(".add-doc-popover").toggle();
        });
        $(".remove-name").click(function() {
            if ($(".add-doc-popover").is(":visible")) {
                $('#newDocumentName').val("");
                $(".add-doc-popover").hide();
            }
        });

        var today = new Date();
        var $date = $('.dateselect').datepicker({
            autoHide: true,
            format: 'dd/mm/yyyy',
            zIndex: 2048,
            startDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear(),
        });

        $('.time_picker').timepicker({
            'timeFormat': 'H:i:s',
            'scrollDefault': 'now'
        });

        $('.status').on('change', function() {
            var dataId = $(this).data('id');
            var result = $(this).prop('checked', true).val();
            if (result == 'next_interview_requested') {
                $('.interviewBlock_' + dataId + '').show();
                $('.documentBlock_' + dataId + '').hide();
                $('.reasonBlock_' + dataId + '').hide();
                $('.offerBlock_' + dataId + '').hide();
            } else if (result == 'document_requested') {
                $('.interviewBlock_' + dataId + '').hide();
                $('.documentBlock_' + dataId + '').show();
                $('.reasonBlock_' + dataId + '').hide();
                $('.offerBlock_' + dataId + '').hide();
            } else if (result == 'on_hold') {
                $('.interviewBlock_' + dataId + '').hide();
                $('.documentBlock_' + dataId + '').hide();
                $('.reasonBlock_' + dataId + '').hide();
                $('.offerBlock_' + dataId + '').hide();
            } else if (result == 'reject_static_reason') {
                $('.interviewBlock_' + dataId + '').hide();
                $('.documentBlock_' + dataId + '').hide();
                $('.reasonBlock_' + dataId + '').hide();
                $('.offerBlock_' + dataId + '').hide();
            } else if (result == 'rejected') {
                $('.interviewBlock_' + dataId + '').hide();
                $('.documentBlock_' + dataId + '').hide();
                $('.reasonBlock_' + dataId + '').show();
                $('.offerBlock_' + dataId + '').hide();
            } else if (result == 'offer_made') {
                $('.interviewBlock_' + dataId + '').hide();
                $('.documentBlock_' + dataId + '').hide();
                $('.reasonBlock_' + dataId + '').hide();
                $('.offerBlock_' + dataId + '').show();
            }
        });

        $('.on_time').on('change', function() {

            var result = $(this).val();
            var interviewId = $(this).data('id');

            if (result == 'yes' || result == 'no') {
                $('.showBlock_' + interviewId + '').show();
                // $('.status').trigger('change');
                $('#rejected_' + interviewId + '').prop('checked', true).trigger('change');
            } else if (result == 'no_show') {
                $('.showBlock_' + interviewId + '').hide();
            }
        });

        $(".type").on('change', function() {

            var interviewId = $(this).data('id');

            if ($(this).val() == 'Face To Face') {
                $('.skype-block_' + interviewId + '').hide();
                $('.telephone-block_' + interviewId + '').hide();
                $('.inhouse-block_' + interviewId + '').show();
            } else if ($(this).val() == 'Skype') {
                $('.skype-block_' + interviewId + '').show();
                $('.telephone-block_' + interviewId + '').hide();
                $('.inhouse-block_' + interviewId + '').hide();
            } else if ($(this).val() == 'Telephone') {
                $('.skype-block_' + interviewId + '').hide();
                $('.telephone-block_' + interviewId + '').show();
                $('.inhouse-block_' + interviewId + '').hide();
            }
        });

        $('.docCheck').on('change', function() {
            if ($(this).is(':checked')) {
                $(this).parent('.custom-control').next('.note').removeClass('hidden')
            } else {
                $(this).parent('.custom-control').next('.note').addClass('hidden')
            }
        });

        $('form').on('submit', function(e) {
            e.preventDefault();
            if ($(this).valid()) {
                console.log('submitted');
                $('.submit_' + $(this).data('id')).addClass('disabled');
                $('.submit_' + $(this).data('id')).html('Please Wait...');
                e.currentTarget.submit();
            }
        });

    });
</script>
@endif




</body>

</html>