[edit] appointment js function

public/frontend/css/style.css

@@ -57,7 +57,17 @@ h2{
     line-height: 22px;
     color: #2B2A29 !important;
 }
-
+.header .appointment-btn{
+    text-decoration: none;
+    color: #FFFFFF;
+    background: #326CBF;
+    padding: 10px 1rem;
+    border-radius: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
+    font-weight: 500;
+    font-size: 17px;
+    line-height: 22px;
+}
 .nav-link:hover,
 .nav-link:active {
     color: #326CBF !important;
@@ -434,7 +444,8 @@ Responsive Codes
 .blog-detail-section,
 .faq-section,
 .student-visa-section,
-.services-page-section{
+.services-page-section,
+.appointment-section{
     padding: 3rem 6rem;
 }
 .services-section .row,
@@ -1443,6 +1454,67 @@ Responsive Codes
     text-align: center;
     color: #111111;
 }
+/* appointment page css */
+.appointment-cards{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.appointment-card{
+    background-color: #E5F0FF;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    text-decoration: none;
+    color: #000000;
+    padding: 10px 20px;
+    border-radius: 20px;
+    width: 360px;
+}
+.appointment-card-img{
+    width: 50px;
+}
+.claender-top{
+    display: flex;
+    gap: 10px;
+}
+.zabuto-calendar{
+    margin-top: 20px !important;
+}
+table.lightgrey-weekends tbody td:nth-child(n+6) {
+    background-color: #f3f3f3;
+}
+.appointment-section h1{
+    color: #296AC7;
+    margin-bottom: 2rem;
+}
+.calender-section h3{
+    font-size: 18px;
+    color: #9f9f9f;
+}
+.calender-section h2{
+    color: #296AC7;
+}
+.calender-disable{
+    pointer-events: none;
+    cursor: not-allowed;
+}
+.calender-disable:hover{
+    cursor: not-allowed;
+}
+.available-dates{
+    background: #f0f0f0;
+    display: inline-block;
+    text-align: center;
+    justify-content: center;
+    color: #272626;
+    padding: 10px;
+    margin-top: 1rem;
+}
+.available-dates h5{
+    margin-bottom: 0;
+}
+/* appointment page css ends */
 
 /* Footer Css */
 .footer{
@@ -1522,7 +1594,9 @@ Responsive Codes
     align-items: center;
     gap: 10px;
 }
-.blog-info h6{
+.blog-info h6,
+.claender-top p,
+.claender-top h5{
     margin-bottom: 0;
 }
 .socials-icon{

public/frontend/plugin/zabuto_calendar.min.css

@@ -0,0 +1,82 @@
+/*! Zabuto Calendar - v2.1.0 - 2022-12-29
+* https://github.com/zabuto/calendar
+* Copyright (c) 2022 Anke Heijnen; Licensed MIT */
+.zabuto-calendar {
+    width: 100%;
+    margin: 0;
+    padding: 0
+}
+
+.zabuto-calendar__navigation__item--next,
+.zabuto-calendar__navigation__item--prev {
+    text-align: center;
+    cursor: pointer
+}
+
+.zabuto-calendar__navigation__item--header {
+    text-align: center
+}
+
+.zabuto-calendar__navigation__item--header__title {
+    cursor: pointer;
+    font-weight: bolder
+}
+
+.zabuto-calendar__days-of-week__item {
+    text-align: center
+}
+
+.zabuto-calendar__day {
+    text-align: center
+}
+
+.zabuto-calendar__day--today {
+    text-align: center
+}
+
+.zabuto-calendar.table td,
+.zabuto-calendar.table th {
+    vertical-align: middle
+}
+
+.zabuto-calendar.table thead td {
+    padding-top: 14px;
+    padding-bottom: 14px;
+    background-color: #fafafa
+}
+
+.zabuto-calendar.table-bordered thead td {
+    border: 0
+}
+
+.zabuto-calendar.table thead th {
+    background-color: #f0f0f0
+}
+
+.zabuto-calendar.table>thead:first-child>tr:first-child>td {
+    border-top: 1px solid #ddd
+}
+
+.zabuto-calendar.table>thead>tr>th {
+    border-bottom: 2px solid #ddd
+}
+
+.zabuto-calendar.table>tbody td {
+    width: calc(100% / 7)
+}
+
+.zabuto-calendar.table>tbody>tr:last-child>td {
+    border-bottom: 1px solid #ddd
+}
+
+.zabuto-calendar.table>tbody td .badge {
+    font-size: 100%
+}
+
+.zabuto-calendar.clickable>tbody td {
+    cursor: pointer
+}
+
+.zabuto-calendar.table.clickable>tbody td:hover {
+    background-color: #f0f0f0
+}

resources/views/appointment.blade.php

@@ -0,0 +1,107 @@
+@extends('layout.app')
+@section('title')
+<title>Book an Appointment</title>
+    <meta name="description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad.">
+    <meta name="robots" content="index, follow" />
+    <meta property="og:url" content="" />
+    <meta property="og:image" content="{{url('frontend/images/banner.png')}}"/>
+    <meta property="og:title" content="ET-Visas"/>
+    <meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/>
+@endsection
+@section('content')
+    <section class="appointment-section">
+        <div class="row">
+            <div class="col-md-5">
+                <h1>Book an Appointment</h1>
+                <div class="appointment-cards">
+                    <a href="" class="appointment-card">
+                        <div class="appointment-card-img">
+                            <img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt="">
+                        </div>
+                        <div>
+                            <h3>Education Services</h3>
+                        </div>
+                    </a>
+                    <a href="" class="appointment-card">
+                        <div class="appointment-card-img">
+                            <img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt="">
+                        </div>
+                        <div>
+                            <h3>Visa Services</h3>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="col-md-7">
+                <div class="calender-section">
+                    <div class="claender-top">
+                        <p>Time Zone:</p>
+                        <h5>Australia / Sydney</h5>
+                    </div>
+                    <h2>Select available date</h2>
+                    <h3>Education services | 30 mins</h3>
+                    <div id="demo-calendar-apppearance"></div>
+                    <div class="available-dates">
+                        <h5 id='available-dates'></h5>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+@endsection
+@section('script')
+<script>
+    var $calender = $("#demo-calendar-apppearance");
+    $(document).ready(function () {
+    $calender.zabuto_calendar({
+        classname: 'table clickable table-bordered lightgrey-weekends',
+        week_starts: 'monday',
+        show_days: true,
+        today_markup: '<span class="badge bg-primary">[day]</span>',
+        navigation_markup: {
+            prev: '<i class="fas fa-chevron-circle-left"></i>',
+            next: '<i class="fas fa-chevron-circle-right"></i>'
+        }
+    });
+
+    var dates = [7, 8, 9]
+    var availableDates = document.getElementById('available-dates')
+
+    $calender.on('zabuto:calendar:day', function (e) {
+        var now = new Date();
+            if (e.today) {
+                $(e.element).css('color', 'blue');
+            } else if (e.date.getTime() < now.getTime()) {
+                $(e.element).click(function() { return false })
+            }
+            else if(dates){
+                dates.forEach((date) => {
+                    if(e.element[0].innerText == date){
+                        availableDates.innerText=[dates]
+                    }
+                    else{
+                        availableDates.innerText=""
+                        return false;
+                    }
+                    console.log(date)
+                });
+                // for (let i = 0; i < dates.length; i++){
+                //     if(e.element[0].innerText == dates[i]){
+                //         console.log(true)
+                //     }
+                //     else{
+                //         console.log(dates[i])
+                //     }
+                // }
+            } 
+            else {
+                $(e.element).click(function() { return false })
+            }
+            writeToEventLog('zabuto:calendar:day' + ' date=' + e.date.toDateString() + ' value=' + e.value + ' today=' + e.today);
+        })
+    });
+    function writeToEventLog(message) { 
+
+    }
+</script>
+@endsection

resources/views/layout/app.blade.php

@@ -122,6 +122,9 @@
             <li class="nav-item">
                 <a class="nav-link" href="{{url('/faqs')}}">FAQs</a>
             </li>
+            <li>
+              <a href="{{url('/appointment')}}" class="appointment-btn">BOOK AN APPOINTMENT</a>
+            </li>
         </ul>
         <div class="mobile-navbar-btn">
           <img src="{{url('frontend/icons/menu.png')}}" name="menu-outline" class="mobile-nav-icon" alt="">
@@ -283,6 +286,10 @@
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
 
+    <!-- require the plugin files -->
+    <link href="{{url('frontend/plugin/zabuto_calendar.min.css')}}" rel="stylesheet">
+    <script src="{{url('frontend/plugin/zabuto_calendar.min.js')}}"></script>
+
     @yield('script')
     <script>
       $.ajaxSetup({

resources/views/welcome.blade.php

@@ -152,7 +152,7 @@
             </div>
             <div class="col-md-6">
                 <div class="why-us-desc">
-                    {!!$about_us->skip(1)->first()->description!!}
+                    {!!$about_us->skip(1)->first()->description ?? '' !!}
                     <!-- <h1>Why Choose Us</h1>
                     <p>A remarkable number of Nepalese students from across the world, from diverse backgrounds, have achieved their international education goals successfully through us, the best Study Abroad Consultants in Nepal.</p> -->
                     <div class="why-us-lists">
@@ -160,7 +160,7 @@
                             <img src="{{url('frontend/icons/exclusive.svg')}}" class="img-fluid" alt="">
                         </div>
                         <div class="list-des">
-                            {!!$about_us->skip(1)->first()->sub_description!!}
+                            {!!$about_us->skip(1)->first()->sub_description ?? ''!!}
                         </div>
                     </div>
                     <div class="why-us-lists">
@@ -168,7 +168,7 @@
                             <img src="{{url('frontend/icons/coin.svg')}}" class="img-fluid" alt="">
                         </div>
                         <div class="list-des">
-                        {!!$about_us->skip(1)->first()->bottom_description!!}
+                        {!!$about_us->skip(1)->first()->bottom_description ?? '' !!}
                         </div>
                     </div>
                     <!--<div class="why-us-lists">-->

routes/web.php

@@ -295,9 +295,9 @@ Route::get('/career_counselling', function () {
 Route::get('/insurance', function () {
     return view('insurance');
 });
-// Route::get('/study-abroad-detail', function () {
+Route::get('/appointment', function () {
-//     return view('study-abroad-detail');
+    return view('appointment');
-// });
+});
 // Route::get('/visa', function () {
 //     return view('visa');
 // });