@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
<div class="app-status-panel-content">
    <div class="row">
        <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">
                    Departure Information
                </h3>  
            </div>
        </div>
        @if(empty($flight_info))
        <div class="col-sm-12">
            <p>Congratulations on completing your J-1 Program! You are now ready to book your flights. We hope that you had a wonderful program experience in the United States, and we look forward to collaborating again in the future!</p>
            <p>Once you have booked your tickets, kindly enter your flight details here:</p> 
            <div id="flight_info_form" class="row main_flight_info_form">
                <form name="frm_flight_info" id="frm_flight_info" method="post" class="mb-3 needs-validation" novalidate> 
                    <input type="hidden" name="flight_order" id="flight_order" value="1"> 
                    <div class="text-end mb-2">
                        <small class="text-muted">
                            All fields with star (<span class="text-danger">*</span>) are required
                        </small>
                    </div>

                    <div class="row g-3"> 
                        <div class="col-md-6">
                            <label class="form-label">
                                Departure Airport: <span class="text-danger">*</span>
                            </label>
                            <select class="form-select" 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->arrival_airport,$airport->ap_abbr) }}>
                                        {{ $airport->airport_label }}
                                    </option>
                                @endforeach
                                @endif
                            </select>
                            <div class="invalid-feedback">Please select departure airport.</div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Airline:<span class="text-danger">*</span></label>
                            <input type="text"
                                   name="airline"
                                   id="airline"
                                   value="{{@$flight_info->airline}}"
                                   class="form-control" required>
                        </div>
                    </div>
                    <div class="mt-3"> 
                        <label class="form-label">Airline 2:</label>
                        <input type="text"
                               name="airline_2"
                               id="airline_2"
                               value="{{@$flight_info->flight}}"
                               class="form-control">

                    </div>
                    <div class="mt-3"> 
                        <label class="form-label">Flight Number:<span class="text-danger">*</span></label>
                        <input type="text"
                               name="flight"
                               id="flight"
                               value="{{@$flight_info->flight}}"
                               class="form-control" required>

                    </div>
                    <div class="mt-3"> 
                        <label class="form-label">Flight Number 2:</label>
                        <input type="text"
                               name="flight_2"
                               name="flight_2"
                               value="{{@$flight_info->flight}}"
                               class="form-control">

                    </div>
                    <div class="row g-3 mt-1"> 
                        <div class="col-md-6">
                            <label class="form-label">Departure Time Zone:</label>
                            <select name="departure_timezone" id="departure_timezone" class="form-select">
                                <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>

                        <div class="col-md-6">
                            <label class="form-label">Departure Date & Time (U.S. Time):</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>
                    </div>

                    <div class="mt-3"> 
                        <div class="col-12">
                            <label class="form-label">Additional Info:</label>
                            <textarea class="form-control"
                                      name="additional_info"
                                      rows="3">{{@$flight_info->additional_info}}</textarea>
                        </div>
                    </div>
 
                    <div class="col-12">
                        <div class="d-flex flex-wrap gap-2 mt-4">

                            <button type="button"
                                    class="btn btn-info"
                                    onclick="validate_flight_info();">
                                Submit
                            </button>

                            <button type="reset" class="btn btn-danger">
                                Cancel
                            </button>
                        </div>
                    </div> 
                </form>
            </div> 
        </div>
        @else
        <div class="col-sm-12">
            <p>Thank you for adding your flight details. Here you may view them:</p>
            <div id="flight_info" class="main_flight_info_form_detail">
                <table class="table table-bordered table-striped">
                    <tbody>

                        <tr>
                            <th class="w-50">Departure Airport:</th>
                            <td>
                                {{ !empty($flight_info) ? $flight_info['airport_data']->airport_label : '-' }}
                            </td>
                        </tr>

                        <tr>
                            <th>Airline:</th>
                            <td>
                                {{ !empty($flight_info) ? $flight_info['airline'] : '-' }}
                            </td>
                        </tr>

                        <tr>
                            <th>Flight Number:</th>
                            <td>
                                {{ !empty($flight_info) ? $flight_info['flight'] : '-' }}
                            </td>
                        </tr>

                        <tr>
                            <th>Departure Time Zone:</th>
                            <td>
                                {{ $flight_info['dep_timezone_data']->zone_label }}
                            </td>
                        </tr>
                        
                        <tr>
                            <th>Departure Date & Time (U.S. Time):</th>
                            <td>
                                {{ dateformat(@$flight_info['convert_departure_date']->dest_datetime,DISPLAY_DATETIME) }}
                            </td>
                        </tr>
                        
                        <tr>
                            <th>Departure Date & Time (Home Country):</th>
                            <td>
                                {{ !empty($flight_info->departure_date) ? dateformat($flight_info->departure_date,DISPLAY_DATETIME) : '-' }}
                            </td>
                        </tr> 
                        
                        <tr>
                            <th>Arrival Date (Home Country Time):</th>
                            <td>
                               {{ dateformat(@$flight_info['convert_departure_date']->dest_datetime,DISPLAY_DATETIME) }}
                            </td>
                        </tr>

                        <tr>
                            <th>Additional Info:</th>
                            <td>
                                {{ !empty($flight_info['additional_info']) ?  $flight_info['additional_info'] : '-' }}
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </div> 
    <div class="d-flex justify-content-end align-items-center gap-2 mt-3">
         <button type="button"
                    class="btn btn-success"
                    onclick="return viewPopup('Departure Flight Info','{{@$active_step_key}}');">
                    Support <i class="mdi mdi-help-circle-outline step-help"></i>
                </button>

        @if(($step_status == 2 && !empty($next_step_key)) || $user->is_timeline_locked == 1)
        <button type="button"  class="btn btn-info" onclick="loadStepContent('{{ $next_step_key }}')">Next Step</button>
        @endif
    </div>
</div>

<div class="modal fade modal-lg" id="custom_popup_confirm_flight_info" tabindex="-1" aria-hidden="true">                
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">Confirm Departure Flight Information</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" fdprocessedid="96uj2ah"></button>
            </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-secondary" data-bs-dismiss="modal">
                    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>

<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()
    {
        const form = document.getElementById("frm_flight_info");
        if (!form.checkValidity()) {
            form.classList.add("was-validated");
            return false;
        }
    
        show_inner_loader(".timeline_stp_desc1","#all_tab_data");
        
        $("#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){  
                    hide_inner_loader(".timeline_stp_desc1","#all_tab_data");
                    $("#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 resetFlightForm() 
    {
            const form = document.getElementById("frm_flight_info");
            form.reset();
            form.classList.remove("was-validated");
            $(form).find(".is-valid, .is-invalid")
                   .removeClass("is-valid is-invalid");
            $(".datetimepicker").val("");
            $("#departure_date").val("");
            $("#departure_timezone").val("");
    }
        
    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
            $(document).off('submit', form_selector).on('submit', form_selector, function (event) 
            {
                event.preventDefault();
                var ele = this;
                event.preventDefault();
                clearValidatorErr(ele);
                show_inner_loader(".timeline_stp_desc1","#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(5,'{{$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_desc1","#all_tab_data");
                    },
                });
            });
        @endif    
        
    });
</script>