2019-09-03 06:34:52 +00:00
|
|
|
{% extends "templates/web.html" %}
|
|
|
|
|
|
|
|
{% block title %}{{ _("Book Appointment") }}{% endblock %}
|
|
|
|
|
2019-09-09 10:11:20 +00:00
|
|
|
{% block script %}
|
|
|
|
<script src="assets/js/moment-bundle.min.js"></script>
|
|
|
|
<script src="book-appointment/index.js"></script>
|
|
|
|
{% endblock %}
|
|
|
|
|
2019-09-03 06:34:52 +00:00
|
|
|
{% block page_content %}
|
|
|
|
<div class="container">
|
|
|
|
<!-- title: Book an appointment -->
|
2019-09-09 10:11:20 +00:00
|
|
|
<div id="select-date-time">
|
2019-09-03 06:34:52 +00:00
|
|
|
<div class="text-center mb-5">
|
|
|
|
<h3>Book an appointment</h3>
|
2019-09-09 10:11:20 +00:00
|
|
|
<p class="lead text-muted">Select the date and your timezone</p>
|
2019-09-03 06:34:52 +00:00
|
|
|
</div>
|
|
|
|
<div class="row justify-content-center mt-3">
|
2019-09-09 10:11:20 +00:00
|
|
|
<div class="col-md-6 align-self-center ">
|
|
|
|
<div class="row">
|
|
|
|
<input type="date" oninput="on_date_or_timezone_select()" name="appointment-date" id="appointment-date"
|
|
|
|
class="form-control mt-3 col-md m-3">
|
|
|
|
<select name="appointment-timezone" oninput="on_date_or_timezone_select()" id="appointment-timezone" class="form-control mt-3 col-md">
|
2019-09-03 06:34:52 +00:00
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-09-09 10:11:20 +00:00
|
|
|
<div class="row mt-3" id="timeslot-container" >
|
|
|
|
|
2019-09-03 06:34:52 +00:00
|
|
|
</div>
|
|
|
|
<div class="row justify-content-center mt-3">
|
2019-09-09 10:11:20 +00:00
|
|
|
<div class="col-md-4">
|
|
|
|
<button class="btn btn-primary form-control" id="next-button">Next</button>
|
2019-09-03 06:34:52 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-09-09 10:11:20 +00:00
|
|
|
<!--Enter Details-->
|
|
|
|
<div id="enter-details">
|
|
|
|
<div class="text-center mb-5">
|
|
|
|
<h3>Add details</h3>
|
|
|
|
<p class="lead">Selected date is <span class="date-span"></span> at <span class="time-span">
|
|
|
|
</span></p>
|
|
|
|
</div>
|
|
|
|
<div class="row justify-content-center mt-3">
|
|
|
|
<div class="col-md-4 align-items-center">
|
|
|
|
<input class="form-control mt-3" type="text" name="customer_name" id="customer_name" placeholder="Your Name"
|
|
|
|
required>
|
|
|
|
<input class="form-control mt-3" type="tel" name="customer_number" id="customer_number"
|
|
|
|
placeholder="Contact Number" required>
|
|
|
|
<input class="form-control mt-3" type="text" name="customer_skype" id="customer_skype" placeholder="Skype"
|
|
|
|
required>
|
|
|
|
<textarea class="form-control mt-3" name="customer_notes" id="customer_notes" cols="30" rows="10"
|
|
|
|
placeholder="Notes"></textarea>
|
|
|
|
<button class="btn btn-primary form-control mt-3" onclick="submit()" id="submit-button">Submit</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-09-03 06:34:52 +00:00
|
|
|
|
|
|
|
{% endblock %}
|