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

@section('content') <!-- Define the content section -->
<div class="bg-main-body">
   <div class="container-lg">
      <div class="row  py-5 ">
         <div class="col-md-6">
            <div class="bg-white p-3 rounded ">
               <div class="row gx-0">
                  <div class="col-md-6 col-xl-4">
                     <div class="card border-0 h-100 pt-4 px-3">
                        <div class="position-relative">
                           <div class="images-card">
                              <img src="assets/images/men-bio.png" class="card-img-top" alt="...">
                           </div>
                           <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                              <div class="d-flex">
                                 <h1 class="text-theme mb-0 lh-34">20</h1>
                                 <p class="rotate text-white tx-9 mb-0">YEARS</p>
                              </div>
                              <p class="text-white mb-0 tx-9">EXPERIENCE</p>
                           </div>
                        </div>
                        <div class="card-body text-center">
                           <h6 class="card-title mb-0">Rahul Sharma</h6>
                           <p class=".text-theme tx-12 text-theme">Unisex Salon</p>
                           <button class="btn w-100 hax text-white" type="submit">Save</button>
                           <button class="btn cancel w-100 mt-2 bg-dark text-white" type="submit">Cancel</button>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-6 col-xl-8">
                     <div class="card border-0 h-100">
                        <div class="card-body">
                           <p>__ Bio</p>
                           <p class="text-dim tx-12">There are many variations of passages of Lorem Ipsum available, but the majority have suffered
                              alteration in some form, by injected humour, or randomised words which don't look even slight
                              believable. If you are going to use a passage of Lorem Ipsum,
                           </p>
                           <p>__ Skill</p>
                           <div class="button-section">
                              <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Beard</a>
                              <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body</a>
                              <a href="#" class="btn btn3 tx-11 rounded-2 mb-1 p-1">Hair Cut</a>
                              <a href="#" class="btn btn4 tx-11 rounded-2 mb-1 p-1">Hair Spa</a>
                              <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Head Massage</a>
                              <a href="#" class="btn btn5 tx-11 rounded-2 mb-1 p-1">Foot Massage</a>
                              <a href="#" class="btn btn6 tx-11 rounded-2 mb-1 p-1">Body Massage</a>
                              <a href="#" class="btn btn1 tx-11 rounded-2 mb-1 p-1">Foot Massage</a>
                              <a href="#" class="btn btn2 tx-11 rounded-2 mb-1 p-1">Body Spa</a>
                           </div>
                           <!-- happy clinik section start here -->
                           <div class="row mt-4">
                              <div class="col-xl-6 col-lg-6 mb-1">
                                 <div class="pink  px-3 bg-light rounded d-flex">
                                    <a class="mt-3">
                                    <img src="assets/images/happy.png" alt="" class="img-fluid  w-75">
                                    </a>
                                    <div class="ptag">
                                       <h6 class="card-title mb-0 mt-3">24,000+</h6>
                                       <p class="text-dim tx-10">Happy Clients</p>
                                    </div>
                                 </div>
                              </div>
                              <div class="col-xl-6 col-lg-6 mb-1">
                                 <div class=" d-flex bg-light  rounded px-3">
                                    <a class="mt-3">
                                    <img src="assets/images/review.png" class="img-fluid w-75">
                                    </a>
                                    <div class="ptag">
                                       <h6 class="card-title mb-0  mt-3">4.5</h6>
                                       <p class="text-dim tx-10">(364 Reviews)</p>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <!-- blanck section start here -->
                              <div class="slider cutsom_slide mt-5">
                                 <div class="slide-track">
                                    <div class="slide">
                                       <img src="assets/images/glam.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/mansoon.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/cut-style.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/glam.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/mansoon.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/cut-style.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/glam.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/mansoon.png" class="img-fluid">
                                    </div>
                                    <div class="slide">
                                       <img src="assets/images/cut-style.png" class="img-fluid">
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-md-12 mt-3">
               <div class="bg-white rounded p-3">
                  <div class=" row ">
                     <div class="col-xl-5 col-md-12 border-end">
                        <div class="accordion accordion-flush " id="accordionFlushExample">
                           <div class="accordion-item  bg-light  mb-1">
                              <div class="accordion-button bg-light collapsed dashed-dot" data-bs-toggle="collapse" data-bs-target="#flush2" aria-expanded="false" aria-controls="flush-collapseOne">
                                 <span class="col-md-7 fw-bold tx-13">Haircut</span>
                              </div>
                              <div id="flush2" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                 <div class="accordion-body py-0 px-3">
                                    <div class="mt-2">
                                       <ul class="list-group list-group-flush mt-2">
                                          <li class="d-flex justify-content-between align-items-center dashed-dot">
                                             <div class="form-check d-inline-block p-0">
                                                <p class="tx-12 mb-0">Head Shave</p>
                                                <p class="tx-14 text-theme fw-bold">₹251</p>
                                             </div>
                                             <div class="quantity">
                                                <button class="minus text-dark" aria-label="Decrease">&minus;</button>
                                                <input type="number" class="input-box bg-dark text-white" value="1" min="1" max="10">
                                                <button class="plus text-dark" aria-label="Increase">&plus;</button>
                                             </div>
                                          </li>
                                          <li class="d-flex justify-content-between mt-3 dashed-dot">
                                             <div class="form-check d-inline-block p-0">
                                                <p class="tx-12 mb-0">Mundan</p>
                                                <p class="text-theme tx-14 fw-bold">₹501</p>
                                             </div>
                                             <div class="">
                                                <button class="btn btn-dark rounded px-3" type="submit">Add</button>
                                             </div>
                                          </li>
                                          <li class="d-flex justify-content-between mt-3 dashed-dot">
                                             <div class="form-check d-inline-block p-0">
                                                <p class="tx-12 mb-0">Combo Haircut</p>
                                                <p class="text-theme tx-14 fw-bold">₹379</p>
                                             </div>
                                             <div class="">
                                                <button class="btn btn-dark rounded px-3" type="submit">Add</button>
                                             </div>
                                          </li>
                                          <li class="d-flex justify-content-between mt-3 dashed-dot">
                                             <div class="form-check d-inline-block p-0">
                                                <p class="tx-12 mb-0">Combo Haircut</p>
                                                <p class="text-theme tx-14 fw-bold">₹379</p>
                                             </div>
                                             <div class="">
                                                <button class="btn btn-dark rounded px-3" type="submit">Add</button>
                                             </div>
                                          </li>
                                       </ul>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="accordion-item  bg-light  mb-1 border-0">
                              <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                 <span class="col-md-7 fw-bold tx-12">Hair Color</span>
                              </div>
                              <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                 <div class="accordion-body  p-0">
                                    <ul class="list-group list-group-flush">
                                       <li class="list-group-item  tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="headshave">
                                          <label class="form-check-label tx-12" for="headshave">
                                          Head Shave
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹251</span>
                                       </li>
                                       <li class="list-group-item tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="mundan">
                                          <label class="form-check-label tx-12" for="mundan">
                                          Mundan (Below 7 years)
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹451</span>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           <!-- collapse -->
                           <div class="accordion-item  bg-light  mb-1 border-0">
                              <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseO" aria-expanded="false" aria-controls="flush-collapseOne">
                                 <span class="col-md-7 fw-bold tx-12">Beard</span>
                              </div>
                              <div id="flush-collapseO" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                 <div class="accordion-body  p-0">
                                    <ul class="list-group list-group-flush">
                                       <div class="my-2">
                                          <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                          <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                       </div>
                                       <li class="list-group-item tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="headshave">
                                          <label class="form-check-label tx-12" for="headshave">
                                          Head Shave
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹251</span>
                                       </li>
                                       <li class="list-group-item tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="mundan">
                                          <label class="form-check-label tx-12" for="mundan">
                                          Mundan (Below 7 years)
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹451</span>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           <div class="accordion-item  bg-light  mb-1 border-0">
                              <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapsen" aria-expanded="false" aria-controls="flush-collapseOne">
                                 <span class="col-md-7 fw-bold tx-12">Facial/Clean Up</span>
                              </div>
                              <div id="flush-collapsen" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                 <div class="accordion-body  p-0">
                                    <ul class="list-group list-group-flush">
                                       <div class="my-2">
                                          <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                          <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                       </div>
                                       <li class="list-group-item tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="headshave">
                                          <label class="form-check-label tx-12" for="headshave">
                                          Head Shave
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹251</span>
                                       </li>
                                       <li class="list-group-item tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="mundan">
                                          <label class="form-check-label tx-12" for="mundan">
                                          Mundan (Below 7 years)
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹451</span>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           <div class="accordion-item  bg-light  mb-1 border-0">
                              <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapsee" aria-expanded="false" aria-controls="flush-collapseOne">
                                 <span class="col-md-7 fw-bold tx-12">Groom Packages</span>
                              </div>
                              <div id="flush-collapsee" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                 <div class="accordion-body  p-0">
                                    <ul class="list-group list-group-flush">
                                       <div class="my-2">
                                          <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                          <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                       </div>
                                       <li class="list-group-item  tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="headshave">
                                          <label class="form-check-label tx-12" for="headshave">
                                          Head Shave
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹251</span>
                                       </li>
                                       <li class="list-group-item tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="mundan">
                                          <label class="form-check-label tx-12" for="mundan">
                                          Mundan (Below 7 years)
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹451</span>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           <div class="accordion-item  bg-light  mb-1 border-0">
                              <div class="accordion-button bg-light collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapse1" aria-expanded="false" aria-controls="flush-collapseOne">
                                 <span class="col-md-7 fw-bold  tx-12">Packages</span>
                              </div>
                              <div id="flush-collapse1" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample" style="">
                                 <div class="accordion-body  p-0">
                                    <ul class="list-group list-group-flush">
                                       <div class="my-2">
                                          <button class="btn btn-success float-end me-2" type="submit">Contact</button>
                                          <button class="btn btn-dark float-end me-2" type="submit">Book Now</button>
                                       </div>
                                       <li class="list-group-item border-dashed tx-14">
                                       </li>
                                       <li class="list-group-item tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="headshave">
                                          <label class="form-check-label tx-12" for="headshave">
                                          Head Shave
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹251</span>
                                       </li>
                                       <li class="list-group-item tx-14">
                                          <span class="form-check d-inline-block">
                                          <input class="form-check-input" type="checkbox" value="" id="mundan">
                                          <label class="form-check-label tx-12" for="mundan">
                                          Mundan (Below 7 years)
                                          </label>
                                          </span>
                                          <span class="float-end fw-bold tx-12">₹451</span>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           <!-- collapse -->
                        </div>
                     </div>
                     <!-- 6 -->
                     <div class="col-xl-7 col-md-12">
                        <div class="card border-0 h-100">
                           <p class="tx-14">__ View Card</p>
                           <div class="bg-dim rounded">
                              <div class="row p-2">
                                 <div class="col-md-3">
                                    <a href="" class="text-decoration-none text-dim active text-dark tx-12 fw-bold">Cart</a>
                                 </div>
                                 <div class="col-md-3">
                                    <a href="" class="text-decoration-none text-dim tx-13">Schedule</a>
                                 </div>
                                 <div class="col-md-3">
                                    <a href="" class="text-decoration-none text-dim tx-12">Address</a>
                                 </div>
                                 <div class="col-md-3">
                                    <a href="" class="text-decoration-none text-dim tx-12">Checkout</a>
                                 </div>
                              </div>
                           </div>
                           <div class="card-body position-relative">
                              <div class="last-top">
                                 <div class="row align-items-center dashed-dot">
                                    <div class="col-md-8">
                                       <p class="tx-13">Hair Wash<br>
                                          <a href="#" class="text-decoration-none text-dark tx-13"><i class="fa fa-clock text-dark tx-13 "></i>10 Min</a>
                                       </p>
                                    </div>
                                    <div class="col-md-4 ">
                                       <div class="d-flex gap-2">
                                          <div class="22">
                                             <p class="tx-13 fw-bold">₹ 250</p>
                                          </div>
                                          <div class="png">
                                             <img src="assets/images/image 87.png" style="width:18px" class="align-baseline">
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row align-items-center dashed-dot mt-2">
                                    <div class="col-md-8">
                                       <p class="tx-13">Hair Wash<br>
                                          <a href="#" class="text-decoration-none text-dark tx-13"><i class="fa fa-clock text-dark tx-13 "></i>10 Min</a>
                                       </p>
                                    </div>
                                    <div class="col-md-4 ">
                                       <div class="d-flex gap-2">
                                          <div class="22">
                                             <p class="tx-13 fw-bold">₹ 250</p>
                                          </div>
                                          <div class="png">
                                             <img src="assets/images/image 87.png" style="width:18px" class="align-baseline">
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row align-items-center position-absolute bottom-0 w-100 sm-relative">
                                    <div class="col-md-8">
                                       <p class="tx-13 text-dim">2 items</p>
                                       <p class="tx-13"><strong>₹630</strong></p>
                                    </div>
                                    <div class="col-md-4">
                                       <button class="btn hax text-white" type="submit">Schedule </button>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- 6 -->
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-6">
            <div class="bg-white rounded p-3">
               <div class="row gx-2">
                  <p>__ Photos</p>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/gallery1.png" data-lightbox=		"example-set" data-title="Click the right half of the image to move forward."><img class="example-image img-fluid hifix" src="assets/images/gallery1.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/cuting_gallery.png" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image img-fluid" src="assets/images/cuting_gallery.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/glow.png" "="" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image img-fluid" src="assets/images/glow.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/gallery1.png" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image img-fluid" src="assets/images/gallery1.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/glow.png" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image img-fluid hifix" src="assets/images/glow.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/galley3.png" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image img-fluid" src="assets/images/galley3.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/cuting_gallery.png" 	data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image img-fluid" src="assets/images/cuting_gallery.png" alt=""></a>
                  </div>
                  <div class="col-md-3 mb-2">
                     <a class="example-image-link" href="assets/images/galley3.png" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image img-fluid" src="assets/images/galley3.png" alt=""></a>
                  </div>
               </div>
            </div>
            <!-- collapse -->
            <div class="bg-white rounded p-3 mt-3">
               rgrgr
            </div>
         </div>
      </div>
      <!-- row / end -->
   </div>
</div>
@endsection