@php
    $is_interview_finished = @$step_verified_data['is_interview_finished'];
    $interview_data = @$step_verified_data['interview_data'];
    $admin_timezone_label = @$step_verified_data['admin_timezone_label'];
    $is_payment_plan = @$step_verified_data['is_payment_plan']; 
    $calender_url = @$interview_data->calender_url; 
    $user_timezone_name= @$step_verified_data['user_timezone_name'];   
    if(!empty($user_timezone_name)){
        date_default_timezone_set($user_timezone_name);
    }
    $system_date = date('Y-m-d H:i');
    $position_types = @$step_verified_data['position_types'];
    $english_level = config('common.english_level');
    $sponsor_name = $user->portfolio->sponsor_name;
    $user_status = $user->j1_status_id;
    $agency_name = @$step_verified_data['agency_name'];
    $dos_program_category_id = @$user->portfolio->dos_program_category_id;
    $zoom_url = config('common.zoom_url');
@endphp
<div class="app-status-panel-content">
    <div class="row">
        <div class="col-sm-12">
            <h3 class="d-inline-b">Interview</h3>
            <button type="button" title="Contact Support" class="btn btn-success pull-right support_width" onclick="return viewPopup('Interview','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button> 
            <div class="clearfix"></div>
            <div id="{{ $notify_id }}"></div>
        </div>
        <div class="col-sm-12">
            @if(empty($interview_data) && empty($is_interview_finished))
                <p>One of our Service Representative will contact you shortly with the schedule of your pre-screening interview.</p>
            @endif
            
            @if(!empty($interview_data))
                @if(empty($is_interview_finished))
                    @if((strtotime($system_date) > strtotime($interview_data->dest_datetime)))
                        @if(!empty($interview_data->interview_confirmed_user))
                            <div class="alert alert-success"><p>Thank you for attending the interview with our service representative. We will update you shortly with the next step of your program.</p></div>
                        @else
                            <div class="alert alert-warning"><p>Time out for your first interview confirmation. Again, One of our Service Representative will contact you shortly with the schedule of your pre-screening interview.</p></div>
                        @endif
                    @else
                        <div class="interview_scheduled">
                            @if(empty($interview_data->interview_confirmed_user)) 
                                <p>We are please to confirm your interview with an @if(!empty($agency_name)) {{$agency_name}} @endif representative below. Please review and confirm your availability.</p><br/>
                                <p>
                                    Interview Scheduled on: <strong>{{ dateformat($interview_data->dest_datetime, DISPLAY_DATETIME) }}</strong><br/>
                                    Time Zone: <strong>{{ get_timezone_label($interview_data->dest_timezone_id) }}</strong>
                                </p>
                                @if($interview_data->is_reminder_sent == 1 || !empty($interview_data->notification_sent_on))
                                    @php
                                    if(!empty($interview_data->ev_alternate_datetime)){
                                        $ev_alternate_datetime = date("Y-m-d", strtotime($interview_data->ev_alternate_datetime));
                                        $date_interview_admin = date("Y-m-d", strtotime($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 == ""))
                                    {
                                    @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,{{@$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,{{@$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="{{@$interview_data->interview_schedule_id}}" />
                                        <input type="hidden" name="confimval" id="confimval" value="2" />
                                        <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"> 
                                                <label class="control-label text-muted">Sorry that this interview schedule does not fit in your agenda, please suggest another date and time for this interview in the future <small class="text-danger text-required">*</small></label>
                                                <input type="text" name="ev_alternate_datetime" id="ev_alternate_datetime" value="" class="form-control load_datetimepicker_with_setMinute mobile_readonly" required="" placeholder="Please click to select date and time" autocomplete="off"> 
                                                <p>{{$admin_timezone_label}}</p>
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-12 no-padding">
                                            <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>
                                    </form>
                                @endif
                            @elseif($interview_data->interview_confirmed_user==1 && $interview_data->interview_confirmed_admin == 1)
                                <p>
                                    Please review your confirmed interview time with <strong>{{$interview_data->interviewer}}</strong>.<br/><br/>
                                    Interview Scheduled on: <strong>{{ dateformat($interview_data->dest_datetime, DISPLAY_DATETIME) }}</strong><br/>
                                    Time Zone: <strong>{{ get_timezone_label($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>{{$interview_data->interviewer}}</strong><br/>
                                    @if(!empty(@$interview_data->interviewer_title))
                                        - Title: <strong>{{@$interview_data->interviewer_title}}</strong>
                                    @endif
                                </p>
                                <p>
                                    Your interview will take place on Zoom. Please make sure you have installed Zoom on your computer or phone (<a href="{{$zoom_url}}">www.zoom.us/download</a>).
                                </p>
                                <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;">{{$interview_data->join_url}}</span><br/>
                                    - This link should not be shared with others; it is unique to you.
                                </p>
                                <p>
                                    Meeting ID: <strong>{{$interview_data->meeting_id}}</strong><br/>
                                    Password: <strong>{{$interview_data->meeting_password}}</strong><br/>
                                </p> 
                                <p>Click to add this meeting to your <a href="{{ @$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>
                            @elseif($interview_data->interview_confirmed_user == 1 && $interview_data->interview_confirmed_admin != 1)
                                <div class="alert alert-warning">
                                    <p>We have recorded the scheduled meeting confirmation detail.<br/>
                                    If you need to update your scheduled meeting, please contact your {{ config('common.portal') }} administrator to inform him/her about this change.
                                    </p>
                                </div>
                                <p>
                                    We are pleased to send you the schedule and details for your interview with <strong>{{$interview_data->interviewer}}</strong>.<br/>
                                    Interview Scheduled on: <strong>{{ dateformat($interview_data->dest_datetime,'l M d, Y \a\t h:i A') }}</strong><br/>
                                    Time Zone: <strong>{{ get_timezone_label($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>{{$interview_data->interviewer}}</strong><br/>
                                    @if(!empty(@$interview_data->interviewer_title))
                                        - Title: <strong>{{@$interview_data->interviewer_title}}</strong>
                                    @endif
                                </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>
                            @endif 
                        </div>
                    
                        @if(!empty($interview_data->contact_email) && empty($is_interview_finished))
                            <p>Please contact responsible person, if you are not able to attend the interview (<a href="mailto:{{ @$interview_data->contact_email }}">{{ @$interview_data->contact_email }}</a>)</p>
                        @endif
                        
                    @endif 
                
                @elseif(!empty($is_interview_finished) && @$interview_data->is_eligible == 1 && @$user_status != 5001)
                    <div class="alert alert-success"><p>Congratulations! Your eligibility has been confirmed by our Service Representative.</p></div>
                    <div class="row">
                        <div class="col-md-4 col-xs-12 b-r"> <strong>Graduation Date</strong>
                            <br>
                            <p class="text-muted">{{ dateformat($interview_data->graduation_date, DISPLAY_DATE) }}</p>
                        </div>
                        <div class="col-md-4 col-xs-12 b-r"> <strong>Availability Date</strong>
                            <br>
                            <p class="text-muted">
                                {{ dateformat($interview_data->availability_date, DISPLAY_DATE) }}
                            </p>
                        </div> 
                        <div class="col-md-4 col-xs-12 b-r"> <strong>English Level</strong>
                            <br>
                            <p class="text-muted">{{ (!empty($interview_data->english_level))?$english_level[$interview_data->english_level]["title"]:"" }}</p>
                        </div>
                    </div>
                    <div class="row">
                        @if($interview_data->dos_program_category != 3)
                        <div class="col-md-4 col-xs-12 b-r"> <strong>Program Length</strong>
                            <br>
                            <p class="text-muted">{{ $interview_data->preferred_program_length }}</p>
                        </div>
                        <div class="col-md-4 col-xs-12 b-r"> <strong>Training Position 1</strong>
                            <br>
                            <p class="text-muted">
                                @if(!empty($position_types))
                                    @foreach(@$position_types as $pt)
                                        @if($pt->id == $interview_data->preferred_position_1)
                                        {{ $pt->position_type_name }}
                                        @endif 
                                    @endforeach
                                @endif
                            </p>
                        </div>
                        <div class="col-md-4 col-xs-12 b-r"> <strong>Training Position 2</strong>
                            <br>
                            <p class="text-muted">
                                @if(!empty($position_types))
                                    @foreach(@$position_types as $pt)
                                        @if($pt->id == $interview_data->preferred_position_2)
                                        {{ $pt->position_type_name }}
                                        @endif 
                                    @endforeach
                                @endif
                            </p>
                        </div>
                        @endif
                    </div>
                    @if($interview_data->dos_program_category == 3 && $interview_data->latest_availability_date != '0000-00-00' && $interview_data->latest_availability_date != '')
                    <div class="row"> 
                        <div class="col-md-4 col-xs-12 b-r"> <strong>Latest Availability Date</strong>
                            <br>
                            <p class="text-muted">
                                {{ dateformat($interview_data->latest_availability_date, DISPLAY_DATE) }}
                            </p>
                        </div> 
                    </div>
                    @endif
                @elseif(!empty($is_interview_finished) && (@$interview_data->is_eligible == 2 || @$user_status == 5001))
                    @if($interview_data->dos_program_category == 3)
                        <div class="alert alert-warning"><p>Thank you for your interest in Odyssey Camp J1 Camp Counselor program. We regret to inform you that, based on our eligibility criteria, you are not currently eligible for participation in the program. We appreciate your time and interest and encourage you to explore other opportunities that align with your goals and qualifications.</p></div>
                    @else
                        <div class="alert alert-warning"><p>Sorry! It appears that you are <strong>Not Eligible</strong> for our Exchange Visitor program. Please contact us to get more details on the eligibility requirements.</p></div>
                    @endif  
                @endif
            @endif
            
            @if(!empty($is_interview_finished) && !empty($next_step_key) && @$interview_data->is_eligible == 1 && $user_status != 5001)
                <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
            
            @if($sponsor_name != "ODYSSEY CAMP")
                @if(empty($interview_data) || (!empty($interview_data) && $interview_data->is_eligible != 2))
                    <div id="request_finance_content" class="financial_info hide">
                        @if($is_payment_plan == 1)
                            <label>Need financing? Up to <span class="text-info">60% of special financing</span></label>
                            <div class="alert alert-success"><p>We took note of your financing request, We will contact you shortly.</p></div>
                        @else
                            <label>Need financing? Up to <span class="text-info">60% of special financing</span></label>
                            <div class="finance_checkbox">
                                <div class="checkbox checkbox-success">
                                    <input id="request_finance" type="checkbox" {{ is_disabled($is_step_locked,'1') }} />
                                    <label for="request_finance">Request financing</label>
                                </div>
                            </div>
                        @endif
                    </div>
                @endif
            @endif
            
        </div>
    </div>
</div> 
<script>
    $(document).ready(function(){
        var notify_id = "{{ $notify_id }}";
        $('#choose_date_time').on('changeDate', function(e) {
            $('.choose_date_time').addClass('hide');
            $('.financial_info').addClass('hide');
            $('.interview_success').removeClass('hide');
            //itn_interview_toast();
        }); 

        $("#request_finance").click(function(){
            show_inner_loader('.timeline_stp_desc',"#all_tab_data");
            if($(this).is(":checked") == true)
            {
                var url = "{{ route('requestfinance') }}";

                $.ajax({
                    url: url,
                    type: 'post',
                    data: { action:"request_payment_plan" },
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function(response){
                        if(response.type == "success")
                        {
                            notifyResponse("#request_finance_content .finance_checkbox",response.message,response.type);
                        }
                        else if(response.type == "error")
                        {
                            notifyResponse("#"+notify_id,response.message,response.type);
                        }

                        hide_inner_loader('.timeline_stp_desc',"#all_tab_data");
                    },
                });
            }
        }); 
          
        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 ev_alternate_datetime = $('#ev_alternate_datetime').val();
            submitUserResponse(confimval, int_sch_id, ev_reject_reason, ev_alternate_datetime); 
        });
    });
    
    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){
        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 = "";
        }
        
        var form_data = 'confimval='+confimval+'&interview_schedule_id='+int_sch_id+'&ev_reject_reason='+ev_reject_reason+'&ev_alternate_datetime='+ev_alternate_datetime;
        
        $.ajax({
            url: "{{ route('user.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('1','{{ $active_step_key }}'); }, 3000);
                }
                else
                {
                    var Html = '<div class="alert swl-alert-danger"><p>'+response.message+'</p></div>'; 
                    notifyResponseTimerAlert(Html,"error","Error");
                    return false;
                }
            }
        });
    }
</script>