@php
$module_folder = 'classified';
@endphp
<div class="row">
   <form class="add-post-form"  enctype="multipart/form-data" method="POST" id="form{{$module->slug}}">
        @csrf()
        <div class="col-lg-12">
            <div class="post-sub-sec">
                <h4 class="post-sub-title">1. Classified Details</h4>
                <div class="form-group">
                    <label for="inputTitle">Title</label>
                    <input type="text" class="form-control" id="classifiedInputTitle" name="title" value="{{old('title', $ad->title ?? '')}}" placeholder="Enter Classified Title">
                </div>

               
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputEmail4">Price</label>
                        <input type="number" class="form-control" id="inputPrice" name="classified_price" value="{{old('classified_price', $ad->classified_price ?? '')}}" placeholder="Enter Price">
                    </div>
                    <div class="form-group col-md-6">
                       <label for="">Category</label>
                        <select class="form-control" name="category_id" id="category_id{{$module->id}}">
                            <option value="">Choose...</option>
                          
                            @foreach($categories as $cat)
                                
                                @if($module->id == $cat->module_id && $cat->parent_id == 0)

                                    <option value="{{$cat->id}}" {{ $ad->category_id == $cat->id ? 'selected' : ''}}>{{$cat->title}}</option>

                                @endif
                                
                            @endforeach
                                                      
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputDes">Description</label>
                    <textarea class="form-control textarea" rows="3" name="overview_description" placeholder="Enter event description" id="overview_classified_description">{{old('overview_description', $ad->overview_description ?? '')}}</textarea>
                </div>

                <div class="form-group">

                    <label for="inputFeatuedImage" class="label-display-block">Featured Image</label>

                    <div class="fileinput @if( isset( $ad->featured_image ) )  fileinput-exists @else fileinput-new @endif" data-provides="fileinput">
                        <div class="fileinput-preview fileinput-exists thumbnail">
                           @if( isset( $ad->featured_image )) 
                              <img src="{{asset($module_folder.'/'.$ad->featured_image)}}">
                          @endif
                        </div>
                        <div>
                          <span class="btn btn-primary btn-file">
                              <span class="fileinput-new">Select Image</span>
                              <span class="fileinput-exists">Change</span>
                              <input type="hidden" name="featured_image" value="{{ isset($ad->featured_image)  ? $ad->featured_image : ''}}">
                              <input id="featured_image" name="featured_image" type="file" class="form-control" accept="image/*"/>
                          </span>
                          <a href="javascript:void(0);" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                        </div>
                    </div>

                </div>  
            </div>

            <div class="post-sub-sec">
                <h4 class="post-sub-title">2. Contact Info</h4>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputEmail4">Email</label>
                        <input type="email" class="form-control" id="inputEmail4" name="email" value="{{old('email', $ad->email ?? '')}}">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputPhone">Phone (XXXXXXXXXX)</label>
                        <input type="text" class="form-control" id="inputPhone" name="phone" value="{{$ad->phone ?? ''}}">
                    </div>
                </div>
              
            </div>

            <div class="post-sub-sec">
                <h4 class="post-sub-title">3. Location</h4>
                <div class="form-group">
                    <label for="">Street, Address</label>
                    <input type="text" class="form-control" id="inputAddress" name="street_address" value="{{$ad->street_address ?? ''}}">
                </div>
                <div class="form-row">
                    <div class="form-group col-md-5">
                        <label for="">City</label>
                        <input name="city" type="text" class="form-control" id="inputCity" value="{{ $ad->city ?? '' }}">
                    </div>
                    <div class="form-group col-md-4">
                        <label for="">Province</label>
                        <select name="province_id" id="inputState" class="form-control">
                            <option value="">Choose...</option>
                            @foreach($provinces as $province)
                                <option value="{{$province->id}}" {{ $ad->province_id == $province->id ? 'selected' : ''}}>{{$province->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="">Postal Code</label>
                        <input type="text" class="form-control" id="inputZip" name="postal_code" value="{{$ad->postal_code ?? ''}}">
                    </div>
                </div>
            </div>

             <div class="post-sub-sec business-media">
                <h4 class="post-sub-title">4. Gallery</h4>
                <div class="form-group">
                    <label for="inputTitle">Upload Images</label>
                    <div class="input-images-1" style="padding-top: .5rem;"></div>
                </div>
            </div>


            <div class="post-sub-btn-sec">
                
               <button type="button" class="btn btn-primary post-ad-button" data-action="{{route('user.my.classified.update',$ad->slug)}}" data-form="form{{$module->slug}}" data-redirect="{{route('user.dashboard')}}" data-button="Send for review..." data-button-success="Send for review">Send for review</button>

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

@if( isset($ad->gallery) && count($ad->gallery) >0 )
    @php $images = []; @endphp
    @foreach($ad->gallery as $buskey => $busgallery)
        @php 
            $images[] = [
                'id' =>  $busgallery->image,
                'src' => asset('classified-gallery/'.$busgallery->image)
            ];
        @endphp
    @endforeach
@endif

@section('head-css')
<link href="{{ asset('backend/jasny-bootstrap/css/jasny-bootstrap.css')}}" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="{{ asset('frontend/css/image-uploader.css') }}" rel="stylesheet" />
@endsection

@section('scripts')
<script type="text/javascript" src="{{ asset('backend/jasny-bootstrap/js/jasny-bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ asset('backend/tinymce/tinymce.min.js') }}"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<script type="text/javascript">
    tinymce.init({
        selector: ".textarea",
        menubar:false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu'
        ],
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link'
    });
</script>

<script src="{{ asset('frontend/js/image-uploader.js') }}"></script>

<script type="text/javascript">    

var myarray = []; // more efficient than new Array()

@if(isset($images))
@foreach($images as $data)
    myarray.push([{
                id: "{{$data['id']}}",
                src: "{{$data['src']}}"
            }
        ]);
@endforeach
@endif

$('.input-images-1').imageUploader();

$(".post-ad-button").on('click',function(event){

    event.preventDefault();

    $("span.uk-text-danger").remove();

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('input[name="_token"]').val()
      }
    });
    var formName    = $(this).attr('data-form');
    var formAction  = $(this).attr('data-action');
    var form = document.forms.namedItem(formName); // high importance!, here you need change "yourformname" with the name of your form
    var formRedirect = $(this).attr('data-redirect');
    
    var buttonBeforeMessage = $(this).attr('data-button');
    var buttonSuccessMessage = $(this).attr('data-button-success');

    var self         = $(this);

    var formData     = new FormData(form); // high importance!
    
    $.ajax({

        url: formAction,

        processData: false,

        contentType: false,

        cache: false,

        method: 'POST',

        data: formData,

        beforeSend: function(){
            $("#loading-div-background").show();
        },

        success: function(data){
            setTimeout(function(){
                 window.location.replace(formRedirect);
            }, 2000);
        },
        error: function(jqXhr, json, errorThrown){
            
            $("#loading-div-background").hide();
            
            self.text(buttonSuccessMessage);

            self.removeAttr('disabled');

            var errors = jqXhr.responseJSON;

            $.each(errors['errors'], function (index, value) {
           
                if(index == 'province_id'){
                    $('#eventForm select[name='+index+']').after('<span class="uk-form-label uk-text-danger">'+value+'</span>');
                }
               
                else{
                    $('#eventForm input[name='+index+']').after('<span class="uk-form-label uk-text-danger">'+value+'</span>');
                }

            });

            $("html, body").animate({
                scrollTop: 500
            }, 900);  

        }
    });
});

</script>

@endsection