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

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

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

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

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

                            @csrf
                            <div class="mb-4">
                                <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" value="{{ $ads->title }}" name="title" id="title"
                                    class="form-control @error('field_name') border-danger @enderror @error('title') border-danger @enderror"
                                    placeholder="Enter your title" required>
                                @error('title')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-2 mb-lg-4">
                                        <label for="category_id" class="form-label">Category <span
                                                class="text-danger">*</span></label>
                                        <select name="category_id" disabled id="category_id"
                                            class="form-control @error('category_id') border-danger @enderror select2 form-select shadow-none"
                                            required>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}"
                                                    {{ $ads->category_id == $category->id ? 'selected' : '' }}>
                                                    {{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-2 mb-lg-4">
                                        <label for="subcategory_id" class="form-label">Sub Category <span
                                                class="text-danger">*</span></label>
                                        <select name="subcategory_id" id="subcategory_id"
                                            class="form-control @error('subcategory_id') border-danger @enderror select2 form-select shadow-none"
                                            required>
                                            @foreach ($sub_categories as $sub_category)
                                                <option value="{{ $sub_category->id }}"
                                                    @if ($ads->subcategory_id == $sub_category->id) selected @endif>
                                                    {{ $sub_category->name }} </option>
                                            @endforeach
                                        </select>
                                        @error('subcategory_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>


                                <div class="col-md-6">
                                    <div class="mb-2 mb-lg-4">
                                        <label for="region_id" class="form-label">Region <span
                                                class="text-danger">*</span></label>
                                        <select name="region_id" id="region_id"
                                            class="form-control @error('region') border-danger @enderror select2 form-select shadow-none"
                                            required>
                                            @foreach ($regions as $region)
                                                <option value="{{ $region->id }}"
                                                    @if ($ads->region_id == $region->id) selected @endif>{{ $region->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('region')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-2 mb-lg-4">
                                        <label for="city_id" class="form-label">City <span
                                                class="text-danger">*</span></label>
                                        <select name="city_id" id="city_id"
                                            class="form-control @error('city_id') border-danger @enderror select2 form-select shadow-none"
                                            required>

                                        </select>
                                        @error('city_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>


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

                                </div>

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

                                <div class="col-md-6">
                                    <div class="mb-2 mb-lg-4">
                                        <label for="is_escrow" class="form-label">Is Escrow <span class="text-danger">*</span></label>
                                        <select name="is_escrow" class="form-control @error('is_escrow') border-danger @enderror form-select shadow-none" required>
                                            <option value="0" {{ $ads->is_escrow == 0 ? 'selected' : '' }}>No</option>
                                            <option value="1" {{ $ads->is_escrow == 1 ? 'selected' : '' }}>Yes</option>
                                        </select>
                                        @error('is_escrow')
                                            <span class="text-danger">{{$message}}</span>
                                        @enderror
                                    </div>
                                </div>


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

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


                            </div>


                            @includeWhen($ads->category_slug == 'vehicles', 'user.ads.partials.edit.vehicles')
                            @includeWhen($ads->category_slug == 'property', 'user.ads.partials.edit.property')
                            @includeWhen(
                                $ads->category_slug == 'education',
                                'user.ads.partials.edit.education')
                            @includeWhen($ads->category_slug == 'jobs', 'user.ads.partials.edit.job')
                            @includeWhen($ads->category_slug == 'service', 'user.ads.partials.edit.service')
                            @includeWhen(
                                $ads->category_slug == 'mens-fashion-grooming' ||
                                    $ads->category_slug == 'womens-fashion-beauty',
                                'user.ads.partials.edit.fashion')
                            @includeWhen(
                                $ads->category_slug == 'electronics' || $ads->category_slug == 'mobiles',
                                'user.ads.partials.edit.electronics')

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

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

                            <hr>

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

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

                                <img id="preview" src="{{ asset($ads->thumbnail) }}" class="mt-2" alt="" width="200">
                                {!! $errors->first('thumbnail', '<label class="help-block text-danger">:message</label>') !!}
                            </div>
                            {{-- Thumbnail Image end --}}

                            <div class="ad_post_wrap mb-4">
                                <h4>
                                    Add up to 5 photos
                                    <span style="color: green;">
                                        <small class="fw-normal">( Preferred image size 830x520px ) 2MB</small>
                                    </span>
                                    <i class="fa fa-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
                                        data-bs-custom-class="custom-tooltip"
                                        data-bs-title="Ads with real photos get 10 times more views than with catalogue images. Images must be JPG or PNG format (max 5MB). Do not upload images with watermarks."></i>
                                </h4>
                                <div class="imageUploader"></div>
                                <p>You must upload at least one photo</p>
                            </div>
                            <hr>
                            <div class="ad_post_wrap mb-4">
                                <h4 class="mb-3">Contact details</h4>
                                <div class="mb-2 mb-lg-4">
                                    <label for="name" class="form-label">Name</label>
                                    <input type="text" name="name" id="name"
                                        class="form-control @error('field_name') border-danger @enderror shadow-none"
                                        value="{{ $ads->belongsToUser->name }}" readonly>
                                </div>
                                <div class="mb-2 mb-lg-4">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" name="email" id="email"
                                        class="form-control @error('field_name') border-danger @enderror shadow-none"
                                        value="{{ $ads->email }}" readonly>
                                </div>
                                <div class="mb-2 mb-lg-4">
                                    <label for="phone" class="form-label">Phone</label>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="phone-addon">+254</span>
                                        <input type="text" name="phone" id="phone"
                                            class="form-control @error('field_name') border-danger @enderror shadow-none"
                                            value="{{ $ads->phone }}" aria-label="+254" aria-describedby="phone-addon"
                                            placeholder="Enter phone number" required>
                                    </div>

                                </div>
                            </div>
                            <hr>
                            <div class="ad_post_wrap mb-4">
                                <div class="form-check">

                                    <input class="form-check-input" name="featured" type="checkbox" value="1" {{ $ads->featured == '1' ? 'checked' : '' }} id="defaultCheck1">
                                    <label class="form-check-label" for="defaultCheck1">
                                      Featured Ads
                                    </label>
                                  </div>
                            </div>


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


    </div>
    <!-- ======================= ad post End  ============================ -->
@endsection
@push('scripts')
    <script src="{{ asset('assets/js/image-uploader.js') }}"></script>

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

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

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

        }

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

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

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

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

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


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

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

            countDescription()

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

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


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

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


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

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

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

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