@extends('admin.layout.main')

@section('title', 'Dashboard')

@push('content')
    <div class="col-md-12 pt-3">
        <div class="card card-default">
            <div class="card-header">
                <h3 class="h4">Edit Aircraft</h3>
            </div>
            <div class="card-body p-0">
                <div class="bs-stepper">
                    <div class="bs-stepper-header row pb-5" role="tablist">
                        <!-- Manufacturer Tab -->
                        <div class="step col-2 text-center" data-target="#manufacturer-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="manufacturer-part"
                                id="manufacturer-part-trigger">
                                <span class="bs-stepper-circle">1</span>
                                <span class="bs-stepper-label">Aircraft Details</span>
                            </button>
                        </div>

                        <!-- Aircraft Tab -->
                        <div class="step col-2 text-center" data-target="#aircraft-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="aircraft-part"
                                id="aircraft-part-trigger">
                                <span class="bs-stepper-circle">2</span>
                                <span class="bs-stepper-label">Airframe Details</span>
                            </button>
                        </div>

                        <!-- Airframe Tab -->
                        <div class="step col-2 text-center" data-target="#airframe-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="airframe-part"
                                id="airframe-part-trigger">
                                <span class="bs-stepper-circle">3</span>
                                <span class="bs-stepper-label">INTERIOR Features</span>
                            </button>
                        </div>

                        <!-- Media Tab (for images) -->
                        <div class="step col-2 text-center" data-target="#media-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="media-part"
                                id="media-part-trigger">
                                <span class="bs-stepper-circle">4</span>
                                <span class="bs-stepper-label">Exterior Features</span>
                            </button>
                        </div>

                        <div class="step col-2 text-center" data-target="#apus-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="apus-part"
                                id="apus-part-trigger">
                                <span class="bs-stepper-circle">5</span>
                                <span class="bs-stepper-label">APUS</span>
                            </button>
                        </div>

                        <div class="step col-2 text-center" data-target="#engines-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="engines-part"
                                id="engines-part-trigger">
                                <span class="bs-stepper-circle">6</span>
                                <span class="bs-stepper-label">Engines</span>
                            </button>
                        </div>

                        <div class="step col-2 text-center" data-target="#inspections-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="inspections-part"
                                id="inspections-part-trigger">
                                <span class="bs-stepper-circle">7</span>
                                <span class="bs-stepper-label">Inspections</span>
                            </button>
                        </div>

                        <div class="step col-2 text-center" data-target="#features-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="features-part"
                                id="features-part-trigger">
                                <span class="bs-stepper-circle">8</span>
                                <span class="bs-stepper-label">Features</span>
                            </button>
                        </div>

                        <div class="step col-2 text-center" data-target="#avionics-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="avionics-part"
                                id="avionics-part-trigger">
                                <span class="bs-stepper-circle">9</span>
                                <span class="bs-stepper-label">Avionics</span>
                            </button>
                        </div>

                        <div class="step col-2 text-center" data-target="#aircraft-media-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab" aria-controls="aircraft-media-part"
                                id="aircraft-media-part-trigger">
                                <span class="bs-stepper-circle">10</span>
                                <span class="bs-stepper-label">Media</span>
                            </button>
                        </div>

                        <div class="step col-2 text-center" data-target="#aircraft-listing-part">
                            <button type="button" class="step-trigger flex-column w-100" role="tab"
                                aria-controls="aircraft-listing-part" id="aircraft-listing-part-trigger">
                                <span class="bs-stepper-circle">11</span>
                                <span class="bs-stepper-label">Listing Details</span>
                            </button>
                        </div>

                    </div>

                    <div class="bs-stepper-content">
                        <!-- Manufacturer Form Section -->
                        <div id="manufacturer-part" class="content" role="tabpanel"
                            aria-labelledby="manufacturer-part-trigger">
                            <form action="" enctype="multipart/form-data" id="step-one-form">
                                @csrf
                                <input type="hidden" name="air_craft_id" id="air_craft_id_field"
                                    value="{{ $aircraft->id ?? '' }}">

                                <div class="form-row">
                                    <div class="col-6">
                                        <label for="manufacturer_name">Manufacturer</label>
                                        <select name="manufacturer_id" class="form-control" id="manufacturers-field">
                                            <option value="" disabled
                                                {{ !empty($aircraft->manufacturer_id) ? 'selected' : '' }}>Select
                                                manufacturer</option>
                                            @foreach ($manufacturers as $manufacturer)
                                                <option value="{{ $manufacturer->id }}"
                                                    {{ old('manufacturer_id', $aircraft->manufacturer_id ?? '') == $manufacturer->id ? 'selected' : '' }}>
                                                    {{ $manufacturer->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-6">
                                        <label for="manufacturer_model_id">Manufacturer Model</label>
                                        <select name="manufacturer_model_id" id="manufacturer-model-fields"
                                            class="form-control">
                                            <option value="" selected disabled>Select manufacturer model</option>
                                            {{-- Options will be dynamically loaded via JS --}}
                                        </select>
                                    </div>

                                    <div class="col-6">
                                        <label for="title">Title</label>
                                        <input name="title" type="text" class="form-control"
                                            value="{{ old('title', $aircraft->title ?? '') }}" placeholder="Enter title">
                                    </div>

                                    <div class="col-6">
                                        <label for="serial_number">Serial Number</label>
                                        <input type="text" name="serial_number" class="form-control"
                                            value="{{ old('serial_number', $aircraft->serial_number ?? '') }}"
                                            placeholder="Enter serial number">
                                    </div>

                                    <div class="col-6">
                                        <label for="total_hours">Total Hours Since New</label>
                                        <input type="text" name="total_hours" class="form-control"
                                            value="{{ old('total_hours', $aircraft->total_hours ?? '') }}"
                                            placeholder="Enter total hours since new">
                                    </div>

                                    <div class="col-6">
                                        <label for="year_of_manufacture">Year of Manufacturer</label>
                                        <input type="date" name="year_of_manufacture" class="form-control"
                                            value="{{ old('year_of_manufacture', $aircraft->year_of_manufacture ?? '') }}">
                                    </div>

                                    <div class="col-6">
                                        <label for="registration_number">Registration Number</label>
                                        <input type="text" name="registration_number" class="form-control"
                                            value="{{ old('registration_number', $aircraft->registration_number ?? '') }}"
                                            placeholder="Enter registration number">
                                    </div>

                                    <div class="col-6">
                                        <label for="base_location">Base Location</label>
                                        <input type="text" name="base_location" class="form-control"
                                            value="{{ old('base_location', $aircraft->base_location ?? '') }}"
                                            placeholder="Enter base location">
                                    </div>
                                    <div class="col-6">
                                        <label for="brochure">Brochure</label>
                                        <input type="file" name="brochure" class="form-control" accept="application/pdf">
                                    </div>
                                </div>

                                <button class="btn btn-primary btn-1 mt-3" id="step-one">Next</button>
                            </form>
                        </div>

                        <!-- Aircraft Form Section -->
                        <div id="aircraft-part" class="content" role="tabpanel" aria-labelledby="aircraft-part-trigger">
                            <form action="" id="step-two-form" method="">
                                @csrf
                                <div id="key-value-container">
                                    @foreach ($aircraft->airFrame as $index => $data)
                                        <div class="form-row mt-2">
                                            <div class="col-5">
                                                <label>Key</label>
                                                <input type="text" class="form-control" name="key[]"
                                                    value="{{ $data->key ?? '' }}" placeholder="Enter airframe key">
                                            </div>
                                            <div class="col-5">
                                                <label>Value</label>
                                                <input type="text" class="form-control" name="value[]"
                                                    value="{{ $data->value ?? '' }}" placeholder="Enter airframe value">
                                            </div>
                                            <div class="col-2 mt-4">
                                                @if ($loop->last)
                                                    <button type="button" class="btn btn-primary mt-2"
                                                        onclick="addKeyValueField()">
                                                        <i class="fa fa-plus-square"></i>
                                                    </button>
                                                @else
                                                    <button type="button" class="btn btn-danger mt-2"
                                                        onclick="removeKeyValueField(this)">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach

                                    @if ($aircraft->airFrame->isEmpty())
                                        <div class="form-row">
                                            <div class="col-5">
                                                <label>Key</label>
                                                <input type="text" class="form-control" name="key[]"
                                                    placeholder="Enter airframe key">
                                            </div>
                                            <div class="col-5">
                                                <label>Value</label>
                                                <input type="text" class="form-control" name="value[]"
                                                    placeholder="Enter airframe value">
                                            </div>
                                            <div class="col-2 mt-4">
                                                <button type="button" class="btn btn-dark mt-2"
                                                    onclick="addKeyValueField(this)">
                                                    <i class="fa fa-plus-square"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-1 btn-primary" type="button" id="step-two">Next</button>
                                </div>
                            </form>
                        </div>

                        <!-- Airframe Interior Features Form Section -->
                        <div id="airframe-part" class="content" role="tabpanel" aria-labelledby="airframe-part-trigger">
                            <form action="" id="add-interior-feature-form">
                                @csrf
                                <div class="form-row">
                                    <div class="col-6">
                                        <label for="key">Number of Passengers</label>
                                        <input type="text" class="form-control" id="number_of_passengers"
                                            name="number_of_passengers" placeholder="Enter airframe key"
                                            value="{{ $aircraft->interiorFeatures->number_of_passengers ?? '' }}">
                                    </div>

                                    <div class="col-6">
                                        <label for="value">Galley Location</label>
                                        <input class="form-control" id="galley_location" name="galley_location"
                                            placeholder="Enter galley location"
                                            value="{{ $aircraft->interiorFeatures->galley_location ?? '' }}" />
                                    </div>

                                    <div class="col-6">
                                        <label for="value">Fwd Cabin Configuration</label>
                                        <input class="form-control" id="forward_cabin_configuration"
                                            name="forward_cabin_configuration"
                                            placeholder="Enter forward cabin configuration"
                                            value="{{ $aircraft->interiorFeatures->forward_cabin_configuration ?? '' }}" />
                                    </div>

                                    <div class="col-6">
                                        <label for="value">Mid Cabin Configuration</label>
                                        <input class="form-control" id="mid_cabin_configuration"
                                            name="mid_cabin_configuration" placeholder="Enter mid cabin configuration"
                                            value="{{ $aircraft->interiorFeatures->mid_cabin_configuration ?? '' }}" />
                                    </div>

                                    <div class="col-6">
                                        <label for="value">Aft Cabin Configuration</label>
                                        <input class="form-control" id="aft_cabin_configuration"
                                            name="aft_cabin_configuration" placeholder="Enter aft cabin configuration"
                                            value="{{ $aircraft->interiorFeatures->aft_cabin_configuration ?? '' }}" />
                                    </div>

                                    <div class="col-6">
                                        <label for="value">Lavatory Location(s)</label>
                                        <input class="form-control" id="lavatory_locations" name="lavatory_locations"
                                            placeholder="Enter lavatory locations"
                                            value="{{ $aircraft->interiorFeatures->lavatory_locations ?? '' }}" />
                                    </div>

                                    <div class="col-6">
                                        <label for="value">Crew Rest</label>
                                        <select class="form-control" id="crew_rest" name="crew_rest">
                                            <option value="" disabled>Select One</option>
                                            <option value="1"
                                                {{ isset($aircraft->interiorFeatures) && $aircraft->interiorFeatures->crew_rest == 1 ? 'selected' : '' }}>
                                                Yes</option>
                                            <option value="0"
                                                {{ isset($aircraft->interiorFeatures) && $aircraft->interiorFeatures->crew_rest == 0 ? 'selected' : '' }}>
                                                No</option>
                                        </select>
                                    </div>

                                    <div class="col-6 mt-2">
                                        <label for="value">Jumpseat</label>
                                        <select class="form-control" id="jumpseat" name="jumpseat">
                                            <option value="" disabled>Select One</option>
                                            <option value="1"
                                                {{ isset($aircraft->interiorFeatures) && $aircraft->interiorFeatures->jumpseat == 1 ? 'selected' : '' }}>
                                                Yes</option>
                                            <option value="0"
                                                {{ isset($aircraft->interiorFeatures) && $aircraft->interiorFeatures->jumpseat == 0 ? 'selected' : '' }}>
                                                No</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-1 btn-primary" type="button" id="step-three">Next</button>
                                </div>
                            </form>

                        </div>

                        <!-- Airframe Exterior Features Form Section -->
                        <div id="media-part" class="content" role="tabpanel" aria-labelledby="media-part-trigger">
                            <form action="" id="add-exterior-feature-form">
                                @csrf
                                <div class="form-row">
                                    <div class="col-6">
                                        <label for="base_paint_color">Base Paint Color</label>
                                        <input type="text" class="form-control" id="base_paint_color"
                                            name="base_paint_color" placeholder="Enter base paint color"
                                            value="{{ $aircraft->exteriorFeatures->base_paint_color ?? '' }}">
                                    </div>

                                    <div class="col-6">
                                        <label for="stripe_color">Stripe Color</label>
                                        <input class="form-control" id="stripe_color" name="stripe_color"
                                            placeholder="Enter stripe color"
                                            value="{{ $aircraft->exteriorFeatures->stripe_color ?? '' }}" />
                                    </div>

                                    <div class="col-6">
                                        <label for="last_painted_year">Last Painted Year</label>
                                        <input class="form-control" type="number" id="last_painted_year"
                                            name="last_painted_year" placeholder="Enter last painted year" min="1900"
                                            max="2099" step="1"
                                            value="{{ $aircraft->exteriorFeatures->last_painted_year ?? '' }}" />
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-1 btn-primary" type="button" id="step-four">Next</button>
                                </div>
                            </form>

                        </div>

                        <!-- APU Section -->
                        <div id="apus-part" class="content" role="tabpanel" aria-labelledby="apus-part-trigger">
                            <form action="" id="step-five-form">
                                @csrf
                                <div id="apus-container">
                                    @if (!empty($aircraft->apus) && $aircraft->apus->count())
                                        @foreach ($aircraft->apus as $index => $apu)
                                            <div class="form-row">
                                                <div class="col-5">
                                                    <label for="apu_key_{{ $index }}">Key</label>
                                                    <input type="text" class="form-control" name="key[]"
                                                        placeholder="Enter APU key" value="{{ $apu->key }}">
                                                </div>
                                                <div class="col-5">
                                                    <label for="apu_value_{{ $index }}">Value</label>
                                                    <input type="text" class="form-control" name="value[]"
                                                        placeholder="Enter APU value" value="{{ $apu->value }}">
                                                </div>
                                                <div class="col-2 mt-4">
                                                    <button type="button" class="btn btn-primary mt-2"
                                                        onclick="addApusKeyValueEntry(this)">
                                                        <i class="fa fa-plus-square"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="form-row">
                                            <div class="col-5">
                                                <label for="apu_key">Key</label>
                                                <input type="text" class="form-control" name="key[]"
                                                    placeholder="Enter APU key">
                                            </div>
                                            <div class="col-5">
                                                <label for="apu_value">Value</label>
                                                <input type="text" class="form-control" name="value[]"
                                                    placeholder="Enter APU value">
                                            </div>
                                            <div class="col-2 mt-4">
                                                <button type="button" class="btn btn-dark mt-2"
                                                    onclick="addApusKeyValueEntry(this)">
                                                    <i class="fa fa-plus-square"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-1 btn-primary" type="button" id="step-five">Next</button>
                                </div>
                            </form>
                        </div>

                        <!-- Engines Section -->
                        <div id="engines-part" class="content" role="tabpanel" aria-labelledby="engines-part-trigger">
                            <form action="" method="" id="add-engine-form">
                                @csrf
                                <input type="hidden" name="air_craft_id" value="{{ $aircraft->id }}">

                                @foreach (['left', 'right'] as $index => $position)
                                    @php
                                        $engine = $aircraft->engines->firstWhere('position', $position);
                                    @endphp
                                    <div class="engine-block mb-4 border p-3 rounded">
                                        <h5 class="mb-3 text-capitalize">{{ $position }} Engine</h5>
                                        <input type="hidden" name="engines[{{ $index }}][position]"
                                            value="{{ $position }}">

                                        <div class="form-row">
                                            <div class="col-6">
                                                <label>Engine Model</label>
                                                <input type="text" class="form-control"
                                                    name="engines[{{ $index }}][engine_model]"
                                                    value="{{ $engine->engine_model ?? '' }}"
                                                    placeholder="Enter engine model">
                                            </div>

                                            <div class="col-6">
                                                <label>Engine Serial Number</label>
                                                <input type="text" class="form-control"
                                                    name="engines[{{ $index }}][engine_serial_number]"
                                                    value="{{ $engine->engine_serial_number ?? '' }}"
                                                    placeholder="Enter serial number">
                                            </div>

                                            <div class="col-6">
                                                <label>Hours Since New</label>
                                                <input type="number" step="0.1" class="form-control"
                                                    name="engines[{{ $index }}][hours_since_new]"
                                                    value="{{ $engine->hours_since_new ?? 0 }}">
                                            </div>

                                            <div class="col-6">
                                                <label>Cycles Since New</label>
                                                <input type="number" step="0.1" class="form-control"
                                                    name="engines[{{ $index }}][cycles_since_new]"
                                                    value="{{ $engine->cycles_since_new ?? 0 }}">
                                            </div>

                                            <div class="col-6">
                                                <label>HSI Due / Overhaul Due</label>
                                                <input type="text" class="form-control"
                                                    name="engines[{{ $index }}][hsi_due_or_overhaul_due]"
                                                    value="{{ $engine->hsi_due_or_overhaul_due ?? '' }}"
                                                    placeholder="e.g. 2025-08-01">
                                            </div>

                                            <div class="col-6">
                                                <label>Program Coverage</label>
                                                <input type="text" class="form-control"
                                                    name="engines[{{ $index }}][program_coverage]"
                                                    value="{{ $engine->program_coverage ?? '' }}"
                                                    placeholder="e.g. ESP Gold">
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-1 btn-primary" type="button" id="step-six">Next</button>
                                </div>
                            </form>

                        </div>

                        <!-- Inspections Section -->
                        <div id="inspections-part" class="content" role="tabpanel"
                            aria-labelledby="inspections-part-trigger">
                            <form action="" id="step-seven-form" method="">
                                @csrf

                                <div id="inspections-container">
                                    @foreach ($aircraft->inspections as $index => $inspection)
                                        <div class="form-row inspection-entry mb-3">
                                            <input type="hidden" name="inspections[{{ $index }}][id]"
                                                value="{{ $inspection->id }}">

                                            <div class="col-4">
                                                <label for="inspection_type_{{ $index }}">Inspection Type</label>
                                                <input type="text" class="form-control"
                                                    name="inspections[{{ $index }}][inspection_type]"
                                                    value="{{ $inspection->inspection_type }}"
                                                    placeholder="Enter inspection type">
                                            </div>

                                            <div class="col-4">
                                                <label for="last_performed_{{ $index }}">Last Performed</label>
                                                <input type="date" class="form-control"
                                                    name="inspections[{{ $index }}][last_performed]"
                                                    value="{{ $inspection->last_performed }}">
                                            </div>

                                            <div class="col-3">
                                                <label for="next_due_{{ $index }}">Next Due</label>
                                                <input type="date" class="form-control"
                                                    name="inspections[{{ $index }}][next_due]"
                                                    value="{{ $inspection->next_due }}">
                                            </div>

                                            <div class="col-1 mt-4">
                                                @if ($loop->last)
                                                    <button type="button" class="btn btn-success mt-2"
                                                        onclick="addInspectionEntry()">
                                                        <i class="fa fa-plus-square"></i>
                                                    </button>
                                                @else
                                                    <button type="button" class="btn btn-danger mt-2"
                                                        onclick="removeInspectionEntry(this)">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach


                                    {{-- Default empty row if no inspections exist --}}
                                    @if ($aircraft->inspections->isEmpty())
                                        <div class="form-row inspection-entry mb-3">
                                            <div class="col-4">
                                                <label>Inspection Type</label>
                                                <input type="text" class="form-control"
                                                    name="inspections[0][inspection_type]"
                                                    placeholder="Enter inspection type">
                                            </div>
                                            <div class="col-4">
                                                <label>Last Performed</label>
                                                <input type="date" class="form-control"
                                                    name="inspections[0][last_performed]">
                                            </div>
                                            <div class="col-3">
                                                <label>Next Due</label>
                                                <input type="date" class="form-control"
                                                    name="inspections[0][next_due]">
                                            </div>
                                            <div class="col-1 mt-4">
                                                <button type="button" class="btn btn-dark mt-2"
                                                    onclick="addInspectionEntry()">
                                                    <i class="fa fa-plus-square"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-1 btn-primary" type="button" id="step-seven">Next</button>
                                </div>
                            </form>

                        </div>

                        <!-- Features Section -->
                        <div id="features-part" class="content" role="tabpanel" aria-labelledby="features-part-trigger">
                            <form action="" id="step-eight-form" method="">
                                @csrf
                                <input type="hidden" name="air_craft_id" value="{{ $aircraft->id }}">

                                <div id="features-container">
                                    @forelse ($aircraft->features as $index => $feature)
                                        <div class="form-row feature-entry mb-3">
                                            <input type="hidden" name="features[{{ $index }}][id]"
                                                value="{{ $feature->id }}">

                                            <div class="col-11">
                                                <label for="feature_{{ $index }}">Feature</label>
                                                <input type="text" class="form-control"
                                                    name="features[{{ $index }}][feature]"
                                                    value="{{ $feature->feature }}" placeholder="Enter feature">
                                            </div>

                                            <div class="col-1 mt-4">
                                                @if ($loop->last)
                                                    <button type="button" class="btn btn-success mt-2"
                                                        onclick="addFeatureEntry()">
                                                        <i class="fa fa-plus-square"></i>
                                                    </button>
                                                @else
                                                    <button type="button" class="btn btn-danger mt-2"
                                                        onclick="removeFeatureEntry(this)">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    @empty
                                        <div class="form-row feature-entry mb-3">
                                            <div class="col-11">
                                                <label>Feature</label>
                                                <input type="text" class="form-control" name="features[0][feature]"
                                                    placeholder="Enter feature">
                                            </div>
                                            <div class="col-1 mt-4">
                                                <button type="button" class="btn btn-dark mt-2"
                                                    onclick="addFeatureEntry()">
                                                    <i class="fa fa-plus-square"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforelse
                                </div>

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-1 btn-primary" type="button" id="step-eight">Next</button>
                                </div>
                            </form>

                        </div>

                        <!-- Avionics Section -->
                        <div id="avionics-part" class="content" role="tabpanel" aria-labelledby="avionics-part-trigger">
                            <form action="" id="add-avionics-form" method="">
                                @csrf
                                <input type="hidden" name="air_craft_id" value="{{ $aircraft->id }}">

                                <div id="avionics-container">
                                    @forelse ($aircraft->avionics as $index => $avionic)
                                        <div class="form-row avionics-entry mb-3">
                                            <input type="hidden" name="avionics[{{ $index }}][id]"
                                                value="{{ $avionic->id }}">

                                            <div class="col-5">
                                                <label>Avionics System</label>
                                                <input type="text" class="form-control"
                                                    name="avionics[{{ $index }}][system]"
                                                    value="{{ $avionic->system }}" placeholder="Enter avionics system">
                                            </div>

                                            <div class="col-5">
                                                <label>Description</label>
                                                <input type="text" class="form-control"
                                                    name="avionics[{{ $index }}][description]"
                                                    value="{{ $avionic->description }}" placeholder="Enter description">
                                            </div>

                                            <div class="col-2 mt-4">
                                                <button type="button" class="btn btn-success mt-2"
                                                    onclick="addAvionicsEntry()">
                                                    <i class="fa fa-plus-square"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="form-row avionics-entry mb-3">
                                            <div class="col-5">
                                                <label>Avionics System</label>
                                                <input type="text" class="form-control" name="avionics[0][system]"
                                                    placeholder="Enter avionics system">
                                            </div>
                                            <div class="col-5">
                                                <label>Description</label>
                                                <input type="text" class="form-control"
                                                    name="avionics[0][description]" placeholder="Enter description">
                                            </div>
                                            <div class="col-2 mt-4">
                                                <button type="button" class="btn btn-dark mt-2"
                                                    onclick="addAvionicsEntry()">
                                                    <i class="fa fa-plus-square"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforelse
                                </div>

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-1 btn-primary" type="button" id="step-nine">Next</button>
                                </div>
                            </form>

                        </div>

                        <!-- Aircraft Media Form Section -->
                        <div id="aircraft-media-part" class="content" role="tabpanel"
                            aria-labelledby="aircraft-media-part-trigger">
                            <form action="" id="step-10-form" method="" enctype="multipart/form-data">
                                @csrf

                                <input type="hidden" name="deleted_media_ids" id="deleted-media-ids">

                                <div class="row">
                                    <!-- Main Image Section -->
                                    <div class="col-12">
                                        <label for="main_image">Main Image</label>
                                        <input type="file" name="main_image" class="form-control">
                                        @if ($aircraft->media->where('type', 'main_image')->first())
                                            <div class="mt-2">
                                                <img src="{{ asset($aircraft->media->where('type', 'main_image')->first()->file_path) }}"
                                                    alt="Main Image" class="img-fluid" width="150">
                                            </div>
                                        @endif
                                    </div>

                                    <!-- Gallery Images Section -->
                                    <div class="col-12 mt-3">
                                        <label for="gallery_images">Gallery Images</label>
                                        <input type="file" name="gallery_images[]" id="gallery_images" multiple
                                            accept="image/*" class="form-control mb-3">

                                        <div class="row" id="gallery-preview">
                                            @foreach ($aircraft->media->where('type', 'gallery') as $media)
                                                <div class="col-3 mb-3 gallery-old-image-wrapper gallery-old-image">
                                                    <img src="{{ asset($media->file_path) }}"
                                                        class="w-100 h-100 rounded border" />
                                                    <button type="button" class="remove-btn"
                                                        onclick="removeOldImage({{ $media->id }}, this)">×</button>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <!-- Floor Plan Image Section -->
                                    <div class="col-12 mt-3">
                                        <label for="floor_plan">Floor Plan Image</label>
                                        <input type="file" name="floor_plan" class="form-control">
                                        @if ($aircraft->media->where('type', 'floor_plan')->first())
                                            <div class="mt-">
                                                <img src="{{ asset($aircraft->media->where('type', 'floor_plan')->first()->file_path) }}"
                                                    alt="Floor Plan Image" class="img-fluid" width="150">
                                            </div>
                                        @endif
                                    </div>

                                    <div class="col-12 mt-3">
                                        <button class="btn btn-primary" type="button"
                                            onclick="stepper.previous()">Previous</button>
                                        <button class="btn btn-1 btn-primary" type="button" id="step-ten">Next</button>
                                    </div>
                                </div>
                            </form>
                        </div>


                        <!-- Aircraft Listing Detail Form Section -->
                        <div id="aircraft-listing-part" class="content" role="tabpanel"
                            aria-labelledby="aircraft-listing-part-trigger">
                            <form action="" id="aircraft-listing-form">
                                @csrf
                                <input type="hidden" name="air_craft_id" value="{{ $aircraft->id ?? '' }}">

                                <div class="form-row">
                                    {{-- Listing Status --}}
                                    <div class="col-6">
                                        <label for="status">Listing Status</label>
                                        <select class="form-control" id="status" name="status">
                                            <option value="available"
                                                {{ old('status', $aircraft->listingDetails->status ?? '') == 'available' ? 'selected' : '' }}>
                                                Available</option>
                                            <option value="under_contract"
                                                {{ old('status', $aircraft->listingDetails->status ?? '') == 'under_contract' ? 'selected' : '' }}>
                                                Under Contract</option>
                                            <option value="sold"
                                                {{ old('status', $aircraft->listingDetails->status ?? '') == 'sold' ? 'selected' : '' }}>
                                                Sold</option>
                                        </select>
                                    </div>

                                    {{-- Price --}}
                                    <div class="col-6">
                                        <label for="price">Price (USD)</label>
                                        <input type="number" step="0.01" class="form-control" id="price"
                                            name="price" placeholder="Enter price"
                                            value="{{ old('price', $aircraft->listingDetails->price ?? '') }}">
                                    </div>

                                    {{-- Is Featured --}}
                                    <div class="col-6 mt-2">
                                        <label for="is_featured">Is Featured?</label>
                                        <select class="form-control" id="is_featured" name="is_featured">
                                            <option value="0"
                                                {{ old('is_featured', $aircraft->listingDetails->is_featured ?? 0) == 0 ? 'selected' : '' }}>
                                                No</option>
                                            <option value="1"
                                                {{ old('is_featured', $aircraft->listingDetails->is_featured ?? 0) == 1 ? 'selected' : '' }}>
                                                Yes</option>
                                        </select>
                                    </div>

                                    {{-- Listed At --}}
                                    <div class="col-6 mt-2">
                                        <label for="listed_at">Listed At</label>
                                        <input type="date" class="form-control" id="listed_at" name="listed_at"
                                            value="{{ old('listed_at', isset($aircraft->listingDetails->listed_at) ? \Carbon\Carbon::parse($aircraft->listingDetails->listed_at)->format('Y-m-d') : '') }}">
                                    </div>

                                    {{-- Overview --}}
                                    <div class="col-12 mt-2">
                                        <label for="overview">Overview</label>
                                        <textarea class="form-control" id="overview" name="overview" rows="3" placeholder="Write overview...">{{ old('overview', $aircraft->listingDetails->overview ?? '') }}</textarea>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-1 btn-primary" type="button" id="step-eleven">Update</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="air_craft_id_field">
@endpush

@push('js')
<script>
    const stepper = new Stepper(document.querySelector('.bs-stepper'), {
        linear: false, // Allows clicking on any step
        animation: true
    });

</script>
<script>

        let allFiles = [];
        let deletedMediaIds = [];

        const imagesInput = document.querySelector('input[name="gallery_images[]"]');
        const previewContainer = document.getElementById('gallery-preview');

        imagesInput.addEventListener('change', function(e) {
            const newFiles = Array.from(e.target.files);
            allFiles = allFiles.concat(newFiles);
            e.target.value = ''; // Reset file input
            renderPreviews();
        });

        // function renderPreviews() {
        //     const existingOldImages = document.querySelectorAll('.gallery-old-image-wrapper');
        //     existingOldImages.forEach(el => el.remove());

        //     allFiles.forEach((file, index) => {
        //         const reader = new FileReader();
        //         reader.onload = function(e) {
        //             const col = document.createElement('div');
        //             col.classList.add('col-3', 'mb-3');

        //             const img = document.createElement('img');
        //             img.src = e.target.result;
        //             img.classList.add('w-100', 'h-100', 'rounded', 'border');

        //             const removeBtn = document.createElement('button');
        //             removeBtn.innerHTML = '×';
        //             removeBtn.classList.add('remove-btn');
        //             removeBtn.onclick = () => {
        //                 allFiles.splice(index, 1);
        //                 renderPreviews();
        //             };

        //             col.appendChild(img);
        //             col.appendChild(removeBtn);
        //             previewContainer.appendChild(col);
        //         };
        //         reader.readAsDataURL(file);
        //     });
        // }

        function renderPreviews() {
    // Only remove newly added images
    const existingNewImages = document.querySelectorAll('.new-gallery-image-wrapper');
    existingNewImages.forEach(el => el.remove());

    allFiles.forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = function(e) {
            const col = document.createElement('div');
            col.classList.add('col-3', 'mb-3', 'new-gallery-image-wrapper'); // distinguish new images

            const img = document.createElement('img');
            img.src = e.target.result;
            img.classList.add('w-100', 'h-100', 'rounded', 'border');

            const removeBtn = document.createElement('button');
            removeBtn.innerHTML = '×';
            removeBtn.classList.add('remove-btn');
            removeBtn.onclick = () => {
                allFiles.splice(index, 1);
                renderPreviews();
            };

            col.appendChild(img);
            col.appendChild(removeBtn);
            previewContainer.appendChild(col);
        };
        reader.readAsDataURL(file);
    });
}


        function removeOldImage(mediaId, btn) {
            deletedMediaIds.push(mediaId);
            btn.parentElement.remove();
        }

        document.getElementById('step-ten').addEventListener('click', function() {
            document.getElementById('deleted-media-ids').value = JSON.stringify(deletedMediaIds);
        });

        document.addEventListener('DOMContentLoaded', function() {
            window.addKeyValueField = function() {
                const container = document.getElementById('key-value-container');
                if (!container) return console.error('Container not found');

                const newRow = document.createElement('div');
                newRow.className = 'form-row mt-2';

                newRow.innerHTML = `
                <div class="col-5">
                    <input type="text" class="form-control" name="key[]" placeholder="Enter aircraft title">
                </div>
                <div class="col-5">
                    <input type="text" class="form-control" name="value[]" placeholder="Enter serial number">
                </div>
                <div class="col-2">
                    <button type="button" class="btn btn-danger" onclick="removeKeyValueField(this)">
                    <i class="fa fa-trash"></i>
                    </button>
                </div>
                `;

                container.appendChild(newRow);
            }

            window.removeKeyValueField = function(button) {
                button.closest('.form-row').remove();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            window.addApusKeyValueEntry = function() {
                const container = document.getElementById('apus-container');
                if (!container) return console.error('Container not found');

                const newRow = document.createElement('div');
                newRow.className = 'form-row mt-2';

                newRow.innerHTML = `
                <div class="col-5">
                    <input type="text" class="form-control" name="key[]" placeholder="Enter key">
                </div>
                <div class="col-5">
                    <input type="text" class="form-control" name="value[]" placeholder="Enter value">
                </div>
                <div class="col-2">
                    <button type="button" class="btn btn-danger" onclick="removeApusKeyValueEntry(this)">
                    <i class="fa fa-trash"></i>
                    </button>
                </div>
                `;

                container.appendChild(newRow);
            }

            window.removeApusKeyValueEntry = function(button) {
                button.closest('.form-row').remove();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            let inspectionIndex = 0;

            window.addInspectionEntry = function() {
                const container = document.getElementById('inspections-container');
                if (!container) return console.error('Inspections container not found');

                const newRow = document.createElement('div');
                newRow.className = 'form-row inspection-entry mt-2';

                newRow.innerHTML = `
                    <div class="col-4">
                        <input type="text" class="form-control" name="inspections[${inspectionIndex}][inspection_type]" placeholder="Enter inspection type">
                    </div>
                    <div class="col-4">
                        <input type="date" class="form-control" name="inspections[${inspectionIndex}][last_performed]">
                    </div>
                    <div class="col-3">
                        <input type="date" class="form-control" name="inspections[${inspectionIndex}][next_due]">
                    </div>
                    <div class="col-1">
                        <button type="button" class="btn btn-danger" onclick="removeInspectionEntry(this)">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                `;

                container.appendChild(newRow);
                inspectionIndex++;
            }

            window.removeInspectionEntry = function(button) {
                button.closest('.inspection-entry').remove();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            let featureIndex = 1;

            window.addFeatureEntry = function() {
                const container = document.getElementById('features-container');

                const newRow = document.createElement('div');
                newRow.className = 'form-row mt-2 feature-entry';

                newRow.innerHTML = `
            <div class="col-11">
                <input type="text" class="form-control" name="features[${featureIndex}][feature]" placeholder="Enter feature">
            </div>
            <div class="col-1">
                <button type="button" class="btn btn-danger" onclick="removeFeatureEntry(this)">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
        `;

                container.appendChild(newRow);
                featureIndex++;
            }

            window.removeFeatureEntry = function(button) {
                button.closest('.feature-entry').remove();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            window.addAvionicsEntry = function() {
                const container = document.getElementById('avionics-container');
                if (!container) return console.error('Container not found');

                const avionicsCount = container.children
                    .length; // Count existing entries to get the correct index
                const newRow = document.createElement('div');
                newRow.className = 'form-row mt-2';

                newRow.innerHTML = `
        <div class="col-5">
            <input type="text" class="form-control" name="avionics[${avionicsCount}][system]" placeholder="Enter avionics system">
        </div>
        <div class="col-5">
            <input type="text" class="form-control" name="avionics[${avionicsCount}][description]" placeholder="Enter description">
        </div>
        <div class="col-2">
            <button type="button" class="btn btn-danger" onclick="removeAvionicsEntry(this)">
                <i class="fa fa-trash"></i>
            </button>
        </div>
        `;

                container.appendChild(newRow);
            }

            window.removeAvionicsEntry = function(button) {
                button.closest('.form-row').remove();
            }
        });



        $('#manufacturers-field').on('change', function() {
            const id = $(this).val();
            if (id) {
                let route = " {{ route('admin.get.manufacturers.models', ':id') }} ";
                route = route.replace(':id', id);
                $.ajax({
                    method: 'GET',
                    url: route,
                    success: function(response) {
                        console.log("success:", response);
                        $("#manufacturer-model-fields").html(response);
                    },
                    error: function(error) {
                        console.log("error:", error);
                    }
                });
            }
        });

        document.addEventListener("DOMContentLoaded", function() {
            const manufacturerId = "{{ $aircraft->manufacturer_id ?? '' }}";
            const selectedModelId = "{{ $aircraft->manufacturer_model_id ?? '' }}";

            if (manufacturerId) {
                let route = "{{ route('admin.get.manufacturers.models', ':id') }}".replace(':id', manufacturerId);

                $.ajax({
                    method: 'GET',
                    url: route,
                    success: function(response) {
                        // Inject the HTML <option> elements into the select
                        $('#manufacturer-model-fields').html(response);

                        // Set the selected model ID
                        if (selectedModelId) {
                            $('#manufacturer-model-fields').val(selectedModelId);
                        }
                    },
                    error: function(error) {
                        console.log("Error loading models:", error);
                    }
                });
            }
        });


        $('#step-one').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route = '{{ route('admin.add.aircraft.general.details') }}';
            if ($air_craft_id_field.val() !== "") {
                route = '{{ route('admin.update.aircraft.general.details', ':id') }}';
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }
            $btn.attr('diabled', true);
            $btn.text('Loading...');
            $.ajax({
                url: route,
                type: 'POST',
                data: new FormData($('#step-one-form')[0]),
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message)
                        $air_craft_id_field.val(response.data.id);
                        setTimeout(() => {
                            $btn.attr('diabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('diabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('diabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);
                    toastr.error(response.message);
                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            // Optional: show the first validation error
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }
                    toastr.error(errorMessage);
                }
            });
        });
        $('#step-two').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route = '{{ route('admin.add.airframe.details', ':id') }}';
            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }
            $btn.attr('diabled', true);
            $btn.text('Loading...');
            $.ajax({
                url: route,
                type: 'POST',
                data: $('#step-two-form').serialize(),
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('diabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('diabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('diabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);
                    toastr.error(response.message);
                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            // Optional: show the first validation error
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }
                    toastr.error(errorMessage);
                }
            });
        });
        $('#step-three').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route = '{{ route('admin.add.update.aircraft.interior.features', ':id') }}';
            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }
            $btn.attr('diabled', true);
            $btn.text('Loading...');
            $.ajax({
                url: route,
                type: 'POST',
                data: $('#add-interior-feature-form').serialize(),
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('diabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('diabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('diabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);
                    toastr.error(response.message);
                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            // Optional: show the first validation error
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }
                    toastr.error(errorMessage);
                }
            });
        });

        $('#step-four').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route = '{{ route('admin.add.update.aircraft.exterior.features', ':id') }}';
            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }
            $btn.attr('diabled', true);
            $btn.text('Loading...');
            $.ajax({
                url: route,
                type: 'POST',
                data: $('#add-exterior-feature-form').serialize(),
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('diabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('diabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('diabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);
                    toastr.error(response.message);
                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            // Optional: show the first validation error
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }
                    toastr.error(errorMessage);
                }
            });
        });

        $('#step-five').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route = '{{ route('admin.save.apus.details', ':id') }}';
            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }
            $btn.attr('diabled', true);
            $btn.text('Loading...');
            $.ajax({
                url: route,
                type: 'POST',
                data: $('#step-five-form').serialize(),
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('diabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('diabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('diabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);
                    toastr.error(response.message);
                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            // Optional: show the first validation error
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }
                    toastr.error(errorMessage);
                }
            });
        });

        $('#step-six').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route = '{{ route('admin.save.engines.details', ':id') }}'; // <-- update this route name

            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }

            $btn.attr('disabled', true); // fixed typo: was "diabled"
            $btn.text('Loading...');

            $.ajax({
                url: route,
                type: 'POST',
                data: $('#add-engine-form').serialize(),
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('disabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('disabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('disabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);

                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }

                    toastr.error(errorMessage);
                }
            });
        });

        $('#step-seven').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route = '{{ route('admin.save.inspections.details', ':id') }}'; // <-- your inspections route

            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }

            $btn.attr('disabled', true);
            $btn.text('Loading...');

            $.ajax({
                url: route,
                type: 'POST',
                data: $('#step-seven-form').serialize(),
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('disabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('disabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('disabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);

                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }

                    toastr.error(errorMessage);
                }
            });
        });

        $('#step-eight').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $(
                "#air_craft_id_field");
            let route =
                '{{ route('admin.save.features.details', ':id') }}';

            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }

            $btn.attr('disabled', true);
            $btn.text('Loading...');

            $.ajax({
                url: route,
                type: 'POST',
                data: $('#step-eight-form').serialize(),
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('disabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('disabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('disabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);

                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }

                    toastr.error(errorMessage);
                }
            });
        });

        $('#step-nine').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route = '{{ route('admin.save.avionics.details', ':id') }}'; // <-- update route for avionics

            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }

            $btn.attr('disabled', true);
            $btn.text('Loading...');

            $.ajax({
                url: route,
                type: 'POST',
                data: $('#add-avionics-form').serialize(),
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('disabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('disabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('disabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);

                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }

                    toastr.error(errorMessage);
                }
            });
        });

        $('#step-ten').on('click', function(e) {
            e.preventDefault();
            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route = '{{ route('admin.save.aircraft.media', ':id') }}';
            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }

            const formData = new FormData();
            formData.append('is_edit', true);
            formData.append('air_craft_id', $air_craft_id_field.val());
            allFiles.forEach(file => formData.append('gallery_images[]', file));
            deletedMediaIds.forEach(id => formData.append('deleted_media_ids[]', id));


            const mainImageFile = $("input[name=main_image]")[0].files[0];
            const floorPlanFile = $("input[name=floor_plan]")[0].files[0];

            if (mainImageFile) formData.append('main_image', mainImageFile);
            if (floorPlanFile) formData.append('floor_plan', floorPlanFile);

            $btn.attr('disabled', true);
            $btn.text('Loading...');

            $.ajax({
                url: route,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('disabled', false);
                            $btn.text('Next');
                            stepper.next();
                        }, 2000);
                    } else {
                        $btn.attr('disabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    $btn.attr('disabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);

                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }

                    toastr.error(errorMessage);
                }
            });
        });

        $('#step-eleven').on('click', function(e) {
            e.preventDefault();

            let $btn = $(this);
            let $air_craft_id_field = $("#air_craft_id_field");
            let route =
                '{{ route('admin.save.aircraft.listing.details', ':id') }}';

            if ($air_craft_id_field.val() !== "") {
                const id = $air_craft_id_field.val();
                route = route.replace(':id', id);
            }

            $btn.attr('disabled', true);
            $btn.text('Loading...');

            $.ajax({
                url: route,
                type: 'POST',
                data: $('#aircraft-listing-form').serialize(),
                success: function(response) {
                    if (response.status) {
                        toastr.success(response.message);
                        setTimeout(() => {
                            $btn.attr('disabled', false);
                            $btn.text('Redirecting...');
                            window.location.href =
                                '{{ route('admin.airCraft.inventory.list') }}';
                        }, 2000);
                    } else {
                        $btn.attr('disabled', false);
                        $btn.text('Next');
                        toastr.error(response.message);
                    }
                },

                error: function(xhr) {
                    $btn.attr('disabled', false);
                    $btn.text('Next');
                    console.log('Error:', xhr.responseText);

                    let errorMessage = "An unexpected error occurred";

                    try {
                        let res = JSON.parse(xhr.responseText);
                        if (res.message) {
                            errorMessage = res.message;
                        } else if (res.errors) {
                            let firstError = Object.values(res.errors)[0][0];
                            errorMessage = firstError;
                        }
                    } catch (e) {
                        console.warn('Could not parse JSON:', e);
                    }

                    toastr.error(errorMessage);
                }
            });
        });
    </script>
@endpush