@extends('admin.layout.app')
@section('title', 'Update Car Listing')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">

                            <h1 class="admin-title mb-3">Update listing</h1>
                            <div class="mb-3">
                                <a href="{{url()->previous()}}"
                                   class="btn btn-sm btn-light fw-bold">
                                    <i class="fas fa-arrow-left me-1"></i> Back
                                </a>
                            </div>
                            <form id="listingForm" action="{{ route('admin.listings.update', $listing->id) }}"
                                  method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')

                                {{-- ========== UPLOAD PHOTO ========== --}}
                                <div class="tfcl-add-listing upload-photo">
                                    <h3>Upload Photo</h3>

                                    {{-- Existing Images Grid --}}
                                    @if($existingImages->count())

                                        <div class="existing-media-grid" id="existingImagesGrid">
                                            @foreach($existingImages as $img)
                                                <div class="existing-media-item" id="existing-img-{{ $img['id'] }}">
                                                    <img src="{{ $img['url'] }}" alt="car image">

                                                    {{-- Cover badge --}}
                                                    @if($img['is_cover'])
                                                        <span class="cover-badge existing-cover"
                                                              id="cover-badge-{{ $img['id'] }}">Cover</span>
                                                    @else
                                                        <span class="cover-badge existing-cover d-none"
                                                              id="cover-badge-{{ $img['id'] }}"></span>
                                                    @endif
                                                    {{-- Set as cover --}}
                                                    <button type="button" class="set-existing-cover"
                                                            data-id="{{ $img['id'] }}"
                                                            title="Set as cover"
                                                            style="{{ $img['is_cover'] ? 'color:#FF7101' : '' }}">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                             height="14" viewBox="0 0 24 24"
                                                             fill="{{ $img['is_cover'] ? 'currentColor' : 'none' }}"
                                                             stroke="currentColor" stroke-width="2">
                                                            <polygon
                                                                points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                                                        </svg>
                                                    </button>

                                                    {{-- Delete existing --}}
                                                    <button type="button" class="delete-existing-img"
                                                            data-id="{{ $img['id'] }}">&times;
                                                    </button>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif

                                    {{-- Hidden fields for delete / cover tracking --}}
                                    <div id="deleteImageInputs"></div>
                                    <input type="hidden"
                                           name="cover_existing_id"
                                           id="coverExistingId"
                                           value="{{ collect($existingImages)->firstWhere('is_cover', true)['id'] ?? '' }}">

                                    {{-- New image drop zone --}}
                                    <div class="upload-media mt-3" id="imageDropZone">
                                        <div class="inner">
                                            <a href="#" id="selectPhotosBtn">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14"
                                                     viewBox="0 0 18 14" fill="none">
                                                    <path
                                                        d="M0.875 10.125L5.17417 5.82583C5.34828 5.65172 5.55498 5.51361 5.78246 5.41938C6.00995 5.32515 6.25377 5.27665 6.5 5.27665C6.74623 5.27665 6.99005 5.32515 7.21754 5.41938C7.44502 5.51361 7.65172 5.65172 7.82583 5.82583L12.125 10.125M10.875 8.875L12.0492 7.70083C12.2233 7.52672 12.43 7.38861 12.6575 7.29438C12.885 7.20015 13.1288 7.15165 13.375 7.15165C13.6212 7.15165 13.865 7.20015 14.0925 7.29438C14.32 7.38861 14.5267 7.52672 14.7008 7.70083L17.125 10.125M2.125 13.25H15.875C16.2065 13.25 16.5245 13.1183 16.7589 12.8839C16.9933 12.6495 17.125 12.3315 17.125 12V2C17.125 1.66848 16.9933 1.35054 16.7589 1.11612C16.5245 0.881696 16.2065 0.75 15.875 0.75H2.125C1.79348 0.75 1.47554 0.881696 1.24112 1.11612C1.0067 1.35054 0.875 1.66848 0.875 2V12C0.875 12.3315 1.0067 12.6495 1.24112 12.8839C1.47554 13.1183 1.79348 13.25 2.125 13.25ZM10.875 3.875H10.8817V3.88167H10.875V3.875ZM11.1875 3.875C11.1875 3.95788 11.1546 4.03737 11.096 4.09597C11.0374 4.15458 10.9579 4.1875 10.875 4.1875C10.7921 4.1875 10.7126 4.15458 10.654 4.09597C10.5954 4.03737 10.5625 3.95788 10.5625 3.875C10.5625 3.79212 10.5954 3.71263 10.654 3.65403C10.7126 3.59542 10.7921 3.5625 10.875 3.5625C10.9579 3.5625 11.0374 3.59542 11.096 3.65403C11.1546 3.71263 11.1875 3.79212 11.1875 3.875Z"
                                                        stroke="white" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round"/>
                                                </svg>
                                                Add more photos
                                            </a>
                                            <input type="file" id="imageInput" name="car_images[]" multiple
                                                   accept="image/jpeg,image/png,image/webp" style="display:none">
                                            <div class="desc">or drag photos here <br><span>(Up to 10 photos)</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="thumbnail-media" id="imagePreviews"></div>
                                    <span class="err" id="err-cover_image"></span>
                                </div>

                                {{-- ========== CAR DETAILS ========== --}}
                                <div class="tfcl-add-listing car-details">
                                    <h3>Car details</h3>

                                    {{-- VIN — readonly in edit --}}
                                    <div class="form-group">
                                        <label>VIN Number <span
                                                style="font-size:11px;color:#888;">(read-only)</span></label>
                                        <input type="text" class="form-control" name="vin_number"
                                               value="{{ $listing->vin_number }}"
                                               style="text-transform:uppercase; background:#f5f5f5; cursor:not-allowed;"
                                               readonly>
                                        <span class="err" id="err-vin_number"></span>
                                    </div>
                                    <div class="form-group">
                                        <label>Dealership Name</label>
                                        <div>
                                            <div>
                                                <input type="text" class="form-control" name="dealership_name"
                                                       value="{{ old('dealership_name', $listing->dealership_name) }}"
                                                       placeholder="Dealer Name optional">
                                                <span class="err" id="err-dealership_name"></span>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Listing Title *</label>
                                        <input type="text" class="form-control" name="title"
                                               value="{{ old('title', $listing->title) }}"
                                               placeholder="Enter title">
                                        <span class="err" id="err-title"></span>
                                    </div>

                                    <div class="form-group-4">
                                        <div class="form-group">
                                            <label>Make *</label>
                                            <select class="nice-select form-control" name="make_id" id="makeSelect">
                                                <option value="">Select Make</option>
                                                @foreach($brands as $attr)
                                                    <option value="{{ $attr->id }}"
                                                        {{ $listing->make_id == $attr->id ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-make_id"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Model *</label>
                                            {{-- Models loaded via JS after page load --}}
                                            <select class="nice-select form-control" name="model_id"
                                                    id="modelSelect">
                                                <option value="">Loading...</option>
                                            </select>
                                            <span class="err" id="err-model_id"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Type *</label>
                                            <select class="nice-select form-control" name="attributes[body_type]">
                                                <option value="">Select</option>
                                                @foreach($bodyType as $attr)
                                                    <option value="{{ $attr->id }}"
                                                        {{ ($listing->body_type_id ?? null) == $attr->id ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-body_type"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Year *</label>
                                            <input type="number" class="form-control" name="year"
                                                   value="{{ old('year', $listing->year) }}"
                                                   placeholder="ex 2025" min="1990" max="{{ date('Y') }}">
                                            <span class="err" id="err-year"></span>
                                        </div>
                                    </div>

                                    <div class="form-group-4">
                                        <div class="form-group">
                                            <label>Condition *</label>
                                            <select class="nice-select form-control" name="attributes[condition]">
                                                <option value="">Select</option>
                                                @foreach($conditions as $attr)
                                                    <option value="{{ $attr->id }}"
                                                        {{ ($listing->condition_id ?? null) == $attr->id ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-condition"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Stock Number</label>
                                            <input type="number" class="form-control" name="stock_number"
                                                   value="{{ old('stock_number', $listing->stock_number) }}"
                                                   placeholder="Enter number">
                                            <span class="err" id="err-stock_number"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Mileage</label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" name="mileage"
                                                       value="{{ old('mileage', $listing->mileage) }}"
                                                       placeholder="ex 5000">
                                                <select class="form-control" name="mileage_unit"
                                                        style="max-width: 80px;">
                                                    <option selected
                                                            value="mi" {{ ($listing->mileage_unit ?? 'mi') == 'mi' ? 'selected' : '' }}>
                                                        mi
                                                    </option>
                                                    {{--                                                        <option--}}
                                                    {{--                                                            value="km" {{ ($listing->mileage_unit ?? 'mi') == 'km' ? 'selected' : '' }}>--}}
                                                    {{--                                                            km--}}
                                                    {{--                                                        </option>--}}
                                                </select>
                                            </div>
                                            <span class="err" id="err-mileage"></span>
                                        </div>

                                        <div class="form-group">
                                            <label>Transmission</label>
                                            <select class="nice-select form-control"
                                                    name="attributes[transmission]">
                                                <option value="">Select</option>
                                                @foreach($transmissions as $attr)
                                                    <option value="{{ $attr->id }}"
                                                        {{ ($listing->transmission_id ?? null) == $attr->id ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-transmission"></span>
                                        </div>
                                        {{--                                            <div class="form-group">--}}
                                        {{--                                                <label>Running Kilometers</label>--}}
                                        {{--                                                <input type="number" class="form-control" name="kilometer"--}}
                                        {{--                                                       value="{{ old('kilometer', $listing->kilometer) }}"--}}
                                        {{--                                                       placeholder="e.g 12000">--}}
                                        {{--                                                <span class="err" id="err-kilometer"></span>--}}
                                        {{--                                            </div>--}}
                                    </div>

                                    <div class="form-group-4">

                                        <div class="form-group">
                                            <label>Drive Type</label>
                                            <select class="nice-select form-control" name="attributes[drive_type]">
                                                <option value="">Select</option>
                                                @foreach($driveTypes as $attr)
                                                    <option value="{{ $attr->id }}"
                                                        {{ ($listing->drive_type_id ?? null) == $attr->id ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-drive_type"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Engine Size</label>
                                            <input type="text" class="form-control" name="engine_size"
                                                   value="{{ old('engine_size', $listing->engine_size) }}"
                                                   placeholder="ex 2.0L">
                                            <span class="err" id="err-engine_size"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Cylinders</label>
                                            <select class="nice-select form-control" name="attributes[cylinders]">
                                                <option value="">Select</option>
                                                @foreach($cylinders as $attr)
                                                    <option value="{{ $attr->name }}"
                                                        {{ ($listing->cylinders ?? null) == $attr->name ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-cylinders"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Fuel Type</label>
                                            <select class="nice-select form-control" name="attributes[fuel_type]">
                                                <option value="">Select</option>
                                                @foreach($fuelTypes as $attr)
                                                    <option value="{{ $attr->id }}"
                                                        {{ ($listing->fuel_type_id ?? null) == $attr->id ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-fuel_type"></span>
                                        </div>
                                    </div>

                                    <div class="form-group-4">

                                        <div class="form-group">
                                            <label>Doors</label>
                                            <select class="nice-select form-control" name="attributes[doors]">
                                                <option value="">Select</option>
                                                @foreach($doors as $attr)
                                                    <option value="{{ $attr->name }}"
                                                        {{ ($listing->doors ?? null) == $attr->name ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-doors"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Seats</label>
                                            <select class="nice-select form-control" name="attributes[seats]">
                                                <option value="">Select</option>
                                                @foreach($seats as $attr)
                                                    <option value="{{ $attr->name }}"
                                                        {{ ($listing->seats ?? null) == $attr->name ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-seats"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Color</label>
                                            <select class="nice-select form-control" name="attributes[color]">
                                                <option value="">Select</option>
                                                @foreach($colors as $attr)
                                                    <option value="{{ $attr->id }}"
                                                        {{ ($listing->color_id ?? null) == $attr->id ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-color"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>City MPG</label>
                                            <select class="nice-select form-control" name="attributes[city_mpg]">
                                                <option value="">Select</option>
                                                @foreach($cityMpg as $attr)
                                                    <option value="{{ $attr->name }}"
                                                        {{ ($listing->city_mpg ?? null) == $attr->name ? 'selected' : '' }}>
                                                        {{ $attr->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-city_mpg"></span>
                                        </div>
                                    </div>
                                    <div class="form-group-4">

                                        <div class="form-group">
                                            <label>Engine</label>
                                            <select class="nice-select form-control" name="attributes[engine]">
                                                <option value="">Select</option>
                                                @foreach($engine as $eng)
                                                    <option
                                                        value="{{ $eng->id }}" {{ ($listing->engine_id ?? null) == $eng->id ? 'selected' : '' }}>{{ $eng->name }}</option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-engine"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Exterior Color</label>
                                            <select class="nice-select form-control" name="attributes[exterior_color]">
                                                <option value="">Select</option>
                                                @foreach($exteriorColors as $ext_col)
                                                    <option value="{{ $ext_col->id }}" {{ ($listing->exterior_color_id ?? null) == $ext_col->id ? 'selected' : '' }}>{{ $ext_col->name }}</option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-exterior_color"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Interior Color</label>
                                            <select class="nice-select form-control" name="attributes[interior_color]">
                                                <option value="">Select</option>
                                                @foreach($interiorColors as $int_col)
                                                    <option value="{{ $int_col->id }}" {{ ($listing->interior_color_id ?? null) == $int_col->id ? 'selected' : '' }}>{{ $int_col->name }}</option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-interior_color"></span>
                                        </div>

                                    </div>

                                    <div class="form-group mb-0">
                                        <label>Description</label>
                                        <textarea class="form-control" name="description" rows="5"
                                                  placeholder="Your description">{{ old('description', $listing->description) }}</textarea>
                                        <span class="err" id="err-description"></span>
                                    </div>
                                </div>

                                {{-- ========== FEATURES ========== --}}
                                <div class="tfcl-add-listing car-features">
                                    <h3>Safety features</h3>
                                    <div class="group-features-5">
                                        @foreach(['entertainment','safety','interior','exterior','technology'] as $cat)
                                            <div class="group-features">
                                                <h6>{{ ucfirst($cat) }}</h6>
                                                @foreach($features[$cat] as $feature)
                                                    <div class="parent-item group-checkbox">
                                                        <input class="form-check-input" type="checkbox"
                                                               name="features[]"
                                                               value="{{ $feature->id }}"
                                                               id="feature_{{ $feature->id }}"
                                                            {{ in_array($feature->id, $selectedFeatures) ? 'checked' : '' }}>
                                                        <label
                                                            for="feature_{{ $feature->id }}">{{ $feature->name }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                {{-- ========== PRICE ========== --}}
                                <div class="tfcl-add-listing car-price">
                                    <h3>Car price</h3>
                                    <div class="form-group mb-0">
                                        <label>Full price</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" class="form-control" name="price"
                                                   value="{{ old('price', $listing->price) }}"
                                                   placeholder="Your price">
                                        </div>
                                        {{--                                            <input type="number" class="form-control" name="price"--}}
                                        {{--                                                   value="{{ old('price', $listing->price) }}"--}}
                                        {{--                                                   placeholder="Your price">--}}
                                        <span class="err" id="err-price"></span>
                                    </div>
                                </div>

                                {{-- ========== LOCATION ========== --}}
                                <div class="tfcl-add-listing car-location">
                                    <h3>Location</h3>
                                    <div class="form-group">
                                        <label>Street Address</label>
                                        <input type="text" class="form-control" name="address"
                                               value="{{$listing->address ?? ''}}"
                                               placeholder="Street Address" required>
                                        <span class="err" id="err-address"></span>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>City</label>
                                                <input type="text" class="form-control" name="city"
                                                       value="{{$listing->city ?? ''}}"
                                                       placeholder="City" required>
                                                <span class="err" id="err-city"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>State</label>
                                                <input type="text" class="form-control" name="state"
                                                       value="{{$listing->state ?? ''}}"
                                                       placeholder="State" required>
                                                <span class="err" id="err-state"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-0">
                                                <label>Zip Code</label>
                                                <input type="text" class="form-control" name="zip"
                                                       value="{{$listing->zip ?? ''}}"
                                                       placeholder="Zip Code" maxlength="10" required>
                                                <span class="err" id="err-zip"></span>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                {{-- ========== VIDEO ========== --}}
                                <div class="tfcl-add-listing car-video">
                                    <h3>Video</h3>
                                    <p>Listing with video gets 6 times higher exposure to buyers.</p>
                                    <div class="form-group mb-0">
                                        <label>Video URL</label>
                                        <input type="text" class="form-control" name="video_url"
                                               value="{{ old('video_url', $listing->video_link_url) }}"
                                               placeholder="YouTube/Vimeo URL">
                                        <span class="err" id="err-video_url"></span>
                                    </div>
                                </div>

                                {{-- ========== DOCUMENTS ========== --}}
                                <div class="tfcl-add-listing car-attr">
                                    <h3>Attachments</h3>

                                    {{-- Existing documents --}}
                                    @if($existingDocs->count())
                                        <div class="existing-docs-list" id="existingDocsList">
                                            @foreach($existingDocs as $doc)
                                                <div class="existing-doc-item" id="existing-doc-{{ $doc['id'] }}">
                                                    <div class="doc-icon">
                                                        <svg width="36" height="36" viewBox="0 0 60 60" fill="none">
                                                            <path
                                                                d="M53.625 4.40731V55.5926C53.625 56.2947 53.3461 56.9679 52.8497 57.4644C52.3533 57.9608 51.68 58.2397 50.9779 58.2397H9.02206C8.32002 58.2397 7.64673 57.9608 7.15031 57.4644C6.65389 56.9679 6.375 56.2947 6.375 55.5926V12.3838H14.3603C15.0623 12.3838 15.7356 12.1049 16.232 11.6085C16.7285 11.1121 17.0074 10.4388 17.0074 9.73672V1.76025H50.9779C51.68 1.76025 52.3533 2.03914 52.8497 2.53556C53.3461 3.03198 53.625 3.70527 53.625 4.40731Z"
                                                                fill="#E9EDF4"/>
                                                            <rect x="3" y="32" width="54" height="17" rx="3"
                                                                  fill="#FF7101"/>
                                                            <text x="30" y="44" text-anchor="middle" fill="white"
                                                                  font-size="10" font-weight="bold"
                                                                  font-family="sans-serif">{{ $doc['ext'] }}</text>
                                                        </svg>
                                                    </div>
                                                    <span class="doc-name"
                                                          title="{{ $doc['name'] }}">{{ $doc['name'] }}</span>
                                                    <div class="doc-actions">
                                                        <a href="{{ $doc['url'] }}" target="_blank"
                                                           class="action-link" title="View">
                                                            <svg width="16" height="16" fill="none"
                                                                 stroke="currentColor" stroke-width="2"
                                                                 viewBox="0 0 24 24">
                                                                <path
                                                                    d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                                                <circle cx="12" cy="12" r="3"/>
                                                            </svg>
                                                        </a>
                                                        <a href="{{ $doc['url'] }}" download="{{ $doc['name'] }}"
                                                           class="action-link" title="Download">
                                                            <svg width="16" height="16" fill="none"
                                                                 stroke="currentColor" stroke-width="2"
                                                                 viewBox="0 0 24 24">
                                                                <path
                                                                    d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
                                                            </svg>
                                                        </a>
                                                        <button type="button"
                                                                class="action-link delete-existing-doc"
                                                                data-id="{{ $doc['id'] }}" title="Delete"
                                                                style="background:none;border:none;cursor:pointer;color:inherit;">
                                                            <svg width="16" height="16" fill="none"
                                                                 stroke="currentColor" stroke-width="2"
                                                                 viewBox="0 0 24 24">
                                                                <polyline points="3 6 5 6 21 6"/>
                                                                <path d="M19 6l-1 14H6L5 6M10 11v6M14 11v6"/>
                                                                <path d="M9 6V4h6v2"/>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif

                                    {{-- Hidden inputs for doc deletes --}}
                                    <div id="deleteDocInputs"></div>

                                    {{-- New doc upload --}}
                                    <input type="file" id="docInput" name="car_documents[]"
                                           multiple accept=".pdf,.doc,.docx" style="display:none">
                                    <ul class="list-attrach" id="docList">
                                        <li class="item upload" id="docUploadBtn">
                                            <div class="inner">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                                                     viewBox="0 0 30 30" fill="none">
                                                    <path
                                                        d="M15 20.625V12.1875M15 12.1875L18.75 15.9375M15 12.1875L11.25 15.9375M8.43751 24.375C7.0993 24.3765 5.80441 23.9008 4.78539 23.0334C3.76636 22.166 3.08995 20.9637 2.87765 19.6424C2.66534 18.3212 2.93104 16.9675 3.62704 15.8245C4.32303 14.6815 5.40371 13.8241 6.67501 13.4063C6.34839 11.7327 6.68596 9.99778 7.61624 8.5688C8.54653 7.13981 9.99647 6.12902 11.659 5.75046C13.3216 5.37191 15.0662 5.65531 16.5235 6.54067C17.9807 7.42602 19.0361 8.8438 19.4663 10.4938C20.1313 10.2775 20.8435 10.2515 21.5225 10.4186C22.2016 10.5858 22.8203 10.9395 23.3089 11.4398C23.7975 11.9401 24.1365 12.5671 24.2875 13.2499C24.4386 13.9326 24.3957 14.6441 24.1638 15.3038C25.1871 15.6947 26.0413 16.4314 26.5782 17.3862C27.1151 18.341 27.3009 19.4537 27.1033 20.5311C26.9057 21.6086 26.3372 22.5829 25.4963 23.285C24.6555 23.9871 23.5954 24.3727 22.5 24.375H8.43751Z"
                                                        stroke="#FF7101" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round"/>
                                                </svg>
                                                <a href="#" class="upload">Upload file</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                {{-- ========== SUBMIT ========== --}}
                                <div class="group-button-submit">
                                    <button type="button" id="submitListing" class="pre-btn">Update Now</button>
                                    <button type="button" id="saveDraft" class="second-btn">Save as Draft</button>
                                </div>

                            </form>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    </div>

    <div id="submitOverlay" class="submit-overlay d-none">
        <div class="loader-box">
            <div class="loader-circle"></div>

            <div class="success-check d-none">
                <svg width="100" height="100" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="45" fill="none" stroke="#FF7101" stroke-width="5"/>
                    <path d="M30 50 L45 65 L70 35"
                          fill="none"
                          stroke="#FF7101"
                          stroke-width="6"
                          stroke-linecap="round"/>
                </svg>
            </div>

            <p id="loaderText">Creating listing...</p>
        </div>
    </div>
    <div class="modal fade" id="coverDeleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:12px;">

                <div class="modal-header">
                    <h5 class="modal-title">Action Not Allowed</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body text-center">
                    <div style="font-size:40px;">⚠️</div>
                    <p class="mt-3 mb-0">
                        This image is currently set as the cover.<br>
                        Please select another image as cover before deleting it.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Got it
                    </button>
                </div>

            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        const CSRF = document.querySelector('meta[name="csrf-token"]').content;
        const LISTING_ID = {{ $listing->id }};
        const UPDATE_URL = '{{ route('admin.listings.update', $listing->id) }}';
        const MODELS_URL = '{{ route('admin.attributes.models') }}';
        const CURRENT_MODEL_ID = {{ $listing->model_id ?? 'null' }};

        // ──────────────────────────────────────────
        // 1. MAKE → MODEL AJAX  (pre-select current)
        // ──────────────────────────────────────────
        function loadModels(makeId, selectModelId = null) {
            const modelSelect = document.getElementById('modelSelect');
            modelSelect.innerHTML = '<option value="">Loading...</option>';
            if (!makeId) {
                modelSelect.innerHTML = '<option value="">Select Model</option>';
                return;
            }

            fetch(`${MODELS_URL}?make_id=${makeId}`, {
                headers: {'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json'}
            })
                .then(r => r.json())
                .then(data => {
                    modelSelect.innerHTML = '<option value="">Select Model</option>';
                    data.forEach(m => {
                        const selected = selectModelId && m.id == selectModelId ? 'selected' : '';
                        modelSelect.innerHTML += `<option value="${m.id}" ${selected}>${m.name}</option>`;
                    });
                    // reinit nice-select if used
                    if (typeof NiceSelect !== 'undefined') NiceSelect.bind(modelSelect, {searchable: true});
                });
        }

        const makeSelect = document.getElementById('makeSelect');
        if (makeSelect.value) loadModels(makeSelect.value, CURRENT_MODEL_ID);

        makeSelect.addEventListener('change', function () {
            loadModels(this.value);
        });

        // ──────────────────────────────────────────
        // 2. EXISTING IMAGES — delete / set cover
        // ──────────────────────────────────────────
        let deletedImageIds = [];
        let currentCoverExistingId = document.getElementById('coverExistingId').value || null;
        document.querySelectorAll('.delete-existing-img').forEach(btn => {
            btn.addEventListener('click', function () {
                const id = this.dataset.id;

                // Agar ye current cover hai, to delete mat hone do
                if (currentCoverExistingId == id) {

                    const modal = new bootstrap.Modal(document.getElementById('coverDeleteModal'));
                    modal.show();

                    return;
                }

                const item = document.getElementById(`existing-img-${id}`);
                item.classList.toggle('marked-delete');

                if (item.classList.contains('marked-delete')) {
                    deletedImageIds.push(id);
                } else {
                    deletedImageIds = deletedImageIds.filter(x => x !== id);
                }
                syncDeleteImageInputs();
            });
        });
        document.querySelectorAll('.set-existing-cover').forEach(btn => {
            btn.addEventListener('click', function () {
                const id = this.dataset.id;
                // Skip if marked for delete
                if (document.getElementById(`existing-img-${id}`).classList.contains('marked-delete')) return;

                currentCoverExistingId = id;
                document.getElementById('coverExistingId').value = id;

                // Update UI
                document.querySelectorAll('.existing-media-item').forEach(el => {
                    el.querySelector('.cover-badge')?.classList.add('d-none');
                    el.querySelector('.cover-badge')?.textContent === 'Cover' &&
                    (el.querySelector('.cover-badge').textContent = '');
                    const starSvg = el.querySelector('.set-existing-cover svg');
                    if (starSvg) starSvg.setAttribute('fill', 'none');
                });

                const badge = document.getElementById(`cover-badge-${id}`);
                if (badge) {
                    badge.textContent = 'Cover';
                    badge.classList.remove('d-none');
                }
                const starSvg = this.querySelector('svg');
                if (starSvg) starSvg.setAttribute('fill', 'currentColor');
            });
        });

        function syncDeleteImageInputs() {
            const container = document.getElementById('deleteImageInputs');
            container.innerHTML = '';
            deletedImageIds.forEach(id => {
                const inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = 'delete_images[]';
                inp.value = id;
                container.appendChild(inp);
            });
        }

        // ──────────────────────────────────────────
        // 3. NEW IMAGES (same as create)
        // ──────────────────────────────────────────
        let selectedImages = [];
        let newCoverIndex = -1; // -1 means no new image selected as cover

        document.getElementById('selectPhotosBtn').addEventListener('click', e => {
            e.preventDefault();
            document.getElementById('imageInput').click();
        });

        document.getElementById('imageInput').addEventListener('change', function () {
            addImages(Array.from(this.files));
            this.value = '';
        });

        const dropZone = document.getElementById('imageDropZone');
        dropZone.addEventListener('dragover', e => {
            e.preventDefault();
            dropZone.classList.add('dragover');
        });
        dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
        dropZone.addEventListener('drop', e => {
            e.preventDefault();
            dropZone.classList.remove('dragover');
            addImages(Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/')));
        });

        function addImages(files) {
            files.forEach(file => {
                if (selectedImages.length >= 10) return;
                const reader = new FileReader();
                reader.onload = e => {
                    selectedImages.push({file, preview: e.target.result});
                    renderImagePreviews();
                };
                reader.readAsDataURL(file);
            });
        }

        function renderImagePreviews() {
            const container = document.getElementById('imagePreviews');
            container.innerHTML = '';

            selectedImages.forEach((img, index) => {
                const isCover = index === newCoverIndex;
                const div = document.createElement('div');
                div.className = 'item' + (isCover ? ' is-cover' : '');
                div.innerHTML = `
                <img src="${img.preview}" alt="preview">
                <button type="button" class="set-cover-btn" data-index="${index}" title="Set as cover (new)">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                         fill="${isCover ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2">
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                    </svg>
                </button>
                ${isCover ? '<span class="cover-badge">Cover (new)</span>' : ''}
                <button type="button" class="delete-img" data-index="${index}">&times;</button>
            `;
                container.appendChild(div);
            });

            container.querySelectorAll('.set-cover-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    newCoverIndex = parseInt(this.dataset.index);
                    // Clear existing cover selection when new image is chosen as cover
                    currentCoverExistingId = null;
                    document.getElementById('coverExistingId').value = '';
                    renderImagePreviews();
                });
            });

            container.querySelectorAll('.delete-img').forEach(btn => {
                btn.addEventListener('click', function () {
                    const idx = parseInt(this.dataset.index);
                    selectedImages.splice(idx, 1);
                    if (selectedImages.length === 0) {
                        newCoverIndex = -1;
                    } else if (idx < newCoverIndex) {
                        newCoverIndex--;
                    } else if (idx === newCoverIndex) {
                        newCoverIndex = -1;
                    }
                    renderImagePreviews();
                });
            });
        }

        // ──────────────────────────────────────────
        // 4. EXISTING DOCUMENTS — view / download / delete
        // ──────────────────────────────────────────
        let deletedDocIds = [];

        document.querySelectorAll('.delete-existing-doc').forEach(btn => {
            btn.addEventListener('click', function () {
                const id = this.dataset.id;
                const item = document.getElementById(`existing-doc-${id}`);
                item.classList.toggle('marked-delete');

                if (item.classList.contains('marked-delete')) {
                    deletedDocIds.push(id);
                } else {
                    deletedDocIds = deletedDocIds.filter(x => x !== id);
                }
                syncDeleteDocInputs();
            });
        });

        function syncDeleteDocInputs() {
            const container = document.getElementById('deleteDocInputs');
            container.innerHTML = '';
            deletedDocIds.forEach(id => {
                const inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = 'delete_documents[]';
                inp.value = id;
                container.appendChild(inp);
            });
        }

        // ──────────────────────────────────────────
        // 5. NEW DOCUMENTS (same as create)
        // ──────────────────────────────────────────
        let selectedDocs = [];

        document.getElementById('docUploadBtn').addEventListener('click', e => {
            e.preventDefault();
            document.getElementById('docInput').click();
        });

        document.getElementById('docInput').addEventListener('change', function () {
            Array.from(this.files).forEach(file => selectedDocs.push(file));
            renderDocList();
            this.value = '';
        });

        function renderDocList() {
            const list = document.getElementById('docList');
            list.querySelectorAll('.doc-item').forEach(el => el.remove());
            const uploadBtn = document.getElementById('docUploadBtn');

            selectedDocs.forEach((doc, index) => {
                const fileURL = URL.createObjectURL(doc);
                const fileExt = doc.name.split('.').pop().toUpperCase();
                const li = document.createElement('li');
                li.className = 'item doc-item';
                li.innerHTML = `
                <button type="button" class="delete-doc" data-index="${index}">&times;</button>
                <div class="doc-icon">
                    <svg width="40" height="40" viewBox="0 0 60 60" fill="none">
                        <path d="M53.625 4.40731V55.5926C53.625 56.2947 53.3461 56.9679 52.8497 57.4644C52.3533 57.9608 51.68 58.2397 50.9779 58.2397H9.02206C8.32002 58.2397 7.64673 57.9608 7.15031 57.4644C6.65389 56.9679 6.375 56.2947 6.375 55.5926V12.3838H14.3603C15.0623 12.3838 15.7356 12.1049 16.232 11.6085C16.7285 11.1121 17.0074 10.4388 17.0074 9.73672V1.76025H50.9779C51.68 1.76025 52.3533 2.03914 52.8497 2.53556C53.3461 3.03198 53.625 3.70527 53.625 4.40731Z" fill="#E9EDF4"/>
                        <rect x="3" y="32" width="54" height="17" rx="3" fill="#FF7101"/>
                        <text x="30" y="44" text-anchor="middle" fill="white" font-size="10" font-weight="bold" font-family="sans-serif">${fileExt}</text>
                    </svg>
                </div>
                <span class="doc-name" title="${doc.name}">${doc.name}</span>
                <div class="doc-actions">
                    <a href="${fileURL}" target="_blank" class="action-link" title="View">
                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                    </a>
                    <a href="${fileURL}" download="${doc.name}" class="action-link" title="Download">
                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
                    </a>
                </div>
            `;
                list.insertBefore(li, uploadBtn);
            });

            list.querySelectorAll('.delete-doc').forEach(btn => {
                btn.onclick = function () {
                    selectedDocs.splice(parseInt(this.dataset.index), 1);
                    renderDocList();
                };
            });
        }

        // ──────────────────────────────────────────
        // 6. SUBMIT
        // ──────────────────────────────────────────
        function submitForm(status) {
            document.querySelectorAll('.err').forEach(el => el.textContent = '');


            // 2. Check karein ke kya koi cover selected hai (Purana ya Naya)
            const hasExistingCover = document.getElementById('coverExistingId').value !== '';
            const hasNewCover = newCoverIndex >= 0;

            if (!hasExistingCover && !hasNewCover) {
                // Alert ki jagah span mein error show karein
                const errorSpan = document.getElementById('err-cover_image');
                if (errorSpan) {
                    errorSpan.textContent = "Cover Image is required! Please select a cover image.";
                    // Scroll karke error tak le jayein taake user ko nazar aaye
                    errorSpan.scrollIntoView({behavior: 'smooth', block: 'center'});
                }
                return; // Form submit rok dein
            }
            const formData = new FormData(document.getElementById('listingForm'));

            formData.delete('car_images[]');
            formData.delete('car_documents[]');


            // New images
            selectedImages.forEach(img => formData.append('car_images[]', img.file));

            // New cover (from new images)
            if (newCoverIndex >= 0 && selectedImages[newCoverIndex]) {
                formData.append('cover_index', newCoverIndex);

                formData.delete('cover_existing_id');
            }

            // New docs
            selectedDocs.forEach(doc => formData.append('car_documents[]', doc));

            formData.set('status', status);
            formData.set('_method', 'PUT');

            showLoader();

            fetch(UPDATE_URL, {
                method: 'POST',   // Laravel method spoofing via _method=PUT
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': CSRF,
                    'Accept': 'application/json',
                },
                body: formData,
            })
                .then(r => r.json())
                .then(json => {
                    if (json.success) {
                        showSuccess();
                        setTimeout(() => {
                            window.location.replace(json.redirect);
                        }, 1200);
                    } else {
                        hideLoader();
                        const errors = json.errors || {};
                        Object.keys(errors).forEach(key => {
                            const el = document.getElementById(`err-${key}`);
                            if (el) el.textContent = errors[key][0];
                        });
                        const firstKey = Object.keys(errors)[0];
                        if (firstKey) {
                            const errorEl = document.getElementById(`err-${firstKey}`);
                            if (errorEl) {
                                errorEl.scrollIntoView({behavior: 'smooth', block: 'center'});
                                const input = errorEl.previousElementSibling;
                                if (input) {
                                    input.focus();
                                    input.classList.add('input-error');
                                    setTimeout(() => input.classList.remove('input-error'), 1500);
                                }
                            }
                        }
                    }
                })
                .catch(() => {
                    hideLoader();
                    alert('Something went wrong!');
                });
        }

        document.getElementById('submitListing').addEventListener('click', () => submitForm('active'));
        document.getElementById('saveDraft').addEventListener('click', () => submitForm('draft'));

        // ──────────────────────────────────────────
        // 7. LOADER helpers
        // ──────────────────────────────────────────
        function showLoader() {
            document.getElementById('submitOverlay').classList.remove('d-none');
            document.querySelector('.loader-circle').style.display = 'block';
            document.querySelector('.success-check').classList.add('d-none');
            document.getElementById('loaderText').innerText = 'Updating listing...';
        }

        function showSuccess() {
            document.querySelector('.loader-circle').style.display = 'none';
            document.querySelector('.success-check').classList.remove('d-none');
            document.getElementById('loaderText').innerText = 'Listing Updated!';
        }

        function hideLoader() {
            document.getElementById('submitOverlay').classList.add('d-none');
        }
    </script>
@endpush