<title><%= title ? title : 'Book Appointment' %></title>

<%- include('../partials/header.ejs') %>

<div class="booked-area">
  <div class="container">
    <div class="row">
      <div class="col-md-4 offset-md-4">
        <div class="booked-icn">
          <svg
            width="96"
            height="96"
            viewBox="0 0 96 96"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            style="margin: 0px auto"
          >
            <g>
              <path
                d="M48.008 96.016C74.5221 96.016 96.016 74.5221 96.016 48.008C96.016 21.4939 74.5221 0 48.008 0C21.4939 0 0 21.4939 0 48.008C0 74.5221 21.4939 96.016 48.008 96.016Z"
                fill="#FFF2DE"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M27.4669 27.5634C27.2848 27.5634 27.131 27.7172 27.131 27.8993V68.5645C27.131 68.7467 27.2848 68.9005 27.4669 68.9005H68.1481C68.3377 68.9005 68.4841 68.7393 68.4841 68.5805V27.8993C68.4841 27.7172 68.3303 27.5634 68.1481 27.5634H27.4669ZM25.5312 27.8993C25.5312 26.8337 26.4013 25.9636 27.4669 25.9636H68.1481C69.2138 25.9636 70.0838 26.8336 70.0838 27.8993V68.5805C70.0838 69.6375 69.2064 70.5002 68.1481 70.5002H27.4669C26.4013 70.5002 25.5312 69.6302 25.5312 68.5645V27.8993Z"
                fill="#333333"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M36.4435 21.8523V31.6587H34.8438V21.8523H36.4435Z"
                fill="#333333"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M60.7755 21.8523V31.6587H59.1758V21.8523H60.7755Z"
                fill="#333333"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M69.6673 39.9293H26.7305V38.3296H69.6673V39.9293Z"
                fill="#333333"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M69.2849 50.1036H26.332V48.5039H69.2849V50.1036Z"
                fill="#333333"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M69.2849 60.2618H26.332V58.6621H69.2849V60.2618Z"
                fill="#333333"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M37.8654 38.4736V68.9805H36.2656V38.4736H37.8654Z"
                fill="#333333"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M48.5997 38.4736V68.9805H47V38.4736H48.5997Z"
                fill="#333333"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M59.3341 38.4736V68.9805H57.7344V38.4736H59.3341Z"
                fill="#333333"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M59.19 44.7926H27.1953V43.1929H59.19V44.7926Z"
                fill="#0067CE"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M57.5902 65.4291H27.1953V63.8293H57.5902V65.4291Z"
                fill="#0067CE"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M68.7841 55.1427L36.793 55.0812L36.7965 53.543L68.7876 53.6045L68.7841 55.1427Z"
                fill="#0067CE"
              ></path>
              <ellipse
                cx="64.7889"
                cy="63.1893"
                rx="10.3983"
                ry="10.3983"
                fill="#FFF2DE"
              ></ellipse>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M70.931 61.3759L64.1318 67.6895L60.2422 64.0541L61.3345 62.8853L64.1353 65.5031L69.8425 60.2036L70.931 61.3759Z"
                fill="#0067CE"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M64.7889 71.9878C69.6482 71.9878 73.5874 68.0486 73.5874 63.1893C73.5874 58.33 69.6482 54.3907 64.7889 54.3907C59.9296 54.3907 55.9904 58.33 55.9904 63.1893C55.9904 68.0486 59.9296 71.9878 64.7889 71.9878ZM64.7889 73.5876C70.5317 73.5876 75.1872 68.9321 75.1872 63.1893C75.1872 57.4465 70.5317 52.791 64.7889 52.791C59.0461 52.791 54.3906 57.4465 54.3906 63.1893C54.3906 68.9321 59.0461 73.5876 64.7889 73.5876Z"
                fill="#0067CE"
              ></path>
            </g>
          </svg>
        </div>

        <div class="sf-heading">
          <h4>You're booked!</h4>
          <p>
            You’ll receive a confirmation email with details on how to prepare
            for and join your appointment. You can now close this window.
          </p>
        </div>

        <div class="modal-body ca-body">
          <div class="">
            <div class="ca-person">
              <div class="ca-img">
                <img src="/images/match-img.jpg" alt="img" />
              </div>
              <strong>Todd Adams</strong>
              <a class="view-link" href="provider-profile">View Profile</a>
            </div>
            <hr />
            <div class="time-info">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM13 12H17V14H11V7H13V12Z"
                  fill="#333333"
                ></path>
              </svg>
              <strong>Adult Psychiatry</strong>
              <p>Wednesday, January 17th <br />12:40am-1:40am GMT+5</p>
            </div>
            <hr />
            <div class="visit-info">
              <svg
                width="24"
                height="24"
                viewBox="0 0 20 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M14.1668 4.66732L18.511 1.62565C18.5735 1.58186 18.6467 1.55607 18.7229 1.55107C18.799 1.54607 18.875 1.56207 18.9427 1.59731C19.0103 1.63256 19.067 1.6857 19.1065 1.75094C19.1461 1.81619 19.1669 1.89103 19.1668 1.96732V12.034C19.1669 12.1103 19.1461 12.1851 19.1065 12.2504C19.067 12.3156 19.0103 12.3687 18.9427 12.404C18.875 12.4392 18.799 12.4552 18.7229 12.4502C18.6467 12.4452 18.5735 12.4194 18.511 12.3757L14.1668 9.33398V12.834C14.1668 13.055 14.079 13.267 13.9228 13.4232C13.7665 13.5795 13.5545 13.6673 13.3335 13.6673H1.66683C1.44582 13.6673 1.23385 13.5795 1.07757 13.4232C0.921293 13.267 0.833496 13.055 0.833496 12.834V1.16732C0.833496 0.946304 0.921293 0.734343 1.07757 0.578062C1.23385 0.421782 1.44582 0.333984 1.66683 0.333984H13.3335C13.5545 0.333984 13.7665 0.421782 13.9228 0.578062C14.079 0.734343 14.1668 0.946304 14.1668 1.16732V4.66732ZM14.1668 7.29982L17.5002 9.63315V4.36732L14.1668 6.70065V7.29898V7.29982ZM2.50016 2.00065V12.0007H12.5002V2.00065H2.50016ZM4.16683 3.66732H5.8335V5.33398H4.16683V3.66732Z"
                  fill="#333333"
                ></path>
              </svg>

              <strong>Video appointment</strong>
            </div>

            <hr />

            <div class="time-info">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g clip-path="url(#clip0_5682_17999)">
                  <path
                    d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"
                    fill="#333333"
                  ></path>
                </g>
                <defs>
                  <clipPath id="clip0_5682_17999">
                    <rect width="24" height="24" fill="white"></rect>
                  </clipPath>
                </defs>
              </svg>
              <strong>Cancellation policy</strong>
              <p>
                If you need to cancel or reschedule your appointment, please do
                so at least 2 business days in advance or you will be charged a
                cancellation fee.
              </p>
            </div>

            <div class="d-get-email">
              <button
                type="button"
                class="btn"
                data-bs-toggle="modal"
                data-bs-target="#dg-email"
              >
                Didn’t get an email? <i class="fa-solid fa-arrow-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div
  class="modal fade dg-email"
  id="dg-email"
  tabindex="-1"
  aria-labelledby="dg-emailModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="dg-emailModalLabel">
          Resend confirmation email
        </h3>
        <p>We’ll try again with the email you provide below.</p>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-4">
            <label for="e-address" class="form-label">Email address</label>
            <input
              type="text"
              class="form-control"
              id="e-address"
              placeholder=""
              required
            />
          </div>
          <div class="mb-4">
            <label for="ec-address" class="form-label">Confirm email</label>
            <input
              type="text"
              class="form-control"
              id="ec-address"
              placeholder=""
              required
            />
          </div>
          <button type="button" class="btn blue-btn" data-bs-dismiss="modal">
            Submit
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Include footer partial -->
<%- include('../partials/footer.ejs') %>
