@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=>''],]])
        <!-- ======================= 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'))
            <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.create')}}" 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.store')}}" method="post" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="category_id" value="{{$selected_category?->id}}">
                                <input type="hidden" name="lat" id="lat" value="">
                                <input type="hidden" name="long" id="long" value="">
                                <div class="mb-4">
                                    <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                    <input type="text" value="{{old('title')}}" name="title" id="title"
                                           class="form-control shadow-none @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" class="form-label">Category <span
                                                    class="text-danger">*</span></label>
                                            <select name="category" id="category"
                                                    class="form-control shadow-none @error('field_name') border-danger @enderror select2 form-select shadow-none" required>
                                                @foreach($categories as $category)
                                                    <option value="{{$category->id}}">{{$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" data-placeholder="Select Sub Category"
                                                    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(old('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" data-placeholder="Select Region"
                                                    class="form-control @error('region_id') border-danger @enderror select2 form-select shadow-none" required>
                                                @foreach($regions as $region)
                                                    <option value="{{ $region->id }}"
                                                            @if(old('region_id') == $region->id) selected @endif>{{ $region->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('region_id')
                                            <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" data-placeholder="Select City"
                                                    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="{{ old('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="{{old('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">No</option>
                                                    <option value="1">Yes</option>


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


                                    @if($selected_category?->id != '4' && $selected_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 bg-white" id="price-addon">{{$setting?->currency_symbol}}</span>
                                                <input type="text" class="form-control p-2  @error('price') border-danger @enderror shadow-none"
                                                       oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                                       name="price" id="price"  placeholder="Pick a good price" aria-label="Price" aria-describedby="price-addon" value="{{old('price')}}" required>
                                            </div>
                                            {{-- @error('price')
                                            <span class="text-danger">{{$message}}</span>
                                            @enderror --}}

                                            <div class="form-check mt-2">
                                                <input class="form-check-input shadow-none" type="checkbox" value="1" name="negotiable"
                                                        id="negotiable">
                                                <label class="form-check-label" for="negotiable">
                                                    Negotiable
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    @endif


                                </div>


                                @includeWhen(request()->get('category') == "vehicles",'user.ads.partials.vehicles')
                                @includeWhen(request()->get('category') == "property",'user.ads.partials.property')
                                @includeWhen(request()->get('category') == "education",'user.ads.partials.education')
                                @includeWhen(request()->get('category') == "jobs",'user.ads.partials.job')
                                @includeWhen(request()->get('category') == "service",'user.ads.partials.service')
                                @includeWhen(request()->get('category') == "mens-fashion-grooming" || request()->get('category') == "womens-fashion-beauty",'user.ads.partials.fashion')
                                @includeWhen(request()->get('category') == "electronics" || request()->get('category') == "mobiles",'user.ads.partials.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 maxlength="5000" name="description" id="description" class="details_field form-control @error('description') border-danger @enderror shadow-none"
                                              placeholder="More details = more interested buyers!" required
                                              rows="5">{{old('description')}}</textarea>
                                    @error('description')
                                    <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <hr>
                                <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="{{ old('thumbnail') }}" class="form-control shadow-none"
                                           accept="image/png, image/gif, image/jpeg, image/jpg">
                                    {!! $errors->first('thumbnail', '<label class="help-block text-danger">:message</label>') !!}
                                </div>
                                <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 2MB).Preferred image size 830x520px. Do not upload images with watermarks."></i>
                                    </h4>
                                    <div class="imageUploader"></div>
                                    <p>You must upload at least one photo</p>
                                    @error('images')
                                    <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </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="{{auth()->user()?->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="{{auth()->user()?->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="{{old('phone',auth()->user()?->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" 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 class="mb-2 mb-lg-4">
                                    <div class="form-check">
                                        <input class="form-check-input shadow-none" type="checkbox" name="terms"
                                               required
                                               value="1" id="terms">
                                        <label class="form-check-label" for="terms">
                                            I have read and accept the <a href="{{route('frontend.terms-condition')}}" target="_blank">Terms and
                                                Conditions</a>
                                        </label>
                                    </div>
                                </div>
                                <div>
                                    <button type="submit" class="btn btn-primary px-5">Post Ad</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @else
            @if(isset($categories) && count($categories)>0)
                <div class="container">
                    <div class="bg-light rounded-1 shadow-sm">
                        <div class="listing_heading p-3 border-bottom">
                            <h4 class="title m-0">Select a category</h4>
                        </div>
                        <div class="row d-flex align-items-center justify-content-center p-4 px-0">
                            <!-- ======================= Category Start  ============================ -->
                            <div class="category_section">
                                <div class="container">
                                    <!--<div class="section_heading mb-4">
                                        <h2 class="title">Add items by category</h2>
                                    </div>-->
                                    <div class="row g-0 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 border rounded overflow-hidden">

                                        @forelse($categories as $category)

                                            <!-- category -->
                                            <div class="col">
                                                <div class="category_item d-flex align-items-center position-relative p-3 p-lg-4 h-100 border-end border-bottom">
                                                    <div class="category_icon bg-light rounded p-2 shadow-sm me-2">
                                                        <a href="{{route('user.ads.create',['category'=>$category?->slug])}}"
                                                           class="stretched-link">
                                                            <img src="{{getIcon($category?->image)}}" width="40" class="img-fluid" alt="{{$category?->slug}}">
                                                        </a>
                                                    </div>
                                                    <div class="category_content">
                                                        <div class="category_name mb-1">
                                                            <strong>{{$category?->name}}</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @empty
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                            <!-- ======================= Category End  ============================ -->
                        </div>
                    </div>
                </div>
            @endif
        @endif

    </div>
    <!-- ======================= ad post End  ============================ -->

@endsection
@push('scripts')
    <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'
                },
                // 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>

    @if(old('city_id'))
        <script>
            $(document).ready(function () {
                let city_id = '{{old('city_id')}}';
                let region_id = '{{old('region_id')}}';
                let cityElement = $('#city_id');
                getCityByRegion(region_id, cityElement, city_id);
            });
        </script>
    @else
        <script>
            $(document).ready(function () {
                let region_id = $('#region_id').val();
                let cityElement = $('#city_id');
                getCityByRegion(region_id, cityElement);
            });
        </script>
    @endif
@endpush