@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>
        <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 {{empty($first_flight_info) ? 'show' :'hide' }}">
                <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">
                                Arrival Airport: <span class="text-danger">*</span>
                            </label>
                            <select class="form-select" name="arrival_airport" required>
                                <option value="">-- Select Airport --</option>
                                @if(!empty($airports))
                                @foreach($airports as $airport)
                                    <option value="{{ $airport->ap_abbr }}"
                                        {{ is_selected(@$first_flight_info->arrival_airport,$airport->ap_abbr) }}>
                                        {{ $airport->airport_label }}
                                    </option>
                                @endforeach
                                @endif
                            </select>
                            <div class="invalid-feedback">Please select arrival airport.</div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Airline:</label>
                            <input type="text"
                                   name="airline"
                                   value="{{@$first_flight_info->airline}}"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="mt-3"> 
                        <label class="form-label">Airline 2:</label>
                        <input type="text"
                               name="flight"
                               value="{{@$first_flight_info->flight}}"
                               class="form-control">

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

                    </div>
                    <div class="mt-3"> 
                        <label class="form-label">Flight Number 2:</label>
                        <input type="text"
                               name="flight"
                               value="{{@$first_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" class="form-select">
                                <option value="">-- Select Timezone --</option>
                                @if(!empty($timezones))
                                @foreach($timezones as $zone)
                                    <option value="{{ $zone->zone_id }}"
                                        {{ is_selected(@$first_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"
                                   class="form-control datetimepicker"
                                   value="{{!empty($first_flight_info->departure_date) ? dateformat($first_flight_info->departure_date,'m/d/Y H:i') : ''}}"
                                   autocomplete="off">
                        </div>
                    </div>

                    <div class="row g-3 mt-1">

                        <div class="col-12 col-md-6">
                            <label class="form-label">
                                Arrival Time Zone: <span class="text-danger">*</span>
                            </label>
                            <select name="arrival_timezone" class="form-select" required>
                                <option value="">-- Select Timezone --</option>
                                @if(!empty($arrival_timezone_list))
                                @foreach($arrival_timezone_list as $zone)
                                    <option value="{{ $zone->zone_id }}"
                                        {{ is_selected(@$first_flight_info->arrival_timezone,$zone->zone_id) }}>
                                        {{ $zone->zone_label }}
                                    </option>
                                @endforeach
                                @endif
                            </select>
                            <div class="invalid-feedback">Please select arrival timezone.</div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label">
                                Arrival Date (Home Country Time): <span class="text-danger">*</span>
                            </label>
                            <input type="text"
                                   name="arrival_date"
                                   class="form-control datetimepicker"
                                   value="{{!empty(@$first_flight_info->arrival_date) ? dateformat($first_flight_info->arrival_date,'m/d/Y H:i') : ''}}"
                                   required
                                   autocomplete="off">
                            <div class="invalid-feedback">Please select arrival date.</div>
                        </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">{{@$first_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>

                            <button type="button"
                                    id="arrival_postpone"
                                    class="btn btn-warning {{!empty($first_flight_info) ? '' :'d-none' }}">
                                Arrival Postponed
                            </button> 
                        </div>
                    </div> 
                </form>
            </div> 
        </div>
        <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 {{!empty($first_flight_info) ? 'show' :'hide' }}">
                <table class="table table-bordered table-striped">
                    <tbody>

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

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

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

                        <tr>
                            <th>Departure Time Zone:</th>
                            <td>
                                {{ !empty($first_flight_info->departure_timezone) ? $first_flight_info->dep_timezone_data->zone_label : '-' }}
                            </td>
                        </tr>
                        
                        <tr>
                            <th>Departure Date & Time (U.S. Time):</th>
                            <td>
                                {{ !empty($first_flight_info->departure_timezone) ? $first_flight_info->dep_timezone_data->zone_label : '-' }}
                            </td>
                        </tr>

                        <tr>
                            <th>Arrival Time Zone:</th>
                            <td>
                                {{ !empty($first_flight_info) ? $first_flight_info->arr_timezone_data->zone_label : '-' }}
                            </td>
                        </tr>
                        
                        <tr>
                            <th>Departure Date & Time (Home Country):</th>
                            <td>
                                {{ !empty($first_flight_info->departure_date) ? dateformat($first_flight_info->departure_date,DISPLAY_DATETIME) : '-' }}
                            </td>
                        </tr> 

                        <tr>
                            <th>Arrival Date:</th>
                            <td>
                                {{ !empty($first_flight_info) ? dateformat($first_flight_info->arrival_date,DISPLAY_DATETIME) : '-' }}
                            </td>
                        </tr>
                        
                        <tr>
                            <th>Arrival Date (Home Country Time):</th>
                            <td>
                                {{ !empty($first_flight_info->departure_date) ? dateformat($first_flight_info->departure_date,DISPLAY_DATETIME) : '-' }}
                            </td>
                        </tr>

                        <tr>
                            <th>Additional Info:</th>
                            <td>
                                {{ !empty($first_flight_info) ? dateformat($first_flight_info->arrival_date,DISPLAY_DATETIME) : '-' }}
                            </td>
                        </tr>

                    </tbody>
                </table>
                @if($user->j1_status_id < 4002 && !empty($first_flight_info->arrival_date) && $first_flight_info->arrival_date > $current_date)
                    <div class="form-actions">
                        <button type="button" id="edit_flight_one_info" name="edit" class="btn @if(config('common.portal') == 'ODC') btn-odc btn-info-ODC @else btn-info @endif btn-xs-block" value="edit">Edit</button>
                    </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('Determine your eligibility','{@$active_step_key}');">
                        Support <i class="mdi mdi-help-circle-outline step-help"></i>
                    </button>

                    <button type="button" class="btn btn-info">
                        Next Step
                    </button> 
                </div>
            </div>
        </div>
    </div> 
</div>