@extends('front.layouts.master')

@section('content')

<main class="main">
    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background: url({{ asset('front/assets/img/breadcrumb/01.jpg') }})">
        <div class="container">
            <h2 class="breadcrumb-title">{{ TranslationHelper::translate('Add Ad', 'site') }}</h2>
            <ul class="breadcrumb-menu">
                <li><a href="{{ route('site.index') }}">{{ TranslationHelper::translate('Home', 'site') }}</a></li>
                <li class="active">{{ TranslationHelper::translate('Add Ad', 'site') }}</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->
    <section class="sign-in" style="margin-top: 20px">
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <div class="container-filter user-profile-card">
            <div class="row  justify-content-center user-profile-wrapper ">
                @if(session()->has('success'))
                <div class="alert alert-success">
                    {{ session()->get('success') }}
                </div>
                @endif
                <div class="col-12 px-0 pt-4 pb-0 mt-3 mb-3 text-center">
                    <h2 id="heading">
                        {{ TranslationHelper::translate('Add New Ad', 'site') }}
                    </h2>
                    <form action="{{ route('site.addAd.store') }}" method="POST" enctype="multipart/form-data" id="adForm">
                        @csrf
                        <!-- Progress Bar -->
                        <div class="progressbar">
                            <div class="progress" id="progress"></div>
                            <div class="progress-step progress-step-active" data-title=""></div>
                            <div class="progress-step" data-title=""></div>
                            <div class="progress-step" data-title=""></div>
                        </div>

                        <!-- Form item - Basic -->
                        <div class="form-step form-step-active add-listing-form">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('MainCategory', 'site') }} <span style="color: red;">*</span></label>
                                        <select class="select" id="MaincategoryDropdown" required>
                                            <option value="">{{ TranslationHelper::translate('Category', 'site') }}</option>
                                            @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" {{ old('brand_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                        <small id="categoryError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('Category', 'site') }} <span style="color: red;">*</span></label>
                                        <select class="select" id="categoryDropdown" name="brand_id" required>
                                            <option value="">{{ TranslationHelper::translate('Category', 'site') }}</option>

                                        </select>
                                        <small id="categoryError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('SubCategory', 'site') }} <span style="color: red;">*</span></label>
                                        <select class="select" id="subcategoryDropdown" name="car_model_id" required></select>
                                        <small id="subcategoryError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('SubSubCategory', 'site') }}</label>
                                        <select class="select" id="subsubcategoryDropdown" name="sub_sub_category_id"></select>

                                    </div>
                                </div>
                                <div id="attributeFields">
                                    <!-- Attribute fields will be dynamically loaded here -->
                                </div>
                                <h6 class="fw-bold mt-4 mb-1">{{ TranslationHelper::translate('Upload Images ', 'site') }}<span class="text-muted">({{ TranslationHelper::translate('max 5 images', 'site') }})</span> <span style="color: red;">*</span></h6>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <div class="list-upload-wrapper">
                                            <div class="list-img-upload">
                                                <span>
                                                    <img src="{{ asset('front/assets/img/bkam/arrow.png') }}" style="width:50px;" alt="">
                                                    {{ TranslationHelper::translate('Upload Ad Images', 'site') }}
                                                </span>
                                            </div>
                                            <input type="file" class="list-img-file" multiple name="images[]" required>
                                            <small id="imagesError" style="color: red; display: none;">This field is required.</small>
                                        </div>
                                    </div>
                                    <div class="image-preview"></div>
                                </div>
                            </div>
                            <div class="row mt-5">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('Price', 'site') }} <span style="color: red;">*</span></label>
                                        <input type="text" class="form-control" name="price" value="{{ old('price') }}" required>
                                        <small id="priceError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('Ad Title', 'site') }} <span style="color: red;">*</span></label>
                                        <input type="text" class="form-control" name="title" value="{{ old('title') }}" required>
                                        <small id="titleError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('Description', 'site') }} <span style="color: red;">*</span></label>
                                        <textarea class="form-control" cols="30" rows="5" name="description" required>{{ old('description') }}</textarea>
                                        <small id="descriptionError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center mt-5 d-flex justify-content-center">
                                <button type="button" class="theme-btn btn-2 btn-next w-25">{{ TranslationHelper::translate('Next', 'site') }}</button>
                            </div>
                        </div>
                        <div class="form-step">
                            <div class="row">
                                <div class="col-lg-6">
                                    <label class="form-check-label" for="flexCheckDefault">{{ TranslationHelper::translate('Ad Type', 'site') }}</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="AdType" value="Featured">
                                        <label class="form-check-label" for="flexCheckDefault">{{ TranslationHelper::translate('Featured', 'site') }}
                                            @if(auth()->user()->featured_ads_count > auth()->user()->used_featured_ads_count)
                                            <br>
                                                <span style="color: green;"> {{ TranslationHelper::translate('You have ', 'site') }} {{ auth()->user()->featured_ads_count - auth()->user()->used_featured_ads_count }} {{ TranslationHelper::translate('Free Featured Ads Left', 'site') }}</span>
                                            @else
                                            @if(app()->getLocale() == 'ar')
                                                <span> السعر <span>{{$settingAd->advertisement_price }} {{ $currency }}</span> لمدة {{$settingAd->feature_duration_days }} ايام</span>
                                            @else
                                                <span> price <span>{{$settingAd->advertisement_price }} {{ $currency }}</span> for {{$settingAd->feature_duration_days }} days</span>
                                            @endif
                                            @endif
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('Country', 'site') }} <span style="color: red;">*</span></label>
                                        <select class="select" name="country_id" id="countryDropdown" required>
                                            @foreach ($Countries as $country)
                                            <option value="{{ $country->id }}" {{ session('user_country', 1) == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                        <small id="countryError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('City', 'site') }} <span style="color: red;">*</span></label>
                                        <select class="select" name="city_id" id="cityDropdown" required>

                                        </select>
                                        <small id="cityError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('Region', 'site') }} <span style="color: red;">*</span></label>
                                        <select class="select" name="district_id" id="regionDropdown" required></select>
                                        <small id="regionError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label>{{ TranslationHelper::translate('Address', 'site') }} <span style="color: red;">*</span></label>
                                        <input type="text" class="form-control" name="location" required style="height: 55px">
                                        <small id="locationError" style="color: red; display: none;">This field is required.</small>
                                    </div>
                                </div>

                                <div class="text-center mt-5 d-flex justify-content-center gap-4">
                                    <button type="button" class="theme-btn btn-2 btn-prev w-25">{{ TranslationHelper::translate('Previous', 'site') }}</button>
                                    <button type="button" class="theme-btn btn-2 btn-next w-25">{{ TranslationHelper::translate('Next', 'site') }}</button>
                                </div>
                            </div>
                        </div>
                        <div class="form-step">
                            <h2 class="mb-5" >  {{ TranslationHelper::translate('Contact Information', 'site') }}</h2>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="phones">
                                        <label class="form-check-label" for="phone">
                                            {{ TranslationHelper::translate('Phone_Number', 'site') }} <span style="color: red;">*</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" name="whatsapp" type="checkbox" value="" id="whatsapp">
                                        <label class="form-check-label" for="whatsapp">
                                            {{ TranslationHelper::translate('Whatsapp_Number', 'site') }}
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" name="email" type="checkbox" value="" id="email" value="{{ old('email') }}">
                                        <label class="form-check-label" for="email">
                                            {{ TranslationHelper::translate('Email', 'site') }}
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group" id="phone_input" style="display: none">
                                        <label>{{ TranslationHelper::translate('Phone_Number', 'site') }}</label>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" id="phone" name="phone" required value="{{ old('phone') }}">
                                                    <small id="phoneError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group" id="whatsapp_input" style="display: none">
                                        <label>{{ TranslationHelper::translate('Whatsapp_Number', 'site') }}</label>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" id="phone2" name="whatsapp" min="9" value="{{ old('whatsapp') }}">
                                                    <small id="whatsappError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group" id="email_input" style="display: none">
                                        <label>{{ TranslationHelper::translate('Email', 'site') }}</label>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group mb-3">
                                                    <input type="email" class="form-control" name="email" value="{{ old('email') }}">
                                                    <small id="emailError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center mt-5 d-flex justify-content-center gap-4">
                                <button type="button" class="theme-btn btn-2 btn-prev w-25">{{ TranslationHelper::translate('Previous', 'site') }}</button>
                                <button type="submit" class="theme-btn btn-2 w-25">{{ TranslationHelper::translate('Submit', 'site') }} </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>


    <!-- user-profile -->
    {{-- <div class="user-profile py-5">
        <div class="container">
            <div class="row" @if(app()->getLocale() == 'ar')style="direction: rtl" @endif >

                <div class="col-lg-12">
                    <div class="user-profile-wrapper">
                        <div class="user-profile-card">
                            <h4 class="user-profile-card-title">{{ TranslationHelper::translate('Add New Ad', 'site') }}</h4>
                            @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            @if(session()->has('success'))
                            <div class="alert alert-success">
                                {{ session()->get('success') }}
                            </div>
                            @endif

                            <div class="col-lg-12">
                                <div class="add-listing-form">
                                    <h6 class="mb-1">{{ TranslationHelper::translate('Basic Information', 'site') }} </h6><span>{{ TranslationHelper::translate('the fields with * are required', 'site') }}</span> <span style="color: red;">*</span>
                                    <form action="{{ route('site.addAd.store') }}" method="POST" enctype="multipart/form-data" id="adForm">
                                        @csrf
                                        <div class="row align-items-center">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ TranslationHelper::translate('Category', 'site') }} <span style="color: red;">*</span></label>
                                                    <select class="select" id="categoryDropdown" name="brand_id" required>
                                                        <option value="">{{ TranslationHelper::translate('Category', 'site') }}</option>
                                                        @foreach ($categories as $category)
                                                        <option value="{{ $category->id }}" {{ old('brand_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <small id="categoryError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ TranslationHelper::translate('SubCategory', 'site') }} <span style="color: red;">*</span></label>
                                                    <select class="select" id="subcategoryDropdown" name="car_model_id" required>
                                                    </select>
                                                    <small id="subcategoryError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>

                                            <div id="attributeFields">
                                                <!-- Attribute fields will be dynamically loaded here -->
                                            </div>

                                            <h6 class="fw-bold mt-4 mb-1">{{ TranslationHelper::translate('Upload Images ', 'site') }}<span class="text-muted">({{ TranslationHelper::translate('max 5 images', 'site') }})</span> <span style="color: red;">*</span></h6>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <div class="list-upload-wrapper">
                                                        <div class="list-img-upload">
                                                            <span>
                                                                <img src="{{ asset('front/assets/img/bkam/arrow.png') }}" style="width:50px;" alt="">
                                                                {{ TranslationHelper::translate('Upload Ad Images', 'site') }}
                                                            </span>
                                                        </div>
                                                        <input type="file" class="list-img-file" multiple name="images[]" value="{{ old('images') }}" required>
                                                        <small id="imagesError" style="color: red; display: none;">This field is required.</small>
                                                    </div>
                                                </div>
                                                <div class="image-preview"></div>
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ TranslationHelper::translate('Price', 'site') }} <span style="color: red;">*</span></label>
                                                    <input type="text" class="form-control" name="price" value="{{ old('price') }}" id="priceInput" required>
                                                    <small id="priceError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ TranslationHelper::translate('Ad Title', 'site') }} <span style="color: red;">*</span></label>
                                                    <input type="text" class="form-control" name="title" id="titleInput" value="{{ old('title') }}" required>
                                                    <small id="titleError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label>{{ TranslationHelper::translate('Description', 'site') }} <span style="color: red;">*</span></label>
                                                    <textarea class="form-control" cols="30" rows="5" name="description" required>{{ old('description') }}</textarea>
                                                    <small id="descriptionError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <label class="form-check-label" for="flexCheckDefault">{{ TranslationHelper::translate('Ad Type', 'site') }}</label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="Featured" id="flexCheckDefault" name="AdType" value="{{ old('AdType') }}">
                                                    <label class="form-check-label" for="flexCheckDefault">{{ TranslationHelper::translate('Featured', 'site') }}
                                                        @if(app()->getLocale() == 'ar')
                                                            </label> <span> السعر <span>{{$settingAd->advertisement_price }} د.أ</span> لمدة {{$settingAd->feature_duration_days }} ايام</span>
                                                        @endif
                                                        @if(app()->getLocale() == 'en')
                                                            </label> <span> price <span>{{$settingAd->advertisement_price }} AED</span> for {{$settingAd->feature_duration_days }} days</span>
                                                        @endif
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ TranslationHelper::translate('City', 'site') }} <span style="color: red;">*</span></label>
                                                    <select class="select" name="city_id" id="cityDropdown" required>
                                                        <option value="">{{ TranslationHelper::translate('City', 'site') }}</option>
                                                        @foreach ($cities as $city)
                                                        <option value="{{ $city->id }}" {{ old('city_id') == $city->id ? 'selected' : '' }}>{{ $city->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <small id="cityError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{TranslationHelper::translate('Region' ,'site' )}} <span style="color: red;">*</span></label>
                                                    <select class="select" name="district_id" id="regionDropdown" required>
                                                    </select>
                                                    <small id="regionError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{TranslationHelper::translate('address' ,'site' )}} <span style="color: red;">*</span></label>
                                                    <input type="text" class="form-control" name="location" required>
                                                    <small id="locationError" style="color: red; display: none;">This field is required.</small>
                                                </div>
                                            </div>
                                            {{ TranslationHelper::translate('Contact Information', 'site') }}
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="phones">
                                                        <label class="form-check-label" for="phone">
                                                            {{ TranslationHelper::translate('Phone_Number', 'site') }} <span style="color: red;">*</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" name="whatsapp" type="checkbox" value="" id="whatsapp">
                                                        <label class="form-check-label" for="whatsapp">
                                                            {{ TranslationHelper::translate('Whatsapp_Number', 'site') }}
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" name="email" type="checkbox" value="" id="email" value="{{ old('email') }}">
                                                        <label class="form-check-label" for="email">
                                                            {{ TranslationHelper::translate('Email', 'site') }}
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group" id="phone_input" style="display: none">
                                                        <label>{{ TranslationHelper::translate('Phone_Number', 'site') }}</label>
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <div class="form-group">
                                                                    <input type="text" class="form-control" id="phone" name="phone" required value="{{ old('phone') }}">
                                                                    <small id="phoneError" style="color: red; display: none;">This field is required.</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group" id="whatsapp_input" style="display: none">
                                                        <label>{{ TranslationHelper::translate('Whatsapp_Number', 'site') }}</label>
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <div class="form-group">
                                                                    <input type="text" class="form-control" id="phone2" name="whatsapp" min="9" value="{{ old('whatsapp') }}">
                                                                    <small id="whatsappError" style="color: red; display: none;">This field is required.</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group" id="email_input" style="display: none">
                                                        <label>{{ TranslationHelper::translate('Email', 'site') }}</label>
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <div class="form-group mb-3">
                                                                    <input type="email" class="form-control" name="email" value="{{ old('email') }}">
                                                                    <small id="emailError" style="color: red; display: none;">This field is required.</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-lg-12 my-4">
                                                <button type="submit" class="theme-btn"><span class="far fa-save"> </span> {{TranslationHelper::translate('Save& Publish Ad' ,'site' )}}</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
    <!-- user-profile end -->

</main>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $('.attribute-options').change(function() {
            var selectedOption = $(this).val();
            var attributeId = $(this).data('attribute-id');
            var currentLocale = $(this).data('locale');

            // Find the corresponding select dropdown for the other language
            $('.attribute-options').not($(this)).each(function() {
                var otherLocale = $(this).data('locale');

                if (otherLocale !== currentLocale) {
                    // Find the option with the same value in the other language dropdown
                    $(this).find('option').each(function() {
                        if ($(this).val() === selectedOption) {
                            $(this).prop('selected', true);
                        }
                    });
                }
            });
        });
    });
</script>
<script>
 $(document).ready(function() {
    $('#MaincategoryDropdown').on('change', function() {
        var categoryId = $(this).val();
        var siteLang = '{{ app()->getLocale() }}'; // Replace this with your actual logic to get the site's language

        $.ajax({
            url: "{{ asset('api/brands/') }}"+'/'+categoryId,
            method: 'GET',
            headers: {
                'Accept-Language': siteLang // Include the Accept-Language header with the site's language
            },
            success: function(data) {
                $('#categoryDropdown').empty();
                $('#categoryDropdown').append('<option value="">---</option>');

                $.each(data.data, function(index, subcategory) {

                    $('#categoryDropdown').append('<option value="' + subcategory.id + '">' + subcategory.name + '</option>');
                });


                $('#categoryDropdown').niceSelect('update');
            },
            error: function(error) {
                console.error('Error fetching subcategories:', error);
            }
        });
    });
    $('#categoryDropdown').on('change', function() {
        var categoryId = $(this).val();
        var siteLang = '{{ app()->getLocale() }}'; // Replace this with your actual logic to get the site's language

        $.ajax({
            url: "{{ asset('api/subCategory/') }}"+'/'+categoryId,
            method: 'GET',
            headers: {
                'Accept-Language': siteLang // Include the Accept-Language header with the site's language
            },
            success: function(data) {
                $('#subcategoryDropdown').empty();
                $('#subcategoryDropdown').append('<option value="">---</option>');

                $.each(data.data, function(index, subcategory) {

                    $('#subcategoryDropdown').append('<option value="' + subcategory.id + '">' + subcategory.name + '</option>');
                });


                $('#subcategoryDropdown').niceSelect('update');
            },
            error: function(error) {
                console.error('Error fetching subcategories:', error);
            }
        });
    });
    $('#subcategoryDropdown').on('change', function() {
        var categoryId = $(this).val();
        var siteLang = '{{ app()->getLocale() }}'; // Replace this with your actual logic to get the site's language

        $.ajax({
            url: "{{ asset('api/subsubCategory/') }}"+'/'+categoryId,
            method: 'GET',
            headers: {
                'Accept-Language': siteLang // Include the Accept-Language header with the site's language
            },
            success: function(data) {
                $('#subsubcategoryDropdown').empty();
                $('#subsubcategoryDropdown').append('<option value="">---</option>');

                $.each(data.data, function(index, subcategory) {

                    $('#subsubcategoryDropdown').append('<option value="' + subcategory.id + '">' + subcategory.name + '</option>');
                });


                $('#subsubcategoryDropdown').niceSelect('update');
            },
            error: function(error) {
                console.error('Error fetching subcategories:', error);
            }
        });
    });

        $('#subcategoryDropdown').on('change', function() {
                var subcategoryId = $(this).val();

                // Make an AJAX request to get attributes based on the selected subcategory
                $.ajax({
                    url: "{{ route('site.getAttributes') }}",
                    method: 'GET',
                    data: {
                        subcategory_id: subcategoryId
                    },
                    success: function(data) {
                        $('#attributeFields').html(data);
                    },
                    error: function(error) {
                        console.error('Error fetching attributes:', error);
                    }
                });
            });
        });
</script>

<script>
    $(document).ready(function() {
          $('#countryDropdown').on('change', function() {
            var siteLang = '{{ app()->getLocale() }}';
              var countryId = $(this).val();
              var siteLang = '{{ app()->getLocale() }}';
              $.ajax({
                  url: "{{ asset('api/city/') }}"+'/'+countryId,
                  method: 'GET',
                  headers: {
                      'Accept-Language': siteLang
                  },

                  success: function(data) {
                      $('#cityDropdown').empty();
                      $('#cityDropdown').niceSelect('update');

                      $.each(data.data, function(index, city) {

                          $('#cityDropdown').append('<option value="' + city.id + '">' + city.name + '</option>');
                          $('#cityDropdown').niceSelect('update');
                      });

                  },
                  error: function(error) {
                      console.error('Error fetching regions:', error);
                  }
              });
          });
          $('#cityDropdown').on('change', function() {
            var siteLang = '{{ app()->getLocale() }}';
              var cityId = $(this).val();
              var siteLang = '{{ app()->getLocale() }}';
              $.ajax({
                  url: "{{ asset('api/region/') }}"+'/'+cityId,
                  method: 'GET',
                  headers: {
                      'Accept-Language': siteLang
                  },

                  success: function(data) {
                      $('#regionDropdown').empty();
                      $('#regionDropdown').niceSelect('update');

                      $.each(data.data, function(index, region) {

                          $('#regionDropdown').append('<option value="' + region.id + '">' + region.name + '</option>');
                          $('#regionDropdown').niceSelect('update');
                      });

                  },
                  error: function(error) {
                      console.error('Error fetching regions:', error);
                  }
              });
          });

      });
</script>

<script>
    $(document).ready(function() {
            let phone_check = $('#phones');
            let phone_input = $('#phone_input');
            phone_check.on('change', function() {
                if (this.checked) {
                    phone_input.slideDown();
                } else {
                    phone_input.slideUp();
                }
            });
            let email_check = $('#email');
            let email_input = $('#email_input');
            email_check.on('change', function() {
                if (this.checked) {
                    email_input.slideDown();
                } else {
                    email_input.slideUp();
                }
            });
            let whats_check = $('#whatsapp');
            let whatsapp_input = $('#whatsapp_input');
            whats_check.on('change', function() {
                if (this.checked) {
                    whatsapp_input.slideDown();
                } else {
                    whatsapp_input.slideUp();
                }
            });
        });
</script>
<script>
    var uploadedImages = 0; // Track the number of uploaded images

    function createPreview(url) {
        var preview = $('<div class="preview-item">\
                            <img src="' + url + '" alt="preview">\
                            <button class="delete-btn">Delete</button>\
                        </div>');

        preview.find('.delete-btn').on('click', function() {
            $(this).parent('.preview-item').remove();
            uploadedImages--; // Decrement the count when an image is deleted
        });

        return preview;
    }

    // Show image preview when file input changes
    $('.list-img-file').on('change', function() {
        var files = $(this)[0].files;
        var filesToProcess = Math.min(5 - uploadedImages, files.length); // Limit to a maximum of 5 - uploadedImages

        for (var i = 0; i < filesToProcess; i++) {
            (function(index) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var preview = createPreview(e.target.result);
                    $('.image-preview').append(preview);
                    uploadedImages++; // Increment the count after adding a new image
                };
                reader.readAsDataURL(files[index]);
            })(i);
        }

        // Disable the file input after reaching the limit
        if (uploadedImages >= 5) {
            $(this).prop('disabled', true);
        }
    });
</script>
<script>
   $(document).ready(function() {
            $('#numberInput').on('input', function() {
                let inputValue = $(this).val();

                // Remove non-numeric characters except dots
                let numericValue = inputValue.replace(/[^\d.]/g, '');

                // Format the number with commas
                let formattedValue = Number(numericValue).toLocaleString('en');

                // Set the formatted value back to the input
                $(this).val(formattedValue);
            });
        });
</script>
<script>
    $(document).ready(function() {
        $('.attribute-options').change(function() {
            var selectedLocale = $(this).data('locale');
            var selectedOption = $(this).val();
            var otherLocale = (selectedLocale === 'ar') ? 'en' : 'ar';
            var otherDropdown = $(`.attribute-options[data-locale='${otherLocale}'][data-attribute-id='${$(this).data('attribute-id')}']`);

            otherDropdown.val(selectedOption);
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const adForm = document.getElementById('adForm');

        const fields = [
            { id: 'categoryDropdown', errorId: 'categoryError' },
            { id: 'subcategoryDropdown', errorId: 'subcategoryError' },
            { id: 'priceInput', errorId: 'priceError' },
            { id: 'titleInput', errorId: 'titleError' },
            { id: 'descriptionInput', errorId: 'descriptionError' },
            { id: 'cityDropdown', errorId: 'cityError' },
            { id: 'regionDropdown', errorId: 'regionError' },
            { id: 'locationInput', errorId: 'locationError' },
            { id: 'phone', errorId: 'phoneError' },

        ];

        fields.forEach(field => {
            const input = document.getElementById(field.id);
            const error = document.getElementById(field.errorId);

            if (input) {
                input.addEventListener('input', function() {
                    if (input.value.trim() === '') {
                        error.style.display = 'block';
                    } else {
                        error.style.display = 'none';
                    }
                });
            }
        });

        adForm.addEventListener('submit', function(event) {
            let valid = true;

            fields.forEach(field => {
                const input = document.getElementById(field.id);
                const error = document.getElementById(field.errorId);

                if (input && input.value.trim() === '') {
                    error.style.display = 'block';
                    valid = false;
                } else if (error) {
                    error.style.display = 'none';
                }
            });

            if (!valid) {
                event.preventDefault();
            }
        });
    });
    </script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const nextButton = document.querySelectorAll(".btn-next");
        const prevButton = document.querySelectorAll(".btn-prev");
        const steps = document.querySelectorAll(".form-step");
        const progress = $("#progress");
        const progressSteps = $(".progress-step");
        let currentStepIndex = 0;



        // Next button functionality
        nextButton.forEach(btn => {
            btn.addEventListener("click", function (event) {
                event.preventDefault(); // Prevent default form submission

                const currentStep = steps[currentStepIndex];
                const inputs = currentStep.querySelectorAll("input[required], select[required], textarea[required]");
                let allFilled = true;

                // Validate required inputs in the current step
                inputs.forEach(input => {
                    if (!input.value) {
                        allFilled = false;
                        input.classList.add("is-invalid");
                    } else {
                        input.classList.remove("is-invalid");
                    }
                });

                if (allFilled) {
                    if (currentStepIndex < steps.length - 1) {
                        // Move to the next step
                        steps[currentStepIndex].classList.remove("form-step-active");
                        steps[currentStepIndex + 1].classList.add("form-step-active");
                        progressSteps.eq(currentStepIndex).removeClass("progress-step-active").next().addClass("progress-step-active");
                        currentStepIndex++;
                        updateProgress();
                    } else {
                        // Submit the form on the last step
                        document.getElementById("husbandRegisterForm").submit();
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        text: "{{ TranslationHelper::translate('يرجى ملء جميع الحقول المطلوبة', 'site') }}", // Error message
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK',
                        showCloseButton: true,
                    });
                }
            });
        })



        // Previous button functionality
        prevButton.forEach(btn => {
            btn.addEventListener("click", function (event) {
                event.preventDefault();
                if (currentStepIndex > 0) {
                    // Move back to the previous step
                    steps[currentStepIndex].classList.remove("form-step-active");
                    steps[currentStepIndex - 1].classList.add("form-step-active");
                    progressSteps.eq(currentStepIndex).removeClass("progress-step-active").prev().addClass("progress-step-active");
                    currentStepIndex--;
                    updateProgress();
                }
            });
        })

        // Function to update progress bar
        function updateProgress() {
            const stepPercent = (100 / (steps.length - 1)) * currentStepIndex;
            progress.css("width", stepPercent + "%");
        }
    });
</script>


@endpush