@php
$is_multi_placement = @$step_verified_data['is_multi_placement'];
$step_status = @$step_verified_data['step_status'];
$placement_data = @$step_verified_data['placement_data'];    
$is_placement_confirmed = @$step_verified_data['is_placement_confirmed'];
$is_lead_added = @$step_verified_data['is_lead_added'];
$is_hc_reviewing = @$step_verified_data['is_hc_reviewing'];
$is_rejected_by_hc = @$step_verified_data['is_rejected_by_hc'];
$pc_closed = @$step_verified_data['pc_closed'];
$rejected_by_hc_name = @$step_verified_data['rejected_by_hc_name'];
$is_decline_by_ev = @$step_verified_data['is_decline_by_ev'];
$introductory_call_admin_details = @$step_verified_data['introductory_call_admin_details'];
$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']; 
$hc_timezone_label = @$step_verified_data['hc_timezone_label'];
$dos_program_category_id = @$user->portfolio->dos_program_category_id;
$j1Status = @$user->j1Status->id;
$zoom_url = config('common.zoom_url');

if(config("common.portal") == "ODC"){
$company_name = config("common.portal");
}elseif(config("common.portal") == "ITN"){
$company_name = config("common.portal");
}else{
$company_name = config("app.name");
}

$emp_interview_data = @$placement_data[0]['emp_interview_data'];
if (!empty($emp_interview_data->interview_schedule_with) && in_array($emp_interview_data->interview_schedule_with, [1, 2])) {
$meet_type = ($emp_interview_data->interview_schedule_with == 1)? 'Zoom' : 'MS Teams';
}
if(!empty($emp_interview_data) && !empty($emp_interview_data->admin_timezone_name)){
date_default_timezone_set($emp_interview_data->admin_timezone_name);
}
$system_date = date('Y-m-d h:i');
@endphp
<div class="app-status-panel-content"> 
    <div class="row"> 
        @if(!empty(@$j1Status) && (@$j1Status == 6011 || @$j1Status == 6012))
            <div class="col-sm-12 mb-4">
                <div class="d-flex flex-column flex-sm-row align-items-center"> 
                    <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                        Eligible for Host Company Interview
                    </h3>  
                </div>
            </div>
            <div class="col-sm-12"> 
                <p>Please communicate with your US Experience Expert: <strong>{!! @$introductory_call_admin_details['admin_name'] !!}</strong> <strong><a href="mailto:{{@$introductory_call_admin_details['admin_email']}}">{{@$introductory_call_admin_details['admin_email']}}</a></strong>.</p>
                @if(@$j1Status == 6011)                
                <p>Your current program status is <b>Left Host Company</b>. Please contact your US Experience Expert if you have any questions regarding your program status or next steps.</p>
                @elseif(@$j1Status == 6012)                
                <p>Your current program status is <b>Left USA Early</b>. Please contact your US Experience Expert if you have any questions regarding your program status or next steps.</p>
                @endif
                <p><a href="mailto:{{@$introductory_call_admin_details['admin_email']}}" class="btn btn-info">Email US Experience Expert</a></p> 
            </div>
        @elseif(!empty($emp_interview_data))
            @if(empty($emp_interview_data->interview_confirmed_user)) 
            <div class="col-sm-12 mb-4">
                <div class="d-flex flex-column flex-sm-row align-items-center"> 
                    <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                        Host Company Interviewing
                    </h3>  
                </div>
            </div>
                <div class="col-sm-12">
                    <p>It's an exciting moment, you have been invited for an interview on {{$meet_type}} with {!! @$placement_data[0]['emp_name'] !!}.</p> 
                    <p>This is a critical step that will determine whether you secure the position with {!! @$placement_data[0]['emp_name'] !!}, a world-class brand that seeks prepared and passionate participants for their team.</p> 
                    <p>Please find the tentative details below:</p>
                    <ul>
                        <li>Interview Date & Time: {{ dateformat($emp_interview_data->dest_datetime,'l, M d, Y h:i A') }} </li>
                        <li>Time Zone: {{ get_timezone_label($emp_interview_data->dest_timezone_id) }}</li>
                    </ul>
                    <p>You may use <a href="www.timezoneconverter.com" target="_blank">www.timezoneconverter.com</a> to convert the time and double-check the details.</p> 
                    <p>Once the interview invitation has been accepted by both you and Host Organization representative, you will receive another email with the meeting details (Meeting ID & Password). Please try to make yourself available, as rescheduling interviews might be difficult. The faster we get through these initial steps, the sooner you can start your program in the USA.</p> 
                    <p>Since the interview will be conducted via {{$meet_type}}, please make sure you have installed {{$meet_type}} on your device in preparation for the call.</p> 
                    <p>Please confirm that you will be able to attend the interview:</p>
                    <div class="d-flex flex-wrap gap-2">
                        <button type="button" class="btn btn-info" onclick="userConfirmation(1,{{@$emp_interview_data->interview_schedule_id}});">Confirm Interview</button> 
                        <button type="button" class="btn btn-danger" onclick="userConfirmation(3,{{@$emp_interview_data->interview_schedule_id}});">Decline Interview</button>
                    </div>
                    <p></p>
                    <p>To begin preparing for the potential interview, please review the following:</p>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="https://drive.google.com/file/d/1kqsZgxVvFW4nbqR9j0JL1ETP1l_zkJkJ/view?usp=sharing" class="btn btn-info" target="_blank" >Download Guidelines</a>
                        <a href="https://www.youtube.com/watch?v=UbXWlk088cQ" target="_blank" class="btn btn-info">Watch Video</a>
                        <a href="https://us06web.zoom.us/meeting/register/BWnTtyiVQU24X3zQnAGQmA" class="btn btn-info" target="_blank">Attend The Webinar</a>
                    </div>   
                </div>
                <div id="popup_confirm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header bg-info text-white">
                                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
                                <h5 class="modal-title">Confirm Decline Interview</h5> 
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body tcustom_model_ht" >
                                <form id="frm_update_decline" name="frm_update_decline" method="post">
                                    <input type="hidden" name="confirmval" id="confirmval" value="3" />
                                    <input type="hidden" name="decline_reason" id="decline_reason" value="1" />
                                    <input type="hidden" name="int_sch_id" id="int_sch_id" value="{{@$emp_interview_data->interview_schedule_id}}" />
                                    <div style='margin-bottom:15px' id='notify_msg'></div>
                                    <div class='colx2-left-double mtop20'>
                                        <fieldset class='scheduler-border'>
                                            <legend class='scheduler-border'>
                                                Are you sure delete this interview?
                                            </legend>
                                            <p><b>Host Company Name: </b>{!! @$placement_data[0]['emp_name'] !!}</p>
                                            <p><b>Host Company Position Name: </b>{!! @$placement_data[0]['pos_name'] !!}</p>
                                            <p><b>Interview Date/Time: </b>{{ dateformat($emp_interview_data->dest_datetime,DISPLAY_DATETIME) }}</p>
                                            <p><b>Time Zone: </b>{{ get_timezone_label($emp_interview_data->dest_timezone_id) }}</p>
                                            <p><b>Add Reason for decline interview:<span class='text-danger'> *</span></b></p>
                                            <textarea class="form-control" maxlength="500" name="ev_decline_reason" style="resize: none;" id="ev_decline_reason" placeholder="Please enter reason for decline interview" required="required"></textarea>
                                            <span class='text-danger hide' id='err_reason'>Please enter reason for decline interview</span>
                                        </fieldset>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer t_center">
                                <button type="button" class="btn btn-info" data-bs-dismiss="modal">Close</button>
                                <button type="button" id="decline_submit" name="decline_submit"  class="btn btn-danger btn-xs-block">Yes Decline</button>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                @if($emp_interview_data->interview_confirmed_user == 1 && $emp_interview_data->interview_confirmed_emp == 1)
                <div class="col-sm-12 mb-4">
                    <div class="d-flex flex-column flex-sm-row align-items-center"> 
                        <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                            Host Company Interviewing
                        </h3>  
                    </div>
                </div>
                <div class="col-sm-12">
                    <p>Your interview is confirmed. Please see the details of your interview below:</p> 
                    <p>Host Organization Name: <strong>{!! @$placement_data[0]['emp_name'] !!}</strong>
                        <br/>Position Name: <strong>{!! @$placement_data[0]['pos_name'] !!}</strong>
                        <br/>Interview Date/Time: <strong>{{ dateformat($emp_interview_data->dest_datetime, 'l, M d, Y'). ' at ' . dateformat($emp_interview_data->dest_datetime, 'h:i A'); }}</strong>
                        <br/>Time Zone: <strong>{{ get_timezone_label($emp_interview_data->dest_timezone_id) }}</strong>
                    <p>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 representative from the Host Organization:</p>
                    <p>- Name: <strong>{{$emp_interview_data->interviewer}}</strong>
                        <br/>- Title: <strong>{{$emp_interview_data->interviewer_title}}</strong></p>
                    <p>Your interview will be conducted on {{$meet_type}}  . Please make sure you have installed {{$meet_type}} on your device.</p>     
                    @if(!empty($emp_interview_data->meeting_id))
                    <p>Below are the details needed to join the interview:</p> 
                    <p>
                        Meeting ID: <strong>{{ $emp_interview_data->meeting_id ?? '' }}</strong><br/>
                        Password: <strong>{{ $emp_interview_data->meeting_password ?? '' }}</strong><br/>
                    </p> 
                    @endif
                    <p>To begin preparing for the interview, please review the following:</p>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="https://drive.google.com/file/d/1kqsZgxVvFW4nbqR9j0JL1ETP1l_zkJkJ/view?usp=sharing" class="btn btn-info" target="_blank" >Download Guidelines</a>
                        <a href="https://www.youtube.com/watch?v=UbXWlk088cQ" target="_blank" class="btn btn-info">Watch Video</a>
                        <a href="https://us06web.zoom.us/meeting/register/BWnTtyiVQU24X3zQnAGQmA" class="btn btn-info" target="_blank">Attend The Webinar</a>
                    </div>  
                    <p></p>
                    <p>On {{ dateformat($emp_interview_data->dest_datetime,'l, M d, Y h:i A') }} join the interview by clicking the button here:</p>
                    <p><a target="_blank" href="{{$emp_interview_data->join_url}}" class="btn btn-info">Join Interview</a></p>
                </div>
                @elseif(($emp_interview_data->interview_confirmed_user == 1 && $emp_interview_data->interview_confirmed_emp != 1))
                <div class="col-sm-12 mb-4">
                    <div class="d-flex flex-column flex-sm-row align-items-center"> 
                        <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                            Host Company Interviewing
                        </h3>  
                    </div>
                </div>
                <div class="col-sm-12">
                    <p>Thank you for confirming your interview. We are now waiting for the Host Organization to confirm it on their end. This page will be updated as soon as it is confirmed, and you will be informed via email.</p> 
                </div>
                @endif
            @endif
        @elseif($is_decline_by_ev == 1)
            <div class="col-sm-12 mb-4">
                <div class="d-flex flex-column flex-sm-row align-items-center"> 
                    <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                       Interview Confirmation
                    </h3>  
                </div>
            </div>
            <div class="col-sm-12">
                <p>As you declined the interview invitation, we are currently coordinating your request with the Host Organization.</p>  
            </div>
        @elseif ((@$is_hc_reviewing == 1 || @$is_hc_reviewing == 2))
            <div class="col-sm-12 mb-4">
                <div class="d-flex flex-column flex-sm-row align-items-center"> 
                    <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                       Host Company Reviewing
                    </h3>  
                </div>
            </div>
            <div class="col-sm-12">
                <p>Host Organization ({!! @$placement_data[0]['emp_name'] !!}) is currently reviewing your profile. If they select you for an interview, you will be notified here and via email.</p>
                <p>To begin preparing for the potential interview, please review the following:</p>            
                <div class="d-flex flex-wrap gap-2">
                    <a href="https://drive.google.com/file/d/1kqsZgxVvFW4nbqR9j0JL1ETP1l_zkJkJ/view?usp=sharing" class="btn btn-info" target="_blank" >Download Guidelines</a>
                   <a href="https://www.youtube.com/watch?v=UbXWlk088cQ" target="_blank" class="btn btn-info">Watch Video</a>
                     <a href="https://us06web.zoom.us/meeting/register/BWnTtyiVQU24X3zQnAGQmA" class="btn btn-info" target="_blank">Attend The Webinar</a>
                </div>
                <p></p>
            </div>
        @elseif(@$is_lead_added == 1)
            <div class="col-sm-12 mb-4">
                <div class="d-flex flex-column flex-sm-row align-items-center"> 
                    <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                        Host Company Reviewing
                    </h3>  
                </div>
            </div>
            <div class="col-sm-12">
                <p>Your US Experience Expert submitted your profile to the Host Organizations you selected.</p>
                <p>We are now waiting for the Host Organizations to review your profile.</p>
                <p>To begin preparing for the potential interview, please review the following:</p> 
                <div class="d-flex flex-wrap gap-2">
                    <a href="https://drive.google.com/file/d/1kqsZgxVvFW4nbqR9j0JL1ETP1l_zkJkJ/view?usp=sharing" class="btn btn-info" target="_blank" >Download Guidelines</a>
                    <a href="https://www.youtube.com/watch?v=UbXWlk088cQ" target="_blank" class="btn btn-info">Watch Video</a>
                     <a href="https://us06web.zoom.us/meeting/register/BWnTtyiVQU24X3zQnAGQmA" class="btn btn-info" target="_blank">Attend The Webinar</a>
                </div>
                <p></p>
                <p>Thank you for your patience and understanding!</p>  
            </div>
        @elseif(@$pc_closed == 1)
        <div class="col-sm-12 mb-4">
            <div class="d-flex flex-column flex-sm-row align-items-center"> 
                <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                    Eligible for Host Company Interview
                </h3>  
            </div>
        </div>
         <div class="col-sm-12">
                <p>Unfortunately, <strong>{!! @$rejected_by_hc_name !!}</strong> will not be moving forward with your application at this time.</p>
                <p>Your resume will be automatically sent to your next Host Company preference for review. If you have any questions please reach out to your US Experience Expert.</p>  
                <p>To begin preparing for the next interview, please review the following.</p>
                <div class="d-flex flex-wrap gap-2">
                    <a href="https://drive.google.com/file/d/1kqsZgxVvFW4nbqR9j0JL1ETP1l_zkJkJ/view?usp=sharing" class="btn btn-info" target="_blank" >Download Guidelines</a>
                    <a href="https://www.youtube.com/watch?v=UbXWlk088cQ" target="_blank" class="btn btn-info">Watch Video</a>
                     <a href="https://us06web.zoom.us/meeting/register/BWnTtyiVQU24X3zQnAGQmA" class="btn btn-info" target="_blank">Attend The Webinar</a>
                </div> 
            </div> 
         @else
            <div class="col-sm-12 mb-4">
                <div class="d-flex flex-column flex-sm-row align-items-center"> 
                    <h3 class="mb-2 mb-sm-0 text-center flex-grow-1 d-inline-b">
                        Eligible for Host Company Interview
                    </h3>  
                </div>
            </div>
            <div class="col-sm-12"> 
                <p>Please communicate with your US Experience Expert: <strong>{!! @$introductory_call_admin_details['admin_name'] !!}</strong> <strong><a href="mailto:{{@$introductory_call_admin_details['admin_email']}}">{{@$introductory_call_admin_details['admin_email']}}</a></strong>.</p>
                <p>Your US Experience Expert can provide you with all the available opportunities we currently have and assist you in selecting the J-1 Intern or Trainee Program of your dreams in the United States.</p>
                <p>After you select the opportunities, they will collaborate with the Host Organizations and submit your profile to them.</p>
                <p><a href="mailto:{{@$introductory_call_admin_details['admin_email']}}" class="btn btn-info">Email US Experience Expert</a></p> 
            </div>
       @endif
        <div class="d-flex justify-content-end align-items-center gap-2 mt-3">

            <button type="button"
                    class="btn btn-success"
                    onclick="return viewPopup('Booking for Interview','{{@$active_step_key}}');">
                Support <i class="mdi mdi-help-circle-outline step-help"></i>
            </button>

            @if(@$placement_data[0]['pla_type'] == 2)
                <button type="button" class="btn btn-info" onclick="loadStepContent('{{ $next_step_key }}')">Next Step</button>
            @endif
        </div> 
    </div>
</div>  

<script>
    
    $(document).off('click','#decline_submit').on('click','#decline_submit', function(){
        var confirmval = $('#confirmval').val();
        var int_sch_id = $('#int_sch_id').val();
        var ev_decline_reason = $('#ev_decline_reason').val();        
        if(typeof(ev_decline_reason) == 'undefined' || ev_decline_reason == ''){
            $("#err_reason").removeClass("hide");
        }else{
            $("#err_reason").addClass("hide");
            $("#form_buttons *").attr("disabled", "disabled").off('click');        
            submitEvDeclineResponse(confirmval, int_sch_id, ev_decline_reason); 
        }
    });
    
    function userConfirmation(confimval, int_sch_id)
    {
    if (confimval == 2){
    $("#frm_update_int_con").removeClass('hide');
    $(".confirmation_option").addClass('hide');
    return false;
    }
    else if (confimval == 3){
    $("#popup_confirm").modal('show');
    return false;
    }
    else{
    submitEvDeclineResponse(confimval, int_sch_id);
    }
    }
    
    function submitEvDeclineResponse(confirmval, int_sch_id, ev_decline_reason){
        show_inner_loader(".timeline_stp_desc1","#all_tab_data");
        
        if(ev_decline_reason == '' || ev_decline_reason == null || ev_decline_reason == 'undefined') {
            ev_decline_reason = "";
        }
        var form_data = 'confimval='+confirmval+'&interview_schedule_id='+int_sch_id+'&ev_decline_reason='+ev_decline_reason;
        
        $.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_desc1',"#all_tab_data");
                $("#popup_confirm").modal('hide');
                $("#decline_submit").prop("disabled",false);
                
                if(response.type == "success")
                { 
                    var title = "<div class='custom-success-icon'><i class='fa fa-check-square custom-check-square'></i></div>Success!";
                }
                else 
                {
                    var title = "<div class='custom-danger-icon'><i class='fa fa-solid fa-times custom-check-square'></i></div>Error!"; 
                } 
                
                swal({
                        title: title,
                        text: response.message,
                        type: '',
                        showConfirmButton: true,
                        showCancelButton: false,
                        html: true,
                        confirmButtonColor: "#001a48",
                        confirmButtonText: "Ok",
                        allowOutsideClick: false, 
                    }, function () { 
                        if(response.type == "success") { 
                            swal.close();
                            setTimeout(function(){ navigateStages('2','{{ $active_step_key }}'); }, 3000);
                           if(confirmval == 3){
                               document.location.href = document.location.href;
                           }
                        }else{
                            return false;
                        } 
                    }); 
                
            }
        });
    }
</script>