@extends('admin.layout.main')

@section('title', 'Dashboard')

@push('content')
    <div class="col-md-12">
        <div class="card card-default">
            <div class="card-header">
                <h3 class="card-title">Create Aircraft</h3>
            </div>
            <div class="card-body p-0">
                <div class="bs-stepper">
                    <div class="row bs-stepper-header" role="tablist">
                        <!-- Manufacturer Tab -->
                        <div class="step col-2" data-target="#manufacturer-part">
                            <button type="button" class="step-trigger" 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" data-target="#aircraft-part">
                            <button type="button" class="step-trigger" 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" data-target="#airframe-part">
                            <button type="button" class="step-trigger" 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" data-target="#media-part">
                            <button type="button" class="step-trigger" 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" data-target="#apus-part">
                            <button type="button" class="step-trigger" 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" data-target="#engines-part">
                            <button type="button" class="step-trigger" 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" data-target="#inspections-part">
                            <button type="button" class="step-trigger" 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" data-target="#features-part">
                            <button type="button" class="step-trigger" 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" data-target="#avionics-part">
                            <button type="button" class="step-trigger" 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" data-target="#aircraft-media-part">
                            <button type="button" class="step-trigger" 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" data-target="#aircraft-listing-part">
                            <button type="button" class="step-trigger" 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="{{ route('admin.add.aircraft.general.details') }}" enctype="multipart/form-data" id="step-one-form">
                                @csrf
                                <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="" selected disabled>Select manufacturer</option>
                                            @foreach ($manufacturers as $manufacturer)
                                                <option value="{{ $manufacturer->id }}">{{ $manufacturer->name }}</option>
                                            @endforeach
                                        </select>
                                        {{-- <input type="text" class="form-control" id="manufacturer_name" name="manufacturer_name" placeholder="Enter manufacturer name"> --}}
                                    </div>
                                    <div class="col-6">
                                        <label for="manufacturer_name">Manufacturer</label>
                                        <select name="manufacturer_model_id" id="manufacturer-model-fields"
                                            class="form-control">
                                            <option value="" selected disabled>Select manufacturer model</option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label for="manufacturer_name">Title</label>
                                        <input name="title" type="text" class="form-control"
                                            placeholder="Enter title">
                                    </div>
                                    <div class="col-6">
                                        <label for="manufacturer_name">Serial Number</label>
                                        <input type="text" name="serial_number" class="form-control"
                                            placeholder="Enter serial number">
                                    </div>
                                    <div class="col-6">
                                        <label for="manufacturer_name">Total Hours Since New</label>
                                        <input type="text" name="total_hours" class="form-control"
                                            placeholder="Enter total hours since new">
                                    </div>
                                    <div class="col-6">
                                        <label for="manufacturer_name">Year of Manufacturer</label>
                                        <input type="date" name="year_of_manufacture" class="form-control"
                                            placeholder="Enter date of manufacturer">
                                    </div>
                                    <div class="col-6">
                                        <label for="manufacturer_name">Registration Number</label>
                                        <input type="text" name="registration_number" class="form-control"
                                            placeholder="Enter registration number">
                                    </div>
                                    <div class="col-6">
                                        <label for="manufacturer_name">Base Location</label>
                                        <input type="text" name="base_location" class="form-control"
                                            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 mt-2" 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">
                                @csrf
                                <div id="key-value-container">
                                    <div class="form-row">
                                        <div class="col-5">
                                            <label for="aircraft_title">Key</label>
                                            <input type="text" class="form-control" id="aircraft_title"
                                                name="key[]" placeholder="Enter airframe key">
                                        </div>
                                        <div class="col-5">
                                            <label for="serial_number">Value</label>
                                            <input type="text" class="form-control" id="serial_number" name="value[]"
                                                placeholder="Enter airframe key value">
                                        </div>
                                        <div class="col-2 mt-4">
                                            <button type="button" class="btn btn-primary mt-2"
                                                onclick="addKeyValueField()">
                                                <i class="fa fa-plus-square"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-primary" type="button" id="step-two">Next</button>
                                </div>
                            </form>
                        </div>

                        <!-- Airframe 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">
                                    </div>
                                    <div class="col-6">
                                        <label for="value">Galley Location</label>
                                        <input class="form-control" id="galley_location" name="galley_location"
                                            placeholder="Enter gallery 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" />
                                    </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" />
                                    </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" />
                                    </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" />
                                    </div>
                                    <div class="col-6">
                                        <label for="value">Crew Rest</label>
                                        <select class="form-control" id="crew_rest" name="crew_rest">
                                            <option value="" selected disabled>Select One</option>
                                            <option value="1">Yes</option>
                                            <option value="0">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="" selected disabled>Select One</option>
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-primary" type="button" id="step-three">Next</button>
                                </div>
                            </form>
                        </div>

                        <!-- Media 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="key">Base paint color</label>
                                        <input type="text" class="form-control" id="base_paint_color"
                                            name="base_paint_color" placeholder="Enter base paint color">
                                    </div>
                                    <div class="col-6">
                                        <label for="value">Stripe color</label>
                                        <input class="form-control" id="stripe_color" name="stripe_color"
                                            placeholder="Enter stripe color" />
                                    </div>
                                    <div class="col-6">
                                        <label for="value">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" />
                                    </div>
                                </div>
                                <div class="col-12 mt-2">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn 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">
                                    <div class="form-row">
                                        <div class="col-5">
                                            <label for="aircraft_title">Key</label>
                                            <input type="text" class="form-control" id="apu_key" name="key[]"
                                                placeholder="Enter airframe key">
                                        </div>
                                        <div class="col-5">
                                            <label for="serial_number">Value</label>
                                            <input type="text" class="form-control" id="apu_value" name="value[]"
                                                placeholder="Enter airframe key value">
                                        </div>
                                        <div class="col-2 mt-4">
                                            <button type="button" class="btn btn-primary mt-2"
                                                onclick="addApusKeyValueEntry()">
                                                <i class="fa fa-plus-square"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn 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)
                                    <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]"
                                                    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]"
                                                    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="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="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]"
                                                    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]"
                                                    placeholder="e.g. ESP Gold">
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="col-12 mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn 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">
                                @csrf
                                {{-- <input type="hidden" name="inspections[0][id]"
                                    value="{{ $inspection->id ?? '' }}"> --}}
                                {{-- <input type="hidden" name="inspections[0][id]"
                                    value="{{ $inspection->id ?? '' }}"> --}}

                                <div id="inspections-container">
                                    <div class="form-row inspection-entry">
                                        <div class="col-4">
                                            <label for="inspection_type">Inspection Type</label>
                                            <input type="text" class="form-control"
                                                name="inspections[0][inspection_type]"
                                                placeholder="Enter inspection type">
                                        </div>

                                        <div class="col-4">
                                            <label for="last_performed">Last Performed</label>
                                            <input type="date" class="form-control"
                                                name="inspections[0][last_performed]">
                                        </div>

                                        <div class="col-3">
                                            <label for="next_due">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-success mt-2"
                                                onclick="addInspectionEntry()">
                                                <i class="fa fa-plus-square"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn 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">
                                @csrf
                                <input type="hidden" name="air_craft_id" value="{{ $airCraft->id ?? '' }}">

                                <div id="features-container">
                                    <div class="form-row feature-entry">
                                        <div class="col-11">
                                            <label for="feature">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-success mt-2"
                                                onclick="addFeatureEntry()">
                                                <i class="fa fa-plus-square"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn 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">
                                @csrf
                                <input type="hidden" name="air_craft_id" value="{{ $airCraft->id ?? '' }}">

                                <div id="avionics-container">
                                    <div class="form-row avionics-entry">
                                        <div class="col-5">
                                            <label for="system">Avionics System</label>
                                            <input type="text" class="form-control" name="avionics[0][system]"
                                                placeholder="Enter avionics system">
                                        </div>

                                        <div class="col-5">
                                            <label for="description">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-success mt-2"
                                                onclick="addAvionicsEntry()">
                                                <i class="fa fa-plus-square"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn 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" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-12">
                                        <label for="">Main Image</label>
                                        <input type="file" name="main_image" class="form-control">
                                    </div>
                                    <div class="col-12 mt-3">
                                        <label for="">Gallery Images</label>
                                        <input type="file" name="images[]" id="images" multiple accept="image/*"
                                            class="form-control mb-3">
                                        <div class="row" id="preview"></div>
                                    </div>
                                    <div class="col-12 mt-3">
                                        <label for="">Floor Plan Image</label>
                                        <input type="file" name="floor_plan">
                                    </div>
                                    <div class="col-12 mt-3">
                                        <button class="btn btn-primary" type="button"
                                            onclick="stepper.previous()">Previous</button>
                                        <button class="btn 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">
                                    <div class="col-6">
                                        <label for="status">Listing Status</label>
                                        <select class="form-control" id="status" name="status">
                                            <option value="available" selected>Available</option>
                                            <option value="under_contract">Under Contract</option>
                                            <option value="sold">Sold</option>
                                        </select>
                                    </div>

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

                                    <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">No</option>
                                            <option value="1">Yes</option>
                                        </select>
                                    </div>

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

                                    <div class="col-12 mt-2">
                                        <label for="overview">Overview</label>
                                        <textarea class="form-control" id="overview" name="overview" rows="3" placeholder="Write overview..."></textarea>
                                    </div>
                                </div>

                                <div class="col-12 mt-3">
                                    <button class="btn btn-primary" type="button"
                                        onclick="stepper.previous()">Previous</button>
                                    <button class="btn btn-primary" type="button" id="step-eleven">Submit</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'));
        let allFiles = [];

        const imagesInput = document.getElementById('images');
        const previewContainer = document.getElementById('preview');

        imagesInput.addEventListener('change', function(e) {
            const newFiles = Array.from(e.target.files);
            console.log("files:", newFiles);

            newFiles.forEach(file => allFiles.push(file));
            e.target.value = '';
            renderPreviews();
        });

        function renderPreviews() {
            previewContainer.innerHTML = '';

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

                    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); // Remove file from array
                        renderPreviews(); // Re-render preview
                    };

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


        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 = 1;

            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);
                    }
                });
            }
        });
        $('#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('air_craft_id', $air_craft_id_field.val());
            allFiles.forEach(file => formData.append('gallery_images[]', file));

            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