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

<main>
    <div class="container">

        @if(!$expiredLink)
        @if($candidates->count())
        @foreach($candidates as $candidate)
        <div class="box white">
            <div class="title-wrapper pb-2">
                <div class="media">
                    <img src="{{ $candidate->profile_image_formatted}}" alt="User" class="mr-3 rounded-circle"
                        style="width:64px;">
                    <div class="media-body my-auto">
                        <h3 class="h3 m-0">{{ $candidate->present()->name }}</h3>
                    </div>
                </div>
                @if($candidate->cv_feedback && $candidate->cv_feedback->apply_by == 'cv_template' 
                    && $candidate->profiles && $candidate->profiles->cv_template_token)
                <a href="{{ route('cv_builder.preview_public_cv', ['token' => $candidate->profiles->cv_template_token]) }}" class="btn btn-transparent mt-2 mt-sm-0"
                    target="_blank">View CV</a>
                @elseif(count($candidate->uploads) > 0)
                <a href="{{ $candidate->uploads[0]->candidate_document_link}}" class="btn btn-transparent mt-2 mt-sm-0"
                    target="_blank">View CV</a>
                @endif
            </div>

            <form id="frmFeedback_{{ $candidate->id}}" method="post" data-id="{{ $candidate->id}}" autocomplete="off"
                action="{{ route('client.applicants.cv_feedback_client_post',['batch' => $batch, 'token' => $token]) }}">

                @csrf


                <input type="hidden" name="candidateId" value="{{ $candidate->id }}" />

                <div class="row">


                    <div class="col-md-12">
                        <div class="form-group">
                            <h3>Would you like to interview {{ $candidate->present()->name }}?</h3>
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input proceed_interview"
                                    id="proceed_interviewYes_{{ $candidate->id }}" name="proceed_interview" value="Yes"
                                    checked />
                                <label class="form-check-label"
                                    for="proceed_interviewYes_{{ $candidate->id }}">Yes</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input proceed_interview"
                                    id="proceed_interviewNo_{{ $candidate->id }}" name="proceed_interview" value="No">
                                <label class="form-check-label"
                                    for="proceed_interviewNo_{{ $candidate->id }}">No</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">

                        <div class="row interviewBlock_{{ $candidate->id }}">

                            <div class="col-sm-4">
                                <div class="form-group date">
                                    <label class="control-label" for="date_{{ $candidate->id }}">Interview
                                        Date<span class="required">*</span></label>
                                    <div class="input-group date">
                                        <input type="text" name="date" id="date_{{ $candidate->id }}"
                                            class="form-control dateselect bg-white" placeholder="Select Date" readonly />
                                        <div class="input-group-addon">
                                            <span class="material-icons">date_range</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="form-group time">
                                    <label class="control-label" for="time_{{ $candidate->id }}">Interview Time<span
                                            class="required">*</span></label>
                                    <div class="input-group time">
                                        <input type="text" name="time" id="time_{{ $candidate->id }}"
                                            placeholder="Select Time" class="form-control time_picker" value="" />
                                        <div class="input-group-addon">
                                            <span class="material-icons">access_time</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="form-group btm-arrow select">
                                    <label class="control-label" for="type_{{ $candidate->id }}">Interview Type<span
                                            class="required">*</span></label>
                                    <select name="type" id="type_{{ $candidate->id }}" 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_{{ $candidate->id }}">
                                <div class="form-group">
                                    <label class="control-label">Screening Address<span class="required">*</span>
                                    </label>
                                    <input name="location" id="location_{{ $candidate->id }}"
                                        placeholder="Enter screening address here" type="text" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-12 skype-block_{{ $candidate->id }} hidden">
                                <div class="form-group">
                                    <label class="control-label">Virtual Address<span class="required">*</span></label>
                                    <input name="skype" id="skype_{{ $candidate->id }}" placeholder="Enter virtual address here"
                                        type="text" class="form-control" value="" />
                                </div>
                            </div>
                            <div class="col-md-12 telephone-block_{{ $candidate->id }} hidden">
                                <div class="form-group">
                                    <label class="control-label">Telephone<span class="required">*</span></label>
                                    <input name="telephone" id="telephone_{{ $candidate->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">Notes</label>
                                    <textarea name="notes_for_candidate" class="form-control"></textarea>
                                </div>
                            </div>

                        </div>

                        <div class="row rejectBlock_{{ $candidate->id }} hidden">

                            <div class="col-md-12">
                                <h3>What is the reasoning for not progressing with {{ $candidate->present()->name }}?
                                </h3>
                            </div>


                            <div class="col-sm-12">
                                <div class="form-group btm-arrow select without-label">
                                    <select name="reason" id="reason" class="form-control reason">
                                        <option value="">Select</option>
                                        @foreach($cvRejectionReasons as $reason)
                                        <option value="{{ $reason }}">{{ $reason }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Other Reason" id="other_reason"
                                        name="other_reason" />
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="col-md-12">
                        <p class="gray">Please note that this will prompt a request to your Recruitment Consultant
                        </p>
                    </div>

                    <div class="col-md-12">
                        <div class="action-wrapper border-top pt-3">
                            <button type="submit" class="btn btn-transparent submit_{{ $candidate->id }}">Submit Feedback</button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
        @endforeach
        @else
        <div class="box white">
            @if($client_feedback)
            Thank you for submitting your feedback, it has been sent to your Talent Advisor.
            @else
            Sorry, CV Feedback has already been given by your Talent Advisor on your behalf! Please contact
            him/her for further assistance.
            @endif
        </div>
        @endif
        @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($candidates as $candidate)

        $('#frmFeedback_{{ $candidate->id }}').validate({
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            rules: {
                date: {
                    required: function(element) {
                        return $("#frmFeedback_{{ $candidate->id }} .proceed_interview:checked")
                            .val() == 'Yes';
                    }
                },
                time: {
                    required: function(element) {
                        return $("#frmFeedback_{{ $candidate->id }} .proceed_interview:checked")
                            .val() == 'Yes';
                    },
                    timeGreaterThanCurrent: true
                },
                location: {
                    required: function(element) {
                        return $("#frmFeedback_{{ $candidate->id }} .proceed_interview:checked")
                            .val() == 'Yes' && $("#frmFeedback_{{ $candidate->id }} .type").val() ==
                            'Face To Face';
                    }
                },
                skype: {
                    required: function(element) {
                        return $("#frmFeedback_{{ $candidate->id }} .proceed_interview:checked")
                            .val() == 'Yes' && $("#frmFeedback_{{ $candidate->id }} .type").val() ==
                            'Skype';
                    }
                },
                telephone: {
                    required: function(element) {
                        return $("#frmFeedback_{{ $candidate->id }} .proceed_interview:checked")
                            .val() == 'Yes' && $("#frmFeedback_{{ $candidate->id }} .type").val() ==
                            'Telephone';
                    }
                },
                other_reason: {
                    required: function(element) {
                        return ($("#frmFeedback_{{ $candidate->id }} .proceed_interview:checked")
                            .val() == 'No' && $('.reason').val() == "");
                    }
                },
            },
            messages: {
                date: {
                    required: 'Date is required'
                },
                time: {
                    required: 'Time is required'
                },
                location: {
                    required: 'Location is required'
                },
                skype: {
                    required: 'Virtual Address is required'
                },
                telephone: {
                    required: 'Telephone is required'
                },
                reason: {
                    required: 'Reason is required'
                }
            }
        });
        @endforeach

        var today = new Date();
        var $date = $('.dateselect').datepicker({
            autoHide: true,
            format: 'dd/mm/yyyy',
            startDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear(),
        });
        $('.time_picker').timepicker({
            'timeFormat': 'H:i:s',
            'scrollDefault': 'now'
        });

        $(document).on('change', '.proceed_interview', function() {

            var result = $(".proceed_interview:checked").val();
            var $thisName = $(this).attr('id').split('_');
            var candidateId = $thisName[2];
            if (result == 'No') {
                $('.interviewBlock_' + candidateId).hide();
                $('.rejectBlock_' + candidateId).show();
            } else {
                $('.interviewBlock_' + candidateId).show();
                $('.rejectBlock_' + candidateId).hide();
            }

        });

        $(document).on('change', ".type", function() {
            var $thisId = $(this).attr('id').split('_');
            var candidateId = $thisId[1];

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

        $('.type').trigger('change');
        $('.proceed_interview').trigger('change');


        $('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>