@include('more.vendor.partials._header')
{{-- <style>
   ul {
            list-style-type: none; /* Remove default list styling */
            padding: 0;            /* Remove default padding */
            margin: 0;             /* Remove default margin */
            display: flex;         /* Enable flexbox */
        }
        li {
            margin-right: 20px;    /* Space between items */
        }
        /* Optional: Remove right margin on the last item */
        li:last-child {
            margin-right: 0;
        }
</style> --}}

         {{-- Main content --}}

         <div class="main-content">
            <div class="row">
               <div class="col-lg-12">
                  <div class="main-content-title-profile mb-50">
                     <div class="main-content-title">
                        <h3>{{ $title }}</h3>
                        <img src="assets/img/dashboard/icon/smile-icon.svg" alt>
                     </div>
                     <div class="profile">
                        <span id="time_span"></span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
                           <path d="M6.669 2.27202L0.94102 8L0 7.05898L5.72731 1.331H0.679478V0H8V7.32052H6.669V2.27202Z" />
                        </svg>
                     </div>
                  </div>
               </div>
            </div>
            <div class="dashboard-faqs-wrapper">
                <div class="row g-xl-4 gy-5">
                   <div class="col-xl-12">
                      <div class="dashboard-faqs-question dashboard-profile-tab-content">
                         <div class="dashboard-faqs-title two">
                            <h6>Claim your store</h6>
                            @if (Session::has('error'))
                              <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                 {{ Session::get('error') }}
                                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                       <span aria-hidden="true">&times;</span>
                                 </button>
                              </div>
                           {{-- @endif --}}
                           <!-- //success -->
                           @elseif (Session::has('success'))
                              <div class="alert alert-success alert-dismissible fade show" role="alert">
                                 {{ Session::get('success') }}
                                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                       <span aria-hidden="true">&times;</span>
                                 </button>
                              </div>
                           @else
                              <p>Generally, to claim your More Classifieds Store, fill up the form below and submit</p>
                           @endif
                         </div>
                         <div class="dashboard-faqs-question-form">
                            <form
                              method="POST"
                              action="/seller/store/claim"
                              enctype="multipart/form-data"
                           >
                              @csrf 
                              {{-- <div class="row">
                                  <div class="col-lg-12 mb-30">
                                       <div class="form-inner">
                                          <label class="add-property-form-title">Store category<span style="color: #ff0000">*</span></label>
                                          <div class="feature-check-area">
                                             <div class="row">
                                                <div class="col-lg-12 col-sm-12">
                                                   <ul class="feature-check-list" style="list-style-type: none;"> 
                                                      @foreach ($cats as $c)
                                                         <li style="display: inline-block;">
                                                            <label class="containerss">
                                                               <input type="checkbox" name="category[]" value="{{ $c['id'] }}">
                                                               <span class="checkmark"></span>
                                                               <span class="text">{{ $c['name'] }}</span>
                                                            </label>
                                                         </li>
                                                      @endforeach
                                                   </ul>
                                                   <div class="nice-select" tabindex="0">
                                                      <span class="current">Choose...</span>
                                                      <ul class="list">
                                                         <li data-value="none" class="option selected">Choose...</li>
                                                         
                                                         @foreach ($cats as $c)
                                                            <li data-value="{{ $c['id'] }}" class="option">{{ $c['name'] }}</li>
                                                         @endforeach
                                                      </ul>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                  </div>
                               </div> --}}
                               
                              <div class="row mb-40">
                                 <div class="col-xxl-12 col-xl-12">
                                    <div class="add-property-form-wrapper">
                                       <div class="row">
                                                
                                          <div class="col-lg-4">
                                             <div class="form-inner">
                                                <label>What’s Your Trading name<span style="color: #ff0000">*</span></label>
                                                <input name="name" type="text" placeholder="Type your store name" required>
                                             </div>
                                          </div>

                                          <div class="col-md-4 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" required pattern=".{3,}" title="Please enter at least 3 characters">
                                             </div>
                                          </div>
                                          <div class="col-md-4 col-xs-12 mb-30">
                                             <div class="form-inner mb-30">
                                                   <label>Address</label>
                                                   <input type="text" placeholder="Indicate the exact location" name="address">
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>

                              <div class="upload-area">
                                 <div class="upload-img-wrapper">
                                    <div class="upload-img-wrap" style="width: 36%;margin-bottom: 4%;"></div>
                                    <div class="row g-4 mb-25">
                                       <div class="col-lg-6">
                                          <div class="upload-img-field">
                                             <div class="upload-field-title">
                                                <h6>Store Logo</h6>
                                             </div>
                                             <div class="upload-btn-box">
                                                <label class="upload-btn">
                                                   <i class="fas fa-camera"></i>
                                                   Upload logo<span style="color: #ff0000">*</span>
                                                   <input type="file" multiple data-max_length="20" class="upload-inputfile" name='logo' required>
                                                </label>
                                                {{-- <p>Max.size 4 mb, jpeg or png *</p> --}}
                                             </div>
                                          </div>
                                       </div>

                                       <div class="col-lg-6">
                                          <div class="upload-img-field">
                                             <div class="upload-field-title">
                                                <h6> Store Banner</h6>
                                             </div>
                                             <div class="upload-btn-box">
                                                <label class="upload-btn">
                                                   <i class="fas fa-image"></i>
                                                   Upload banner image
                                                   <input type="file" multiple data-max_length="20" class="upload-inputfile" name='banner'>
                                                </label>
                                                {{-- <p>Max.size 4 mb, jpeg or png *</p> --}}
                                             </div>
                                          </div>
                                       </div>

                                       <div class="col-lg-6">
                                          <div class="upload-img-field">
                                             <div class="upload-field-title">
                                                <h6>Store KRA Pin</h6>
                                             </div>
                                             <div class="upload-btn-box">
                                                <label class="upload-btn">
                                                   <i class="fas fa-file-pdf"></i>
                                                   Upload Store KRA Pin document
                                                   <input type="file" multiple data-max_length="20" class="upload-inputfile" name='kra_pdf'>
                                                </label>
                                                {{-- <p>Max.size 4 mb, jpeg or png *</p> --}}
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 {{--  --}}
                              </div>
                               <button type="submit" class="primary-btn3">Claim Store</button>
                            </form>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
         </div>
         

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