@include('more.vendor.partials._header')
   
      {{-- Main content --}}
      <div class="main-content">
         <div class="row">
            <div class="col-lg-12">
               <div class="main-content-title-profile mb-30">
                  
               </div>
            </div>
         </div>
         <div style="" class="add-property-wrapper">
            <div class="add-property-content">
               <form id="ad_post_form" 
                  {{-- onsubmit="disableSubmitButton(e)" --}}
                  method="POST" action="/seller/ad/post" 
                  enctype="multipart/form-data" autocomplete="off"
               >
                  @csrf
                  <div class="row mb-40">
                     <div class="col-xxl-12 col-xl-12">
                        <div class="add-property-form-wrapper" style="margin: -4%; margin-top: -5%;">
                           <div class="main-content-title">
                              <h3 style="margin-top:-4% ">
                                 Post your ad for <span style="color: #F65017;">free</span>
                                 <small style="font-size: 12px;">
                                    {{-- {{ $current_time }} $active = 'dashboard' --}}
                                    <span id="time_span"></span>
                                 </small>
                              </h3>
                              <hr/>
                              
                           </div>
                           
                           {{-- <form> --}}
                              <div class="row" style="padding-top: 7px; margin-bottom: -3%;">
                                 <div class="col-md-6 col-xs-12 mb-30">
                                    <div class="form-inner mb-30">
                                       <label>Location<span style="color: #ff0000">*</span></label>
                                       <input id="ploca" data-bs-toggle="modal" data-bs-target="#exloc1" class="form-control" type="text" placeholder="Select your location" name="location">
                                       <span class="error-message" id="locationError"></span>
                                    </div>
                                 </div>
                                 <div class="col-md-6 col-xs-12 mb-30">
                                    <div class="form-inner mb-30">
                                          <label>Address</label>
                                          <input id="address" type="text" placeholder="Indicate the exact location" name="address">
                                    </div>
                                 </div>
                              </div>
                           
                              <div class="row">
                                 <div class="col-lg-4 col-md-6 col-xs-12">
                                    <div class="form-inner mb-30">
                                       <label>Ad Name<span style="color: #ff0000">*</span></label>
                                       <input id="name" type="text" placeholder="Type ad listing name" name="title" title="Please enter at least 3 characters">
                                       <span class="error-message" id="nameError"></span>
                                    </div>
                                 </div>

                                 <div class="col-lg-4 col-md-6 col-xs-12" style="margin-top: -6px;">
                                    <label>Price type<span style="color: #ff0000">*</span></label>
                                    <div class="form-inner">
                                       <select
                                          style="margin-top: -5px;"
                                          id="price_type"
                                          name="price_type"
                                          class="form-control"
                                          onchange="hidePriceInputField()"
                                       > 
                                          <option value="">Select ad price type </option>
                                          <option value="fixed">Fixed</option>
                                          <option value="negotiable">Negotiable</option>
                                          <option value="on_call">On Call</option>
                                       </select>
                                       <script>
                                          function hidePriceInputField() {
                                             var selectElement = document.getElementById("price_type");
                                             var inputElement = document.getElementById("priceInputContainer");

                                             if (selectElement.value === "on_call") {
                                                inputElement.style.display = "none";
                                             } else {
                                                inputElement.style.display = "block";
                                             }
                                          }
                                       </script>
                                    </div>
                                    <span class="error-message" id="priceTypeError"></span>
                                 </div>

                                 <div class="col-lg-4 col-md-6 col-xs-12" id="priceInputContainer">
                                    {{-- <label id="price_lbl">Price</label>
                                    <input id="togglePriceInput" type="number" placeholder="Type price" name="price"> --}}
                                    <div class="form-inner mb-30">
                                       <label>Ad Price</label>
                                       <input id="priceInput" type="number" name="price">
                                    </div>
                                 </div>

                              
                                 <div class="upload-area">
                                    <div class="upload-img-wrapper" style="padding-bottom: 5px;">
                                       <div class="row g-4 mb-25">
                                          <div class="col-lg-6" style="margin-top: 15px;">
                                             <div class="upload-img-field">
                                                <div class="upload-field-title">
                                                   <h6>Upload Ad Listing Image</h6>
                                                </div>
                                                <div class="upload-btn-box">
                                                   <label class="upload-btn">
                                                      <i class="fas fa-camera"></i>
                                                      Upload images<span style="color: #ff0000">*</span>
                                                      <input id="images" type="file" multiple data-max_length="20" class="upload-inputfile" name='images[]' >
                                                   </label>
                                                   <p>Max.size 4 mb, jpeg or png *</p>
                                                   <span class="error-message" id="imagesError"></span>
                                                </div>
                                             </div>
                                          </div>
                                          <div class="col-lg-6">
                                             <div class="upload-requirements">
                                                <ul>
                                                   <li>
                                                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                         <g clip-path="url(#clip0_855_26)">
                                                            <path d="M6 11.25C4.60761 11.25 3.27226 10.6969 2.28769 9.71231C1.30312 8.72774 0.75 7.39239 0.75 6C0.75 4.60761 1.30312 3.27226 2.28769 2.28769C3.27226 1.30312 4.60761 0.75 6 0.75C7.39239 0.75 8.72774 1.30312 9.71231 2.28769C10.6969 3.27226 11.25 4.60761 11.25 6C11.25 7.39239 10.6969 8.72774 9.71231 9.71231C8.72774 10.6969 7.39239 11.25 6 11.25ZM6 12C7.5913 12 9.11742 11.3679 10.2426 10.2426C11.3679 9.11742 12 7.5913 12 6C12 4.4087 11.3679 2.88258 10.2426 1.75736C9.11742 0.632141 7.5913 0 6 0C4.4087 0 2.88258 0.632141 1.75736 1.75736C0.632141 2.88258 0 4.4087 0 6C0 7.5913 0.632141 9.11742 1.75736 10.2426C2.88258 11.3679 4.4087 12 6 12Z" />
                                                            <path d="M8.22727 3.72747C8.22192 3.73264 8.21691 3.73816 8.21227 3.74397L5.60752 7.06272L4.03777 5.49222C3.93113 5.39286 3.7901 5.33876 3.64437 5.34134C3.49865 5.34391 3.35961 5.40294 3.25655 5.506C3.15349 5.60906 3.09446 5.7481 3.09188 5.89382C3.08931 6.03955 3.14341 6.18059 3.24277 6.28722L5.22727 8.27247C5.28073 8.32583 5.34439 8.36788 5.41445 8.39611C5.48452 8.42433 5.55955 8.43816 5.63508 8.43676C5.7106 8.43536 5.78507 8.41876 5.85404 8.38796C5.92301 8.35716 5.98507 8.31278 6.03652 8.25747L9.03052 4.51497C9.13246 4.40796 9.1882 4.26514 9.18568 4.11737C9.18317 3.9696 9.12259 3.82875 9.01706 3.72529C8.91152 3.62182 8.76951 3.56405 8.62171 3.56446C8.47392 3.56486 8.33223 3.62342 8.22727 3.72747Z" />
                                                         </g>
                                                      </svg>
                                                      Select high quality ad listing image to upload.
                                                   </li>
                                                   <li>
                                                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                                         <g clip-path="url(#clip0_855_26)">
                                                            <path d="M6 11.25C4.60761 11.25 3.27226 10.6969 2.28769 9.71231C1.30312 8.72774 0.75 7.39239 0.75 6C0.75 4.60761 1.30312 3.27226 2.28769 2.28769C3.27226 1.30312 4.60761 0.75 6 0.75C7.39239 0.75 8.72774 1.30312 9.71231 2.28769C10.6969 3.27226 11.25 4.60761 11.25 6C11.25 7.39239 10.6969 8.72774 9.71231 9.71231C8.72774 10.6969 7.39239 11.25 6 11.25ZM6 12C7.5913 12 9.11742 11.3679 10.2426 10.2426C11.3679 9.11742 12 7.5913 12 6C12 4.4087 11.3679 2.88258 10.2426 1.75736C9.11742 0.632141 7.5913 0 6 0C4.4087 0 2.88258 0.632141 1.75736 1.75736C0.632141 2.88258 0 4.4087 0 6C0 7.5913 0.632141 9.11742 1.75736 10.2426C2.88258 11.3679 4.4087 12 6 12Z" />
                                                            <path d="M8.22727 3.72747C8.22192 3.73264 8.21691 3.73816 8.21227 3.74397L5.60752 7.06272L4.03777 5.49222C3.93113 5.39286 3.7901 5.33876 3.64437 5.34134C3.49865 5.34391 3.35961 5.40294 3.25655 5.506C3.15349 5.60906 3.09446 5.7481 3.09188 5.89382C3.08931 6.03955 3.14341 6.18059 3.24277 6.28722L5.22727 8.27247C5.28073 8.32583 5.34439 8.36788 5.41445 8.39611C5.48452 8.42433 5.55955 8.43816 5.63508 8.43676C5.7106 8.43536 5.78507 8.41876 5.85404 8.38796C5.92301 8.35716 5.98507 8.31278 6.03652 8.25747L9.03052 4.51497C9.13246 4.40796 9.1882 4.26514 9.18568 4.11737C9.18317 3.9696 9.12259 3.82875 9.01706 3.72529C8.91152 3.62182 8.76951 3.56405 8.62171 3.56446C8.47392 3.56486 8.33223 3.62342 8.22727 3.72747Z" />
                                                         </g>
                                                      </svg>
                                                      Choose all the appropriate area covers for your ad listing to ensure relevance.
                                                   </li>
                                                </ul>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="upload-img-wrap"></div>
                                    </div>
                                    {{--  --}}
                                 </div>

                                 <div class="col-md-12">
                                    <div class="form-inner mb-30">
                                       <label>Description<span style="color: #ff0000">*</span></label>
                                       <textarea id="description" placeholder="" name="description" rows="2" style="padding: 5px;"></textarea>
                                       <span class="error-message" id="descriptionError"></span>
                                    </div>
                                 </div>
   
                                 <div class="col-md-12">
                                    <div class="form-inner mb-30">
                                       <label>Ad category<span style="color: #ff0000">* (Select your ad listing category)</span></label>
                                       {{-- <input type="text" name="category"> --}}
                                       <div class="row">
                                          <div class="col-lg-4 col-sm-6">
                                             <select class="form-control" placeholder="Select Ad listing category" name="category_id" id="parentCategory"
                                                >
                                                <option selected></option>
                                                @foreach ($categories as $c)
                                                   <option value="{{ $c['id'] }}">{{ $c['name'] }}</option>
                                                @endforeach
                                             </select>
                                             <span class="error-message" id="parentCategoryError"></span>
                                          </div>
                                          <div class="col-lg-4 col-sm-6">
                                             <select style="display: none; line-height: 2.2 !important;" class="form-control" name="sub_category_id" id="subCategory">
   
                                             </select>

                                             <div style="display: none;" class="nice-select" tabindex="0">
                                                <ul class="list">
                                                </ul>
                                                <span class="error-message" id="subCategoryError"></span>

                                             </div>
                                          </div>
                                          <div class="col-lg-4 col-sm-6">
                                             <select style="display: none; line-height: 2.2 !important;" class="form-control select-box" name="sub_sub_category_id" id="subSubCategory">
   
                                             </select>

                                             <div style="display: none;" class="nice-select" tabindex="0">
                                                <ul class="list">
                                                </ul>
                                                <span class="error-message" id="subSubCategoryError"></span>

                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    {{-- More Category Features --}}
                                    <div id="category-features-js" class="row mb-40" style="display:none;">
                                       <div class="col-xxl-12 col-xl-12">
                                          <div class="add-property-form-wrapper">
                                             {{-- <div class="add-property-form-title">
                                                <h6>Auto Advert Features</h6>
                                             </div> --}}
                                             
                                             <div class="feature-aminities-form">
                                                
                                                   <div class="row" >
                                                      <div class="row mb-10"  id="features-container">

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

                                   
                                 </div>
                                 <br/>
                              </div>
                           {{-- </form> --}}
                        </div>
                     </div>
                  </div>

                  <div class="row mb-40">
                     <div class="col-xxl-6 col-xl-6 col-lg-6 col-xs-12">
                     </div>
                     <div class="col-xxl-6 col-xl-6 col-lg-6 col-xs-12">
                        
                        <div class="post-property-btn">
                           <button 
                                 style="margin-left: 62%;"
                                 class="primary-btn3"
                                 type="button"
                                 onclick="resetForm()
                                 "
                              >
                              Clear
                           </button>
                           <button
                              {{-- id="ad_post_btn" --}}
                              {{-- onsubmit="validateAdPostForm()" --}}
                              type="submit" class="primary-btn3">
                                 Post Ad
                           </button>
                        </div>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>

         {{-- Footer Content --}}
@include('more.vendor.partials._footer')