@extends('admin.layout.app')
@section('title', 'Add New 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">Add listing</h1>

                            <form id="listingForm" enctype="multipart/form-data">
                                @csrf

                                {{-- ========== UPLOAD PHOTO ========== --}}
                                <div class="tfcl-add-listing upload-photo">
                                    <h3>Upload Photo</h3>
                                    <div class="upload-media" 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>
                                                Select 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-images"></span>
                                </div>

                                {{-- ========== CAR DETAILS ========== --}}
                                <div class="tfcl-add-listing car-details">
                                    <h3>Car details</h3>
                                    <div class="form-group">
                                        <label>VIN Number</label>
                                        <div style="display:flex; gap:8px; align-items:flex-start;">
                                            <div style="flex:1;">
                                                <input type="text" class="form-control" name="vin_number"
                                                       id="vinInput"
                                                       placeholder="Enter 17 Digit" maxlength="17"
                                                       autocomplete="off" style="text-transform:uppercase;">
                                                <span class="err" id="err-vin_number"></span>
                                                <span id="vinStatus"
                                                      style="font-size:12px; margin-top:4px; display:block;"></span>
                                            </div>
                                            <button type="button" id="vinDecodeBtn"
                                                    style="white-space:nowrap; padding:10px 16px; background:#FF7101; color:#fff;
                       border:none; border-radius:8px; font-size:13px; cursor:pointer;
                       height:45px; display:flex; align-items:center; gap:6px;">
                                                <svg id="vinBtnIcon" xmlns="http://www.w3.org/2000/svg" width="14"
                                                     height="14"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2.5">
                                                    <circle cx="11" cy="11" r="8"/>
                                                    <path d="m21 21-4.35-4.35"/>
                                                </svg>
                                                <span id="vinBtnText">Decode VIN</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Dealership Name</label>
                                        <div>
                                            <div>
                                                <input type="text" class="form-control" name="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"
                                               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($attributes['make'] as $attr)
                                                    <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                                @endforeach
                                            </select>
                                            <span class="err" id="err-make_id"></span>
                                        </div>
                                        <div class="form-group">
                                            <label>Model *</label>
                                            <select class="nice-select form-control" name="model_id"
                                                    id="modelSelect">
                                                <option value="">Select Model</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($attributes['body_type'] as $attr)
                                                    <option value="{{ $attr->id }}">{{ $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"
                                                   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($attributes['condition'] as $attr)
                                                    <option value="{{ $attr->id }}">{{ $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"
                                                   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"
                                                       placeholder="ex 5000">
                                                <select class="form-control" name="mileage_unit"
                                                        style="max-width: 80px;">
                                                    <option value="mi" selected>mi</option>
                                                    {{--                                                        <option value="km">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($attributes['transmission'] as $attr)
                                                    <option value="{{ $attr->id }}">{{ $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"--}}
                                        {{--                                                       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($attributes['drive_type'] as $attr)
                                                    <option value="{{ $attr->id }}">{{ $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"
                                                   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($attributes['cylinders'] as $attr)
                                                    <option value="{{ $attr->name }}">{{ $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($attributes['fuel_type'] as $attr)
                                                    <option value="{{ $attr->id }}">{{ $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($attributes['doors'] as $attr)
                                                    <option value="{{ $attr->name }}">{{ $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($attributes['seats'] as $attr)
                                                    <option value="{{ $attr->name }}">{{ $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($attributes['color'] as $attr)
                                                    <option value="{{ $attr->id }}">{{ $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($attributes['city_mpg'] as $attr)
                                                    <option value="{{ $attr->name }}">{{ $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($attributes['engine'] as $eng)
                                                    <option value="{{ $eng->id }}">{{ $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($attributes['exterior_color'] as $ext_col)
                                                    <option value="{{ $ext_col->id }}">{{ $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($attributes['interior_color'] as $int_col)
                                                    <option value="{{ $int_col->id }}">{{ $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"
                                                  placeholder="Your description" rows="5"></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 }}">
                                                        <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"
                                                   placeholder="Your price">
                                        </div>
                                        <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"
                                               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"
                                                       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"
                                                       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"
                                                       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"
                                               placeholder="YouTube/Vimeo URL">
                                        <span class="err" id="err-video_url"></span>
                                    </div>
                                </div>

                                {{-- ========== ATTACHMENTS ========== --}}
                                <div class="tfcl-add-listing car-attr">
                                    <h3>Attachments</h3>
                                    <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">List Now</button>
                                    <button type="button" id="saveDraft" class="second-btn">Save & Preview</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>

@endsection
@push('scripts')
    <script>
        const CSRF = document.querySelector('meta[name="csrf-token"]').content;

        // ========== IMAGE HANDLING ==========
        let selectedImages = []; // {file, preview}
        let coverIndex = 0; // index of cover image, default first

        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');
            const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
            addImages(files);
        });

        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});
                    // Auto-set cover to first image added
                    if (selectedImages.length === 1) coverIndex = 0;
                    renderImagePreviews();
                };
                reader.readAsDataURL(file);
            });
        }

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

            selectedImages.forEach((img, index) => {
                const div = document.createElement('div');
                div.className = 'item' + (index === coverIndex ? ' is-cover' : '');
                div.innerHTML = `
            <img src="${img.preview}" alt="preview">
            <button type="button" class="set-cover-btn" data-index="${index}" title="Set as cover">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="${index === coverIndex ? '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>
            ${index === coverIndex ? '<span class="cover-badge">Cover</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 () {
                    coverIndex = parseInt(this.dataset.index);
                    renderImagePreviews();
                });
            });

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

        function buildFormData(formData) {
            selectedImages.forEach((img, index) => {
                formData.append('car_images[]', img.file);

                // optional: mark cover via index
                if (index === coverIndex) {
                    formData.append('cover_index', index);
                }
            });

            return formData;
        }

        // ========== MAKE → MODEL AJAX ==========
        document.getElementById('makeSelect').addEventListener('change', function () {
            const makeId = this.value;
            const modelSelect = document.getElementById('modelSelect');
            modelSelect.innerHTML = '<option value="">Loading...</option>';

            if (!makeId) {
                modelSelect.innerHTML = '<option value="">Select Model</option>';
                return;
            }

            fetch(`{{ route('admin.attributes.models') }}?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 => {
                        modelSelect.innerHTML += `<option value="${m.id}">${m.name}</option>`;
                    });
                });
        });

        // ========== DOCUMENTS ==========
        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);
            });

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

        async function generateVinPdf(data, vin) {
            const {jsPDF} = window.jspdf;
            const doc = new jsPDF();

            // PDF Content Design
            doc.setFontSize(20);
            doc.text("Vehicle Inspection Report", 20, 20);
            doc.setFontSize(12);
            doc.text(`VIN: ${vin}`, 20, 30);
            doc.text(`Generated on: ${new Date().toLocaleString()}`, 20, 40);
            doc.line(20, 45, 190, 45);

            let y = 55;
            doc.setFontSize(10);

            // Sirf kaam ka data PDF mein dalne ke liye
            Object.entries(data).forEach(([key, value]) => {
                if (value && y < 280) { // Page limit check
                    doc.text(`${key}: ${value}`, 20, y);
                    y += 7;
                }
            });

            // PDF ko "Blob" (File format) mein convert karein
            const pdfBlob = doc.output('blob');
            const pdfFile = new File([pdfBlob], `VIN-Report-${vin}.pdf`, {type: 'application/pdf'});

            // Aapki existing list mein add karein
            selectedDocs.push(pdfFile);
            renderDocList(); // List refresh karein
        }

        function submitForm(status) {

            document.querySelectorAll('.err').forEach(el => el.textContent = '');

            const formData = new FormData(document.getElementById('listingForm'));

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

            selectedImages.forEach(img => formData.append('car_images[]', img.file));
            if (selectedImages.length > 0) {
                formData.append('cover_index', coverIndex);
            }
            selectedDocs.forEach(doc => formData.append('car_documents[]', doc));

            formData.set('status', status);

            // Auto-created options backend ko bhejna
            if (autoCreatedOptions.length > 0) {
                formData.set('auto_created_options', JSON.stringify(autoCreatedOptions));
            }
            showLoader();

            fetch('{{ route('admin.listings.store') }}', {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': CSRF,
                    'Accept': 'application/json',
                },
                body: formData,
            })
                .then(r => r.json())
                .then(json => {

                    if (json.success) {

                        showSuccess();
                        resetFormState();

                        setTimeout(() => {
                            window.location.replace(json.redirect);
                        }, 1200);

                    } else {

                        hideLoader();

                        const errors = json.errors || {};

                        // 🔥 IMAGE ERRORS MERGE
                        let imageError = '';

                        if (errors.car_images) {
                            imageError = errors.car_images[0];
                        }
                        Object.keys(errors).forEach(key => {
                            if (key.startsWith('car_images.')) {
                                imageError = imageError
                                    ? imageError
                                    : errors[key][0];
                            }
                        });
                        if (errors.cover_index) {
                            imageError = imageError
                                ? imageError + ' & ' + errors.cover_index[0]
                                : errors.cover_index[0];
                        }

                        if (imageError) {
                            const el = document.getElementById('err-images');
                            if (el) el.textContent = imageError;
                        }

                        // ✅ NORMAL ERRORS (ONLY ONCE)
                        Object.keys(errors).forEach(key => {
                            // car_images, car_images.0, car_images.1 sab skip karo
                            if (key === 'car_images' || key === 'cover_index' || key.startsWith('car_images.')) return;

                            const el = document.getElementById(`err-${key}`);
                            if (el) el.textContent = errors[key][0];
                        });

                        // 🔥 SCROLL FIX (important)
                        let firstErrorKey = Object.keys(errors)[0];

                        if (
                            firstErrorKey === 'car_images' ||
                            firstErrorKey === 'cover_index' ||
                            firstErrorKey.startsWith('car_images.')  // ← yeh add karo
                        ) {
                            firstErrorKey = 'images';
                        }

                        const errorEl = document.getElementById(`err-${firstErrorKey}`);

                        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!');
                });
        }

        function resetFormState() {

            // form reset
            document.getElementById('listingForm').reset();

            // clear images
            selectedImages = [];
            renderImagePreviews();

            // clear docs
            selectedDocs = [];
            renderDocList();

            // clear errors
            document.querySelectorAll('.err').forEach(el => el.textContent = '');
        }

        function hideLoader() {
            document.getElementById('submitOverlay').classList.add('d-none');
        }

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

        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 = 'Creating listing...';
        }

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

        // ========== VIN DECODER (NHTSA) ==========

        // ========== VIN DECODER - AUTO CREATE OPTIONS ==========

        const VIN_FIELD_MAP = {
            'Make': {type: 'make'},
            'Model': {type: 'model'},
            'Model Year': {type: 'input', field: 'year'},
            'Body Class': {type: 'select', field: 'body_type'},
            'Fuel Type - Primary': {type: 'select', field: 'fuel_type'},
            'Displacement (L)': {type: 'input', field: 'engine_size', suffix: 'L'},
            'Engine Number of Cylinders': {type: 'select', field: 'cylinders'},
            'Transmission Style': {type: 'select', field: 'transmission'},
            'Number of Doors': {type: 'select', field: 'doors'},
            'Drive Type': {type: 'select', field: 'drive_type'},
        };

        let autoCreatedOptions = [];
        let currentMakeTempId = null; // model ke liye parent reference

        document.getElementById('vinDecodeBtn').addEventListener('click', decodeVIN);

        document.getElementById('vinInput').addEventListener('input', function () {
            this.value = this.value.toUpperCase().replace(/[^A-HJ-NPR-Z0-9]/g, '');
            setVinStatus('', '');
        });

        document.getElementById('vinInput').addEventListener('blur', function () {
            if (this.value.length === 17) decodeVIN();
        });

        function setVinStatus(msg, color) {
            const el = document.getElementById('vinStatus');
            el.textContent = msg;
            el.style.color = color;
        }

        function setVinBtnLoading(loading) {
            document.getElementById('vinBtnText').textContent = loading ? 'Decoding...' : 'Decode VIN';
            document.getElementById('vinDecodeBtn').disabled = loading;
            document.getElementById('vinBtnIcon').innerHTML = loading
                ? `<circle cx="12" cy="12" r="10" stroke="rgba(255,255,255,0.4)" stroke-width="2.5" fill="none"/>
           <path d="M12 2a10 10 0 0 1 10 10" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round">
               <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.8s" repeatCount="indefinite"/>
           </path>`
                : `<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>`;
        }

        async function decodeVIN() {
            const vin = document.getElementById('vinInput').value.trim();
            if (vin.length !== 17) {
                setVinStatus('Please enter a valid 17-character VIN.', '#e74c3c');
                return;
            }

            setVinBtnLoading(true);
            setVinStatus('Fetching vehicle data...', '#888');

            // Reset previous auto-creates
            autoCreatedOptions = [];
            currentMakeTempId = null;
            window._vinModel = null;

            try {
                const res = await fetch(`https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVin/${vin}?format=json`);
                const data = await res.json();
                if (!data.Results) throw new Error('No results');

                // Clean map
                const nhtsaMap = {};
                data.Results.forEach(item => {
                    if (item.Value && item.Value.trim() && item.Value !== 'Not Applicable') {
                        nhtsaMap[item.Variable] = item.Value.trim();
                    }
                });
                if (nhtsaMap['Error Code'] && nhtsaMap['Error Code'] !== "0") {
                    setVinStatus('Invalid VIN: ' + nhtsaMap['Error Text'], '#e74c3c');
                    return; // Agay ka process rok dein kyunki data sahi nahi hai
                }
                if (nhtsaMap['Model']) {
                    window._vinModel = nhtsaMap['Model'];
                }
                let filled = 0, autoCreated = 0;

                for (const [nhtsaKey, config] of Object.entries(VIN_FIELD_MAP)) {
                    const val = nhtsaMap[nhtsaKey];
                    if (!val) continue;

                    if (config.type === 'make') {
                        const r = await fillMakeField(val);
                        filled += r.filled;
                        autoCreated += r.created;

                    } else if (config.type === 'model') {
                        continue;

                    } else if (config.type === 'input') {
                        const input = document.querySelector(`[name="${config.field}"]`);
                        if (input) {
                            input.value = config.suffix
                                ? `${parseFloat(val).toFixed(1)}${config.suffix}`
                                : val;
                            highlightFilled(input);
                            filled++;
                        }

                    } else if (config.type === 'select') {
                        const r = fillSelectField(config.field, val);
                        filled += r.filled;
                        autoCreated += r.created;
                    }
                }

                // Auto-fill title
                const make = nhtsaMap['Make'] ? capitalize(nhtsaMap['Make']) : '';
                const model = nhtsaMap['Model'] ? capitalize(nhtsaMap['Model']) : '';
                const year = nhtsaMap['Model Year'] || '';
                const titleInput = document.querySelector('[name="title"]');
                if (titleInput && !titleInput.value && make && model && year) {
                    titleInput.value = `${year} ${make} ${model}`;
                    highlightFilled(titleInput);
                    filled++;
                }
                await generateVinPdf(nhtsaMap, vin);
                const statusColor = autoCreated > 0 ? '#2980b9' : '#27ae60';
                let statusMsg = `✓ ${filled} fields filled.`;
                if (autoCreated > 0) {
                    statusMsg += ` ${autoCreated} new value(s) auto-added to dropdowns.`;
                }
                statusMsg += ' Review and adjust as needed.';
                setVinStatus(statusMsg, statusColor);


            } catch (e) {
                setVinStatus('Could not decode VIN. Check the number and try again.', '#e74c3c');
            } finally {
                setVinBtnLoading(false);
            }
        }

        // ---- Make field fill ----
        async function fillMakeField(makeName) {
            const makeSelect = document.getElementById('makeSelect');
            let matched = fuzzyMatchOption(makeSelect, makeName);
            let created = 0;

            if (matched) {
                // Existing make mila — temp id reset
                currentMakeTempId = null;
            } else {
                // Naya make create karo (frontend mein)
                const cleanName = capitalize(makeName);
                const tempId = 'new__make__' + cleanName.toLowerCase().replace(/\s+/g, '_');
                addOptionToSelect(makeSelect, tempId, cleanName, true);
                autoCreatedOptions.push({type: 'make', name: cleanName, temp_id: tempId});
                currentMakeTempId = tempId;
                matched = tempId;
                created = 1;
            }

            makeSelect.value = matched;
            highlightFilled(makeSelect);
            refreshNiceSelect(makeSelect);

            // Models load karo (real make) ya sirf model option add karo (new make)
            await loadModelsAndFill(matched);

            return {filled: 1, created};
        }

        // ---- Models load + fill ----
        async function loadModelsAndFill(makeId) {
            const modelSelect = document.getElementById('modelSelect');
            const isNewMake = String(makeId).startsWith('new__');

            // 1. Dropdown ko reset karein
            modelSelect.innerHTML = '<option value="">Select Model</option>';

            if (!isNewMake) {
                // Existing Make: Database se models fetch karein
                try {
                    const response = await fetch(`{{ route('admin.attributes.models') }}?make_id=${makeId}`, {
                        headers: {'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json'}
                    });
                    const data = await response.json();

                    let options = '<option value="">Select Model</option>';
                    data.forEach(m => {
                        options += `<option value="${m.id}">${m.name}</option>`;
                    });
                    modelSelect.innerHTML = options;
                } catch (error) {
                    console.error("Models fetch failed:", error);
                }
            }

            // 2. AB MODEL FILL KAREIN (Important: Ye block New aur Old dono makes ke liye chalega)
            if (window._vinModel) {
                const modelName = window._vinModel;

                // Pehle check karein kya model list mein maujood hai?
                let matchedModel = fuzzyMatchOption(modelSelect, modelName);

                if (!matchedModel) {
                    // Agar model nahi mila (Naya Make hai ya purane Make ka naya Model hai)
                    const cleanModel = capitalize(modelName);
                    const tempModelId = 'new__model__' + cleanModel.toLowerCase().replace(/\s+/g, '_');

                    // Model ko dropdown mein add karein (✦ ke saath)
                    addOptionToSelect(modelSelect, tempModelId, cleanModel, true);

                    // Entry record karein taake form submit pe save ho sake
                    const entry = {
                        type: 'model',
                        name: cleanModel,
                        temp_id: tempModelId,
                    };

                    if (isNewMake) {
                        entry.parent_temp_id = makeId; // Naya Make + Naya Model
                    } else {
                        entry.parent_id = makeId;      // Existing Make + Naya Model
                    }

                    autoCreatedOptions.push(entry);
                    matchedModel = tempModelId;
                }

                // Dropdown mein model select karein
                modelSelect.value = matchedModel;
                highlightFilled(modelSelect);
                window._vinModel = null; // Clear kar dein
            }

            // NiceSelect refresh lazmi hai warna UI update nahi hogi
            refreshNiceSelect(modelSelect);
        }


        // ---- Attribute select field fill ----
        function fillSelectField(fieldNameOrId, searchText) {
            const selectEl = document.querySelector(`[name="attributes[${fieldNameOrId}]"]`)
                || document.getElementById(`${fieldNameOrId}Select`)
                || document.querySelector(`[name="${fieldNameOrId}"]`);

            if (!selectEl) return {filled: 0, created: 0};

            let matched = fuzzyMatchOption(selectEl, searchText);
            let created = 0;

            if (!matched) {
                const cleanName = capitalize(searchText);
                const tempId = 'new__attr__' + fieldNameOrId + '__' + cleanName.toLowerCase().replace(/\s+/g, '_');
                addOptionToSelect(selectEl, tempId, cleanName, true);
                autoCreatedOptions.push({
                    type: 'attribute',
                    field: fieldNameOrId,
                    name: cleanName,
                    temp_id: tempId,
                });
                matched = tempId;
                created = 1;
            }

            selectEl.value = matched;
            highlightFilled(selectEl);
            refreshNiceSelect(selectEl);
            return {filled: 1, created};
        }

        // ---- Option DOM add ----
        function addOptionToSelect(selectEl, value, text, isNew = false) {
            // Duplicate check
            if (selectEl.querySelector(`option[value="${value}"]`)) return;

            const opt = document.createElement('option');
            opt.value = value;
            opt.textContent = isNew ? `✦ ${text}` : text;
            opt.dataset.isNew = isNew ? 'true' : 'false';
            if (isNew) {
                opt.style.color = '#2980b9';
                opt.style.fontStyle = 'italic';
            }
            selectEl.appendChild(opt);
        }

        // ---- Fuzzy match (strips auto-add prefix) ----
        function fuzzyMatchOption(selectEl, searchText) {
            const search = searchText.toLowerCase().trim();
            let bestVal = null, bestScore = 0;

            Array.from(selectEl.options).forEach(opt => {
                if (!opt.value) return;
                // Clean text (strip ✦ prefix for matching)
                const optText = opt.text.toLowerCase().replace(/^✦\s*/, '').trim();

                if (optText === search) {
                    bestVal = opt.value;
                    bestScore = 3;
                    return;
                }
                if (optText.includes(search) || search.includes(optText)) {
                    if (2 > bestScore) {
                        bestVal = opt.value;
                        bestScore = 2;
                    }
                }
            });
            return bestVal;
        }

        // ---- Helpers ----
        function refreshNiceSelect(el) {
            if (typeof $ !== 'undefined' && $.fn.niceSelect) {
                $(el).niceSelect('update');
            }
        }

        function highlightFilled(el) {
            el.style.transition = 'background 0.4s';
            el.style.background = '#fff3e0';
            setTimeout(() => el.style.background = '', 2500);
        }

        function capitalize(str) {
            return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
        }

        // Make → Model change (existing functionality preserve)
        document.getElementById('makeSelect').addEventListener('change', function () {
            const makeId = this.value;
            const modelSelect = document.getElementById('modelSelect');
            modelSelect.innerHTML = '<option value="">Loading...</option>';

            if (!makeId || String(makeId).startsWith('new__')) {
                modelSelect.innerHTML = '<option value="">Select Model</option>';
                refreshNiceSelect(modelSelect);
                return;
            }

            fetch(`{{ route('admin.attributes.models') }}?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 => {
                        modelSelect.innerHTML += `<option value="${m.id}">${m.name}</option>`;
                    });
                    refreshNiceSelect(modelSelect);
                });
        });
    </script>
@endpush