API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 15th, 2019
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.12 KB | None | 0 0
raw download clone embed print report
  1. @extends('frontend.layouts.default')
  2.  
  3. @section('content')
  4.  
  5. <!-- Banner -->
  6. @include('frontend.partials.bookingBannerHero')
  7.  
  8. <!-- Breadcrumb -->
  9. @include('frontend.partials.breadcrumb')
  10.  
  11. <div class="page-content page-booking">
  12.  
  13. <a name="bookingSteps"></a>
  14. <form id="bookingForm" action="/" method="post" class="booking-form form-steps">
  15. @csrf
  16. <div id="wizard" class="booking-form__content">
  17.  
  18. <h2>Select Class</h2>
  19. <section class="custom-container side-padding w-100 m-auto">
  20. @include('frontend.partials.step1')
  21. </section>
  22.  
  23. <h2>Select Date</h2>
  24. <section class="custom-container side-padding w-100 m-auto">
  25. @include('frontend.partials.step2')
  26. </section>
  27.  
  28. <h2>Register & Payment</h2>
  29. <section class="custom-container side-padding w-100 m-auto">
  30. @include('frontend.partials.step3')
  31. </section>
  32.  
  33. <div class="booking-system-message custom-container m-auto side-padding w-100">&nbsp;</div>
  34.  
  35. <!-- Booking voucher section -->
  36. @include('frontend.partials.voucherCodeSection')
  37.  
  38. <!-- Booking overview -->
  39. @include('frontend.partials.bookingOverview')
  40.  
  41. </div>
  42. </form>
  43.  
  44. </div>
  45.  
  46. @endsection
  47.  
  48.  
  49. @section('scripts')
  50.  
  51. <!-- Monent js -->
  52. <script src={{ URL::asset('vendors/momentjs/moment.min.js') }}></script>
  53.  
  54. <!--<script src="{{-- url('js/bookingStateHandler.js') --}}"></script>-->
  55. <script src={{ URL::asset(mix('js/booking.js')) }}></script>
  56. <script type="text/javascript">
  57.  
  58. sessionStorage.clear();
  59.  
  60. // Init steps
  61. $("#wizard").steps({
  62. headerTag: "h2",
  63. bodyTag: "section",
  64. transitionEffect: "slideLeft",
  65. autoFocus: true
  66. });
  67.  
  68. // Fake next
  69. $("#continueNext").on('click', function(e) {
  70.  
  71. // Stripe mount
  72. let totalAmountAfterVoucher = parseInt(JSON.parse(sessionStorage.getItem("bookingData")).totalAmountAfterVoucher);
  73. if(totalAmountAfterVoucher > 0) {
  74. card.mount('#card-element');
  75. }
  76.  
  77. document.querySelector(".voucher-code-section").classList.remove("d-none");
  78.  
  79. // Declare sessionData here
  80. let sessionData = JSON.parse(sessionStorage.getItem('bookingData'));
  81. // Get steps state
  82. let currStep = $("#wizard").steps("getCurrentStep", 0, {});
  83.  
  84. // (Step 1)
  85. if(currStep.title == 'Select Class') {
  86. // Validation step 1
  87. if(
  88. ( sessionData.single > 0 || sessionData.shared > 0 )
  89. ) {
  90. $("#wizard").steps("next", 0, {});
  91. } else {
  92. helpers.setSystemMessage('Please select single and or shared stills.', 'error-message');
  93. }
  94. }
  95.  
  96. // (Step 2)
  97. if (currStep.title == 'Select Date') {
  98.  
  99. //console.log('select a date');
  100. // If next is clicked while inside step 2, going to step 3 hide voucher code section
  101. document.querySelector('.voucher-code-section').classList.add("d-none");
  102.  
  103. if(
  104. ( sessionData.single > 0 || sessionData.shared > 0 ) &&
  105. ( sessionData.newdate!==null && sessionData.newdate!=="0000-00-00" )
  106. ) {
  107.  
  108. $("#wizard").steps("next", 0, {});
  109.  
  110. } else {
  111. helpers.setSystemMessage('Please select date from the field.', 'error-message');
  112. }
  113.  
  114. document.querySelector(".voucher-code-section").classList.add("d-none");
  115.  
  116. }
  117.  
  118. // (Step 3)
  119. if(currStep.title == 'Register &amp; Payment') {
  120.  
  121. //console.log('Submitting ...', JSON.parse(sessionStorage.getItem('bookingData')));
  122.  
  123. if (
  124. ( sessionData.single > 0 || sessionData.shared > 0 ) &&
  125. ( sessionData.fname!=="" && sessionData.lname!=="" && sessionData.email!=="" && sessionData.mobile!=="" ) &&
  126. ( sessionData.bookingAgree!==null && sessionData.bookingSummaryAgree!==null ) &&
  127. moment(sessionData.birthdate, 'YYYY-MM-DD').isValid()
  128. ) {
  129.  
  130. if( sessionData.newdate==null || sessionData.newdate=="0000-00-00" ) {
  131. helpers.setSystemMessage('Please select date on step 2.', 'error-message');
  132. return false;
  133. }
  134.  
  135. if(sessionData.totalAmountAfterVoucher > 0) {
  136. if(
  137. ( typeof(document.querySelector('.StripeElement--complete')) == 'undefined') ||
  138. ( document.querySelector('.StripeElement--complete') == null) ||
  139. ( sessionData.cardholderName=="" )
  140. ) {
  141. helpers.setSystemMessage('Please complete payment details.', 'error-message');
  142. return false;
  143. }
  144. }
  145.  
  146. //console.log('pass');
  147. // Show loading if data id complete
  148. let bookingSummary = '<h2 class="mb-3">Booking Details</h2>';
  149. bookingSummary += '<div class="text-left w-75 mx-auto my-3">';
  150. bookingSummary += '<div class="row"><div class="col-4">Date: </div><div class="col-8">'+ moment(sessionData.newdate).format('dddd Do MMMM YYYY') +'</div></div>';
  151. bookingSummary += '<div class="row"><div class="col-4">Stills: </div><div class="col-8">'+sessionData.totalStills+'x 70cl bottle of Gin or Vodka</div></div>';
  152. bookingSummary += '<div class="row"><div class="col-4">Total Amount: </div><div class="col-8 font-weight-bold">'+sessionData.totalAmountAfterVoucher.toLocaleString("en-GB", {
  153. style: "currency",
  154. currency: "GBP"
  155. })+'</div></div>';
  156. bookingSummary += '</div>';
  157. bookingSummary += '<button id="processBooking" class="btn btn-lg btn--brown my-5">Pay now!</button>';
  158.  
  159. /**
  160. * Dont remove setTimeout or the event will not fint the dynamically generated DOM button - find a fix
  161. */
  162. setTimeout(function() {
  163. document.querySelector('.custom-modal').classList.add("custom-modal--show");
  164. document.querySelector('.custom-modal #content').innerHTML = bookingSummary;
  165. }, 300);
  166.  
  167. //console.log('pass 2');
  168.  
  169. // Process booking
  170. $(document).on('click', '#processBooking', function(){
  171.  
  172. //console.log('process booking');
  173.  
  174. // Immediately remove button when processBooking is clicked
  175. document.querySelector('.custom-modal').classList.add("custom-modal--show");
  176. document.querySelector('.custom-modal #content').innerHTML = '<p>Loading ...</p>';
  177.  
  178. var cardHolderName = document.getElementById('card-holder-name').value;
  179.  
  180. $.ajax({
  181. type: "POST",
  182. url: "{{ route('bookingSubmitUserCheck') }}",
  183. data: {
  184. "_token": "{{ csrf_token() }}",
  185. data: JSON.parse(sessionStorage.getItem('bookingData'))
  186. },
  187. success: function(response) {
  188.  
  189. //console.log('Response: ', response);
  190.  
  191. //User Exist
  192. document.querySelector('.custom-modal').classList.add("custom-modal--show");
  193. document.querySelector('.custom-modal #content').innerHTML = '<p>Loading ...</p>';
  194. var usrQuery1 = response[3];
  195. var paymentIntentSecret = response[1];
  196. var paymentIntentID = response[4];
  197. var userId = response[5];
  198.  
  199. if (response === "false") {
  200.  
  201. ////////////////////////////////////////////////////////////
  202. // User Exist will not continue, must login
  203. ////////////////////////////////////////////////////////////
  204.  
  205. document.querySelector('.custom-modal').classList.remove("custom-modal--show");
  206. document.querySelector("#wizard").innerHTML = ``;
  207. helpers.setSystemMessage(`User <strong>${sessionData.email}</strong> already exist. Please <a href="{{ URL::to('login') }}">login</a>.`);
  208.  
  209. } else if (response[0] === "true") { //user doesn't exist
  210.  
  211. if(sessionData.totalAmountAfterVoucher > 0) {
  212. //proceed to 2nd controller
  213. stripe.handleCardPayment(
  214. paymentIntentSecret, card, {
  215. payment_method_data: {
  216. billing_details: { name: cardHolderName }
  217. }
  218. }
  219. ).then(function(result) {
  220. if (result.error) {
  221. // Display error.message in your UI.
  222. //console.log(result.error);
  223.  
  224. ////////////////////////////////////////////////////////////
  225. // Decline
  226. ////////////////////////////////////////////////////////////
  227.  
  228. document.querySelector('.custom-modal').classList.add("custom-modal--show");
  229. document.querySelector('.custom-modal #content').innerHTML = `${result.error.message}`;
  230.  
  231. // alert(result.error.code);
  232.  
  233. } else {
  234. // fullfill the payment
  235. $.ajax({
  236. type: "POST",
  237. url: "{{ route('bookingSubmitCharge') }}",
  238. data: {
  239. "_token": "{{ csrf_token() }}",
  240. data: JSON.parse(sessionStorage.getItem('bookingData')),
  241. paymentIntentID: paymentIntentID,
  242. userId: userId
  243. },
  244. success: function(x) {
  245. if (x === "true") {
  246. //console.log('test success');
  247. document.querySelector('.custom-modal').classList.remove("custom-modal--show");
  248. document.querySelector("#wizard").innerHTML = ``;
  249. helpers.setSystemMessage(`Payment success! A confirmation email will be sent to ${JSON.parse(sessionStorage.getItem('bookingData')).email} with your booking details.`);
  250.  
  251. // Remove all sesion Data
  252. document.querySelector("#continueNext").classList.add("disabled");
  253. sessionStorage.clear();
  254.  
  255. } else {
  256. //console.log('x',x)
  257. }
  258.  
  259. },
  260. error: function() {
  261. let errorMessage = "Oops, a technical error occured please contact admin.";
  262. helpers.setSystemMessage(errorMessage);
  263. document.querySelector('.custom-modal').classList.add("custom-modal--show");
  264. document.querySelector('.custom-modal #content').innerHTML = `
  265. <p>
  266. ${errorMessage}
  267. </p>
  268. `;
  269. }
  270. });
  271. }
  272. });
  273. }
  274.  
  275. }
  276. },
  277. error: function(xhr, status, error) {
  278. setTimeout(function() {
  279. document.querySelector('.custom-modal').classList.add("custom-modal--show");
  280. document.querySelector('.custom-modal #content').innerHTML = `
  281. <div class="text-wrap">
  282. <p class="text-wrap">Error Message: Failed communication with bookingSubmitUserCheck.</p>
  283. </div>
  284. `;
  285. }, 300)
  286. }
  287. });
  288. });
  289. // $('#processBooking').on('click', function {
  290. // console.log('test');
  291. // });
  292.  
  293.  
  294. } else {
  295. //console.log('failed');
  296. helpers.setSystemMessage('Please confirm and fill in the required details to proceed with your class booking.', 'error-message');
  297. }
  298. }
  299.  
  300. });
  301.  
  302. // Helpers
  303. // Helpers
  304. const helpers = {
  305. setSystemMessage: function (mess, type=null) {
  306. let systemMessageEl = document.querySelector('.booking-system-message');
  307. systemMessageEl.innerHTML = mess ? `<div class="${type || ``} custom-container w-100 ml-auto mr-auto side-padding alert alert-warning"><i class="fas fa-bell mr-2 color-dark"></i> ${mess}</div>` : null;
  308. }
  309. }
  310.  
  311. </script>
  312.  
  313. <script type="text/javascript">
  314. $('#date').on("change", function() {
  315. setTimeout(function() {
  316. let totalStills = JSON.parse(sessionStorage.getItem('bookingData')).totalStills;
  317. var courseDate = $('#date').val();
  318. $.ajax({
  319. type: "POST",
  320. url: "{{ route('fetchBookings') }}",
  321. data: {
  322. "_token": "{{ csrf_token() }}",
  323. courseDate: courseDate
  324. },
  325. success: function(response) {
  326.  
  327. let dates = JSON.parse(response);
  328.  
  329. //console.log(dates)
  330.  
  331. if(dates.length < 1) {
  332. //console.log('update inner with blank', document.querySelector("#carouselBookingDates"))
  333. document.querySelector("#carouselBookingDates").innerHTML = `
  334. <div class="carousel-inner">
  335. <div class="carousel-item active">
  336. <div class="p-5 text-center">
  337. No available booking/class as of the moment.
  338. </div>
  339. </div>
  340. </div>
  341. `;
  342. } else {
  343. // Loop data response
  344. let items=`
  345. <div class="carousel-inner">
  346. <div class="carousel-item active">
  347. <div class="btn-group btn-group-toggle" data-toggle="buttons">
  348. `;
  349.  
  350. for( let i = 0; i < dates.length; i++ ) {
  351. //console.log('DATES: ', dates[i].fakeDate ? dates[i].fakeDate : 'excess');
  352.  
  353. //console.log(`CHECK THIS --- ${totalStills} > ${dates[i].partyCheck}`)
  354.  
  355. if(dates[i].description=='Course full.' || $dates[$i]['description']=='Course Full' || dates[i].description=='Booking Done' || totalStills > dates[i].partyCheck) {
  356. items +=`<div class="date-scroll-item d-inline" key="${i}-${dates[i].xDate}" >
  357. <div class="p-3 text-black-50 h-100">
  358. <input type="radio" name="newdate" class="newdate" value="${dates[i].xDate}" data-course-id="${dates[i].courseID}" ${dates[i].description=='Course full.' ? `disabled` : ``}>
  359. <div class="mb-2 pb-2 d-flex align-items-center justify-content-center">${dates[i].fakeDate}</div>
  360. <div class="description d-flex align-items-center justify-content-center">${dates[i].description}</div>
  361. </div>
  362. </div>`;
  363. } else {
  364. items +=`<div class="date-scroll-item d-inline" key="${i}-${dates[i].xDate}" >
  365. <label class="btn btn-secondary p-3 event-dates" data-current-stills="${dates[i].partyCheck}" ${dates[i].description=='Course full.' ? `disabled` : ``}>
  366. <input type="radio" name="newdate" class="newdate" value="${dates[i].xDate}" data-course-id="${dates[i].courseID}" ${dates[i].description=='Course full.' ? `disabled` : ``}>
  367. <div class="mb-2 pb-2 d-flex align-items-center justify-content-center">${dates[i].fakeDate}</div>
  368. <div class="description color-brown font-weight-bold d-flex align-items-center justify-content-center">${dates[i].description}</div>
  369. </label>
  370. </div>`;
  371. }
  372.  
  373. if( (i+1) % 7 == 0 ) {
  374. items +=`
  375. </div>
  376. </div>
  377. <div class="carousel-item">
  378. <div class="btn-group btn-group-toggle" data-toggle="buttons">
  379. `;
  380. }
  381.  
  382. }
  383.  
  384. items+=`
  385. </div>
  386. </div>
  387. </div>
  388. `;
  389.  
  390. if(dates.length>7) {
  391. items+=`
  392. <a class="carousel-control-prev" href="#carouselBookingDates" role="button" data-slide="prev">
  393. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  394. <span class="sr-only">Previous</span>
  395. </a>
  396. <a class="carousel-control-next" href="#carouselBookingDates" role="button" data-slide="next">
  397. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  398. <span class="sr-only">Next</span>
  399. </a>`;
  400. }
  401.  
  402. document.querySelector("#carouselBookingDates").innerHTML = items;
  403. }
  404.  
  405.  
  406. }
  407. });
  408. }, 300);
  409.  
  410. });
  411.  
  412. $('.booking__step1 label').on("click", function() {
  413. setTimeout(function() {
  414. let totalStills = JSON.parse(sessionStorage.getItem('bookingData')).totalStills;
  415. var courseDate = $('#date').val();
  416. $.ajax({
  417. type: "POST",
  418. url: "{{ route('fetchBookings') }}",
  419. data: {
  420. "_token": "{{ csrf_token() }}",
  421. courseDate: courseDate
  422. },
  423. success: function(response) {
  424.  
  425. let dates = JSON.parse(response);
  426.  
  427. //console.log(dates)
  428.  
  429. if(dates.length < 1) {
  430. //console.log('update inner with blank', document.querySelector("#carouselBookingDates"))
  431. document.querySelector("#carouselBookingDates").innerHTML = `
  432. <div class="carousel-inner">
  433. <div class="carousel-item active">
  434. <div class="p-5 text-center">
  435. No available booking/class as of the moment.
  436. </div>
  437. </div>
  438. </div>
  439. `;
  440. } else {
  441. // Loop data response
  442. let items=`
  443. <div class="carousel-inner">
  444. <div class="carousel-item active">
  445. <div class="btn-group btn-group-toggle" data-toggle="buttons">
  446. `;
  447.  
  448. for( let i = 0; i < dates.length; i++ ) {
  449. //console.log('DATES: ', dates[i].fakeDate ? dates[i].fakeDate : 'excess');
  450.  
  451. //console.log(`CHECK THIS --- ${totalStills} > ${dates[i].partyCheck}`)
  452.  
  453. if(dates[i].description=='Course full.' || dates[i].description=='Course Full' || dates[i].description=='Booking Done' || totalStills > dates[i].partyCheck) {
  454. items +=`<div class="date-scroll-item d-inline" key="${i}-${dates[i].xDate}" >
  455. <div class="p-3 text-black-50 h-100">
  456. <input type="radio" name="newdate" class="newdate" value="${dates[i].xDate}" data-course-id="${dates[i].courseID}" ${dates[i].description=='Course full.' ? `disabled` : ``}>
  457. <div class="mb-2 pb-2 d-flex align-items-center justify-content-center">${dates[i].fakeDate}</div>
  458. <div class="description d-flex align-items-center justify-content-center">${dates[i].description}</div>
  459. </div>
  460. </div>`;
  461. } else {
  462. items +=`<div class="date-scroll-item d-inline" key="${i}-${dates[i].xDate}" >
  463. <label class="btn btn-secondary p-3 event-dates" data-current-stills="${dates[i].partyCheck}" ${dates[i].description=='Course full.' ? `disabled` : ``}>
  464. <input type="radio" name="newdate" class="newdate" value="${dates[i].xDate}" data-course-id="${dates[i].courseID}" ${dates[i].description=='Course full.' ? `disabled` : ``}>
  465. <div class="mb-2 pb-2">${dates[i].fakeDate}</div>
  466. <div class="description color-brown font-weight-bold d-flex align-items-center justify-content-center">${dates[i].description}</div>
  467. </label>
  468. </div>`;
  469. }
  470.  
  471. if( (i+1) % 7 == 0 ) {
  472. items +=`
  473. </div>
  474. </div>
  475. <div class="carousel-item">
  476. <div class="btn-group btn-group-toggle" data-toggle="buttons">
  477. `;
  478. }
  479.  
  480. }
  481.  
  482. items+=`
  483. </div>
  484. </div>
  485. </div>
  486. `;
  487.  
  488. if(dates.length>7) {
  489. items+=`
  490. <a class="carousel-control-prev" href="#carouselBookingDates" role="button" data-slide="prev">
  491. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  492. <span class="sr-only">Previous</span>
  493. </a>
  494. <a class="carousel-control-next" href="#carouselBookingDates" role="button" data-slide="next">
  495. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  496. <span class="sr-only">Next</span>
  497. </a>`;
  498. }
  499.  
  500. document.querySelector("#carouselBookingDates").innerHTML = items;
  501. }
  502.  
  503.  
  504. }
  505. });
  506. }, 310);
  507.  
  508. });
  509.  
  510. </script>
  511.  
  512. <script>
  513. $('#btnVoucherApply').on('click', function() {
  514.  
  515. let sessionVoucherPrice = JSON.parse(sessionStorage.getItem('bookingData')).voucherDiscount.toLocaleString("en-GB", {
  516. style: "currency",
  517. currency: "GBP"
  518. });
  519.  
  520. if(!document.querySelector('#vouchercode').value) {
  521. //console.log('no value')
  522. document.querySelector('.discountAmount').innerHTML = `Please enter valid code.`;
  523. //document.querySelector('.voucher-code-message__amount').innerHTML = sessionVoucherPrice;
  524. return false;
  525. }
  526.  
  527. var code = $('#vouchercode').val();
  528. $.ajax({
  529. type: "post",
  530. url: "{{ route('validateVoucher') }}",
  531. data: {
  532. "_token": "{{ csrf_token() }}",
  533. code: code
  534. },
  535. success: function(response) {
  536. //console.log(response);
  537.  
  538. //sessionStorage.removeItem("voucherCode");
  539. //sessionStorage.removeItem("voucherCodeData");
  540.  
  541. if(response=="false"){
  542. sessionStorage.setItem('voucherCodeData', 0)
  543. document.querySelector('.discountAmount').innerHTML = `<p>To redeem your voucher, please go to: <a href="/redeem-old-voucher">Redeem Voucher</a>.</p><p>If you have any questions or concerns during your booking, you may contact us at <a href="mailto:enquiries@nelsonsdistillery.co.uk">enquiries@nelsonsdistillery.co.uk</a>.</p>`;
  544.  
  545. let bookingData = JSON.parse(sessionStorage.getItem("bookingData"));
  546. bookingData.voucherDiscount = 0;
  547. bookingData.VoucherCheck =false;
  548. sessionStorage.setItem("bookingData", JSON.stringify(bookingData));
  549.  
  550. document.querySelector("#totalAmountAfterVoucher").innerHTML = `${(bookingData.totalAmount - 0).toLocaleString("en-GB", {
  551. style: "currency",
  552. currency: "GBP"
  553. })}`;
  554.  
  555. } else {
  556. // console.log('VALID: ', JSON.parse(response)[1])
  557.  
  558. let bookingData = JSON.parse(sessionStorage.getItem("bookingData"));
  559. bookingData.voucherDiscount = parseInt(JSON.parse(response)[1]);
  560. bookingData.VoucherCheck = true;
  561. sessionStorage.setItem("bookingData", JSON.stringify(bookingData));
  562.  
  563. let newAmount = (bookingData.totalAmount - parseInt(JSON.parse(response)[1])) > 0 ? bookingData.totalAmount - parseInt(JSON.parse(response)[1]) : 0;
  564. document.querySelector("#totalAmountAfterVoucher").innerHTML = `${newAmount.toLocaleString("en-GB", {
  565. style: "currency",
  566. currency: "GBP"
  567. })}`;
  568.  
  569. sessionStorage.setItem('voucherCodeData', parseInt(JSON.parse(response)[1]));
  570. sessionStorage.setItem('voucherCode', $('#vouchercode').val());
  571.  
  572. document.querySelector('.voucher-code-message__amount').innerHTML = `Voucher Code Discount <span class="color-green">-${JSON.parse(response)[1].toLocaleString("en-GB", {
  573. style: "currency",
  574. currency: "GBP"
  575. })}</span>.`;
  576.  
  577. document.querySelector('.discountAmount').innerHTML = `<span class="color-green">- ${JSON.parse(response)[1].toLocaleString("en-GB", {
  578. style: "currency",
  579. currency: "GBP"
  580. })} Voucher Code Applied.</span>`;
  581.  
  582. }
  583.  
  584. },
  585. error: function() {
  586. helpers.setSystemMessage('Error Message: System can not confirm voucher, please contact admin.', 'error-message');
  587. }
  588. });
  589. });
  590. </script>
  591.  
  592. <script>
  593. $('#date').on("change", function() {
  594. var courseDate = $('#date').val();
  595. $.ajax({
  596. type: "POST",
  597. url: "{{ route('fetchBookings') }}",
  598. data: {
  599. "_token": "{{ csrf_token() }}",
  600. courseDate: courseDate
  601. },
  602. success: function(response) {
  603.  
  604. let dates = JSON.parse(response);
  605.  
  606. //console.log(dates)
  607.  
  608. if(dates.length < 1) {
  609. //console.log('update inner with blank', document.querySelector("#carouselBookingDates"))
  610. document.querySelector("#carouselBookingDates").innerHTML = `
  611. <div class="carousel-inner">
  612. <div class="carousel-item active">
  613. <div class="p-5 text-center">
  614. No available booking/class as of the moment.
  615. </div>
  616. </div>
  617. </div>
  618. `;
  619. } else {
  620. // Loop data response
  621. let items=`
  622. <div class="carousel-inner">
  623. <div class="carousel-item active">
  624. <div class="btn-group btn-group-toggle" data-toggle="buttons">
  625. `;
  626.  
  627. for( let i = 0; i < dates.length; i++ ) {
  628. //console.log('DATES: ', dates[i].fakeDate ? dates[i].fakeDate : 'excess');
  629.  
  630. if(dates[i].description=='Course full.' || dates[i].description=='Course Full' || dates[i].description=='Booking Done') {
  631. items +=`<div class="date-scroll-item d-inline" key="${i}-${dates[i].xDate}" >
  632. <div class="p-3 text-black-50">
  633. <input type="radio" name="newdate" class="newdate" value="${dates[i].xDate}" data-course-id="${dates[i].courseID}" ${dates[i].description=='Course full.' ? `disabled` : ``}>
  634. <div class="mb-2 pb-2">${dates[i].fakeDate}</div>
  635. <div class="description">${dates[i].description}</div>
  636. </div>
  637. </div>`;
  638. } else {
  639. items +=`<div class="date-scroll-item d-inline" key="${i}-${dates[i].xDate}" >
  640. <label class="btn btn-secondary p-3 event-dates" data-current-stills="${dates[i].partyCheck}" ${dates[i].description=='Course full.' ? `disabled` : ``}>
  641. <input type="radio" name="newdate" class="newdate" value="${dates[i].xDate}" data-course-id="${dates[i].courseID}" ${dates[i].description=='Course full.' ? `disabled` : ``}>
  642. <div class="mb-2 pb-2">${dates[i].fakeDate}</div>
  643. <div class="description mt-2 color-brown font-weight-bold">${dates[i].description}</div>
  644. </label>
  645. </div>`;
  646. }
  647.  
  648. if( (i+1) % 7 == 0 ) {
  649. items +=`
  650. </div>
  651. </div>
  652. <div class="carousel-item">
  653. <div class="btn-group btn-group-toggle" data-toggle="buttons">
  654. `;
  655. }
  656.  
  657. }
  658.  
  659. items+=`
  660. </div>
  661. </div>
  662. </div>
  663. `;
  664.  
  665. if(dates.length>7) {
  666. items+=`
  667. <a class="carousel-control-prev" href="#carouselBookingDates" role="button" data-slide="prev">
  668. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  669. <span class="sr-only">Previous</span>
  670. </a>
  671. <a class="carousel-control-next" href="#carouselBookingDates" role="button" data-slide="next">
  672. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  673. <span class="sr-only">Next</span>
  674. </a>`;
  675. }
  676.  
  677. document.querySelector("#carouselBookingDates").innerHTML = items;
  678. }
  679.  
  680.  
  681. }
  682. })
  683. console.log($('#date').val());
  684. });
  685. </script>
  686.  
  687. @endsection
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!