@php  
    $step_status = @$step_verified_data['step_status'];
    $flight_data = @$step_verified_data['flight_data'];
    $step_success = @$step_verified_data['is_step_success'];
    $is_itn_user = (!empty($portfolio->sponsor_agency_id) && $portfolio->sponsorAgency->checkAgencySync()) ? 1 : 0;
    $is_multi_placement = @$step_verified_data['is_multi_placement'];
    $second_flight_info = @$step_verified_data['second_flight_data'];
@endphp
<div class="row"> 
    <div class="col-sm-12">
        <h3>Arrival in the United States</h3> 
        @if(empty($step_status)) 
            <p>This step is disable until user will reach to step.</p>  
        @else
            @if($is_multi_placement == true)
                <div class="col-sm-12">
                    <div class="multi_tab_view m-b-20">
                        <ul class="nav nav-pills" id="{{ $active_step_key }}">
                            @php
                                
                                $flight_1_class = !empty($flight_data) ? "tab-success" : "tab-progress active";
                                $flight_2_class = !empty($second_flight_info) ? "tab-success active" : "tab-progress active";
                            
                            @endphp
                            <li class="{{$flight_1_class}}">
                                <a href="#pd_arrive_1" data-toggle="tab" aria-expanded="false">Placement 1 Arrival</a> 
                            </li>
                            <li class="{{$flight_2_class}}">
                                <a href="#pd_arrive_2" data-toggle="tab" aria-expanded="false">Placement 2 Arrival</a> 
                            </li>
                        </ul>
                        <div class="tab-content br-n pn">
                            <div id="pd_arrive_1" class="tab-pane fade in">
                                @if(!empty($flight_data))
                                    @if($flight_data->is_date_passed == 1)
                                    <div class="row m-b-10">
                                        <div class="col-md-12">
                                            <div class="col-md-2">
                                                <img src="{{asset($image_path.'welcome.png')}}">
                                            </div>
                                            <div class="col-md-10 alert alert-success">
                                                <p><strong>Welcome to The USA...</strong></p>
                                                <p>Start your program</p>
                                            </div>
                                        </div>
                                    </div>
                                    @else
                                        <p>Your arrival date and time are recorded for <strong>{{ dateformat($flight_data->arrival_date,DISPLAY_DATETIME) }}</strong> according to following time zone <strong>@if(!empty($flight_data->zone_label)){{ $flight_data->zone_label }}@endif</strong></p>
                                    @endif
                                @else
                                    <p>This will be final step of your application.</p>
                                @endif
                            </div>
                            <div id="pd_arrive_2" class="tab-pane fade in active">
                                @if(!empty($second_flight_info))
                                    @if($second_flight_info->is_date_passed == 1)
                                    <div class="row m-b-10">
                                        <div class="col-md-12">
                                            <div class="col-md-2">
                                                <img src="{{asset($image_path.'welcome.png')}}">
                                            </div>
                                            <div class="col-md-10 alert alert-success">
                                                <p><strong>Start your program</strong></p>
                                            </div>
                                        </div>
                                    </div>
                                    @else
                                        <p>Your arrival date and time are recorded for <strong>{{ dateformat($second_flight_info->arrival_date,DISPLAY_DATETIME) }}</strong> according to following time zone <strong>@if(!empty($second_flight_info->zone_label)){{ $second_flight_info->zone_label }}@endif</strong></p>
                                    @endif
                                @else
                                    <p>This will be final step of your application.</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @else
                @if(!empty($flight_data))
                    @if($flight_data->is_date_passed == 1)
                        <div class="alert alert-success text-center">
                            <p><strong>Welcome to The USA...</strong></p>
                        </div>
                    @else
                        <p>Your arrival date and time are recorded for <strong>{{ dateformat($flight_data->arrival_date,DISPLAY_DATETIME) }}</strong> according to following time zone <strong>@if(!empty($flight_data->zone_label)){{ $flight_data->zone_label }}@endif</strong></p>
                    @endif
                @else
                    <p>This will be final step of your application.</p>
                @endif
                <div class="clearfix"></div>
                <hr>
                @if($step_success == 0 && $is_itn_user == 0)
                    <a onclick="arrived()" href="javascript:void(0)" class="btn btn-info m-r-15" title="Arrived" >Arrived</a>
                @endif
            @endif
        @endif
    </div>
</div>
<script>  
function arrived(){
    showLoader("#full-overlay"); 
    var url = "{{route('arrived')}}";
    var user_id = $('meta[name="user_token"]').attr('content');
    
    $.ajax({
        url: url,
        type: "post",
        dataType: "json",
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        data: {'user_id':user_id},
        success: function(response){ 
            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('{{ $active_stage }}',"{{$active_step_key}}");
                }, 3000); 
            } 
            else{
                var Html = '<div class="alert swl-alert-danger"><p>Failed to change status.</p></div>'; 
                notifyResponseTimerAlert(Html,"error","Error");
                return false;
            }
            hideLoader("#full-overlay");
        },
    });
}
</script>