@extends('includes.layout') <!-- Extend the layout -->

@section('content') <!-- Define the content section -->
<div class="container rounded bg-white mt-4 mb-5">
   <div class="row">
      <div class="col-md-3 border-end">
         <div class="d-flex flex-column align-items-center text-center p-3 py-5">
            <div class="avatar-upload">
               <div class="avatar-edit">
                  <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
                  <label for="imageUpload"></label>
               </div>
               <div class="avatar-preview">
                  <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);">
                  </div>
               </div>
            </div>
            <span class="font-weight-bold">Edogaru</span><span class="text-black-50">edogaru@mail.com.my</span><span> </span>
         </div>
      </div>
      <div class="col-md-5 border-end">
         <div class="p-3 ">
            <h6>Saloon Details</h6>
            <div class="row mt-3">
               <div class="col-md-6 mb-3">
                  <label class="form-label">Saloon Name</label><input type="text" class="form-control" placeholder="enter name" value="">
               </div>
               <div class="col-md-6 mb-3"><label class="form-label">Mobile Number</label><input type="text" class="form-control" placeholder="enter phone number" value=""></div>
               <div class="col-md-12 mb-3"><label class="form-label">Bio </label><textarea type="text" class="form-control" placeholder="enter bio " value=""></textarea>
               </div>
               <div class="col-md-6 mb-3">
                  <label class="form-label"> City</label>
                  <select class="form-select" aria-label="Default select example">
                     <option selected>Select</option>
                     <option value="1">Chandigarh</option>
                     <option value="2">Mohali</option>
                     <option value="3">Other</option>
                  </select>
               </div>
               <div class="col-md-12 mb-3"><label class="form-label">Address </label><textarea type="text" class="form-control" placeholder="enter address " value=""></textarea>
               </div>
               <div class="col-md-12 mb-3">
                  <label class="form-label">Services</label>
                  <div class="mt-2">
                     <input type="checkbox" class="btn-check" id="btn1" autocomplete="off">
                     <label class="btn btn-outline-theme mb-2" for="btn1">Haircut</label>
                     <input type="checkbox" class="btn-check" id="btn2" autocomplete="off">
                     <label class="btn btn-outline-theme mb-2" for="btn2">Hair Color</label>
                     <input type="checkbox" class="btn-check" id="btn3" autocomplete="off">
                     <label class="btn btn-outline-theme mb-2" for="btn3">Hair</label>
                  </div>
               </div>
               <div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="button">Save Profile</button></div>
            </div>
         </div>
      </div>
      <div class="col-md-4">
         <div class="p-3">
            <h6>Upload Banner Images</h6>
            <div class="upload__box mt-3">
               <div class="upload__btn-box">
                  <label class="upload__btn">
                  Upload Images
                  <input type="file" multiple="" data-max_length="20" class="upload__inputfile">
                  </label>
               </div>
               <div class="row upload__img-wrap"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="row my-4 border-top">
      <div class="col-md-12 mt-4">
         <h6 class="mb-0">Add Services</h6>
      </div>
      <div class="col-md-10">
         <div class="input-group mb-3 mt-3">
            <select class="form-select" aria-label="Default select example">
               <option selected="">Select Service</option>
               <option value="1">Haircut</option>
               <option value="2">Female</option>
               <option value="3">Other</option>
            </select>
            <select class="form-select" aria-label="Default select example">
               <option selected="">Select Sub Services</option>
               <option value="1">Head Shave</option>
               <option value="2">Head Shave 2</option>
               <option value="3">Head Shave 3</option>
            </select>
            <input type="text" placeholder="Enter Price" class="form-control" id="" >
            <button class="btn btn-primary rounded-1" type="button" id="button-addon2">Add</button>          
         </div>
      </div>
      <div class="col-md-12 mt-4">
         <div class="card">
            <table class="table tx-13  mb-0 table-borded">
               <thead>
                  <tr>
                     <th scope="col">Sr. No.</th>
                     <th scope="col">Service</th>
                     <th scope="col">Sub Services</th>
                     <th scope="col">Price</th>
                     <th scope="col">Edit/Delete</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>1</td>
                     <td>--</td>
                     <td>--</td>
                     <td>--</td>
                     <td>--</td>
                  </tr>
                  <tr>
                     <td>2</td>
                     <td>--</td>
                     <td>--</td>
                     <td>--</td>
                     <td>--</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>
@endsection