@extends('frontend.layouts.app')
@section('title')
    {{ $title ?? 'Page header' }}
@endsection

@section('meta')
    <meta property="og:title" content="{{ $og_title }}" />
    <meta property="og:description" content="{{ $og_description }}" />
    <meta property="og:image" content="{{ asset($og_image) }}" />
@endsection

@push('style')
    <link rel="stylesheet" href="{{ asset('assets/css/image-uploader.min.css ') }}">
@endpush

@section('content')
    <!-- ======================= breadcrumb start  ============================ -->
    @include('frontend.layouts.includes.breadcrumb', [
        'links' => [[$title => route('user.ads.update', ['id' => $ads?->id])], [$ads?->title => '']],
    ])
    <!-- ======================= breadcrumb end  ============================ -->

    <!-- ======================= ad post Start  ============================ -->
    <div class="ad_post_sec pt-2 pb-5">
        <div class="container">
            <div class="bg-light rounded-1 shadow-sm">
                <div class="listing_heading p-3 border-bottom d-flex justify-content-between align-items-center">
                    <h4 class="title m-0">Fill in the details</h4>
                    <a href="{{ route('user.ads') }}" class="btn btn-light btn-sm"><i class="fas fa-arrow-left"></i></a>
                </div>
                <div class="row d-flex align-items-center justify-content-center p-3 py-5">
                    <div class="col-lg-7">
                        <form action="{{ route('user.ads.update', $ads->id) }}" method="post"
                            enctype="multipart/form-data">
                            <input type="hidden" name="category_id" value="{{ $ads?->category_id }}">

                            @csrf
                            <div class="mb-4">
                                <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" value="{{ $ads->title }}" name="title" id="title"
                                    class="form-control @error('field_name') border-danger @enderror @error('title') border-danger @enderror"
                                    placeholder="Enter your title" required>
                                @error('title')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="row">
                                <!-- Hidden category input -->
                                <input type="hidden" name="category_id" value="{{ $ads->category_id }}">

                                <!-- Hidden subcategory input -->
                                <input type="hidden" name="subcategory_id" value="{{ $ads->subcategory_id }}">

                                <!-- Hidden region input -->
                                <input type="hidden" name="region_id" value="{{ $ads->region_id }}">

                                <!-- Hidden city input -->
                                <input type="hidden" name="city_id" value="{{ $ads->city_id }}">



                                {{-- <div class="col-md-6 mb-4">
                                    <label class="form-label" for="postcode">Postcode</label>
                                    <input type="text" class="form-control shadow-none" name="postcode" id="postcode"
                                        value="{{ $ads->postcode }}">

                                </div> --}}

                                <div class="col-md-6 mb-4">
                                    <label for="address" class="form-label">Address<span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="address" id="address" class="form-control shadow-none"
                                        placeholder="Location" value="{{ $ads->address }}" required>
                                    {!! $errors->first('address', '<label class="help-block text-danger">:message</label>') !!}
                                </div>

                                {{-- {{ dd($ads?->belongsToCategory) }} --}}
                                @if (!in_array($ads?->belongsToCategory->slug, ['jobs', 'seeking-work-cvs']))
                                    <div class="col-md-6">
                                        <div class="mb-2 mb-lg-4">
                                            <label for="price" class="form-label">Price
                                                <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span class="input-group-text"
                                                    id="price-addon">{{ $setting->currency_symbol }}</span>
                                                <input type="text"
                                                    class="form-control p-2  @error('field_name') border-danger @enderror shadow-none"
                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                                    name="price" id="price" value="{{ $ads->price }}"
                                                    placeholder="Pick a good price" aria-label="Price"
                                                    aria-describedby="price-addon">
                                                {{-- @error('price')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror --}}
                                            </div>

                                            <div class="form-check mt-2">
                                                <input type="hidden" name="negotiable" value="0">
                                                <input class="form-check-input shadow-none" type="checkbox"
                                                    name="negotiable" value="1"
                                                    {{ $ads->negotiable == '1' ? 'checked' : '' }} id="negotiable">
                                                <label class="form-check-label" for="negotiable">
                                                    Negotiable
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                @endif


                                @includeWhen(
                                    $ads?->belongsToCategory->slug == 'jobs',
                                    'user.ads.partials.edit.job')


                                @if (isset($fields) && count($fields) > 0 && $ads?->belongsToCategory->slug != 'jobs')
                                    @php
                                        // Sort fields by order if available
                                        $sortedFields = collect($fields)->sortBy('order')->values()->all();

                                        // Map existing field values for easier lookup
                                        $existingValues = [];
                                        if ($ads->hasManyFields) {
                                            foreach ($ads->hasManyFields as $fv) {
                                                $existingValues[$fv->field_id] = $fv->value;
                                            }
                                        }
                                    @endphp

                                    @php $conditionTextareaShown = false; @endphp

                                    <div id="dynamicFields" class="row">
                                        @foreach ($sortedFields as $field)
                                            @php
                                                $fieldName = 'fields[' . $field['id'] . '][value]';
                                                $fieldTypeName = 'fields[' . $field['id'] . '][type]';

                                                // Fill value: old input > existing record > default field value
                                                $fieldValue = old(
                                                    'fields.' . $field['id'] . '.value',
                                                    $existingValues[$field['id']] ?? ($field['value'] ?? ''),
                                                );

                                                $isRequired = !empty($field['required']) ? 'required' : '';
                                                $options = $field['options'] ?? [];
                                                $placeholder = $field['placeholder'] ?? 'Enter ' . $field['name'];
                                            @endphp

                                            <input type="hidden" name="{{ $fieldTypeName }}"
                                                value="{{ $field['type'] }}">

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    {{ $field['name'] }}
                                                    @if (!empty($field['required']))
                                                        <span class="text-danger">*</span>
                                                    @endif
                                                </label>

                                                @switch($field['type'])
                                                    @case('text')
                                                    @case('number')
                                                        <input type="{{ $field['type'] }}" name="{{ $fieldName }}"
                                                            value="{{ $fieldValue }}" class="form-control"
                                                            placeholder="{{ $placeholder }}" {{ $isRequired }}>
                                                    @break

                                                    @case('brand')
                                                        <select name="brand_id" id="brand_id"
                                                            class="form-control select2 @error('brand_id') is-invalid @enderror"
                                                            {{ $isRequired }}>
                                                            <option value="">-- Select {{ $field['name'] }} --</option>
                                                            @foreach ($brands ?? [] as $brand)
                                                                <option value="{{ $brand->id }}"
                                                                    {{ old('brand_id', $ads->brand_id) == $brand->id ? 'selected' : '' }}>
                                                                    {{ $brand->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @error('brand_id')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    @break

                                                    @case('brand_model')
                                                        <select name="model" id="model"
                                                            value="{{ old('model', $fieldValue) }}"
                                                            class="form-control select2 @error('model') is-invalid @enderror"
                                                            placeholder="{{ $placeholder }}" {{ $isRequired }}>
                                                            <option value="">-- Select {{ $field['name'] }} --</option>
                                                            @foreach ($models as $item)
                                                                <option value="{{ $item->id }}"
                                                                    {{ old('model', $ads->model) == $item->id ? 'selected' : '' }}>
                                                                    {{ $item->name }}</option>
                                                            @endforeach
                                                            <option value="other"
                                                                {{ old('model', $ads->model) == 'other' ? 'selected' : '' }}>Other
                                                            </option>
                                                        </select>
                                                    @break

                                                    @case('textarea')
                                                        <textarea name="{{ $fieldName }}" class="form-control" placeholder="{{ $placeholder }}" {{ $isRequired }}>{{ $fieldValue }}</textarea>
                                                    @break

                                                    @case('select')
                                                        <select name="{{ $fieldName }}" class="form-control select2"
                                                            {{ $isRequired }}>
                                                            <option value="">Select {{ $field['name'] }}</option>
                                                            @foreach ($options as $option)
                                                                @php
                                                                    $optVal = $option['value'] ?? ($option['id'] ?? '');
                                                                    $optLabel =
                                                                        $option['label'] ??
                                                                        ($option['value'] ?? $optVal);
                                                                @endphp
                                                                <option value="{{ $optVal }}" @selected($fieldValue == $optVal)>
                                                                    {{ $optLabel }}</option>
                                                            @endforeach
                                                        </select>
                                                    @break

                                                    @case('radio')
                                                        <div>
                                                            @foreach ($options as $option)
                                                                @php
                                                                    $optVal = $option['value'] ?? ($option['id'] ?? '');
                                                                    $optLabel =
                                                                        $option['label'] ??
                                                                        ($option['value'] ?? $optVal);
                                                                    $optionId =
                                                                        'field_' . $field['id'] . '_' . $loop->index;
                                                                @endphp
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input condition_check" type="radio"
                                                                        name="{{ $fieldName }}" value="{{ $optVal }}"
                                                                        id="{{ $optionId }}" @checked($fieldValue == $optVal)
                                                                        {{ $isRequired }}>
                                                                    <label class="form-check-label"
                                                                        for="{{ $optionId }}">{{ $optLabel }}</label>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                        @if(!$conditionTextareaShown)
                                                                <div id="other_description_wrapper" style="{{ $optVal == 'Other' && $ads->descripe_condition ? 'd-block' : 'd-none' }}">
                                                                    <textarea
                                                                        class="form-control"
                                                                        name="descripe_condition"
                                                                        cols="5"
                                                                        rows="3"
                                                                        placeholder="describe the item’s condition"
                                                                    >{{ old('descripe_condition', $ads->descripe_condition) }}</textarea>
                                                                </div>
                                                            @php $conditionTextareaShown = true; @endphp
                                                            @endif
                                                            @break

                                                    @break

                                                    @case('checkbox')
                                                        @php
                                                            $selectedValues = [];
                                                            if (!empty($fieldValue)) {
                                                                if (is_string($fieldValue)) {
                                                                    $selectedValues =
                                                                        json_decode($fieldValue, true) ?: [];
                                                                } elseif (is_array($fieldValue)) {
                                                                    $selectedValues = $fieldValue;
                                                                }
                                                            }
                                                        @endphp
                                                        <div>
                                                            @foreach ($options as $option)
                                                                @php
                                                                    $optVal = $option['value'] ?? ($option['id'] ?? '');
                                                                    $optLabel =
                                                                        $option['label'] ??
                                                                        ($option['value'] ?? $optVal);
                                                                    $optionId =
                                                                        'field_' . $field['id'] . '_' . $loop->index;
                                                                @endphp
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="{{ $fieldName }}[]" value="{{ $optVal }}"
                                                                        id="{{ $optionId }}" @checked(in_array($optVal, $selectedValues))
                                                                        {{ $isRequired }}>
                                                                    <label class="form-check-label"
                                                                        for="{{ $optionId }}">{{ $optLabel }}</label>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @break

                                                    @default
                                                        <input type="text" name="{{ $fieldName }}"
                                                            value="{{ $fieldValue }}" class="form-control"
                                                            placeholder="{{ $placeholder }}" {{ $isRequired }}>
                                                @endswitch

                                                @error('fields.' . $field['id'] . '.value')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        @endforeach
                                    </div>
                                @endif



                            </div>








                            <div class="mb-2 mb-lg-4">
                                <label for="description" class="form-label w-100">
                                    Description
                                    <span class="text-danger">*</span>
                                    <small class="float-end"><span class="description-length">0</span>/5000</small>
                                </label>

                                <textarea name="description" id="description"
                                    class="details_field form-control @error('description') border-danger @enderror shadow-none"
                                    placeholder="More details = more interested buyers!" maxlength="5000" required rows="5">{{ $ads?->hasOneAdsInfo?->description }}</textarea>
                                @error('description')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <hr>

                            {{-- Thumbnail Image start --}}
                            <div class="col-12 mb-4">
                                <label for="thumbnail" class="form-label">
                                    Thumbnail Image
                                    <span class="text-danger">*</span>
                                    <span style="color: green;">( Preferred image size 830x520px ) 2MB</span>
                                </label>

                                <input type="file" name="thumbnail" id="thumbnail" value=""
                                    class="form-control shadow-none" accept="image/png, image/gif, image/jpeg, image/jpg">

                                <img id="preview" src="{{ asset($ads->thumbnail) }}" class="mt-2" alt=""
                                    width="200">
                                {!! $errors->first('thumbnail', '<label class="help-block text-danger">:message</label>') !!}
                            </div>
                            {{-- Thumbnail Image end --}}
                            @if (!in_array($ads?->belongsToCategory->slug, ['seeking-work-cvs']))
                                <div class="ad_post_wrap mb-4">
                                    <h4>
                                        Add up to 5 photos
                                        <span style="color: green;">
                                            <small class="fw-normal">( Preferred image size 830x520px ) 2MB</small>
                                        </span>
                                        <i class="fa fa-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
                                            data-bs-custom-class="custom-tooltip"
                                            data-bs-title="Ads with real photos get 10 times more views than with catalogue images. Images must be JPG or PNG format (max 5MB). Do not upload images with watermarks."></i>
                                    </h4>
                                    <div class="imageUploader"></div>
                                    <p>You must upload at least one photo</p>
                                </div>
                            @endif
                            <hr>
                            <div class="ad_post_wrap mb-4">
                                <h4 class="mb-3">Contact details</h4>
                                <div class="mb-2 mb-lg-4">
                                    <label for="name" class="form-label">Name</label>
                                    <input type="text" name="name" id="name"
                                        class="form-control @error('field_name') border-danger @enderror shadow-none"
                                        value="{{ $ads->belongsToUser->name }}" readonly>
                                </div>
                                <div class="mb-2 mb-lg-4">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" name="email" id="email"
                                        class="form-control @error('field_name') border-danger @enderror shadow-none"
                                        value="{{ $ads->email }}" readonly>
                                </div>
                                <div class="mb-2 mb-lg-4">
                                    <label for="phone" class="form-label">Phone</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="phone-addon">+233</span>
                                        <input type="text" name="phone" id="phone"
                                            class="form-control @error('field_name') border-danger @enderror shadow-none"
                                            value="{{ $ads->phone }}" aria-label="+233" aria-describedby="phone-addon"
                                            placeholder="Enter phone number" required>
                                    </div>

                                </div>
                            </div>
                            <hr>
                            <div class="ad_post_wrap mb-4 d-flex align-items-center justify-content-between">
                                <!-- Left: Checkbox + Label + Tooltip -->
                                @php
                                    $promotionActive =
                                        $ads?->featured &&
                                        $ads?->promotion_ends_at &&
                                        \Carbon\Carbon::now()->lt($ads->promotion_ends_at);
                                @endphp

                                <div class="form-check   mb-0">
                                    <input class="form-check-input" name="featured" type="checkbox" value="1"
                                        id="featuredAdsCheck" {{ $promotionActive ? 'checked disabled' : '' }}>

                                    <label class="form-check-label ms-2 mb-0" for="featuredAdsCheck"
                                        style="font-size: 0.95rem;">
                                        Promote Ad
                                        <i class="fa fa-question-circle text-info ms-1" data-bs-toggle="tooltip"
                                            data-bs-placement="top"
                                            title="Top: Ads appear at the top of listings for maximum visibility. Featured: Ads get extra highlighting and promotion on the site.">
                                        </i>
                                    </label> <br>

                                    @if ($promotionActive)
                                        <div class="text-success opacity-100 mt-1" style="font-size: 0.85rem;">
                                            Promotion is currently running and <br> will expire on
                                            <strong>{{ \Carbon\Carbon::parse($ads->promotion_ends_at)->format('d M Y') }}</strong>
                                        </div>
                                    @elseif ($ads?->promotion_ends_at)
                                        <div class="text-danger mt-1" style="font-size: 0.85rem;">
                                            <strong>Your promotion has expired.</strong><br>
                                            Please choose another promotion package to promote your ad.
                                        </div>
                                    @endif
                                </div>


                                <!-- Right: Promotion Plan Select (only show if ad is featured) -->
                                <div style="max-width: 300px; display: none;" id="promotionSelectWrapper">
                                    <select name="promotion_plan_id" id="promotion_plan_id"
                                        class="form-select shadow-none form-control-sm">
                                        <option value="" disabled>Select a promotion package</option>
                                        @foreach ($promotionPlans as $plan)
                                            <option value="{{ $plan->id }}" data-type="{{ $plan->type }}"
                                                data-duration="{{ $plan->duration }}" data-price="{{ $plan->price }}"
                                                {{ $ads->promotion_plan_id == $plan->id ? 'selected' : '' }}>
                                                {{ ucfirst($plan->type) }} - {{ $plan->name }} ({{ $plan->duration }}
                                                days) - ${{ number_format($plan->price, 2) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    const featuredCheckbox = document.getElementById('featuredAdsCheck');
                                    const promotionSelectWrapper = document.getElementById('promotionSelectWrapper');

                                    // Initialize Bootstrap tooltips
                                    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                                    tooltipTriggerList.map(function(tooltipTriggerEl) {
                                        return new bootstrap.Tooltip(tooltipTriggerEl);
                                    });

                                    // Show/hide promotion select when checkbox is toggled
                                    featuredCheckbox.addEventListener('change', function() {
                                        if (this.checked) {
                                            promotionSelectWrapper.style.display = 'block';
                                            document.getElementById('promotion_plan_id').setAttribute('required', 'required');
                                        } else {
                                            promotionSelectWrapper.style.display = 'none';
                                            const select = document.getElementById('promotion_plan_id');
                                            select.removeAttribute('required');
                                            select.value = '';
                                        }
                                    });
                                });
                            </script>


                            {{-- <div class="ad_post_wrap mb-4">
                                    <h4 class="mb-3">Mark as Featured {{$setting?->currency_symbol}} 17.00
                                        <i class="fa fa-question-circle" data-bs-toggle="tooltip"
                                           data-bs-placement="top"
                                           data-bs-custom-class="custom-tooltip"
                                           data-bs-title="Make your listing unique on home and search page!"></i>
                                    </h4>
                                    <div class="input-group">
                                        <div class="input-group-text pe-1">
                                            <div class="form-check">
                                                <input class="form-check-input shadow-none" type="checkbox"
                                                       name="feature"
                                                       required value="1" id="feature">
                                            </div>
                                        </div>
                                        <select name="promotion" id="promotion"
                                                class="form-control @error('field_name') border-danger @enderror form-select shadow-none"
                                                required>
                                            <option value="" class="d-none">Select your package</option>
                                            <option value="">1 week for {{$setting?->currency_symbol}} 17.00</option>
                                            <option value="">14 Days for {{$setting?->currency_symbol}} 27.00</option>
                                            <option value="">1 Month for {{$setting?->currency_symbol}} 55.00</option>
                                            <option value="">3 Months for {{$setting?->currency_symbol}} 89.00</option>
                                            <option value="">6 Months for {{$setting?->currency_symbol}} 189.00</option>
                                            <option value="">12 Months for {{$setting?->currency_symbol}} 299.00</option>
                                        </select>
                                    </div>
                                </div> --}}
                            <div>
                                <button type="submit" class="btn btn-primary px-5">Ad Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- ======================= ad post End  ============================ -->
@endsection
@push('scripts')
    <script src="{{ asset('assets/js/image-uploader.js') }}"></script>
    {{-- 
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ $setting->google_map_key }}&callback=initAutocomplete&libraries=places&language=en"
        defer></script> --}}
    <script src="{{ asset('assets/js/image-uploader.js') }}"></script>
    <script>
        // window.initAutocomplete = initAutocomplete;

        // function initAutocomplete(callback) {
        //     address1Field = document.querySelector("#address");
        //     postalField = document.querySelector("#postcode");

        //     autocomplete = new google.maps.places.Autocomplete(address1Field, {
        //         componentRestrictions: {
        //             country: 'GH'
        //         },
        //         types: ["establishment"],
        //     });
        //     autocomplete.addListener("place_changed", fillInAddress);

        // }

        // function fillInAddress() {
        //     const place = autocomplete.getPlace();
        //     // console.log(place);
        //     $('#lat').val(place.geometry.location.lat());
        //     $('#long').val(place.geometry.location.lng());
        // }
        // $(document).on('change', '#negotiable', function(event) {
        //     let priceElement = $('#price');
        //     let checked = event.target.checked;

        //     if (checked) {
        //         priceElement.attr('disabled', true).attr('required', false);
        //     } else {
        //         priceElement.attr('disabled', false).attr('required', true);
        //     }
        // });
        // // Ensure the price input is disabled if the checkbox is checked on page load
        // $(document).ready(function() {
        //     let priceElement = $('#price');
        //     let negotiableChecked = $('#negotiable').is(':checked');

        //     if (negotiableChecked) {
        //         priceElement.attr('disabled', true).attr('required', false);
        //     }
        // });
    </script>

    <script>
        // add features
        function addFeatures() {
            let html =
                '<div class="col-md-12 mb-4 removeDiv"><div class="input-group"><input type="text" name="features[]" class="form-control shadow-none" placeholder="Features" ><button id="remove_item" class="input-group-text btn btn-danger" type="button">x</button></div> </div>'
            $('.feature').append(html);
        }

        $(document).on("click", "#remove_item", function() {
            $(this).parent().parent('div').remove();
        });


        $(document).ready(function() {
            console.log("test")
            let path = @js(asset('/'));
            let preloaded = @js($ads->hasManyGallery);
            console.log(preloaded);
            let images = preloaded.map((value, index) => {
                return {
                    id: value.id,
                    src: path + value.image
                }
            })

            $(document).on('input', '#description', () => {
                countDescription();
            })

            countDescription()

            function countDescription() {
                countChar('#description', '.description-length')
            }

            $('.imageUploader').imageUploader({
                preloaded: images,
                preloadedRemovedInputName: 'removeimage',
            });


            let initialCategoryId = $('#category_id').val();
            let initialSubcategoryId = {{ $ads->subcategory_id }};
            let subcategory_element = $('#subcategory_id');

            if (initialCategoryId) {
                loadSubcategories(initialCategoryId, subcategory_element, initialSubcategoryId);
            }


            let city_id = '{{ $ads?->city_id }}';
            console.log(city_id)
            let region_id = '{{ $ads?->region_id }}';
            let cityElement = $('#city_id');
            getCityByRegion(region_id, cityElement, city_id);
        });
    </script>

    <script>
        document.getElementById('thumbnail').addEventListener('change', function(event) {
            const file = event.target.files[0]; // Get the selected file
            if (file) {
                const reader = new FileReader(); // Create a FileReader to read the file

                reader.onload = function(e) {
                    // Set the image source to the result of the FileReader
                    document.getElementById('preview').src = e.target.result;
                };

                reader.readAsDataURL(file); // Read the file as a Data URL
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            // old model value from server (preserves selection after validation)
            const oldModel = {!! json_encode(old('model')) !!};

            // --- Brand change handler ---
            $(document).on('change', '#brand_id', function() {
                let brand = $(this).val();
                let modelElement = $('#model');
                getModelByBrand(brand, modelElement);
            });

            function getModelByBrand(region, cityElement, selectedCity = null) {
                let userURL = @js(route('getModels'));

                $.ajax({
                    url: userURL,
                    type: 'GET',
                    data: {
                        brand: region,
                    },

                    success: function(html) {
                        cityElement.html(html);
                        cityElement.select2({
                            placeholder: 'Select a Model',
                            theme: 'bootstrap-5',
                            width: '100%',

                        });
                    },
                    error: function(data) {
                        console.log(data);
                        console.log(`Error:${data.responseText}`);
                    }
                });
            }

            // Trigger on page load if a brand was selected previously
            @if (old('brand_id'))
                $('#brand_id').trigger('change');
            @endif
        });
    </script>
    <script>
        $(document).on('change', '.condition_check', function () {
            if (this.value === 'Other') {
                $('#other_description_wrapper').show();
            } else {
                $('#other_description_wrapper').hide();
            }
        });
    </script>

@endpush