@extends('layouts.auth')

@section('title')
    {{ __('words.Post Ad') }}
@endsection

@section('content')
    <input type=hidden id="updateAdId" value="{{ !empty(request()->query('ad')) ? request()->query('ad') : '' }}" />
    <section class="postAd_">
        <div class="container">

            <div class="postAd_heading d-flex">
                <a class="postAd_back" href="{{ url('/') }}"><img src="{{ asset('frontend/img/backIcon.svg') }}"
                        alt="back-icon" class="img-fluid">{{ __('detail.go back') }} </a>
                <h6 class="pageSubhead_">{{ __('words.Post Your Ad') }}</h6>
            </div>
            <div class="suggeted-post-cat">
                <form method="get" class="mb-0" id="predict-category" style="border: none !important;">
                    
                    <p class="ad_title_description">{{  __('attribute.Enter your ad title to get category suggestions, or select one manually from the options below.') }}</p>
                    <div class="inputtitle_">
                        <label class="postAd_Subheading_ px-0 py-2">{{__("attribute.Ad title")}}<span class="astric">*</span></label>
                        <input id="keyword" type="text" class="form-control upload_detail" name="keyword"
                            value="{{ old('keyword') }}" placeholder="{{ __('attribute.Enter title') }}" maxlength="100" required>
                             <input type="hidden" id="header_lang" value="{{ session("locale") }}">
                            <span class="smalltext_">0/100</span>
                        <div class="loader_new">
                            <div class="bt-spinner d-none"></div>
                        </div>
                        <button class="input-group-text-button d-none" id="basic-addon2" type="submit">
                            <img src="{{ asset('frontend/img/searchIcon.png') }}" class="img-fluid searchIcon">

                        </button>
                    </div>
                    <div class="predict  headText1">
                        <div class="catehead_">
                            <div>
                                <label class="postAd_Subheading_ px-0 d-none" id="category-recomended-label">{{__("words.Category Recommendation")}}</label>
                                <label class="postAd_Subheading_ px-0 d-none" id="im-error">{{__("words.No Result Found")}}</label>
                            </div>
                            <button class="cateSearch_ " type="submit">{{__("words.Search")}}</button>
                        </div>
                        <div class="headText subinnercontain_ predict-inside d-none" id="predicted-data" val="">

                        </div>
                    </div>

                    <h4 class="headError d-none" val=""></h4>
                </form>
            </div>

            <div class="postAd_Contaniners_">
                <h3 class="postAd_Subheading_">{{ __('words.Choose A Category Manually') }}</h3>
                <div class="row product_detail">

                    @foreach (getcategoryList() as $category)
                        <div class="col-sm-6 col-md-6 col-lg-3">
                            <div class="product_icon mainCategory" data-id="{{ $category->id }}">
                                <img src="{{ !empty($category->icon) ? $category->icon : asset('frontend/img/Ad2.svg') }}"
                                    alt="icon" class="img-fluid">
                                <span>
                                    {{ __("category.$category->title") }}
                                </span>
                            </div>
                        </div>
                    @endforeach


                </div>
            </div>
        </div>

    </section>
    @push('page_script')
        <script>
            $(document).on('click', '.mainCategory', function() {
                let id = $(this).attr('data-id');
                $.ajax({
                    url: "{{ route('category.subCategoryView') }}",
                    type: "POST",
                    data: {
                        category_id: id,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(result) {
                        $('.postAd_').html(' ');
                        $('.postAd_').html(result.view);
                    }

                });
            });

            $(document).on('click', '.showSubCategory', function(e) {
                $('.product_icon_Innersubcategorymenus').html(' ');
                $('.showSubCategory').removeClass('active');
                $(this).addClass('active');
                let id = $(this).attr('data-id');
                $('#sub-category').val(id);
                let adId = $('#updateAdId').val();
                $.ajax({
                    url: "{{ route('category.subCategoryView') }}",
                    type: "POST",
                    data: {
                        category_id: id,
                        sub_category: 1,
                        adId: adId,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(result) {
                        $('.addDropDownSub' + id).html(result.view);
                        //$('.product_icon_Innersubcategorymenus').html(result.view);
                    }

                });

            });

            $('.suggeted-post-cat #keyword').on('input', function() {
                var charCount = $.trim($(this).val()).length;
                var counter = $('.suggeted-post-cat .smalltext_');
                counter.text(charCount + '/100');
                if (charCount > 80) {
                    counter.css('color', 'red');
                } else {
                    counter.css('color', ''); // Reset to default
                }
            });
        </script>
    @endpush
@endsection