@extends('front.layouts.master')

@section('content')

    <main class="main">

        <!-- breadcrumb -->
        <div class="site-breadcrumb">
            <div class="container">
                <h2 class="breadcrumb-title">{{ TranslationHelper::translate('Edit Ad', 'site') }}</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="{{ route('site.index', ['country' => session('country_code')]) }}">{{ TranslationHelper::translate('Home', 'site') }}</a></li>
                    <li class="active">{{ TranslationHelper::translate('Edit Ad', 'site') }}</li>
                </ul>
            </div>
        </div>
        <!-- breadcrumb end -->


        <!-- user-profile -->
        <div class="user-profile py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="user-profile-wrapper">
                            <div class="user-profile-card">
                                <h4 class="user-profile-card-title">{{ TranslationHelper::translate('Edit 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>
                                        <form action="{{ route('site.update.request', $ads->id) }}" method="POST"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <div class="row align-items-center">



                                                <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"
                                                            name="main_category" required>
                                                            {{-- <option value="" >{{ $ads->category->mainCategory->name }}</option> --}}
                                                            @foreach ($categories as $category)
                                                                <option
                                                                    value="{{ $category->id }} {{ $category->id == $ads->category->mainCategory->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>
                                                            @foreach ($brands as $category)
                                                                <option value="{{ $category->id }}"
                                                                    {{ $category->id == $ads->brand_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>
                                                            @foreach ($sub_categories as $sub)
                                                                <option value="{{ $sub->id }}"
                                                                    {{ $sub->id == $ads->car_model_id ? 'selected' : '' }}>
                                                                    {{ $sub->name }}</option>
                                                            @endforeach
                                                        </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">
                                                            @foreach ($sub_sub_categories as $item)
                                                                <option value="{{ $item->id }}"
                                                                    {{ $item->id == $ads->sub_sub_category_id ? 'selected' : '' }}">
                                                                </option>
                                                            @endforeach
                                                        </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('attributes', 'site') }}</label>

                                                        @foreach ($subCategoryattributes as $attribute)
                                                            @include('front.pages.edit_attributes', [
                                                                'attribute' => $attribute,
                                                            ])
                                                        @endforeach



                                                    </div>
                                                </div>



                                                <h6 class="fw-bold mt-4 mb-1"{{ TranslationHelper::translate('Upload Images ', 'site') }}<span
                                                    class="text-muted">
                                                    ({{ TranslationHelper::translate('max 5 images', 'site') }})</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[]">
                                                        </div>
                                                    </div>
                                                    @if ($ads->media()->count() > 0)
                                                        <h6 class="fw-bold mt-4 mb-3">
                                                            {{ TranslationHelper::translate('Existing Images', 'site') }}
                                                        </h6>
                                                        <div class="row">
                                                            @foreach ($ads->media as $media)
                                                                <div class="col-md-3">
                                                                    <img src="{{ $media->getUrl() }}" alt="Ad Image"
                                                                        class="img-fluid mb-2" style="height: 100px" />
                                                                    <button class="delete-image-btn btn btn-danger btn-sm" "
                                                                        data-image-id=" {{ $media->id }}"><i
                                                                            class="fas fa-times"></i></button>
                                                                </div>
                                                         @endforeach
                                                                </div>
                                                            @else
                                                                @foreach ($ads->images as $iamge)
                                                                    <li
                                                                        data-thumb="https://images.bkamthis.com/{{ $iamge->filename }}">
                                                                        <img src="https://images.bkamthis.com/{{ $iamge->filename }}"
                                                                            alt="Ad Image" style="height: 100px">
                                                                    </li>
                                                                @endforeach
                                                            @endif

                                                            <div class="image-preview"></div>
                                                        </div>

                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <label>{{ TranslationHelper::translate('Price', 'site') }}</label>
                                                                <input type="text" class="form-control" name="price"
                                                                    value="{{ $ads->price }}" id="numberInput">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <label>{{ TranslationHelper::translate('Ad Title', 'site') }}</label>
                                                                <input type="text" class="form-control" name="title"
                                                                    value="{{ $ads->title }}">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="form-group">
                                                                <label>{{ TranslationHelper::translate('Description', 'site') }}</label>
                                                                <textarea class="form-control" cols="30" rows="5" name="description">{{ $ads->description }}</textarea>
                                                            </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="{{ $ads->AdType }}" id="flexCheckDefault"
                                                                    name="AdType"
                                                                    @if ($ads->AdType == 'Featured') checked @endif>
                                                                <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
                                                </div>
                                            </div>



                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ TranslationHelper::translate('City', 'site') }}</label>
                                                    <select class="select" name="city_id" id="cityDropdown">
                                                        <option value="{{ $ads->city->id }}">{{ $ads->city->name }}
                                                        </option>
                                                        @foreach ($cities as $city)
                                                            <option value="{{ $city->id }}">{{ $city->name }}
                                                            </option>
                                                        @endforeach

                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ TranslationHelper::translate('Region', 'site') }}</label>
                                                    <select class="select" name="district_id" id="regionDropdown">
                                                        <option value="{{ $ads->region->id }}">{{ $ads->region->name }}
                                                        </option>

                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>{{ TranslationHelper::translate('address', 'site') }}</label>
                                                    <input type="text" class="form-control"
                                                        placeholder="Enter Ad location" name="location"
                                                        value="{{ $ads->location }}">
                                                </div>
                                            </div>
                                            <h6 class="fw-bold mt-4 mb-3">
                                                {{ TranslationHelper::translate('Contact Information', 'site') }}
                                            </h6>
                                            <div class="col-6 col-md-4">
                                                <div class="form-check">
                                                    <input class="form-check-input" name="phone" type="checkbox"
                                                        value="" id="phones">
                                                    <label class="form-check-label" for="phone">
                                                        {{ TranslationHelper::translate('Phone_Number', 'site') }}
                                                    </label>
                                                </div>

                                            </div>
                                            <div class="col-6 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-6 col-md-4">
                                                <div class="form-check">
                                                    <input class="form-check-input" name="email" type="checkbox"
                                                        value="" id="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" name="phone"
                                                                    required min="9" max="9" id="phone"
                                                                    value="{{ $ads->phone }}">
                                                            </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"
                                                                    name="whatsapp" min="9" max="9"
                                                                    value="{{ $ads->whatsapp }}" id="phone2">
                                                            </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="{{ $ads->email }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>



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

    </main>
@endsection

@push('js')
    <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>');
                        });
                        console.log(data.data);


                        $('#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>');
                        });
                        console.log(data.data);


                        $('#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>');
                        });
                        console.log(data.data);


                        $('#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() {
            $('#cityDropdown').on('change', function() {
                var cityId = $(this).val();
                var siteLang = '{{ app()->getLocale() }}';
                $.ajax({
                    url: "{{ asset('api/region/') }}" + '/' + cityId,
                    method: 'GET',
                    success: function(data) {
                        $('#regionDropdown').empty();
                        $('#regionDropdown').niceSelect('update');

                        $.each(data.data, function(index, region) {
                            var regionName = siteLang === 'en' ?
                                (region.name.en || region.name.ar) :
                                (region.name.ar || region.name.en);

                            $('#regionDropdown').append('<option value="' + region.id +
                                '">' + regionName + '</option>');
                            console.log(region.name);
                            $('#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() {
            $('.delete-image-btn').on('click', function() {
                event.preventDefault();
                var imageId = $(this).data('image-id');

                $.ajax({
                    type: 'POST',
                    url: '/delete-edit-image',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        image_id: imageId
                    },
                    success: function(response) {
                        // Remove the deleted image from the DOM
                        $('[data-image-id="' + imageId + '"]').parent().remove();
                        console.log('Image deleted successfully');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error deleting image:', error);
                    }
                });
            });
        });
    </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.addEventListener("DOMContentLoaded", function() {

            const nextButton = document.querySelector("#adForm");

            nextButton.addEventListener("click", function(event) {
                // event.preventDefault(); // Prevent default form submission


                const inputs = document.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) {
                    event.preventDefault();
                    Swal.fire({
                        icon: 'error',
                        text: "{{ TranslationHelper::translate('يرجى ملء جميع الحقول المطلوبة', 'site') }}", // Error message
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK',
                        showCloseButton: true,
                    });
                }
                // else
                // {
                //     this.click();
                // }
            });


        });
    </script>
@endpush