@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'];
    $embassy_country_list = @$step_verified_data['embassy_country'];
    $embassy_country_id = @$step_verified_data['embassy_country_id'];
    $embassy_consulate_id = @$step_verified_data['embassy_consulate_id'];
    $embassy_list = @$step_verified_data['embassy_list']; 
    $br = ''; 
@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">
                    U.S. Embassy Interview
                </h3>  
            </div>  
        </div>
        <div class="col-sm-12">
            <p>Please enter the date and time of your J‑1 Visa Interview at the U.S. Embassy or Consulate below. Make sure the information is accurate, as it will be used to coordinate your Medical Insurance and Arrival Details.</p>
            <form class="mb-3" name="embassy_interview" id="embassy_interview" onsubmit="return validate_flight_info(this);">
                <div class="container-fluid">

                    <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-12 col-md-6">
                            <label class="form-label">
                                Interview Date & Time <span class="text-danger">*</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="invalid-feedback"></div>
                        </div>
 
                        <div class="col-12 col-md-6">
                            <label class="form-label">
                                Local Timezone <span class="text-danger">*</span>
                            </label>
                            <select name="embassy_timezone" id="departure_timezone" class="form-select" 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="invalid-feedback"></div>
                        </div>
 
                        <div class="col-12 col-md-6">
                            <label class="form-label">
                                Country <span class="text-danger">*</span>
                            </label>
                            <select name="embassy_country" id="embassy_country" 
                                    class="form-select" 
                                    onchange="return get_embassy_name(this.value);" 
                                    required>
                                <option value="">-- Select Country --</option>
                                @if(!empty($embassy_country_list))
                                    @foreach($embassy_country_list as $country)
                                        <option value="{{ $country['country_id'] }}" 
                                            {{ is_selected($country['country_id'],$embassy_country_id) }}>
                                            {{ $country['country_name'] }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
 
                        <div class="col-12 col-md-6" id="embassy_list"> 
                            <label class="form-label">
                                Name of the U.S. Embassy or Consulate <span class="text-danger">*</span>
                            </label>

                            <div class="form-check">
                                <input class="form-check-input"
                                       type="radio"
                                       name="embassy_name"
                                       id="embassy_name_"
                                       value=""
                                       onclick="selectEmbassyName()" 
                                       required />

                                <label class="form-check-label" for="embassy_name_">
                                    U.S. Embassy in Port-au-Prince
                                </label>
                            </div> 
                        </div> 
                    </div>
 
                    <div class="mt-3">
                        <button type="submit" 
                            class="btn btn-sm btn-info">
                            Submit
                        </button>
                    </div>

                </div>
            </form>  
        </div>
        <div class="col-sm-12">
            <p>Thank you for notifying us about your scheduled J-1 Visa Appointment. We are excited to support you through this important step in your program journey.</p> 
            <p>To help you prepare, we have compiled several useful resources:</p> 
            <ul>
                <li><button class="btn btn-info">Review File: Visa Interview Preparation</button><br/><br/></li>
                <li><button class="btn btn-info">Watch The Video: Visa Interview Preparation, Pre-Departure Orientation & Arrival</button><br/><br/></li>
                <li><button class="btn btn-info">Review File: Embassy Interview Preparation Questions</button><br/><br/></li>
                <li><button class="btn btn-info">Watch The Video: Know Your Rights</button><br/><br/></li>
                <li><button class="btn btn-info">Register for the next available webinar to get prepared.</button><br/><br/></li>
            </ul> 
            <p>We encourage you to review these materials thoroughly and practice as much as possible prior to your appointment.</p>

            <p>We have assisted over 50,000 participants in successfully getting approved, and it’s evident that the likelihood that you get approved will be significantly higher if you study the above materials. We encourage you to review these materials thoroughly and practice as much as possible before your appointment.</p>

            <p><strong>IMPORTANT NOTE:</strong> Please ensure that your social media accounts are set to public visibility before your visa interview, as U.S. consular officers may review publicly available social media information during the visa screening process. Keep this in public until the visa decision is issued.</p>

        <p>If you have any questions or need further assistance, please feel free to reach out to: <a href="mailto:ITNPredeparture@itnusa.com">ITNPredeparture@itnusa.com</a></p>

            <p>We are wishing you the very best of luck! </p>
        </div>
        
        
        
        <div class="col-sm-12">
            <p>Please enter the date and time of your J‑1 Visa Interview at the U.S. Embassy or Consulate below. Make sure the information is accurate, as it will be used to coordinate your Medical Insurance and Arrival Details.</p>
            <form class="mb-3" name="embassy_interview" id="embassy_interview" onsubmit="return validate_flight_info(this);">
                <div class="container-fluid">

                    <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-12 col-md-6">
                            <label class="form-label">
                                Interview Date & Time <span class="text-danger">*</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="invalid-feedback"></div>
                        </div> 
                        
                        <div class="col-12 col-md-6">
                            <label class="form-label">
                                Local Timezone <span class="text-danger">*</span>
                            </label>
                            <select name="embassy_timezone" id="departure_timezone" class="form-select" 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="invalid-feedback"></div>
                        </div>
 
                        <div class="col-12 col-md-6">
                            <label class="form-label">
                                Country <span class="text-danger">*</span>
                            </label>
                            <select name="embassy_country" id="embassy_country" 
                                    class="form-select" 
                                    onchange="return get_embassy_name(this.value);" 
                                    required>
                                <option value="">-- Select Country --</option>
                                @if(!empty($embassy_country_list))
                                    @foreach($embassy_country_list as $country)
                                        <option value="{{ $country['country_id'] }}" 
                                            {{ is_selected($country['country_id'],$embassy_country_id) }}>
                                            {{ $country['country_name'] }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
 
                        <div class="col-12 col-md-6" id="embassy_list"> 
                            <label class="form-label">
                                Name of the U.S. Embassy or Consulate <span class="text-danger">*</span>
                            </label>

                            <div class="form-check">
                                <input class="form-check-input"
                                       type="radio"
                                       name="embassy_name"
                                       id="embassy_name_"
                                       value=""
                                       onclick="selectEmbassyName()" 
                                       required />

                                <label class="form-check-label" for="embassy_name_">
                                    U.S. Embassy in Port-au-Prince
                                </label>
                            </div> 
                        </div> 
                    </div>
 
                    <div class="mt-3">
                        <button type="submit" 
                            class="btn btn-sm btn-info">
                            Submit
                        </button>
                    </div>

                </div>
            </form> 
            
            <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>