@php
    $step_status = @$step_verified_data['step_status'];
    $placement_data = @$step_verified_data['english_interview_data'];
    $is_placement_confirmed = @$step_verified_data['is_placement_confirmed'];
    $brand_agency = @$step_verified_data['brand_agency'];
    $agency_logo_url = @$step_verified_data['agency_logo_url'];
    $agency_bg_color = @$step_verified_data['agency_bg_color']; 
    $agency_logo_class = @$step_verified_data['agency_logo_class']; 
    $disabled_date_slots = @$step_verified_data['disabled_date_slots']; 
    $english_level = config('common.english_level');
@endphp
@include('user.app-status.brandtab')
<div class="app-status-panel-content">
    <div class="row"> 
        <div class="col-sm-12">
            <h3 class="d-inline-b">English Interview</h3>
            <button type="button" title="Contact Support" class="btn btn-success pull-right support_width" onclick="return viewPopup('Booking for Interview','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button>
            @if($step_status == 1 || $step_status == 2)
               @php
                    $english_interview_data = !empty($placement_data[0]) ? $placement_data[0] : [];
                    $is_interview_finished = 0;
                    if(!empty($english_interview_data) && !empty($english_interview_data->admin_timezone_name)){
                        date_default_timezone_set($english_interview_data->admin_timezone_name);
                        if($english_interview_data->result==1){
                            $is_interview_finished = 1;
                        }
                        $var = $english_interview_data->english_level;
                        $var = (int)$var;
                    }
                    $system_date = date('Y-m-d h:i');
                   
                @endphp
                <div class="m-b-20">
                    @if(!empty($english_interview_data))
                        @if(!empty($english_interview_data->result) && $english_interview_data->status != 255)
                            @if($english_interview_data->result == 1)
                                <div class="alert alert-success m-t-10"><p>Congratulations! Your English level has been confirmed by our Service Representative.</p></div>
                                <div class="row">
                                    <div class="col-md-4 col-xs-12 b-r"> <strong>Interviewer Admin</strong>
                                        <br>
                                        <p class="text-muted">{{ $english_interview_data->interviewer }}</p>
                                    </div>
                                    <div class="col-md-4 col-xs-12 b-r"> <strong>English Verification Date/Time</strong>
                                        <br>
                                        @if(isset($english_interview_data->dest_datetime))
                                        <p class="text-muted"> 
                                            {{ dateformat($english_interview_data->dest_datetime, DISPLAY_DATE) }}
                                        </p>
                                        @endif
                                    </div>
                                    <div class="col-md-4 col-xs-12 b-r"> <strong>English Level</strong>
                                        <br>
                                        <p class="text-muted">{{ (!empty($english_interview_data->english_level))?$english_level[$var]["title"]:""}}</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 col-xs-12 b-r"> <strong>Interviewer Admin</strong>
                                        <br>
                                        <p class="text-muted">Pass</p>
                                    </div>
                                    <div class="col-md-4 col-xs-12 b-r"> <strong>Interviewer By</strong>
                                        <br>
                                        <p class="text-muted">
                                            @if($english_interview_data->interview_flag == 1)
                                                Zoom
                                            @elseif($english_interview_data->interview_flag == 2)
                                                Manual
                                            @endif
                                        </p>
                                    </div>
                                    
                                </div>
                            @elseif ($english_interview_data->result == 2 && $english_interview_data->is_locked == 0)
                                <div class="alert alert-danger m-t-10"><p>Unfortunately, based on our conversation, we did not feel that you adequately demonstrated a sufficient level of English to participate in Odyssey’s exchange programs.</p><p>We will give you another opportunity to interview with a different Odyssey staff member, please check your email as a new interview will be scheduled in the next few days to evaluate your English level..</p></div>
                            @elseif ($english_interview_data->result == 2 && $english_interview_data->is_locked == 1)
                                <div class="alert alert-danger m-t-10"><p>Unfortunately, after two interviews, Odyssey advisors have decided that your English skills are not adequate to participate and follow a supervisor’s instructions during an Exchange Visitor Program.</p></div>
                            @endif
                        @else
                            @if(empty($english_interview_data->interview_confirmed_user)) 
                                <p>We are pleased to inform you the schedule for your interview with <strong>{!! @$english_interview_data->interviewer !!}</strong>.</p>
                                <p>
                                    @if(isset($english_interview_data->dest_datetime) && isset($english_interview_data->dest_timezone_id))
                                    Interview Scheduled on: <strong>{{ dateformat($english_interview_data->dest_datetime,DISPLAY_DATETIME) }}</strong><br/>
                                    Time Zone: <strong>{{ get_timezone_label($english_interview_data->dest_timezone_id) }}</strong>
                                    @endif
                                </p>
                                @if($english_interview_data->english_interview_zoom_api_status == 1)
                                    @php
                                    if(!empty($english_interview_data->ev_alternate_datetime)){
                                        $ev_alternate_datetime = date("Y-m-d H:i:s", strtotime($english_interview_data->ev_alternate_datetime));
                                        $date_interview_admin = date("Y-m-d H:i:s", strtotime($english_interview_data->date_interview_admin));
                                    }
                                    else{
                                        $ev_alternate_datetime = "";
                                        $date_interview_admin = "";
                                    }
                                    if($ev_alternate_datetime != $date_interview_admin || ($ev_alternate_datetime =="" || $date_interview_admin == "") && $english_interview_data->interview_flag == 1)
                                    {
                                    @endphp
                                    <p class="confirmation_option">
                                        Please confirm that you will be able to attend this meeting:<br/>
                                        <button type="button" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="userConfirmation(1,{{@$english_interview_data->interview_schedule_id}});">Yes</button>
                                        <button type="button" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="userConfirmation(2,{{@$english_interview_data->interview_schedule_id}});">No, Reschedule</button> 
                                    </p>
                                    @php
                                    }
                                    @endphp
                                    <form name="frm_update_int_con" id="frm_update_int_con" class="hide">
                                        <p class="alert alert-warning">Please submit your reason and alternate date</p>
                                        <input type="hidden" name="int_sch_id" id="int_sch_id" value="{{@$english_interview_data->interview_schedule_id}}" />
                                        <input type="hidden" name="confimval" id="confimval" value="2" />
                                        <input type="hidden" name="reject_reason" id="reject_reason" value="1" />
                                        <div class="col-md-12 col-sm-12 col-xs-12 text-right"> 
                                            <small class="required_instruction">
                                                All fields with star (<span style="font-size: 15px;">*</span>) are required
                                            </small>
                                        </div>
                                        <div class="col-xs-12 no-padding">
                                            <div class="form-group">
                                                <label class="control-label text-muted">Interview Reject Reason <small class="text-danger text-required">*</small></label>
                                                <textarea class="form-control" maxlength="500" name="ev_reject_reason" style="resize: none;" id="ev_reject_reason" placeholder="Enter your reject reason" required="required" data-equals="nowhitespace"></textarea>
                                                <div class="help-block with-errors font-11"></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-12 no-padding">
                                            <div class="form-group">
                                                <div class="row">
                                                    <label class="col-md-12 col-sm-12 col-xs-12">Sorry that this interview schedule does not fit in your agenda, please suggest another date for this interview in the future: <span class="text-danger asterisk text-required">*</span></label>  
                                                    <div class="col-md-6 col-sm-7 col-xs-12"> 
                                                        <input type="text" name="ev_alternate_datetime" id="ev_alternate_datetime" value="" class="form-control datepicker mobile_readonly" required="" autocomplete="off"placeholder="Please click to select date" required="required" > 
                                                    </div>
                                                    <div class="col-md-6 col-sm-7 col-xs-12"> 
                                                        <select name="time_slot" id="time_slot_ev" class="form-control" required>
                                                            <option value="">-- Select Time --</option>
                                                        </select>
                                                    </div>
                                                    <p class="col-md-12 col-sm-12 col-xs-12">{{@$english_interview_data->admin_timezone_label}}</p>
                                                </div>
                                            </div> 
                                        </div>
                                        <div class="col-xs-12">
                                            <div class="row">
                                                <div class="form-actions">
                                                    <button type="submit" name="uic_submit" id="uic_submit" class="btn btn-md @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif m-b-10 btn-xs-block">Submit</button>  
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                @endif
                            @else 
                                @if($english_interview_data->interview_confirmed_user == 1)
                                    <p>
                                        We are pleased to send you the schedule and details for your interview with <strong>{!! @$english_interview_data->interviewer !!}</strong>.<br/>
                                        Interview Scheduled on: <strong>{{ dateformat($english_interview_data->dest_datetime,'l M d, Y \a\t h:i A') }}</strong><br/>
                                        Time Zone: <strong>{{ get_timezone_label($english_interview_data->dest_timezone_id) }}</strong><br/>
                                        You can convert time here: <a target="_blank" href="http://www.timezoneconverter.com/cgi-bin/tzc.tzc?style=2" >www.timezoneconverter.com</a>
                                    </p>
                                    <p>
                                        You will be interviewing with the following ITN representative:<br/>
                                        - Name: <strong>{{$english_interview_data->interviewer}}</strong><br/>
                                        - Title: <strong>{{$english_interview_data->interviewer_title}}</strong>
                                    </p>
                                    <p>
                                        Your interview will be conduct on zoom meeting, Please make sure you have install zoom software in your computer or zoom app on your mobile.
                                    </p>
                                    @if(!empty($english_interview_data->meeting_id) && !empty($english_interview_data->meeting_password))
                                        <p> 
                                            Following details you need join zoom meeting.<br/>
                                            <strong>Join from PC, Mac, Linux, iOS or Android:</strong><br/>
                                            <span style="word-break: break-all;color: red;">{{$english_interview_data->join_url}}</span><br/>
                                            - This link should not be shared with others; it is unique to you.
                                        </p>
                                        <p>
                                            Meeting ID: <strong>{{$english_interview_data->meeting_id}}</strong><br/>
                                            Password: <strong>{{$english_interview_data->meeting_password}}</strong><br/>
                                        </p> 
                                        <p>Click to add this meeting to your <a href="{{ @$english_interview_data->calender_url }}">OUTLOOK</a> calendar.</p> 
                                        <p><strong>Note:</strong> You can join the ZOOM meeting up to <span style="color: green;font-weight:800;">10 minutes</span> before the meeting start time.</p>
                                    @endif
                                @elseif($english_interview_data->interview_confirmed_user == 2)
                                    <div class="alert alert-warning">
                                        <p>We have already recorded the scheduled meeting confirmation detail.<br/> 
                                        If you need to update your scheduled meeting, please contact your IMIX administrator to inform him/her about this change.
                                        </p>
                                    </div>
                                @endif
                            @endif
                        @endif
                    @else
                        <p>you will see the details of your interview on here. </p>
                    @endif
                    @if(!empty($english_interview_data->contact_email))
                        <p>Please contact responsible person, if you are not able to attend the interview (<a href="mailto:{{ $english_interview_data->contact_email }}">{{ $english_interview_data->contact_email }}</a>)</p>
                    @endif
                </div>
                <div>
                    @if(!empty($next_step_key) && !empty($is_interview_finished))
                        <button type="button" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" onclick="loadStepContent('{{ $next_step_key }}')">Next Step</button>
                    @endif
                    <!--<hr class="full_dotted_line m-b-20" />
                    <p>It's time to understand how to succeed in the{{ __('application_term.job') }} interview, prepare yourself with the help of our community. Join the discussion so that you are ever closer to your goal of obtaining a{{ __('application_term.job') }} offer.</p>
                    <ul class="list-style-none m-b-10">
                        <li><a href="#">How to Prepare for an Interview Last Minute</a></li>
                        <li><a href="#">The Ultimate Guide to {{ __('application_term.job') }} Interview Preparation</a></li>
                        <li><a href="#">How To Ace The 50 Most Common Interview Questions</a></li>
                        <li><a href="#">The Ultimate Interview Guide: 30 Prep Tips for {{ __('application_term.job') }}</a></li>
                    </ul>-->
                </div>
            @else
                <p>Some Host Companies are reviewing your profile, we will inform you here as soon as one Host Company is requesting an interview with you.</p>
            @endif
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        ajaxFormValidator("#frm_update_int_con",function(ele,event){
            event.preventDefault(); 
            var confimval = $('#confimval').val();
            var int_sch_id = $('#int_sch_id').val();
            var ev_reject_reason = $('#ev_reject_reason').val();
            var reject_reason = $('#reject_reason').val();
            var ev_alternate_datetime = $('#ev_alternate_datetime').val();
            var time_slot = $('#time_slot_ev').val();
            submitUserResponse(confimval, int_sch_id, ev_reject_reason, ev_alternate_datetime,time_slot,reject_reason); 
        });  
        var disableDates = '{{$disabled_date_slots}}';
        $('.datepicker').datepicker({
            daysOfWeekDisabled: [0, 6],
            startDate: '-0m',
            beforeShowDay: function(date){
                dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                if(disableDates.indexOf(dmy) != -1){
                    return false;
                }
                else{
                    return true;
                }
            }
        }).on("change", function() {
            change_time_slot(this.value);
        });
    });
   
    
    function userConfirmation(confimval,int_sch_id)
    {
        if(confimval==2){
            $("#frm_update_int_con").removeClass('hide');
            $(".confirmation_option").addClass('hide'); 
            return false;
        }
        else{
            submitUserResponse(confimval, int_sch_id); 
        }
    }
    
    function submitUserResponse(confimval, int_sch_id, ev_reject_reason, ev_alternate_datetime, time_slot, reject_reason){
        show_inner_loader(".timeline_stp_desc","#all_tab_data");
        
        if(ev_reject_reason == '' || ev_reject_reason == null || ev_reject_reason == 'undefined') {
            ev_reject_reason = "";
        }
        
        if(ev_alternate_datetime == '' || ev_alternate_datetime == null || ev_alternate_datetime == 'undefined') {
            ev_alternate_datetime = "";
        }        
        
        if(time_slot == '' || time_slot == null || time_slot == 'undefined') {
            time_slot = "";
        }        
        
        var form_data = 'confimval='+confimval+'&interview_schedule_id='+int_sch_id+'&ev_reject_reason='+ev_reject_reason+'&ev_alternate_datetime='+ev_alternate_datetime+'&time_slot='+time_slot+'&reject_reason='+reject_reason;

        $.ajax({
            url: "{{ url('/english_inteview_confirmation') }}",
            type: "post",
            data: form_data,
            dataType: 'json',
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function(response){  
                hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                if(response.type == "success")
                {
                    var Html = '<div class="alert swl-alert-success"><p>'+response.message+'</p></div>';
                    notifyResponseTimerAlert(Html,"success","Success");
                    setTimeout(function(){ navigateStages('2','{{ $active_step_key }}'); }, 3000);
                }
                else
                {
                    var Html = '<div class="alert swl-alert-danger"><p>'+response.message+'</p></div>';
                    notifyResponseTimerAlert(Html,"error","Error");
                    return false;
                }
            }
        });
    }
    function change_time_slot(date){
       $.ajax({	
            url: "{{ route('user.englishinteview.gettimeslots') }}",
            type: "POST",
            dataType: "json",
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data: { data_action : "get_time_slot", date:date},
            success:function(response){
                var $el = $("#time_slot_ev");
                $el.empty(); // remove old options
                $.each(response, function(key,value) {                    
                  $el.append($("<option></option>")
                     .attr("value", key).text(value));
                });
            }
        });    
    }
</script>