@extends('serviceprovider.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: 40px;">
	<div class="main_dashboard_child">
		<div class="client-details schedule-appointment">
      <div class="row">
        <div class="col-sm-4 pl-0">
          <div class="client-details-in" style="height:100%;">
            <div class="card" style="height:100%;">
              <div class="client-profile">
                <img src="images/Ellipse 106.png">
                <h3>Jeremy Renner</h3>
              </div>
              <div class="client-profile-details">
                <div class="service-details single-event-details">
              <p><b>Service</b></p>
              <p>Accounting</p>
            </div>
            <div class="service-details single-event-details">
              <p><b>Basic Info</b></p>
              <div class="contact-details d-flex">
                <div class="contact_label">
                  <p class="text-muted">Phone Number</p>
                  <p class="text-muted">Email</p>
                </div>
                <div class="contact_label text-right">
                  <p>+1 895 784 524</p>
                  <p>jeremyrenner@gmail.com</p>
                </div>
              </div>
            </div>
            
            <div class="service-details single-event-details">
              <p><b>Note</b></p>
              <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            </div>
            <div class="schedule-btn">
              <a href="#" class="btn btn-primary default-btn">Schedule Appointment</a>
            </div>
              </div>
            </div>  
          </div>
        </div>
        <div class="col-sm-4 pl-0">
          <div class="client-details-in" style="height:100%;">
            <div class="card" style="height:100%;">
              <div class="clinet-accordion">
                <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
            <h4 class="panel-title">Ongoing Appointments</h4>

          </div>
          <div id="collapseOne" class="panel-collapse collapse show">
            <div class="panel-body">
              <div class="appint_inner">
                <div class="single_details">
                  <h5>Thursday, May 26, 2022</h5>
                  <p class="text-muted">01:00 PM-2:00 PM</p>
                  <p class="text-muted">60 Min</p>
                  <div class="action-btns">
                    <a href="#"><img src="images/Group 91.png"></a>
                    <a href="#"><img src="images/Group 90.png"></a>
                    <a href="#"><img src="images/Group 89.png"></a>
                  </div>
                </div>
                <div class="single_details">
                  <h5>Thursday, May 26, 2022</h5>
                  <p class="text-muted">01:00 PM-2:00 PM</p>
                  <p class="text-muted">60 Min</p>
                  <div class="action-btns">
                    <a href="#"><img src="images/Group 91.png"></a>
                    <a href="#"><img src="images/Group 90.png"></a>
                    <a href="#"><img src="images/Group 89.png"></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
            <h4 class="panel-title">Appointments History</h4>

          </div>
          <div id="collapseTwo" class="panel-collapse collapse show">
            <div class="panel-body">
                <div class="appint_inner">
                <div class="single_details">
                  <h5>Thursday, May 26, 2022</h5>
                  <p class="text-muted">01:00 PM-2:00 PM</p>
                  <p class="text-muted">60 Min</p>
                  <p><a href="#"><img src="images/Group 92.png">Play</a></p>
                </div>
                <div class="single_details">
                  <h5>Thursday, May 26, 2022</h5>
                  <p class="text-muted">01:00 PM-2:00 PM</p>
                  <p class="text-muted">60 Min</p>
                  <p><a href="#"><img src="images/Group 92.png">Play</a></p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree">
            <h4 class="panel-title">Shared Files</h4>

          </div>
          <div id="collapseThree" class="panel-collapse collapse show">
            <div class="panel-body">
              <div class="appint_inner shared-files">
                <div class="single_details">
                  <div class="file_img">
                    <img src="images/pdf.png">
                  </div>
                  <div class="file_name">
                    <h5>Business Douments</h5>
                    <p class="text-muted">Thursday, May 18, 2022</p>
                  </div>
                </div>
                <div class="single_details">
                  <div class="file_img">
                    <img src="images/word.png">
                  </div>
                  <div class="file_name">
                    <h5>Business Douments</h5>
                    <p class="text-muted">Thursday, May 18, 2022</p>
                  </div>
                </div>
                <div class="single_details">
                  <div class="file_img">
                    <img src="images/pdf.png">
                  </div>
                  <div class="file_name">
                    <h5>Business Douments</h5>
                    <p class="text-muted">Thursday, May 18, 2022</p>
                  </div>
                </div>
                <div class="single_details">
                  <div class="file_img">
                    <img src="images/word.png">
                  </div>
                  <div class="file_name">
                    <h5>Business Douments</h5>
                    <p class="text-muted">Thursday, May 18, 2022</p>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div>

      </div>
              </div>
            </div>  
          </div>
        </div>
        <div class="col-sm-4 pl-0">
          <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><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="2" 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">Schedule Appointment</a>
                  </div>
                </div>
              </div>
              </form>
            </div>
          </div>
        </div>

      </div>

    </div>



	</div>

		</div>
	</div>

</section>

<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
<script src="js/mini-event-calendar.min.js"></script>

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

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