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

@section('content')


 <div class="bg-main-body"> 
<div class="container rounded ">
    <div class="row py-5">


		  
            <!-- Start cart -->
            <div class="col-md-7">
			  <div class="bg-white rounded p-2">
                <div class="p-1">
                    <div class="row">
                        <div class="col-12 mb-1">
                            <p>__ Cart</p>
                            <div class="bg-dim p-2">
                                <div class="row">
                                    <div class="col-8">
                                        <p class="text-decoration-none text-dim active mb-0 tx-12">Services</p>
                                    </div>
									<div class="col-2">
                            <p class="mb-0 text-dim tx-12">Quantity </p>
							</div>
                                    <div class="col-2">
                                       <p class="mb-0 text-dim tx-12">Price</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					
                    <!-- Start Row -->
                    <div class="dashed-dot mt-1 px-1">
                        <div class="row align-items-center pb-1">
                            <div class="col-8">
                                <p class="tx-13 mb-0">Hair Wash</p>
                                <span class="tx-12 text-dim"><i class="fa fa-clock"></i>10 Min</span>
                            </div>
                            <div class="col-2">
                              <span class="mx-1 fw-bold tx-14">1</span>
                            </div>
							<div class="col-2">
                            <span class="mx-1 fw-bold tx-14">₹ 250</span>
							</div>
                        </div>
                    </div>
					 <!-- End Row-->
					 <!-- Start Row -->
                    <div class="dashed-dot mt-1 px-1">
                        <div class="row align-items-center pb-1">
                            <div class="col-8">
                                <p class="tx-13 mb-0">Hair Wash</p>
                                <span class="tx-12 text-dim"><i class="fa fa-clock"></i>10 Min</span>
                            </div>
							 <div class="col-2">
                              <span class="mx-1 fw-bold tx-14">1</span>
                            </div>
                            <div class="col-2">
                            <span class="mx-1 fw-bold tx-14">₹ 250</span>
							</div>
                        </div>
                    </div>
                    <!-- End Row -->
					
                    <div class="row align-items-center mt-3">
                        <div class="col-12 text-end">
                            <p class="tx-13 text-dim mb-1">2 items</p>
                            <p class="tx-14"><strong>₹630</strong></p>
                        </div>
                        
                    </div>
					
                </div>
            </div>
            <!-- End cart -->
        </div>
		
		        <div class="col-md-5">
			  <div class="bg-white rounded p-2">
                <div class="p-1">
                   <div class="row">
                   <div class="col-12">
                   <p>__ Select Your Appointment Date</p>
				   </div>
				   </div>
                  <form>
                  
                  <div class="row">
                  <div class="col-md-12 mb-2"> 
				  <label class="form-label"> Date</label>
                  <input class="form-control" type="date">  
                  </div>
				  <div class="col-md-12 mb-3"> 
				  <label class="form-label">Time</label> 
                  <input class="form-control" type="time">  
                  </div>
				  <div class="text-center ">
				    <h6>03-Sunday-2023 &nbsp 12:00 AM</h6>
			
				  <button class="btn hax tx-13 px-5 my-2 text-white" type="submit">Payment</button>
				  </div>
                  </div>
				  </form></div> 

                   
					
                </div>
            </div>
            <!-- End cart -->


	
	</div>
	</div>
		</div>
	@endsection