CINXE.COM
STYLE & SEND - Online Booking
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>STYLE & SEND - Online Booking </title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content="" name="description" /> <meta name="robots" content="noindex"> <meta content="" name="author" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link rel="shortcut icon" href="/assets/images/companies/appointment-reminder-calendar.png"> <!-- App css --> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/Content/bootstarap4.3/bootstrap.min.css" /> <link rel="stylesheet" href="/Content/bootstarap4.3/bootstrap-datepicker.min.css" /> <link rel="stylesheet" href="/assets/plugins/switchery/switchery.min.css"> <!-- Link to your css file --> <link rel="stylesheet" href="/assets/css/booking/main.css"> </head> <body> <div class="container"> <div id="site-logo"> <a href="javascript:void(0)"> <img src="https://arpublic.blob.core.windows.net/companylogos/fe7838ec-8749-4b35-92f9-d3174c9576d0Logo for Appointment Reminder.png" alt="Dress for Success Tasmania" title="Dress for Success Tasmania" width="170" height="146" class="img-circle"> </a> </div> <div id="main-tab-contain"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#menu0"> <span class="tab-no" style="background:#aa2222;">1</span> <span class="mobile-hide">Choose Service</span></a> </li> <li class="nav-item"> <a class="nav-link disabled" data-toggle="tab" href="#menu1"><span class="tab-no" style="background:#aa2222;">2</span> <span class="mobile-hide">Select date and time</span></a> </li> <li class="nav-item"> <a class="nav-link disabled" data-toggle="tab" href="#menu2"> <span class="tab-no" style="background:#aa2222;">3</span> <span class="mobile-hide">Your info</span></a> </li> <li class="nav-item"> <a class="nav-link disabled" data-toggle="tab" href="#menu3"> <span class="tab-no" style="background:#aa2222;">4</span> <span class="mobile-hide">Confirmation</span></a> </li> </ul> <div class="tab-content"> <div id="menu0" class="tab-pane active"> <div class="row"> <div class="choose-service-col6"> <div class="select-service-form"> <form> <h2>Please select service</h2> <div class="form-field-row"> <div class="form-field"> <div class="row"> <div class="form-field-col-4"> <label>Appointment Type:</label> </div> <div class="form-field-col-8"> <select id="service" name="service" onchange="changeService()"><option value="style-and-send">Style and Send</option> </select> </div> </div> </div> </div> <input type="hidden" id="hdnIsRecurring" value="" /> <div class="form-field-row recurring"> <div class="form-field"> <div class="row"> <div class="form-field-col-4"> <label>Recurring Appointment:</label> </div> <div class="form-field-col-8"> <select id="Recurring" class="form-select" onchange="changeRecurring()"></select> </div> </div> </div> </div> <div class="form-field-row recurring weekToBook"> <div class="form-field"> <div class="row"> <div class="form-field-col-4"> <label>Weeks to book:</label> </div> <div class="form-field-col-8"> <select id="WeekToBook" class="form-select"></select> </div> </div> </div> </div> <div class="form-field-row"> <div class="form-field"> <div class="row"> <div class="form-field-col-4"> </div> <div class="form-field-col-8"> <input type="button" value="Continue" style="background:#aa2222;" onclick="onContinue()"> </div> </div> </div> </div> </form> </div> </div> <div class="choose-service-col6"> <div class="service-description-main" style="background:#aa2222;"> <h2 id="serviceDetail">STYLE & SEND</h2> <div class="service-detail"> <span><img src="/Images/booking/clock-icon.png"> <span id="spanInterval">30</span> minutes</span> </div> <div class="service-description" id="divDescription"> </div> </div> </div> </div> </div> </div> </div> <footer id="footer"> Powered by <a href="https://appointmentreminder.com/?utm_source=bookingpage&utm_medium=website&utm_campaign=footer">Appointment Reminder</a> <br /> <span id="spanLastUpdated" style="display:none;"> <em style="font-size: 10px; margin-top: 10px;">Last updated <span id="lblLastUpdated"></span> </em> </span> </footer> </div> <script src="/Scripts/bootstrap4.3/jquery-3.4.1.min.js"></script> <script src="/Scripts/bootstrap4.3/popper.min.js"></script> <script src="/Scripts/bootstrap4.3/bootstrap.min.js"></script> <script src="/assets/plugins/switchery/switchery.min.js"></script> <!-- sweetalert2 js --> <script src="/Scripts/sweetalert2.all.min.js"></script> <script src="/Scripts/Pages/Sweetalert2Messages.js"></script> <!-- Date Picker --> <script src="/Scripts/bootstrap4.3/bootstrap-datepicker.min.js"></script> <script src="/assets/js/booking.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/validationJsLatestVerion/jquery.validate.unobtrusive.min.js"></script> <script src="/Scripts/jquery.blockUI.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".recurring").css("display", "none"); if ('False' == 'True' && 'False' == 'True') { changeCalendar(); } else { changeService(); } $("<style>.select-service-form h2::before { background: #aa2222; }</style>").appendTo("head"); }); function changeCalendar() { var link = '/Home/CalendarDetailData'; $.ajax({ type: "POST", url: link, data: BuildCalendarCriteria(), dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { //$("#serviceDetail").html(data.Data.BookingTypes.Description); //$("#spanInterval").html(data.Data.BookingTypes.Length); //$("#divDescription").html("<p>" + data.Data.BookingTypes.MoreDescription + "</p>"); $("#service").empty(); $.each(data.Types, function (data, value) { $("#service").append($("<option></option>").val(value.Value).html(value.Text)); }) changeServiceData(); }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr); console.log(ajaxOptions); console.log(thrownError); } }); } function changeServiceData() { var link = '/Home/GetServiceDetail'; $.ajax({ type: "POST", url: link, data: BuildSearchCriteria(), dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { $(".recurring").css("display", "none"); $("#hdnIsRecurring").val(data.Data.BookingTypes.IsAllowRepeating); $("#serviceDetail").html(data.Data.BookingTypes.Description); $("#spanInterval").html(data.Data.BookingTypes.Length); $("#divDescription").html("<p>" + data.Data.BookingTypes.MoreDescription + "</p>"); if (data.Data.BookingTypes.IsAllowRepeating === true) { $(".recurring").css("display", ""); $("#WeekToBook").empty(); for (var i = data.Data.BookingTypes.MinRepeating; i <= data.Data.BookingTypes.MaxRepeating; i++) { $("#WeekToBook").append($("<option></option>").val(i.toString()).html(i.toString())); } $("#Recurring").empty(); $.each(data.RecurringTypes, function (data, value) { $("#Recurring").append($("<option></option>").val(value.Value).html(value.Text)); }) changeRecurring(); } }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr); console.log(ajaxOptions); console.log(thrownError); } }); } function changeService() { var link = '/Home/ServiceDetailData'; $.ajax({ type: "POST", url: link, data: BuildSearchCriteria(), dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { $(".recurring").css("display", "none"); $("#hdnIsRecurring").val(data.Data.BookingTypes.IsAllowRepeating); $("#serviceDetail").html(data.Data.BookingTypes.Description); $("#spanInterval").html(data.Data.BookingTypes.Length); $("#divDescription").html("<p>" + data.Data.BookingTypes.MoreDescription + "</p>"); if ('False' == 'True') { $("#calendar").empty(); $.each(data.Calendars, function (data, value) { $("#calendar").append($("<option></option>").val(value.Value).html(value.Text)); }) if (data.Calendars.length > 2) { $("#lstCalendar").css("display", ""); } else { $("#lstCalendar").css("display", "none"); } } if (data.Data.BookingTypes.IsAllowRepeating === true) { $(".recurring").css("display", ""); $("#WeekToBook").empty(); for (var i = data.Data.BookingTypes.MinRepeating; i <= data.Data.BookingTypes.MaxRepeating; i++) { $("#WeekToBook").append($("<option></option>").val(i.toString()).html(i.toString())); } $("#Recurring").empty(); $.each(data.RecurringTypes, function (data, value) { $("#Recurring").append($("<option></option>").val(value.Value).html(value.Text)); }) changeRecurring(); } }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr); console.log(ajaxOptions); console.log(thrownError); } }); } function changeRecurring() { if ($("#Recurring").val() == "1") { $(".weekToBook").css("display", "none"); } else { $(".weekToBook").css("display", ""); } } function BuildSearchCriteria() { var param = {}; param["subDomain"] = 'stylesend'; param["service"] = $("#service").val(); return JSON.stringify(param); } function BuildCalendarCriteria() { var param = {}; param["subDomain"] = 'stylesend'; param["calendarId"] = $("#calendar").val(); return JSON.stringify(param); } function onContinue() { var link = ""; if ('False' == 'True'){ link = "/" + $("#service").val() + "?scheduleId=" + $("#calendar").val(); if ($("#hdnIsRecurring").val() === 'true') { link = link + "&count=" + $("#WeekToBook").val() + "&rType=" + $("#Recurring").val(); } } else{ link = "/" + $("#service").val(); if ($("#hdnIsRecurring").val() === 'true') { link = link + "?count=" + $("#WeekToBook").val() + "&rType=" + $("#Recurring").val(); } } window.location.href = link; } </script> </body> </html>