@php
    $step_status = @$step_verified_data['step_status'];
    $embassy_data = @$step_verified_data['embassy_data'];

    $embassy_date = @$step_verified_data['embassy_timezone'];
    
    $embassy_timezone = @$embassy_date->zone_id;
    $embassy_date = @$step_verified_data['embassy_interview'];

    $embassy_timezone_converted = @$embassy_data->dest_timezone_id;
    $embassy_date_converted = @$embassy_data->dest_datetime;

    $timezone_list = @$step_verified_data['timezone_list'];

    if(empty($embassy_timezone))
    {
        $embassy_timezone = session('user_timezone');
    }
    $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'];
@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">INTERVIEW AT THE US EMBASSY</h3>
            <button type="button" title="Contact Support" class="btn btn-success pull-right support_width" onclick="return viewPopup('US Embassy','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button>
            <div id="{{ $notify_id }}"></div>
            @if($step_status == 2)
                <p>It will take place on <strong>{{ dateformat($embassy_date_converted,DISPLAY_DATETIME) }}</strong> at your local time zone <strong>{{ get_timezone_label($embassy_timezone_converted) }}</strong></p>
                <p>As soon as you are done with your interview at your local U.S. Consulate / Embassy, please inform us of the result. </p>
                @if(!empty($next_step_key) && $step_status == 2)
                    <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
            @elseif($step_status == 1)
                <p>Please add the date and time of your visa interview date at the U.S. Embassy below. Please be sure to check you have added the correct information as this will affect your insurance and arrival information.</p>
                <form class="m-b-20" name="embassy_interview" id="embassy_interview" onsubmit="return validate_flight_info(this);">
                    <div class="row">
                        <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 col-md-6">
                            <div class="form-group">
                                <label class="control-label">Embassy Interview Date & Time <span class="text-danger text-required">*</span></label>
                                <input type="text" name="embassy_interview_date" id="embassy_interview_date" class="form-control datetimepicker mobile_readonly" value="{{ dateformat($embassy_date,'m/d/Y H:i') }}" onchange="remove_disable();" required="" placeholder="Select Date & Time" autocomplete="off">
                                <div class="help-block with-errors"></div>
                                <div class="form-control-feedback"></div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <div class="form-group">
                                <label class="control-label">Local Timezone <span class="text-danger text-required">*</span></label>
                                <select name="embassy_timezone" id="departure_timezone" class="form-control" required="">
                                    <option value="">-- Select Timezone --</option>
                                    @if(!empty($timezone_list))
                                        @foreach($timezone_list as $zone)
                                            <option value="{{ $zone->zone_id }}" {{ is_selected($zone->zone_id,$embassy_timezone) }}>{{ $zone->zone_label }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <div class="help-block with-errors"></div>
                                <div class="form-control-feedback"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-sm @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block">Submit</button>
                    </div>
                </form>
            @endif
        </div>
    </div>
</div>
<div id="custom_popup_confirm_flight_info" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Confirm Embassy Interview Information</h4> 
            </div>
            <div class="modal-body custom_model_ht" >
                <div class="alert alert-warning"><p><i class="fa fa-exclamation-triangle fa-fw"></i> Please confirm you have entered the correct embassy date. Your embassy date is very important. So please double check that you have entered the correct date before continuing.</p></div>
                <form id="frm_popup" name="frm_popup" method="post">
                    <div class="form-group">
                        <label for="recipient-name" class=" col-md-3 control-label">Embassy Interview Date & Time:</label>
                        <span id="confirm_embassy_date" class="col-md-6 col-sm-4 col-xs-12" style="display: inline-block;  float: revert;font-weight:700;" ></span>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-md-3 control-label">Local Timezone:</label>
                        <span id="confirm_local_timezone" class="col-md-6 col-sm-4 col-xs-12" style="display: inline-block;  float: revert;font-weight:700;" ></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer t_center">
                <button type="button" class="btn btn-default waves-effect btn-xs-block" data-dismiss="modal" style="margin-bottom: 0;">Close</button>
                <button type="button" id="confirm_button_custom" onclick="add_embassay_detail()" class="btn btn-danger btn-xs-block">Confirm Embassy Information</button>
            </div>
        </div>
    </div>
</div>


<script>
    function custom_popup_confirm_flight_info()
    {
        var arrival_date = $("#embassy_interview_date").val();
        var arrival_timezone_text = $("#departure_timezone option:selected").text();
        arrival_date = formatDate(new Date($("#embassy_interview_date").val()));
        $("#confirm_embassy_date").html(arrival_date);
        
        $("#confirm_local_timezone").html(arrival_timezone_text);
        
        show_popup("custom_popup_confirm_flight_info");
    }
    function remove_disable(){
        $("#confirm_button_custom").attr("disabled",false);
    }
    function validate_flight_info()
    {
        var form_data = $("#embassy_interview").serialize();
        $("#flight_info_form_data").val(form_data);
        var arrival_date = $("#embassy_interview_date").val();
        var arrival_timezone_text = $("#departure_timezone option:selected").val();
        if(arrival_timezone_text != "" && arrival_date !=''){
            custom_popup_confirm_flight_info();
        }
        
        return false;
    }
    function add_embassay_detail(){
        $("#confirm_button_custom").attr("disabled",true);
        $('#embassy_interview').submit();
    }
    $(document).ready(function()
    {
        var user_id = $('meta[name="user_token"]').attr('content');
        var form_selector = "#embassy_interview";
        
        ajaxFormValidator(form_selector,function(ele,event){
            event.preventDefault();
            show_inner_loader(".timeline_stp_desc","#all_tab_data");
            
            var form_data = new FormData(ele);
            var url = "{{ route('embassy.interview') }}";
            
            $.ajax({
                type: 'post',
                url: url, 
                data: form_data,
                dataType: 'json',
                processData: false,
                contentType: false,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    hide_popup("custom_popup_confirm_flight_info");
                    if(response.type=='success'){
                        var Html = '<div class="alert swl-alert-success"><ul><li>'+ response.message+ '</li></ul></div>'; 
                        notifyResponseTimerAlert(Html,"success","Success");
                        setTimeout(function(){
                            navigateStages(3,'{{$active_step_key}}');
                        }, 3000); 
                    }
                    else{
                        hide_inner_loader(".timeline_stp_desc","#all_tab_data");
                        var Html = '<div class="alert swl-alert-danger"><ul>'; 
                        $.each( response.message, function( key, value ) {
                            Html += '<li>' + value+ '</li>';  
                        });
                        Html += '</ul></div>';  
                        notifyResponseTimerAlert(Html,"error","Error");
                    } 
                }
            });
        }); 
    });
</script>