@extends('frontend.layouts.app')
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@section('content')
<style>
header .navbar {
    background: #1a1a1a !important;
    padding-top: 10px;
}

div#calendarContainer {
    display: flex;
    justify-content: end;
}

.about {
    padding: 200px 0;
}

.about::after {
    width: 70%;
    height: 88%;
    top: 8%;
}

.get-dis {
    margin-bottom: 65px;
}

.testimonials {
    padding: 0px 0 135px;
}

.calendar {
    width: 800px;
    height: 800px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: "Satellite", "Roboto", sans-serif;
    border: 1px solid rgba(21, 21, 21, 0.12);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0px 0px 4px rgba(21, 21, 21, 0.21);
    -ms-user-select: none;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.calendar.small {
    width: 100%;
    height: 600px;
}

.calendar.medium {
    width: 600px;
    height: 600px;
}

.calendar.large {
    width: 800px;
    height: 800px;
}

.year {
    width: calc(100% - 10px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 5px;
    font-size: 14px;
}

.year>span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-transform: uppercase;
}

.year>div {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.month {
    width: calc(100% - 10px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 5px;
    font-size: 40px;
    box-shadow: 0px 2px 6px rgba(21, 21, 21, 0.21);
}

.month>span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-transform: uppercase;
}

.month>div {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.labels {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.labels>span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 12px;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
}

.days {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    box-shadow: 0px 2px 6px -2px rgba(21, 21, 21, 0.21);
    position: relative;
    left: 15px;
}

.row {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.day {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    border-bottom: 1px solid rgba(21, 21, 21, .12);
    border-right: 1px solid rgba(21, 21, 21, .12);
    cursor: pointer;
    -webkit-transition: box-shadow 200ms ease-in-out;
    transition: box-shadow 200ms ease-in-out;
}

.day:last-child {
    border-right: none;
}

.day:hover {
    background-color: rgba(21, 21, 21, 0.012);
    box-shadow: inset 0px 0px 4px rgba(21, 21, 21, 0.21);
}

.day-radios {
    display: none;
}

.day-radios:checked+.day {
    background-color: rgba(21, 21, 21, 0.012);
    box-shadow: inset 0px 0px 4px rgba(21, 21, 21, 0.21);
}

.day>span {
    width: auto;
    font-size: 14px;
    color: rgba(21, 21, 21, 0.84);
}

.day.diluted {
    background-color: rgba(21, 21, 21, 0.021);
    box-shadow: inset 0px 0px 1px rgba(21, 21, 21, 0.12);
}

.day.diluted>span {
    width: auto;
    font-size: 10px;
    color: rgba(21, 21, 21, 0.73);
}

.events {
    width: 800px;
    height: 800px;
    font-family: "Satellite", "Roboto", sans-serif;
    box-shadow: 0px 0px 4px rgba(21, 21, 21, 0.21);
    border: 1px solid rgba(21, 21, 21, 0.12);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-user-select: none;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.events.small {
    width: 100%;
    height: 485px;
    border-radius: 19px;
    overflow: hidden;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: none;
}

.events.medium {
    width: 600px;
    height: 600px;
}

.events.large {
    width: 800px;
    height: 800px;
}

.date {
    width: calc(100% - 10px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    background-color: ' + this.calendar.colors[1] + ';
    color: ' + this.calendar.colors[3] + ';
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 5px;
    font-size: 14px;
}

    .date>span {
    padding: 14px;
    font-size: 19px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-transform: uppercase;
}

.date>div {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.rows {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden !important;
}

.list {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto !important;
    padding: 0;
    margin: 0;
    color: rgba(21, 21, 21, 0.94);
}

.list>li {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    border-bottom: 1px solid rgba(21, 21, 21, 0.12);
}

.list>li:hover {
    box-shadow: inset 0px 0px 4px rgba(21, 21, 21, 0.21);
}

.list>li>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    padding: 10px;
    border-right: 1px solid rgba(21, 21, 21, 0.12);
}

.time {
    font-size: 14px;
}

.m {
    font-size: 14px;
    text-transform: uppercase;
    padding-left: 5px;
}

.list>li>p {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    margin: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    font-size: 16px;
    word-wrap: break-word;
    word-break: break-word;
}
.list>li>span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 6px 10px;
    font-size: 15px;
    background-color: #cd6d77 !important;
    font-weight: 500;
    line-height: 20px;
}

.year {
    background-color: rgb(54 53 54) !important;
    color: white !important;
    width: 100% !important;
}

.month {
    background-color: #181616 !important;
    color: white !important;
    width: 100% !important;
}

.labels {
    background-color: rgb(54 53 54) !important;
    color: white !important;
}

.date {
    background-color: rgb(54 53 54) !important;
    color: white !important;
    width: 100% !important;
}

div#calendarContainer-year-back svg path {
    fill: white;
}

div#calendarContainer-year-next svg path {
    fill: white;
}

div#calendarContainer-month-back svg path {
    fill: white;
}

div#calendarContainer-month-next svg path {
    fill: white;
}

div#organizerContainer-day-back svg path {
    fill: white;
}

div#organizerContainer-day-next svg path {
    fill: white;
}
</style>

<style>
.calendar-wrapper {
    height: auto;
    width: 450px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 19px;
    overflow: hidden;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.calendar-header {
    background-color: rgba(18, 15, 25, 0.25);
    height: 100%;
    padding: 20px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-title123 {    margin-left: 60px;}

.header-background {
    background-image: url("https://raw.githubusercontent.com/JustMonk/codepen-resource-project/master/img/compressed-header.jpg");
    height: 135px;
    background-position: center right;
    background-size: cover;
}

.calendar-content {
    padding: 25px;
    overflow: hidden;
    color: #000;
}

.event-mark {
    width: 5px;
    height: 5px;
    background-color: teal;
    border-radius: 100px;
    position: absolute;
    left: 46%;
    top: 70%;
}

.calendar-footer {
    height: 200px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: center;
    background-color: #4b6289 !important;
    position: relative;
    overflow: hidden;
}

.addForm {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 100%;
    background-color: #4b5889 !important;
    transition: top 0.5s cubic-bezier(1, 0, 0, 1);
    padding: 0 5px 0 5px;
}

.addForm input {
    color: #fff;
}

.addForm .row {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-bottom: 0;
}

.addForm h4 {
    color: #fff;
    margin-bottom: 1rem;
}

.addEventButtons {
    text-align: right;
    padding: 0 0.75rem 0 0.75rem;
}

.addEventButtons a {
    color: black;
    font-weight: 300;
}

.emptyForm {
    padding: 20px;
    padding-left: 15%;
    padding-right: 15%;
}

.emptyForm h4 {
    color: #fff;
    margin-bottom: 2rem;
}

.sidebar-wrapper {
    color: #fff;
    background-color: #5a649c !important;
    padding-top: 0;
    padding-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    padding-left: 0;
    padding-right: 0;
}

.sidebar-title {
    padding: 50px 6% 50px 12%;
}

.sidebar-title h4 {
    margin-top: 0;
}

.sidebar-events {
    overflow-x: hidden;
    overflow-y: hidden;
    margin-bottom: 70px;
}

.empty-message {
    font-size: 1.2rem;
    padding: 15px 6% 15px 12%;
}

.eventCard {
    background-color: #fff;
    color: black;
    padding: 12px 24px 12px 24px;
    border-bottom: 1px solid #E5E5E5;
    white-space: nowrap;
    position: relative;
    animation: slideInDown 0.5s;
}

.eventCard-header {
    font-weight: bold;
}

.eventCard-description {
    color: grey;
}

.eventCard-mark-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 60px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 100%);
}

.eventCard-mark {
    width: 8px;
    height: 8px;
    background-color: #b39ddb;
    border-radius: 100px;
    position: absolute;
    left: 50%;
    top: 45%;
}

.day-mark {
    width: 7px;
    height: 7px;
    background-color: #b39ddb;
    border-radius: 100px;
    position: absolute;
    left: 47%;
    top: 67%;
}

.content-wrapper {
    padding-top: 50px;
}

#table-body .col:hover {
    cursor: pointer;
    /*border: 1px solid grey;*/
    background-color: #e0e0e033;
    border-radius: 12px;
}

.empty-day:hover {
    cursor: default !important;
    background-color: #ff000017 !important;
}

#table-body .row .col {
    font-size: 15px;
    padding: 14px !important;
    font-family: Poppins, sans-serif;
}

#table-body .col {
    border: 1px dotted #f3f3f354;
    margin: 0 1px;
}

#table-body .row {
    margin-bottom: 0;
}

#table-body .col {
    padding-top: 1.3rem !important;
    padding-bottom: 1.3rem !important;
}

#calendar-table {
    text-align: center;
    position: relative;
    left: 16px;
}

.prev-button {
    position: absolute;
    cursor: pointer;
    left: 0%;
    top: 35%;
    color: grey !important;
}

.prev-button i {
    font-size: 4em;
}

.next-button {
    position: absolute;
    cursor: pointer;
    right: 0%;
    top: 35%;
    color: grey !important;
}

.next-button i {
    font-size: 4em;
}

.addEvent {
    box-shadow: 0 5px 15px rgb(57, 168, 228);
    background-color: #39a8e4;
    padding: 10px;
    padding-left: 3em;
    padding-right: 3em;
    cursor: pointer;
    border-radius: 25px;
    color: #fff !important;
    background-image: linear-gradient(135deg, #8d8dd4, #45ced4);
}

.addEvent:hover {
    transition: box-shadow 0.5s;
    box-shadow: 0 4px 25px rgb(57, 168, 228);
}

.mobile-header {
    padding: 0;
    display: none;
    padding-top: 20px;
    padding-bottom: 20px;
    position: fixed;
    z-index: 99;
    width: 100%;
    background-color: #5a649c !important;
}

.mobile-header a i {
    color: #fff;
    font-size: 38px;
}

.mobile-header h4 {
    color: #fff;
}

.mobile-header .row {
    margin-bottom: 0;
}

.mobile-header h4 {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

@media (max-width:992px) {
    .content-wrapper {
        margin-left: 0;
    }

    .mobile-header {
        display: block;
    }

    .calendar-wrapper {
        margin-top: 80px;
    }

    .sidebar-wrapper {
        background-color: #EEEEEE !important;
    }

    .sidebar-title {
        background-color: #5A649C !important;
    }

    .empty-message {
        color: black;
    }
}

@media (max-width:767px) {
    .content-wrapper .container {
        width: auto;
    }

    .calendar-content {
        padding-left: 5%;
        padding-right: 5%;
    }

    body .row {
        margin-bottom: 0;
    }
}

@media (max-width:450px) {
    .content-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .content-wrapper .container {
        padding-left: 0;
        padding-right: 0;
    }
}

div#table-header {
    padding: 0 0 10px 0;
    font-weight: 500;
}

.col.blue.lighten-3 {
    background: #3badb8;
    color: #fff;
    border: 0;
    border-radius: 12px;
}

button.btn-close {
    top: -27px;
    position: absolute;
    right: -26px;
    border-radius: 50%;
    color: #fff;
    height: 55px;
    width: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 20% -10%, #ffca7a, #ff6468 60%, #a572ff 92%);
    opacity: 1;
}

.modal-header {
    height: 0;
    background: transparent;
    border: 0;
    padding: 0;
}

h1.text-center.mt-5.mb-5 {
    letter-spacing: -1px;
    font-family: Poppins, sans-serif;
    font-size: 35px;
    font-weight: 500;
    line-height: unset;
    color: #000000;
    margin-top: 30px !important;
}

h5.card-title {
    margin-bottom: 13px;
    font-family: Poppins, sans-serif;
    font-size: 18px;
}

.card.border-0 select,
.card.border-0 input {
    width: 100%;
    height: 58.12px;
    margin-top: 4px;
    border: 1px solid #ccc;
    background-color: rgb(233 233 233 / 90%);
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #000000;
    margin-bottom: 4px;
    font-family: Poppins, sans-serif;
    /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
}

label.btn.btn-outline-dark {
    padding: 14px;
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1015px;
    }
}

.modal button.btn.btn-primary {
    color: #fff;
    background-color: #ff6468;
    background-image: radial-gradient(circle at 20% -10%, #ffca7a, #ff6468 60%, #a572ff 92%);
    border-radius: 10px;
    padding: 16px 32px;
    font-family: Poppins, sans-serif;
    font-size: 19px;
    font-weight: 500;
    border: 0;
    line-height: 20px;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
}

.alpa {
    margin: 0 0 40px 0;
}

.mod1 {
    padding-bottom: 45px;
    border-radius: 200px;
}

#exampleModalToggle .modal-content {
    /* background-image: radial-gradient(circle at 20% -10%, #ffca7a, #ff6468 60%, #a572ff 92%); */
    /* -webkit-box-shadow: inset 0px 0px 250px 0px rgb(0 0 0); */
    -moz-box-shadow: inset 0px 0px 250px 0px rgba(0, 0, 0, 1);
    /* box-shadow: inset 0px 0px 250px 0px rgb(0 0 0); */
}

#exampleModalToggle .card,
.card-body {
    background-color: transparent;
}

.alpa label {
    border-color: #fff !important;
    font-weight: 500;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: #fff !important;
    background-color: #ebebeb !important;
    border-color: 0;
    background-image: radial-gradient(circle at 20% -10%, #ffca7a, #ff6468 60%, #a572ff 92%);
}



/* // sec modal // */
.touch input {
    width: 100%;
    height: 57.12px;
    margin-top: 4px;
    border: 0.828017px solid rgb(0 0 0 / 35%) !important;
    background-color: rgb(255 255 255 / 67%) !important;
    font-weight: 500;
    font-size: 16px !important;
    line-height: 22px;
    color: #000 !important;
    margin-bottom: 4px;
}

.touch input::placeholder {
    font-weight: 400;
    font-size: 17px;
    color: #000000 !important;
    opacity: .9;
}

.danger {
    color: #ff1515 !important;
    font-size: 25px;
    margin-left: 2px;
}

.touch form label {
    font-size: 16px !important;
    line-height: 40px !important;
    color: #000 !important;
    font-weight: 500;
}

.touch .form-group {
    margin-bottom: 21px !important;
}

.text-danger {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    bottom: 7px !important;
    letter-spacing: -.02em;
    color: #eb3636 !important;
}

.iti {
    position: relative;
    display: inline-block;
}






.touch textarea {
    resize: none;
    width: 100%;
    height: 180px;
    border: 0.828017px solid rgb(0 0 0 / 35%) !important;
    background-color: rgb(0 0 0 / 67%) !important;
    font-weight: 500;
    font-size: 18px;
    color: #fff;
    margin-bottom: 4px;
    padding: 20px;
}

.touch textarea::placeholder {
    font-weight: 400;
    font-size: 17px;
    color: #000000 !important;
    opacity: .9;
}

.touch .bud {
    font-weight: 400;
    font-size: 17px;
    color: #0000008f;
    border: 0.828017px solid rgb(0 0 0 / 35%) !important;
    background-color: rgb(255 255 255 / 67%) !important;
}

.touch .bud option {
    color: #ffffffba !important;
}

.touch .footerbutton button {
    color: #fff;
    background-color: #ff6468;
    background-image: radial-gradient(circle at 20% -10%, #ffca7a, #ff6468 60%, #a572ff 92%);
    border-radius: 10px;
    padding: 16px 32px;
    font-size: 20px;
    font-weight: 500;
    border: 0;
    line-height: 20px;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
}

.touch .footertext {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    opacity: .4;
    padding-top: 22px;
}

.touch .contact-us-form {
    width: 95%;
}

.fa-solid,
.fas {
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 900;
}

.comon h3 {
    font-size: 26px !important;
    line-height: 32px !important;
    color: #000 !important;
    margin-top: 7px;
    margin-bottom: 20px;
    font-weight: 600;
}

.comon ul {
    font-size: 13px !important;
    line-height: 20px !important;
    color: #000 !important;
    margin-top: 20px;
    padding-left: 24px;
    list-style: disc;
    font-weight: 400;
}

.comon ul li {
    margin: 6px 0px;
}

.comon h5 {
    font-size: 16px;
    margin-top: 25px;
    font-weight: 600;
    text-decoration: underline;
    position: relative;
    bottom: -10px;
}

.comon {
    padding-left: 40px;
}

.touch {
    padding-bottom: 50px;
    padding-top: 50px;
}

i.fa-solid.fa-xmark {
    font-size: 29px;
}

.alg {
    color: #fff;
    background-color: #ff6468;
    background-image: radial-gradient(circle at 20% -10%, #ffca7a, #ff6468 60%, #a572ff 92%);
    border-radius: 10px;
    padding: 16px 32px;
    font-size: 21px;
    font-weight: 500;
    border: 0;
    line-height: 25px;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
}

.modal-body123 {
    padding: 55px 0 55px 10px;
}

.modal-body123 label {
    display: inline-block;
    font-weight: 500;
}
</style>

<main>

    <section class="banner bannercon apoi">
        <div class="main-slide">
            <div class="dawn bookingpage">
                <div class="h-100 position-relative">
                    <img src="{{ asset('assets/front/images/sauna.png') }}" class="img-fluid banner-img" alt="">
                    <div class="container h-100">
                        <div class="row h-100">
                            <div class="banner-slider">
                                <div class="content" data-aos="fade-right" data-aos-duration="1500">
                                    <h3>BOOK YOUR APPOINTMENT</h3>
                                    <div class="appoin">
                                        <form action="{{ route('appointment.store') }}" class="booking-form"
                                            method="post" enctype="multipart/form-data">
                                            @csrf
                                            <div class="row">
                                                <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
                                                    <div class="number-box">
                                                        <p class="f-text">Date</p>
                                                        <input type="date" name="date"
                                                            class="form-control f-input lev required" required>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
                                                    <div class="number-box">
                                                        <p class="f-text">Time</p>
                                                        <input type="time" name="time"
                                                            class="form-control f-input lev required" required>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
                                                    <div class="number-box">
                                                        <p class="f-text">Services</p>
                                                        <select name="service_id" id="" class="lev required" required>
                                                            <option value="">Select Service</option>
                                                            @foreach($services as $service)
                                                            <option value="{{ $service->id }}">{{ $service->title }}
                                                            </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
                                                    <div class="search-btn submi">
                                                        <input type="submit" class="submiting">
                                                    </div>
                                                </div>

                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="inser">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-sm-12 col-md-11 col-lg-11">
                    <div class="row gy-5">

                        <div class="wrapper row">
                            <div class="col-12 col-lg-6 pe-0 d-flex align-items-center">
                                <div class="calendar-wrapper z-depth-2">
                                    <div class="header-background">
                                        <div class="calendar-header">
                                            <a class="prev-button" id="prev">
                                                <i class="material-icons">keyboard_arrow_left</i>
                                            </a>
                                            <a class="next-button" id="next">
                                                <i class="material-icons">keyboard_arrow_right</i>
                                            </a>

                                            <div class="row header-title123">

                                                <div class="header-text">
                                                    <h3 id="month-name">February</h3>
                                                    <h5 id="todayDayName">Today is Friday 7 Feb</h5>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="calendar-content">
                                        <div id="calendar-table" class="calendar-cells">

                                            <div id="table-header">
                                                <div class="row">
                                                    <div class="col">Mon</div>
                                                    <div class="col">Tue</div>
                                                    <div class="col">Wed</div>
                                                    <div class="col">Thu</div>
                                                    <div class="col">Fri</div>
                                                    <div class="col">Sat</div>
                                                    <div class="col">Sun</div>
                                                </div>
                                            </div>

                                            <div id="table-body" class="">

                                            </div>

                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div class="col-12 col-lg-6 ps-0">
                                <div id="organizerContainer" style="margin-left: 8px;">
                                    <div class="events small">
                                        <div class="date"
                                            style="background-color: rgb(194, 24, 91); color: rgb(248, 187, 208);">
                                            <span id="eventDayName"></span>
                                            
                                        </div>
                                        <div class="rows">
                                            <ol class="list" id="organizerContainer-list">
                                                @if(isset($appointments) && count($appointments) > 0)
                                                @foreach($appointments as $appointment)
                                                <li id="organizerContainer-list-item-${index}">
                                                    <div>
                                                        @php 
                                                        $startTime = \Carbon\Carbon::parse($appointment->time)->format('H:i');
                                                        $endTime = \Carbon\Carbon::parse($appointment->time)->addMinutes(30)->format('H:i');
                                                        @endphp
                                                        <span class="time" id="list-item-${index}-time"><span>{{ $startTime }}</span> - <b>{{ $endTime }}</b></span>
                        
                                                    </div>
                                                    <p id="list-item-${index}-text">{{ $appointment->service->title }}</p>
                                                    <span class="badge bg-success" id="list-item-${index}-text">Reserved</span>
                                                </li>
                                                @endforeach
                                                @else
                                                <div id="organizerContainer-list-item">
                                                    <h3 class="m-5 text-center" id="list-item-text">No Appointments for the day yet</h3>
                                                </div>
                                                @endif
                                                <div class="text-center my-3" id="loader" style="display: none;">
                                                    <div class="spinner-border text-info" role="status">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                </div>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--<div class="col-12 col-lg-4">-->
                        <!--    <div class="card" style="">-->
                        <!--        <img src="{{ asset('assets/front/images/col1.jpeg') }}" class="img-fluid" alt="">-->
                        <!--        <div class="card-body">-->
                        <!--            <h5 class="card-title">Sauna</h5>-->
                        <!--            <p class="card-text">Some quick example text to build on the Sauna and make up-->
                        <!--                the bulk of the card's content.</p>-->
                        <!--            <a href="checkout.php" class="btn btn-primary ayz">Book Now</a>-->
                        <!--            <div class="timedate">-->
                        <!--                <div class="date"><i class="fa-sharp fa-regular fa-calendar"></i> Fri, Oct 27-->
                        <!--                </div>-->
                        <!--                <div class="time"><i class="fa-sharp fa-regular fa-clock"></i> 9:00 PM</div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        <!--<div class="col-12 col-lg-4">-->
                        <!--    <div class="card" style="">-->
                        <!--        <img src="{{ asset('assets/front/images/col1.jpeg') }}" class="img-fluid" alt="">-->
                        <!--        <div class="card-body">-->
                        <!--            <h5 class="card-title">Sauna</h5>-->
                        <!--            <p class="card-text">Some quick example text to build on the Sauna and make up-->
                        <!--                the bulk of the card's content.</p>-->
                        <!--            <a href="checkout.php" class="btn btn-primary ayz">Book Now</a>-->
                        <!--            <div class="timedate">-->
                        <!--                <div class="date"><i class="fa-sharp fa-regular fa-calendar"></i> Fri, Oct 27-->
                        <!--                </div>-->
                        <!--                <div class="time"><i class="fa-sharp fa-regular fa-clock"></i> 9:00 PM</div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        <!--<div class="col-12 col-lg-4">-->
                        <!--    <div class="card" style="">-->
                        <!--        <img src="{{ asset('assets/front/images/col1.jpeg') }}" class="img-fluid" alt="">-->
                        <!--        <div class="card-body">-->
                        <!--            <h5 class="card-title">Sauna</h5>-->
                        <!--            <p class="card-text">Some quick example text to build on the Sauna and make up-->
                        <!--                the bulk of the card's content.</p>-->
                        <!--            <a href="checkout.php" class="btn btn-primary ayz">Book Now</a>-->
                        <!--            <div class="timedate">-->
                        <!--                <div class="date"><i class="fa-sharp fa-regular fa-calendar"></i> Fri, Oct 27-->
                        <!--                </div>-->
                        <!--                <div class="time"><i class="fa-sharp fa-regular fa-clock"></i> 9:00 PM</div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->

                        <!--<div class="col-12 col-lg-4">-->
                        <!--    <div class="card" style="">-->
                        <!--        <img src="{{ asset('assets/front/images/col1.jpeg') }}" class="img-fluid" alt="">-->
                        <!--        <div class="card-body">-->
                        <!--            <h5 class="card-title">Sauna</h5>-->
                        <!--            <p class="card-text">Some quick example text to build on the Sauna and make up-->
                        <!--                the bulk of the card's content.</p>-->
                        <!--            <a href="checkout.php" class="btn btn-primary ayz">Book Now</a>-->
                        <!--            <div class="timedate">-->
                        <!--                <div class="date"><i class="fa-sharp fa-regular fa-calendar"></i> Fri, Oct 27-->
                        <!--                </div>-->
                        <!--                <div class="time"><i class="fa-sharp fa-regular fa-clock"></i> 9:00 PM</div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        <!--<div class="col-12 col-lg-4">-->
                        <!--    <div class="card" style="">-->
                        <!--        <img src="{{ asset('assets/front/images/col1.jpeg') }}" class="img-fluid" alt="">-->
                        <!--        <div class="card-body">-->
                        <!--            <h5 class="card-title">Sauna</h5>-->
                        <!--            <p class="card-text">Some quick example text to build on the Sauna and make up-->
                        <!--                the bulk of the card's content.</p>-->
                        <!--            <a href="checkout.php" class="btn btn-primary ayz">Book Now</a>-->
                        <!--            <div class="timedate">-->
                        <!--                <div class="date"><i class="fa-sharp fa-regular fa-calendar"></i> Fri, Oct 27-->
                        <!--                </div>-->
                        <!--                <div class="time"><i class="fa-sharp fa-regular fa-clock"></i> 9:00 PM</div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        <!--<div class="col-12 col-lg-4">-->
                        <!--    <div class="card" style="">-->
                        <!--        <img src="{{ asset('assets/front/images/col1.jpeg') }}" class="img-fluid" alt="">-->
                        <!--        <div class="card-body">-->
                        <!--            <h5 class="card-title">Sauna</h5>-->
                        <!--            <p class="card-text">Some quick example text to build on the Sauna and make up-->
                        <!--                the bulk of the card's content.</p>-->
                        <!--            <a href="checkout.php" class="btn btn-primary ayz">Book Now</a>-->
                        <!--            <div class="timedate">-->
                        <!--                <div class="date"><i class="fa-sharp fa-regular fa-calendar"></i> Fri, Oct 27-->
                        <!--                </div>-->
                        <!--                <div class="time"><i class="fa-sharp fa-regular fa-clock"></i> 9:00 PM</div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->

                        <!--<div class="btn-div text-center">-->
                        <!--    <button class="btn banner_btn bckclr">Load More</button>-->
                        <!--</div>-->

                    </div>

                </div>
            </div>
        </div>
        </div>
    </section>


    <section class="testimonials">
        <div class="container">
            <div class="row">
                <div class="gtco-testimonials">
                    <h2>What Our Client's Say</h2>
                    <div class="owl-carousel owl-carousel1 owl-theme">
                        <div>
                            <div class="card text-center"><img class="card-img-top"
                                    src="https://images.unsplash.com/photo-1572561300743-2dd367ed0c9a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=300"
                                    alt="">
                                <div class="card-body">
                                    <h5>Ronne Galle <br />
                                    </h5>
                                    <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio
                                        cumque nihil
                                        impedit quo minus id quod maxime placeat ” </p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card text-center"><img class="card-img-top"
                                    src="https://images.unsplash.com/photo-1588361035994-295e21daa761?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=301"
                                    alt="">
                                <div class="card-body">
                                    <h5>Missy Limana<br />
                                    </h5>
                                    <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio
                                        cumque nihil
                                        impedit quo minus id quod maxime placeat ” </p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card text-center"><img class="card-img-top"
                                    src="https://images.unsplash.com/photo-1575377222312-dd1a63a51638?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=302&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=302"
                                    alt="">
                                <div class="card-body">
                                    <h5>Martha Brown<br />
                                    </h5>
                                    <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio
                                        cumque nihil
                                        impedit quo minus id quod maxime placeat ” </p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card text-center"><img class="card-img-top"
                                    src="https://images.unsplash.com/photo-1549836938-d278c5d46d20?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=303&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=303"
                                    alt="">
                                <div class="card-body">
                                    <h5>Hanna Lisem<br />
                                    </h5>
                                    <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio
                                        cumque nihil
                                        impedit quo minus id quod maxime placeat ” </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>

@endsection


@section('script')

<!--// Clender //-->

<script>
    $(".button-collapse").sideNav();
    var calendar = document.getElementById("calendar-table");
    var gridTable = document.getElementById("table-body");
    var currentDate = new Date();
    var selectedDate = currentDate;
    var selectedDayBlock = null;
    var globalEventObj = {};
    
    var sidebar = document.getElementById("sidebar");

    function createCalendar(date, side) {
        var currentDate = date;
        var startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
    
        var monthTitle = document.getElementById("month-name");
        var monthName = currentDate.toLocaleString("en-US", {
            month: "long"
        });
        var yearNum = currentDate.toLocaleString("en-US", {
            year: "numeric"
        });
        monthTitle.innerHTML = `${monthName} ${yearNum}`;
    
        if (side == "left") {
            gridTable.className = "animated fadeOutRight";
        } else {
            gridTable.className = "animated fadeOutLeft";
        }
    
        setTimeout(() => {
            gridTable.innerHTML = "";
            var newTr = document.createElement("div");
            newTr.className = "row";
            var currentTr = gridTable.appendChild(newTr);
    
            for (let i = 1; i < (startDate.getDay() || 7); i++) {
                let emptyDivCol = document.createElement("div");
                emptyDivCol.className = "col empty-day";
                currentTr.appendChild(emptyDivCol);
            }
    
            var lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
            lastDay = lastDay.getDate();
    
            for (let i = 1; i <= lastDay; i++) {
                if (currentTr.children.length >= 7) {
                    currentTr = gridTable.appendChild(addNewRow());
                }
                let currentDay = document.createElement("div");
                currentDay.className = "col";
                if (selectedDayBlock == null && i == currentDate.getDate() || selectedDate.toDateString() ==
                    new Date(currentDate.getFullYear(), currentDate.getMonth(), i).toDateString()) {
                    selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
    
                    document.getElementById("eventDayName").innerHTML = selectedDate.toLocaleString("en-US", {
                        month: "long",
                        day: "numeric",
                        year: "numeric"
                    });
    
                    selectedDayBlock = currentDay;
                    setTimeout(() => {
                        currentDay.classList.add("blue");
                        currentDay.classList.add("lighten-3");
                    }, 900);
                }
                currentDay.innerHTML = i;
    
                //show marks
                if (globalEventObj[new Date(currentDate.getFullYear(), currentDate.getMonth(), i).toDateString()]) {
                    let eventMark = document.createElement("div");
                    eventMark.className = "day-mark";
                    currentDay.appendChild(eventMark);
                }
    
                currentTr.appendChild(currentDay);
            }
    
            for (let i = currentTr.getElementsByTagName("div").length; i < 7; i++) {
                let emptyDivCol = document.createElement("div");
                emptyDivCol.className = "col empty-day";
                currentTr.appendChild(emptyDivCol);
            }
    
            if (side == "left") {
                gridTable.className = "animated fadeInLeft";
            } else {
                gridTable.className = "animated fadeInRight";
            }
    
            function addNewRow() {
                let node = document.createElement("div");
                node.className = "row";
                return node;
            }
    
        }, !side ? 0 : 270);
    }

    createCalendar(currentDate);
    
    var todayDayName = document.getElementById("todayDayName");
    todayDayName.innerHTML = "Today is " + currentDate.toLocaleString("en-US", {
        weekday: "long",
        day: "numeric",
        month: "short"
    });
    
    var prevButton = document.getElementById("prev");
    var nextButton = document.getElementById("next");
    
    prevButton.onclick = function changeMonthPrev() {
        currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1);
        createCalendar(currentDate, "left");
    }
    nextButton.onclick = function changeMonthNext() {
        currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1);
        createCalendar(currentDate, "right");
    }
    
    function addEvent(title, desc) {
        if (!globalEventObj[selectedDate.toDateString()]) {
            globalEventObj[selectedDate.toDateString()] = {};
        }
        globalEventObj[selectedDate.toDateString()][title] = desc;
    }

    gridTable.onclick = function(e) {
        $('#loader').show();
        document.getElementById("organizerContainer-list").innerHTML = "";
        
        if (!e.target.classList.contains("col") || e.target.classList.contains("empty-day")) {
            return;
        }
    
        if (selectedDayBlock) {
            if (selectedDayBlock.classList.contains("blue") && selectedDayBlock.classList.contains("lighten-3")) {
                selectedDayBlock.classList.remove("blue");
                selectedDayBlock.classList.remove("lighten-3");
            }
        }
        selectedDayBlock = e.target;
        selectedDayBlock.classList.add("blue");
        selectedDayBlock.classList.add("lighten-3");
    
        selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), parseInt(e.target.innerHTML));
        
        document.getElementById("eventDayName").innerHTML = selectedDate.toLocaleString("en-US", {
            month: "long",
            day: "numeric",
            year: "numeric"
        });
        
        var dateObject = new Date(selectedDate);

        // Get the components of the date
        var year = dateObject.getFullYear();
        var month = (dateObject.getMonth() + 1).toString().padStart(2, '0'); // Months are 0-indexed
        var day = dateObject.getDate().toString().padStart(2, '0');
        
        // Format the date as "YYYY-MM-DD"
        var formattedDate = `${year}-${month}-${day}`;
        
        $.ajax({
            url: '{{ route("getAppointment") }}', // Replace with your actual API endpoint
            method: 'GET', // Change to 'GET' if needed
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}",
            },
            data: {
                date: formattedDate,
            },
            success: function(response) {
                $('#loader').hide();
                const events = response.events;
                const message = response.message;
                // Clear existing events
                // document.getElementById("organizerContainer-list").innerHTML = "";
                if(events){
                    $.each(events, function(index, event) {
                        const startTime = event.time;
                        // console.log(event.service);
                        const startDate = new Date(`2000-01-01T${startTime}`);
                        
                        startDate.setMinutes(startDate.getMinutes() + 30);
                        
                        const endTime = startDate.toLocaleTimeString('en-US', { hour12: false });
                    
                        // console.log(index);
                        
                        const startTimeString = startTime;
                        const endTimeString = endTime;
                        // const serviceTitle = ;
                        const startTimeParts = startTimeString.split(":");
                        const newTime = new Date(0, 0, 0, startTimeParts[0], startTimeParts[1], startTimeParts[2]);
                        
                        const EndTimeParts = endTimeString.split(":");
                        const newEndTime = new Date(0, 0, 0, EndTimeParts[0], EndTimeParts[1], EndTimeParts[2]);
                        
                        const formattedStartTime = formatTimeAMPM(newTime);
                        const formattedEndTime = formatTimeAMPM(newEndTime);
                        
                        const listItem = `
                            <li id="organizerContainer-list-item-${index}">
                                <div>
                                    <span class="time" id="list-item-${index}-time"><span>${formattedStartTime}</span> - <b>${formattedEndTime}</b></span>
    
                                </div>
                                <p id="list-item-${index}-text">${event.service.title}</p>
                                <span class="badge bg-success" id="list-item-${index}-text">Reserved</span>
                            </li>
                        `;
                        $("#organizerContainer-list").append(listItem);
                    });
                }else{
                    const listItem = `
                        <div id="organizerContainer-list-item">
                            <h3 class="m-5 text-center" id="list-item-text">${message}</h3>
                        </div>
                    `;
                    $("#organizerContainer-list").append(listItem);
                }
            },
            error: function(error) {
                const listItem = `
                    <div id="organizerContainer-list-item">
                        <h3 class="m-5 text-center" id="list-item-text">Error fetching data:${error}</h3>
                    </div>
                `;
                $("#organizerContainer-list").append(listItem);
                console.error('Error fetching data:', error);
            }
        });
        
    
    }
    
    function formatTimeAMPM(date) {
        const hours = date.getHours() % 12 || 12; // Convert to 12-hour format
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const ampm = date.getHours() >= 12 ? 'PM' : 'AM';
        return `${hours}:${minutes} ${ampm}`;
    }
    

    var changeFormButton = document.getElementById("changeFormButton");
    var addForm = document.getElementById("addForm");
    changeFormButton.onclick = function(e) {
        addForm.style.top = 0;
    }
    
    var cancelAdd = document.getElementById("cancelAdd");
    cancelAdd.onclick = function(e) {
        addForm.style.top = "100%";
        let inputs = addForm.getElementsByTagName("input");
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = "";
        }
        let labels = addForm.getElementsByTagName("label");
        for (let i = 0; i < labels.length; i++) {
            labels[i].className = "";
        }
    }
</script>

@endsection