@extends('header')
<link rel="stylesheet" href="../css/mini-event-calendar.min.css">
<style>
    [id^=calendar],
    [id^=calendar] + h3{
      width: 100%;
    }

    [id^=calendar] + h3{
      text-align: center;
    }

    @media only screen and (max-width: 500px){
      
      [id^=calendar],
      [id^=calendar] + h3{
        width: 100%;
        max-width: 400px;
        margin: 1em auto;
      }

      [id^=calendar] + h3{
        display: block;
        margin-bottom: 2em;
      }
    }
  </style>
<div class="main_body" style="padding-right:20px;">
	<div class="main_dashboard_child">
<div class="add_new_service row">
	<div class="col-sm-8 pl-0">
		<div class="new_service_sec">
			<div class="appointments_types_title">


<div class="all_types" style="margin-top:0px">
	<div class="card">
		<div class="cards_title" style="border: none;">
 <div class="row">
    <div class="col-sm-6">
       <div class="cards_tt">
          <h5 style="font-size: 16px;">Clients <span>(05 Members)</span></h5>
       </div>
    </div>
    <div class="col-sm-6">
       <div class="cards_tt text-right">
          <a href="#" class="btn btn-primary default-btn" style="padding:8px;font-size: 12px;">Invite Client</a>
       </div>
    </div>
 </div>
</div>
<div class="search_box">
<form class="search_user">
  <div class="form-group">
     <input type="text" name="" class="form-control" placeholder="Search Clients">
     <img src="../images/Icon ionic-ios-search.png" class="input-icon">
  </div>
</form>
	</div>
		<div class="single_type schedule_client">
			<div class="row">
				<div class="col-sm-8">
					<div class="types_left">
						<div class="single_client d-flex">
							<div class="client_img">
								<img src="../images/Ellipse 15.png">
							</div>
							<div class="client_title">
								<h5>Mark Ruffalo</h5>
								<p class="text-muted">+1 895 784 524</p>
								<p class="text-muted">markruffalo@gmail.com</p>
							</div>
						</div>
						
					</div>
				</div>
				<div class="col-sm-4">
					<div class="types_right">
						<div class="card_actions text-right">
                  <a href="#" class="btn btn-default cancel-btn" >Schedule Appointment</a>
               </div>
					</div>

				</div>
			</div>

		</div>
		<div class="single_type schedule_client">
			<div class="row">
				<div class="col-sm-8">
					<div class="types_left">
						<div class="single_client d-flex">
							<div class="client_img">
								<img src="../images/Ellipse 16.png">
							</div>
							<div class="client_title">
								<h5>Mark Ruffalo</h5>
								<p class="text-muted">+1 895 784 524</p>
								<p class="text-muted">markruffalo@gmail.com</p>
							</div>
						</div>
						
					</div>
				</div>
				<div class="col-sm-4">
					<div class="types_right">
						<div class="card_actions text-right">
                  <a href="#" class="btn btn-default cancel-btn" >Schedule Appointment</a>
               </div>
					</div>

				</div>
			</div>

		</div>
		<div class="single_type schedule_client">
			<div class="row">
				<div class="col-sm-8">
					<div class="types_left">
						<div class="single_client d-flex">
							<div class="client_img">
								<img src="../images/Ellipse 17.png">
							</div>
							<div class="client_title">
								<h5>Mark Ruffalo</h5>
								<p class="text-muted">+1 895 784 524</p>
								<p class="text-muted">markruffalo@gmail.com</p>
							</div>
						</div>
						
					</div>
				</div>
				<div class="col-sm-4">
					<div class="types_right">
						<div class="card_actions text-right">
                  <a href="#" class="btn btn-default cancel-btn" >Schedule Appointment</a>
               </div>
					</div>

				</div>
			</div>

		</div>
		<div class="single_type schedule_client">
			<div class="row">
				<div class="col-sm-8">
					<div class="types_left">
						<div class="single_client d-flex">
							<div class="client_img">
								<img src="../images/Ellipse 18.png">
							</div>
							<div class="client_title">
								<h5>Mark Ruffalo</h5>
								<p class="text-muted">+1 895 784 524</p>
								<p class="text-muted">markruffalo@gmail.com</p>
							</div>
						</div>
						
					</div>
				</div>
				<div class="col-sm-4">
					<div class="types_right">
						<div class="card_actions text-right">
                  <a href="#" class="btn btn-default cancel-btn" >Schedule Appointment</a>
               </div>
					</div>

				</div>
			</div>

		</div>
		<div class="single_type schedule_client">
			<div class="row">
				<div class="col-sm-8">
					<div class="types_left">
						<div class="single_client d-flex">
							<div class="client_img">
								<img src="../images/Ellipse 19.png">
							</div>
							<div class="client_title">
								<h5>Mark Ruffalo</h5>
								<p class="text-muted">+1 895 784 524</p>
								<p class="text-muted">markruffalo@gmail.com</p>
							</div>
						</div>
						
					</div>
				</div>
				<div class="col-sm-4">
					<div class="types_right">
						<div class="card_actions text-right">
                  <a href="#" class="btn btn-default cancel-btn" >Schedule Appointment</a>
               </div>
					</div>

				</div>
			</div>

		</div>
		<div class="single_type schedule_client">
			<div class="row">
				<div class="col-sm-8">
					<div class="types_left">
						<div class="single_client d-flex">
							<div class="client_img">
								<img src="../images/Ellipse 20.png">
							</div>
							<div class="client_title">
								<h5>Mark Ruffalo</h5>
								<p class="text-muted">+1 895 784 524</p>
								<p class="text-muted">markruffalo@gmail.com</p>
							</div>
						</div>
						
					</div>
				</div>
				<div class="col-sm-4">
					<div class="types_right">
						<div class="card_actions text-right">
                  <a href="#" class="btn btn-default cancel-btn" >Schedule Appointment</a>
               </div>
					</div>

				</div>
			</div>

		</div>
		<div class="single_type schedule_client">
			<div class="row">
				<div class="col-sm-8">
					<div class="types_left">
						<div class="single_client d-flex">
							<div class="client_img">
								<img src="../images/Ellipse 27.png">
							</div>
							<div class="client_title">
								<h5>Mark Ruffalo</h5>
								<p class="text-muted">+1 895 784 524</p>
								<p class="text-muted">markruffalo@gmail.com</p>
							</div>
						</div>
						
					</div>
				</div>
				<div class="col-sm-4">
					<div class="types_right">
						<div class="card_actions text-right">
                  <a href="#" class="btn btn-default cancel-btn" >Schedule Appointment</a>
               </div>
					</div>

				</div>
			</div>

		</div>

	</div>

</div>

</div>
		</div>
	</div>
	<div class="col-sm-4 pl-0">
		<div class="new_service_sec">
			<div class="card" style="height:100%;">
				
             
            <div class="schedule-appointment-details" style="position: relative;">
              <a href="#" class="close_btn"><img src="../images/Icon ionic-ios-close-circle-outline.png"></a>
              <div class="user-client-details single-event-details">
                <p style="font-size: 12px !important;"><b>Jeremy Renner</b></p>
                <p>+1 895 784 524</p>
                <p>jeremyrenner@gmail.com</p>
              </div>
              <form >
              <div class="user-client-details-form single-event-details">
                <p><b>Schedule Date</b></p>
                  <div class="display_calender">
                    
                    <div id="calendar"></div>
                 
                  </div>
                  <div class="form-group">
                    <label>Schedule Time</label>
                    <select class="form-control">
                      <option>10:00 AM</option>
                      <option>10:00 AM</option>
                      <option>10:00 AM</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label>Service</label>
                    <select class="form-control">
                      <option>Accounting, 30 Min, $30.00</option>
                      <option>Accounting, 30 Min, $30.00</option>
                      <option>Accounting, 30 Min, $30.00</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label>Note</label>
                    <textarea rows="4" class="form-control" placeholder="Write Here"></textarea>
                  </div>
                  <p><b>May 30, 2022 10:00 AM, Accounting, 30 Min, $30.00</b></p>
                  <div class="form-group">
                  <div class="schedule-btn">
                    <a href="#" class="btn btn-primary default-btn" style="padding: 4px 25px;font-size: 12px;">Schedule Appointment</a>
                  </div>
                </div>
              </div>
              </form>
            </div>
          </div>
		</div>
	</div>

</div>




</div>
</div>
<script src="../js/mini-event-calendar.min.js"></script>

  <script>
      $(document).ready(function(){
        $("#calendar").MEC({
         // events: sampleEvents
        });

        
      });
  </script>
@extends('footer')