@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="margin-top: -5%;" class="add-property-wrapper">
            <div class="add-property-content">
               <form id="ad_banner_form"
                  method="POST" action="/seller/banners/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 banner advert 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-6 col-md-6 col-xs-12">
                                    <div class="form-inner mb-30">
                                       <label>Banner title<span style="color: #ff0000">*</span></label>
                                       <input id="name" type="text" placeholder="Type banner title" name="title" title="Please enter at least 3 characters">
                                       <span class="error-message" id="nameError"></span>
                                       <input id="ploca" data-bs-toggle="modal" data-bs-target="#exloc1" class="form-control" type="hidden" placeholder="Select your location" name="location">
                                    </div>
                                 </div>

                                 <div class="col-lg-6 col-md-6 col-xs-12" style="margin-top: -6px;" id="categoryInputContainer">
                                    <label>Category<span style="color: #ff0000">*</span></label>
                                    <div class="form-inner">
                                       <select
                                          style="margin-top: -5px;"
                                          id="category"
                                          name="category_id"
                                          class="form-control"
                                       > 
                                          <option value="">Select category </option>
                                          @foreach ($categories as $c)
                                            <option value="{{ $c['id'] }}">{{ $c['name'] }} </option>
                                          @endforeach
                                       </select>
                                    </div>
                                    <span class="error-message" id="categoryError"></span>
                                 </div>

                                 <div class="col-lg-12 col-md-12 col-xs-12" style="margin-top: 9px;">
                                    <div class="form-inner feature-aminities-form">
                                       <label>Tariff(s)<span style="color: #ff0000">*</span></label>
                                       <div class="feature-check-area">
                                          <div class="row">
                                             <div class="col-lg-3 col-sm-6">
                                                <ul class="feature-check-list" style="list-style-type: none;">
                                                   <li>
                                                      <label class="containerss">
                                                      <input type="checkbox" name="morning">
                                                      <span class="checkmark"></span>
                                                      <span class="text">Morning</span>
                                                      </label>
                                                   </li>
                                                </ul>
                                             </div>
                                             <div class="col-lg-3 col-sm-6">
                                                <ul class="feature-check-list" style="list-style-type: none;">
                                                   <li>
                                                      <label class="containerss">
                                                      <input type="checkbox" name="afternoon">
                                                      <span class="checkmark"></span>
                                                      <span class="text">Afternoon</span>
                                                      </label>
                                                   </li>
                                                </ul>
                                             </div>
                                             <div class="col-lg-3 col-sm-6">
                                                <ul class="feature-check-list" style="list-style-type: none;">
                                                   <li>
                                                      <label class="containerss">
                                                      <input type="checkbox" name="evening">
                                                      <span class="checkmark"></span>
                                                      <span class="text">Evening</span>
                                                      </label>
                                                   </li>
                                                </ul>
                                             </div>
                                             <div class="col-lg-3 col-sm-6">
                                                <ul class="feature-check-list" style="list-style-type: none">
                                                   <li>
                                                      <label class="containerss">
                                                      <input type="checkbox" name="night">
                                                      <span class="checkmark"></span>
                                                      <span class="text">Night</span>
                                                      </label>
                                                   </li>
                                                </ul>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <span class="error-message" id="tariffError"></span>
                                 </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 Banner Advert Listing Image</h6>
                                                </div>
                                                <div class="upload-btn-box">
                                                   <label class="upload-btn">
                                                      <i class="fas fa-camera"></i>
                                                      Upload image<span style="color: #ff0000">*</span>
                                                      <input id="image" type="file" data-max_length="20" class="upload-inputfile" name='image' >
                                                   </label>
                                                   <p>Max.size 4 mb, jpeg or png *</p>
                                                   <span class="error-message" id="imageError"></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 banner advert 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-lg-6 col-md-6 col-xs-12">
                                    <div class="form-inner mb-30">
                                       <label>Banner link<span style="color: #ff0000">*</span></label>
                                       <input id="link" type="text" placeholder="Type advert link" name="link" title="eg. https://more.co.ke">
                                       <span class="error-message" id="linkError"></span>
                                    </div>
                                 </div>

                                 <div class="col-lg-6 col-md-6 col-xs-12" style="margin-top: -6px;">
                                    <label>Position<span style="color: #ff0000">*</span></label>
                                    <div class="form-inner">
                                       <select
                                          style="margin-top: -5px;"
                                          id="position"
                                          name="position"
                                          class="form-control"
                                       > 
                                          <option value="">Select banner position </option>
                                          <option value="1"> Top </option>
                                          <option value="2"> Right side </option>
                                          <option value="3"> Left side </option>
                                          <option value="4"> Bottom </option>
                                       </select>
                                    </div>
                                    <span class="error-message" id="positionError"></span>
                                 </div>

                                 <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-inner mb-30">
                                       <label>Start date<span style="color: #ff0000">*</span></label>
                                       <input id="start_date" type="date" placeholder="Click to select date..." name="start_date">
                                       <span class="error-message" id="startDateError"></span>
                                    </div>
                                 </div>

                                 <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-inner mb-30">
                                       <label>End date<span style="color: #ff0000">*</span></label>
                                       <input id="end_date" type="date" placeholder="Click to select date..." name="end_date">
                                       <span class="error-message" id="endDateError"></span>
                                    </div>
                                 </div>
                              </div>
                           {{-- </form> --}}
                        </div>
                     </div>
                  </div>

                  <div class="row mb-40">
                     <div class="col-xxl-4 col-xl-4 col-lg-6 col-xs-12">
                     </div>
                     <div class="col-xxl-8 col-xl-8 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">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
                                    <g clip-path="url(#clip0_485_1365)">
                                    <path d="M7 13.125C5.37555 13.125 3.81763 12.4797 2.66897 11.331C1.52031 10.1824 0.875 8.62445 0.875 7C0.875 5.37555 1.52031 3.81763 2.66897 2.66897C3.81763 1.52031 5.37555 0.875 7 0.875C8.62445 0.875 10.1824 1.52031 11.331 2.66897C12.4797 3.81763 13.125 5.37555 13.125 7C13.125 8.62445 12.4797 10.1824 11.331 11.331C10.1824 12.4797 8.62445 13.125 7 13.125ZM7 14C8.85652 14 10.637 13.2625 11.9497 11.9497C13.2625 10.637 14 8.85652 14 7C14 5.14348 13.2625 3.36301 11.9497 2.05025C10.637 0.737498 8.85652 0 7 0C5.14348 0 3.36301 0.737498 2.05025 2.05025C0.737498 3.36301 0 5.14348 0 7C0 8.85652 0.737498 10.637 2.05025 11.9497C3.36301 13.2625 5.14348 14 7 14Z"></path>
                                    <path d="M7 3.5C7.11603 3.5 7.22731 3.54609 7.30936 3.62814C7.39141 3.71019 7.4375 3.82147 7.4375 3.9375V6.5625H10.0625C10.1785 6.5625 10.2898 6.60859 10.3719 6.69064C10.4539 6.77269 10.5 6.88397 10.5 7C10.5 7.11603 10.4539 7.22731 10.3719 7.30936C10.2898 7.39141 10.1785 7.4375 10.0625 7.4375H7.4375V10.0625C7.4375 10.1785 7.39141 10.2898 7.30936 10.3719C7.22731 10.4539 7.11603 10.5 7 10.5C6.88397 10.5 6.77269 10.4539 6.69064 10.3719C6.60859 10.2898 6.5625 10.1785 6.5625 10.0625V7.4375H3.9375C3.82147 7.4375 3.71019 7.39141 3.62814 7.30936C3.54609 7.22731 3.5 7.11603 3.5 7C3.5 6.88397 3.54609 6.77269 3.62814 6.69064C3.71019 6.60859 3.82147 6.5625 3.9375 6.5625H6.5625V3.9375C6.5625 3.82147 6.60859 3.71019 6.69064 3.62814C6.77269 3.54609 6.88397 3.5 7 3.5Z"></path>
                                    </g>
                                </svg>
                                 Post banner
                           </button>
                        </div>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>

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