@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')
    @if (request()->has('category'))
        <!-- ======================= breadcrumb start  ============================ -->
        @include('frontend.layouts.includes.breadcrumb', [
            'links' => [
                [$title => route('user.ads.create')],
                [$selected_category?->name => ''],
                [$selected_subcategory?->name => ''],
            ],
        ])
        <!-- ======================= breadcrumb end  ============================ -->
    @else
        <!-- ======================= breadcrumb start  ============================ -->
        @include('frontend.layouts.includes.breadcrumb', [
            'links' => [[$title => route('user.ads.create')]],
        ])
        <!-- ======================= breadcrumb end  ============================ -->
    @endif
    


    <!-- ======================= ad post Start  ============================ -->
    <div class="ad_post_sec pt-2 pb-5">


        @if (request()->has('category'))
            @include('user.ads.partials._form')
        @else
            @include('user.ads.partials.select_category')
        @endif

    </div>
    <!-- ======================= ad post End  ============================ -->
@endsection
@push('scripts')
    <script>
        const phoneInput = document.getElementById('employer_phone');
        const phoneInput2 = document.getElementById('phone');

        function validatePhone(input) {
            input.addEventListener('input', function() {
                // Remove all non-digit characters
                this.value = this.value.replace(/\D/g, '');
                // Limit to max 11 digits
                if (this.value.length > 11) {
                    this.value = this.value.slice(0, 11);
                }
            });
        }

        validatePhone(phoneInput);
        validatePhone(phoneInput2);
    </script>

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

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

        //     autocomplete = new google.maps.places.Autocomplete(address1Field, {
        //         componentRestrictions: {
        //             country: 'GH'
        //         },
        //         // componentRestrictions: { country: ["bd", "ca"] },
        //         // fields: ["formatted_address"],
        //         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).ready(function() {
            $('.imageUploader').imageUploader({
                maxFiles: 5,
                mimes: ['image/jpeg', 'image/png'],
            });

            countChar('#description', '.description-length')

        })

        // add features
        function addFeatures() {
            let html =
                '<div class="col-md-12 mb-2 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).on('change', '#negotiable', function (event) {
        //     let priceElement = $('#price');
        //     let { checked } = event.target;
        //     console.log(checked);
        //     if (checked) {
        //         priceElement.attr('disabled', true).attr('required', false);
        //     } else {
        //         priceElement.attr('disabled', false).attr('required', true);

        //     }
        // })
        $(document).on('input', '#description', () => {
            countChar('#description', '.description-length')
        })
    </script>







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

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

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

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

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

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

            // Trigger on page load if a brand was selected previously
            @if (old('brand_id'))
                $('#brand_id').trigger('change');
            @endif
        });
    </script>


    <script>
        $(document).on('change', '.condition_check', function () {
            if (this.value === 'Other') {
                $('#other_description_wrapper').show();
            } else {
                $('#other_description_wrapper').hide();
            }
        });
    </script>

@endpush