@php
    $arrival_timezone_list = @$step_verified_data['arrival_timezone_list'];
    $step_status = @$step_verified_data['step_status'];
    $flight_info = @$step_verified_data['flight_data'];
    $step_success = @$step_verified_data['is_step_success'];
    $class = $step_success == 1 ? "" : "hide";
    $arrival_method = config('common.arrival_method');
    $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">When is your departure flight?</h3>
        <button type="button" title="Contact Support" class="btn btn-success pull-right support_width" onclick="return viewPopup('Departure Flight Info','{{@$active_step_key}}');">Support<i class="mdi mdi-help-circle-outline step-help"></i></button> 
        @if(empty($step_status))
            <p>This step is disable until user will reach to step.</p>
        @else
            <div id="{{ $notify_id }}"></div>
                @if(empty($flight_info))
                    <div id="flight_info_form" class="row">
                        <form name="frm_flight_info" id="frm_flight_info" method="post" class="m-b-10 custom_form" >
                            <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-sm-12">
                                <div class="row">
                                    <div class="col-sm-12 col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">Departure Airport <small class="text-danger text-required">*</small></label>
                                            <select class="form-control" name="departure_airport"  id="departure_airport" required="">
                                                <option value="">-- Select Airport --</option>
                                                @if(!empty($airports))
                                                @foreach($airports as $airport)
                                                <option value="{{ $airport->ap_abbr }}" {{ is_selected(@$flight_info['departure_airport'],$airport->ap_abbr) }}>{{ $airport->airport_label }}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                            <div class="help-block with-errors"></div>
                                            <div class="form-control-feedback"></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">Airline <small class="text-danger text-required">*</small></label>
                                            <input type="text" name="airline" id="airline" value="{{@$flight_info['airline']}}" class="form-control" required=""/>
                                            <div class="help-block with-errors"></div>
                                            <div class="form-control-feedback"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label">Flight Number <small class="text-danger text-required">*</small></label>
                                    <input type="text" name="flight" id="flight" value="{{@$flight_info['flight']}}" class="form-control" required=""/>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="col-sm-12 col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">Departure Timezone</label>
                                            <select name="departure_timezone" id="departure_timezone" class="form-control">
                                                <option value="">-- Select Timezone --</option>
                                                @if(!empty($timezones))
                                                @foreach($timezones as $zone)
                                                <option value="{{ $zone->zone_id }}" {{ is_selected(@$flight_info['departure_timezone'],$zone->zone_id) }}>{{ $zone->zone_label }}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                            <div class="help-block with-errors"></div>
                                            <div class="form-control-feedback"></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-6">
                                        <div class="form-group">
                                            <label class="control-label">Departure Date (US date) <small class="text-danger text-required">*</small></label>
                                            <input  type="text" name="departure_date" id="departure_date" class="form-control datetimepicker mobile_readonly" value="{{!empty(@$flight_info['convert_departure_date']->dest_datetime) ? dateformat(@$flight_info['convert_departure_date']->dest_datetime,'m/d/Y H:i A') : ''}}" autocomplete="off" required=""/>
                                            <div class="help-block with-errors"></div>
                                            <div class="form-control-feedback"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label">Additional Info</label>
                                    <textarea class="form-control" name="additional_info">{{@$flight_info['additional_info']}}</textarea>
                                    <div class="help-block with-errors"></div>
                                    <div class="form-control-feedback"></div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-actions">
                                    <button type="button" name="save" id="save_btn" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif" value="Save" onclick="validate_flight_info();">Submit</button>
                                    <button type="reset" class="btn btn-danger" onclick="flightInfofrm('flightdata')">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                @else
                    <div id="flight_info">
                        <table class="table color-table info-table @if(config('common.portal') == 'ODC') color-table-odc @endif">
                            <thead>
                                <tr>
                                    <th><strong>Arrival Airport</strong></th>
                                    <td>{{ $flight_info['airport_data']->airport_label }}</td>
                                </tr>
                                <tr>
                                    <th><strong>Airline</strong></th>
                                    <td>{{ $flight_info['airline'] }}</td>
                                </tr>
                                <tr>
                                    <th><strong>Flight Number</strong></th>
                                    <td>{{ $flight_info['flight'] }}</td>
                                </tr>
                                <tr>
                                    <td colspan="2"></td>
                                </tr>
                                <tr>
                                    <th><strong>Departure Time zone</strong></th>
                                    <td>{{ $flight_info['dep_timezone_data']->zone_label }}</td>
                                </tr>
                                <tr>
                                    <th><strong>Departure Date (cand time)</strong></th>
                                    <td>{{ dateformat(@$flight_info['convert_departure_date']->dest_datetime,DISPLAY_DATETIME) }}</td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                @endif
            @endif
        
    </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 Departure Flight Information</h4> 
            </div>
            <div class="modal-body custom_model_ht_flight">
                <div class="alert alert-warning"><p><i class="fa fa-exclamation-triangle fa-fw"></i> Please confirm you have entered the correct departure date to the United States!</p></div>
                <form id="frm_popup" name="frm_popup" method="post">
                    <input type="hidden" name="flight_info_form_data" id="flight_info_form_data" value="" />
                    <div class="form-group">
                        <label for="recipient-name" class=" col-md-3 control-label">Departure Date (US Time):</label>
                        <span id="confirm_arrival_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">Departure Airport:</label>
                        <span id="confirm_arrival_airport" 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">Airline:</label>
                        <span id="confirm_airline" 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">Flight Number:</label>
                        <span id="confirm_flight_number" 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">
                <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_flight_info()" class="btn btn-danger waves-effect waves-light btn-xs-block">Confirm Flight Information</button>
            </div>
        </div>
    </div>
</div>
@if(($step_status == 2 && !empty($next_step_key)) || $user->is_timeline_locked == 1)
    <button type="button" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif" onclick="loadStepContent('{{ $next_step_key }}')">Next Step</button>
@endif
</div>
<script>
    var notify_id = "{{ $notify_id }}";
    function custom_popup_confirm_flight_info()
    {
        var departure_date = $("#departure_date").val();
        var airline = $("#airline").val();
        var flight = $("#flight").val();
        var departure_airport_text = $("#departure_airport option:selected").text();
        
        /*departure_date = formatDate(new Date($("#departure_date").val()));*/
        departure_date = datetimeFormat(new Date($("#departure_date").val()));
        $("#confirm_arrival_date").html(departure_date);
        $("#confirm_arrival_airport").html(departure_airport_text);
        $("#confirm_airline").html(airline);
        $("#confirm_flight_number").html(flight);
        show_popup("custom_popup_confirm_flight_info");
    }
    function validate_flight_info()
    {
        $("#save_btn").attr("disabled",true);
        var form_data = $("#frm_flight_info").serialize();
        $("#flight_info_form_data").val(form_data);
        var departure_date = $("#departure_date").val();
        var airline = $("#airline").val();
        var flight = $("#flight").val();
        var departure_airport = $("#departure_airport option:selected").val();
        if(departure_date != "" && airline != "" && flight != "" && departure_airport != ""){  
            $.ajax({
                url: "{{ route('validate.departure.date') }}",
                type: 'post',
                data: {departure_date : departure_date},
                dataType: 'json',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response){  
                    $("#save_btn").attr("disabled",false);
                    if(response.type == "success"){  
                        custom_popup_confirm_flight_info(); 
                    }
                    else{
                        var Html = '<div class="alert swl-alert-warning"><ul><li>'+ response.message+ '</li></ul></div>'; 
                        notifyResponseTimerAlert(Html,"error","Error",10000); 
                    } 
                },
            });  
        } 
        return false;
    }
    function add_flight_info(){
        $("#confirm_button_custom").attr("disabled",true);
        $('#frm_flight_info').submit();
    }
    $(document).ready(function(){
        
        $( ".datetimepicker" ).keydown(function( event ) {
            return false;
        });
        
        var form_selector = "#frm_flight_info";
        @if($user->is_timeline_locked == 1)
            $(form_selector)
                .find('input, select, textarea, button[type=submit]')
                .attr("disabled",true);
        @else
            ajaxFormValidator(form_selector,function(ele,event){
                event.preventDefault();
                clearValidatorErr(ele);
                show_inner_loader(".timeline_stp_desc","#all_tab_data");

                var url = " {{ route('departure.flight.info') }} ";
                var user_id = $('meta[name="user_token"]').attr('content');
                var form_data = new FormData(ele);
                form_data.append('user_id',user_id);

                $.ajax({
                    url: url,
                    type: 'post',
                    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");
                        var messages = response.message;
                        if(response.type=='success'){
                            var Html = '<div class="alert swl-alert-success"><ul><li>'+ messages+ '</li></ul></div>'; 
                            notifyResponseTimerAlert(Html,"success","Success");
                            setTimeout(function(){
                                navigateStages(4,'{{$active_step_key}}');
                            }, 3000); 
                        }
                        else if(response.type == "validation_error"){
                            var Html = '<div class="alert swl-alert-danger"><ul>'; 
                            $.each( messages, function( key, value ) {
                                Html += '<li>' + value+ '</li>';  
                            });
                            Html += '</ul></div>';  
                            notifyResponseTimerAlert(Html,"error","Error",10000);
                        }
                        else{
                            notifyResponse("#"+notify_id,messages,response.type);
                        }
                        hide_inner_loader(".timeline_stp_desc","#all_tab_data");
                    },
                });
            });
        @endif
    });

</script>