@extends('admin.layouts.master')

@section('ads', 'active')
@section('title') {{ $data['title'] ?? '' }} @endsection

@push('style')
    <link rel="stylesheet" href="{{asset('assets/css/image-uploader.min.css ')}}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.27.0/tagify.min.css" rel="stylesheet" type="text/css" />
    <style>
        .bootstrap-tagsinput{
            width: 100%;
            height: 46px;
        }
        span.tag {
            padding: 10px;
    font-size: smaller;
        }
        .bootstrap-tagsinput input{

        }
    </style>
@endpush
@php
     $ads = $data['ads'];
     $categories = $data['categories'];
     $subcategories = $data['subcategories'];
     $regions = $data['regions'];
     $brands = $data['brands'];
@endphp
@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">{{ $data['title'] ?? '' }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">{{ $data['title'] ?? '' }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <h3 class="card-title">Edit Ads </h3>
                                </div>
                                <div class="col-6">
                                    <div class="float-right">
                                        @if (Auth::user()->can('admin.ads.view'))
                                        <a href="{{ route('admin.ads.index') }}"  class="btn btn-primary">Back</a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body table-responsive p-4">

                            <div class="row d-flex align-items-center justify-content-center p-3 py-5">
                                <div class="col-lg-7">
                                    <form action="{{route('admin.ads.update', $ads->id)}}" method="post" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="category_id" value="{{$ads->category_id}}">
                                        <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" id="category_id"
                                                            class="form-control @error('category_id') border-danger @enderror select2 form-select shadow-none" disabled>
                                                        @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($subcategories 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>


                                            @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 ({{$setting->currency_symbol}}) <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 class="form-check-input shadow-none" type="checkbox" name="negotiable"
                                                               value="1" id="negotiable" {{ $ads->negotiable == '1' ? 'checked' : '' }}>
                                                        <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!" required
                                                      rows="5">{{$ads?->hasOneAdsInfo?->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="" class="form-control shadow-none"
                                                   accept="image/png, image/gif, image/jpeg, image/jpg">
                                                   <img src="{{asset($ads->thumbnail)}}" class="mt-2" alt="" width="200">
                                            {!! $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
                                                <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 class="text-success">You must upload at least one photo, Preferred image size 830x520px, 2MB</p>
                                        </div>
                                        <hr>
                                        <div class="ad_post_wrap mb-4">
                                            <h4 class="mb-3">Status and Verification</h4>
                                            <div class="row">
                                                <div class="mb-2 mb-lg-4 col-md-6">
                                                    <label for="name" class="form-label">Status</label>
                                                    <select name="status" id="" class="form-control form-select">
                                                        <option @selected(old('status',$ads->status)=='active') value="active">Active</option>
                                                        <option @selected(old('status',$ads->status)=='sold') value="sold">Sold</option>
                                                        <option @selected(old('status',$ads->status)=='pending') value="pending">Pending</option>
                                                    </select>
                                                </div>

                                                <div class="mb-2 mb-lg-4 col-md-6">
                                                    <label for="name" class="form-label">Verification Status</label>
                                                    <select name="verification_status" id="" class="form-control form-select">
                                                        <option @selected(old('verification_status',$ads->verification_status)=='verified') value="verified">Verified</option>
                                                        <option @selected(old('verification_status',$ads->verification_status)=='pending') value="pending">Pending</option>
                                                        <option @selected(old('verification_status',$ads->verification_status)=='declined') value="declined">Declined</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </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">+233</span>
                                                    <input type="text" name="phone"  id="phone" class="form-control @error('field_name') border-danger @enderror shadow-none"
                                                           value="{{$ads->phone}}"
                                                           aria-label="+233" aria-describedby="phone-addon" placeholder="Enter phone number" required>
                                                </div>

                                            </div>
                                        </div>
                                        <hr>

                                        <div class="ad_post_wrap mb-4">
                                            <h4 class="mb-3">Seo Info</h4>
                                            <div class="mb-2 mb-lg-4">
                                                <label for="name" class="form-label">Meta Description</label>
                                                <textarea name="meta_description" class="form-control shadow-none"  id="" cols="30" rows="10">{{$ads?->meta_description}}</textarea>
                                            </div>
                                            <div class="mb-2 mb-lg-4">
                                                <label for="status" class="form-lable w-100">Meta Keywords</label>
                                                <input type="text" name="meta_keywords" value="{{$ads->meta_keywords}}" data-role="tagsinput">
                                            </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>
            </div>
        </div>
    </div>
</div>

@endsection

@push('script')
<script src="{{asset('assets/js/image-uploader.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.27.0/tagify.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>

    $(function () {
        $("#deadline").datepicker();
    });

    $(".show_to_price_symble").html($(".getJobPriceSymbol").val());

    $(".getJobPriceSymbol").on('change', function () {

        let priceSymble = $(".getJobPriceSymbol").val();

        $(".show_to_price_symble").html(priceSymble);

    });

</script>
    <script>
        var input = document.querySelector("input[name='meta_keywords']");
        // initialize Tagify on the above input node reference
        let teg = new Tagify(input,{originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')});
    </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 () {
        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}
        })
        console.log(images);
        $('.imageUploader').imageUploader({
            maxFiles: 5,
            preloaded:images,
            preloadedRemovedInputName:'removeimage',
        });
    })

    </script>
    @if($ads->city_id)
    <script>
        $(document).ready(function () {
            let city_id = '{{ $ads->city_id }}';
            let region_id = '{{ $ads->region_id }}';
            let cityElement = $('#city_id');
            getCityByRegion(region_id, cityElement, city_id);
        });

        $(document).ready(function() {
            // Function to load subcategories for a given category


            // Load the subcategories for the currently selected category on page load
            var initialCategoryId = $('#category_id').val();
            var initialSubcategoryId = {{ $ads->subcategory_id }};
            var subcategory_element = $('#subcategory_id');

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

            countDescription()

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


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

            // Update subcategories when the category changes
            $('#category_id').change(function() {
                var categoryId = $(this).val();

                if (categoryId) {
                    loadSubcategories(categoryId,subcategory_element, initialSubcategoryId);

                } else {
                    $('#subcategory_id').html('<option value="">Select a subcategory</option>');
                }
            });
        });

        $(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>
@endif

@endpush