@extends('site.layouts.master')
@section('title', 'APPOINTMENT | Overcare Health Service')
@section('style')
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

        .calendar {
            height: max-content;
            width: max-content;
            background-color: aliceblue;
            border-radius: 30px;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

        .light .calendar {
            box-shadow: var(--shadow);
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 25px;
            font-weight: 600;
            color: var(--color-txt);
            padding: 10px;
        }

        .calendar-body {
            padding: 10px;
        }

        .calendar-week-day {
            height: 50px;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            font-weight: 600;
        }

        .calendar-week-day div {
            display: grid;
            place-items: center;
            color: #FF4B4B;
        }

        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            color: var(--color-txt);
        }

        .calendar-days div {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            position: relative;
            cursor: pointer;
            animation: to-top 1s forwards;
        }

        .calendar-days div:hover {
            background-color: #f2f4f9;
            border-radius: 10px;
            transition: background-color 0.3s ease;
        }

        .dark .calendar-days div:hover {
            background-color: var(--dark-hover);
        }

        .calendar-days div span {
            position: absolute;
        }

        .calendar-days div.curr-date span {
            display: none;
        }

        .month-picker {
            padding: 5px 10px;
            border-radius: 10px;
            cursor: pointer;
            color: #FF4B4B;
        }

        .month-picker:hover {
            background-color: #f2f4f9;
        }

        .year-picker {
            display: flex;
            align-items: center;
        }

        pre {
            margin-top: 10px !important;
        }

        .year-change {
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            margin: 0 10px;
            cursor: pointer;
        }

        .year-change:hover {
            background-color: #f2f4f9;
        }

        .calendar-footer {
            padding: 10px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .toggle {
            display: flex;
        }

        .toggle span {
            margin-right: 10px;
            color: var(--color-txt);
        }



        .month-list {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: aliceblue;
            padding: 20px;
            grid-template-columns: repeat(3, auto);
            gap: 5px;
            display: grid;
            transform: scale(1.5);
            visibility: hidden;
            pointer-events: none;
        }

        .month-list.show {
            transform: scale(1);
            visibility: visible;
            pointer-events: visible;
            transition: all 0.2s ease-in-out;
        }

        .month-list>div {
            display: grid;
            place-items: center;
        }

        .month-list>div>div {
            width: 100%;
            padding: 5px 20px;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            color: var(--color-txt);
        }

        .month-list>div>div:hover {
            background-color: #f2f4f9;
        }

        @keyframes to-top {
            0% {
                transform: translateY(100%);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .disabled {
            pointer-events: none;
            /* Disable clicks */
            opacity: 0.5;
            /* Make disabled dates semi-transparent */
        }

        .curr-date {
            font-weight: bold;
            /* Highlight today's date */
            cursor: pointer;
            /* Make today's date clickable */
            background-color: gray;
            border-radius: 10px;
            transition: background-color 0.3s ease;
            color: white;
        }

        .calendar-days div:hover {
            background-color: #f2f4f9;
            border-radius: 10px;
            transition: background-color 0.3s ease;
        }

        /* Optional: highlight only enabled dates */
        .calendar-days div:not(.disabled):hover {
            background-color: #f2f4f9;
            color: #000000;
        }

        .agree label a:hover {
            text-decoration: underline;
        }

        .form-check-input:checked {
            background-color: var(--uterpy-gray);
            border-color: var(--uterpy-gray)
        }

        .time-slots {
            background-color: aliceblue;
            overflow-x: auto;
            height: 300px;
            display: none;
        }
    </style>
@endsection
@section('content')
    <!--Start Page Header-->
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url({{ asset('assets/images/backgrounds/appointment.jpg') }})">
        </div>

        <div class="container">
            <div class="page-header__inner text-center">
                <h2>Appointment</h2>
                <ul class="thm-breadcrumb">
                    <li><a href="{{ route('site.home') }}">Home</a></li>
                    <li>Appointment</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Header-->

    <!--Start Checkout Area-->
    <section class="checkout-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-8 col-lg-7 col-md-12 col-sm-12">
                    <div class="form billing-info">
                        <div class="title ">
                            <h2 class="sec-title__title py-3 fs-3">Request an Appointment</h2>
                            <p class="text-light-color fw-bold">Use our secure, online health connection to get scheduled
                                quickly.</p>
                        </div>
                        <div id="form_account">
                            <!-- Radio buttons for patient type -->
                            <label>Have you visited our practice before?</label><br>
                            <div class="mb-3 d-flex align-items-center gap-5">
                                <div class="form-check d-flex align-items-center gap-2">
                                    <input class="form-check-input bg-light-color border-light-color" type="radio"
                                        name="patientType" id="newPatient" value="new" checked>
                                    <label class="form-check-label" for="newPatient">I'm a new patient</label>
                                </div>
                                <div class="form-check d-flex align-items-center gap-2">
                                    <input class="form-check-input bg-light-color border-light-color" type="radio"
                                        name="patientType" id="returnPatient" value="returning">
                                    <label class="form-check-label" for="returnPatient">I've been to this practice
                                        before</label>
                                </div>
                            </div>

                            <!-- Form for new patient -->
                            <div id="newPatientForm">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="fname" class="form-label fw-bold">First name <span
                                                    class="text-danger">*</span> </label>
                                            <input type="text" class="form-control" id="fname" name="fname"
                                                placeholder="First Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="lname" class="form-label fw-bold">Last name <span
                                                    class="text-danger">*</span> </label>
                                            <input type="text" class="form-control" id="lname" name="lname"
                                                placeholder="Last Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="email" class="form-label fw-bold">Email <span
                                                    class="text-danger">*</span> </label>
                                            <input type="email" class="form-control" id="email" name="email"
                                                placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="dob" class="form-label fw-bold">Date of Birth <span
                                                    class="text-danger">*</span> </label>
                                            <input type="date" class="form-control" id="dob" name="dob">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="password" class="form-label fw-bold">Password <span
                                                    class="text-danger">*</span> </label>
                                            <input type="password" class="form-control" id="password" name="password"
                                                placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="confirmPassword" class="form-label fw-bold">Confirm Password <span
                                                    class="text-danger">*</span> </label>
                                            <input type="password" class="form-control" id="confirmPassword"
                                                name="confirmPassword" placeholder="Confirm Password">
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="securityQuestion" class="form-label fw-bold">Security Question
                                                <span class="text-danger">*</span> </label>
                                            <select class="form-select" id="securityQuestion" name="securityQuestion">
                                                <option value="" disabled selected>Choose A Security Question
                                                </option>
                                                <option value="What was your childhood nickname?">What was your childhood
                                                    nickname?</option>
                                                <option value="In what city were you born?">In what city were you born?
                                                </option>
                                                <option value="What is the name of your favorite childhood friend?">What is
                                                    the name of your favorite childhood friend?</option>
                                                <option value="What street did you live on in thrid grade?">What street did
                                                    you live on in thrid grade?</option>
                                                <option value="What is the middle name of your youngest child?">What is the
                                                    middle name of your youngest child?</option>
                                                <option value="What is your oldest siblings middle name?">What is your
                                                    oldest siblings middle name?</option>
                                                <option value="What was the name of your first stuffed animal?">What was
                                                    the name of your first stuffed animal?</option>
                                                <option value="In what city or town did your mother and father meet?">In
                                                    what city or town did your mother and father meet?</option>
                                                <option value="What is your maternal grandmothers maiden name?">What is
                                                    your maternal grandmothers maiden name?</option>
                                                <option value="In what city or town was your first job?">In what city or
                                                    town was your first job?</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="securityAnswer" class="form-label fw-bold">Answer <span
                                                    class="text-danger">*</span> </label>
                                            <input type="text" class="form-control" id="securityAnswer"
                                                name="securityAnswer" placeholder="Answer">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="gender" class="form-label fw-bold">Gender <span
                                                    class="text-danger">*</span> </label>
                                            <select class="form-select" id="gender" name="gender">
                                                <option value="" disabled selected>Select Gender</option>
                                                <option value="male">Male</option>
                                                <option value="female">Female</option>
                                                <option value="Unknown">Unknown</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-check mt-3 d-flex align-items-center gap-2 agree">
                                    <input class="form-check-input" type="checkbox" id="termsCheck">
                                    <label class="form-check-label" for="termsCheck">
                                        I agree to the <a href="#" class="text-light-color fw-bold">Terms of Use</a>
                                        and
                                        <a href="#" class="text-light-color fw-bold">Privacy Policy</a>.
                                    </label>
                                </div>
                                <div class="mt-3">
                                    <button id="btn_account" class="btn bg-dark-color text-white">Continue</button>
                                </div>
                            </div>

                            <!-- Form for returning patient -->
                            <div id="returningPatientForm" style="display: none;">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="returnEmail" class="form-label fw-bold">Email <span
                                                    class="text-danger">*</span> </label>
                                            <input type="email" class="form-control" id="returnEmail"
                                                name="returnEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="returnPassword" class="form-label fw-bold">Password <span
                                                    class="text-danger">*</span> </label>
                                            <input type="password" class="form-control" id="returnPassword"
                                                name="returnPassword" placeholder="Password">
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button class="btn bg-dark-color text-white">Log In</button>
                                </div>
                            </div>

                        </div>
                        <div id="form_address">
                            <div class="pb-3">
                                Register now to save time at your appointment.
                            </div>
                            <!-- Form for new patient -->
                            <div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="address" class="form-label fw-bold">Address : </label>
                                            <input type="text" class="form-control" id="address" name="address"
                                                placeholder="Address">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="city" class="form-label fw-bold">City : </label>
                                            <input type="text" class="form-control" id="city" name="city"
                                                placeholder="City">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="state" class="form-label fw-bold">State : </label>
                                            <select class="form-select" id="state" name="state">
                                                <option value="" disabled selected>Select</option>
                                                <option value="61">AB</option>
                                                <option value="75">AE</option>
                                                <option value="2">AK</option>
                                                <option value="1">AL</option>
                                                <option value="76">AP</option>
                                                <option value="4">AR</option>
                                                <option value="3">AZ</option>
                                                <option value="62">BC</option>
                                                <option value="5">CA</option>
                                                <option value="6">CO</option>
                                                <option value="7">CT</option>
                                                <option value="9">DC</option>
                                                <option value="8">DE</option>
                                                <option value="10">FL</option>
                                                <option value="11">GA</option>
                                                <option value="12">HI</option>
                                                <option value="16">IA</option>
                                                <option value="13">ID</option>
                                                <option value="14">IL</option>
                                                <option value="15">IN</option>
                                                <option value="17">KS</option>
                                                <option value="18">KY</option>
                                                <option value="19">LA</option>
                                                <option value="22">MA</option>
                                                <option value="63">MB</option>
                                                <option value="21">MD</option>
                                                <option value="20">ME</option>
                                                <option value="23">MI</option>
                                                <option value="24">MN</option>
                                                <option value="26">MO</option>
                                                <option value="25">MS</option>
                                                <option value="27">MT</option>
                                                <option value="64">NB</option>
                                                <option value="34">NC</option>
                                                <option value="35">ND</option>
                                                <option value="28">NE</option>
                                                <option value="30">NH</option>
                                                <option value="31">NJ</option>
                                                <option value="65">NL</option>
                                                <option value="32">NM</option>
                                                <option value="67">NS</option>
                                                <option value="66">NT</option>
                                                <option value="68">NU</option>
                                                <option value="29">NV</option>
                                                <option value="33">NY</option>
                                                <option value="36">OH</option>
                                                <option value="37">OK</option>
                                                <option value="69">ON</option>
                                                <option value="38">OR</option>
                                                <option value="39">PA</option>
                                                <option value="70">PE</option>
                                                <option value="58">PR</option>
                                                <option value="71">QC</option>
                                                <option value="40">RI</option>
                                                <option value="41">SC</option>
                                                <option value="42">SD</option>
                                                <option value="72">SK</option>
                                                <option value="43">TN</option>
                                                <option value="44">TX</option>
                                                <option value="45">UT</option>
                                                <option value="47">VA</option>
                                                <option value="60">VI</option>
                                                <option value="46">VT</option>
                                                <option value="48">WA</option>
                                                <option value="50">WI</option>
                                                <option value="49">WV</option>
                                                <option value="51">WY</option>
                                                <option value="73">YT</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="zip_code" class="form-label fw-bold">Zip Code : <span
                                                    class="text-danger">*</span> </label>
                                            <input type="zip_code" class="form-control" id="zip_code" name="zip_code"
                                                placeholder="Zip Code">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="social_security" class="form-label fw-bold">Social Security :
                                                <span class="text-danger">*</span> </label>
                                            <input type="social_security" class="form-control" id="social_security"
                                                name="social_security" placeholder="Social Security">
                                        </div>
                                    </div>


                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="race" class="form-label fw-bold">Race : </label>
                                            <select class="form-select" id="race" name="race">
                                                <option value="" disabled selected>Select</option>
                                                <option value="1">White</option>
                                                <option value="2">Black or African American</option>
                                                <option value="3">American Indian</option>
                                                <option value="4">Asian</option>
                                                <option value="5">Native Hawaiin</option>
                                                <option value="6">Hispanic</option>
                                                <option value="7">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="ethnicity" class="form-label fw-bold">Ethnicity : </label>
                                            <select class="form-select" id="ethnicity" name="ethnicity">
                                                <option value="" disabled selected>Select</option>
                                                <option value="1">Hispanic or Latino</option>
                                                <option value="2">Not Hispanic or Latino</option>
                                                <option value="3">Decline</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="preferred_language" class="form-label fw-bold">Preferred Language
                                                : </label>
                                            <select class="form-select" id="preferred_language"
                                                name="preferred_language">
                                                <option value="" disabled selected>Select</option>
                                                <option value="146">English</option>
                                                <option value="478">Spanish</option>
                                                <option value="163">French</option>
                                                <option value="563">Other</option>
                                                <option value="113">Creole</option>
                                                <option value="95">Chinese</option>
                                                <option value="414">Polish</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="phone" class="form-label fw-bold">Phone Number <span
                                                    class="text-danger">*</span> </label>
                                            <input type="text" class="form-control" id="phone" name="phone"
                                                placeholder="Phone Number">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="phone_type" class="form-label fw-bold">Phone Type : </label>
                                            <select class="form-select" id="phone_type" name="phone_type">
                                                <option value="" disabled selected>Select</option>
                                                <option value="1">Business</option>
                                                <option value="11">Main</option>
                                                <option value="9">Fax</option>
                                                <option value="4">Pager</option>
                                                <option value="3">Cell</option>
                                                <option value="2">Home</option>
                                                <option value="13">Fax Attachment Number</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="contact_method" class="form-label fw-bold">Contact Method : <span
                                                    class="text-danger">*</span> </label>
                                            <select class="form-select" id="contact_method" name="contact_method">
                                                <option value="" disabled selected>Select</option>
                                                <option value="5">None</option>
                                                <option value="2">Email</option>
                                                <option value="1">Text Message</option>
                                                <option value="3">Phone</option>
                                                <option value="5">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <button id="btn_address" class="btn bg-dark-color text-white">Continue</button>
                                </div>
                            </div>
                        </div>
                        <div id="form_insurance">
                            <div class="pb-3">
                                Add your Insurance Information.
                            </div>
                            <!-- Form for new patient -->
                            <div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="policy_type" class="form-label fw-bold">Policy Type </label>
                                            <select class="form-select" id="policy_type" name="policy_type">
                                                <option value="" disabled selected>Select</option>
                                                <option value="61">Medicaid HMO</option>
                                                <option value="75">Medicaid Newborn</option>
                                                <option value="2">MEDICARE A</option>
                                                <option value="1">MEDICARE B</option>
                                                <option value="76">Medicare HMO</option>
                                                <option value="4">MEDICARE POS</option>
                                                <option value="3">Medicare PPO</option>
                                                <option value="62">Medicare Railroad</option>
                                                <option value="5">Medicare Supplement</option>
                                                <option value="6">Medikids</option>
                                                <option value="7">Medipass</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="insurance_company" class="form-label fw-bold">Insurance Company
                                            </label>
                                            <input type="text" class="form-control" id="insurance_company"
                                                name="insurance_company" placeholder="Insurance Company">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="member_no" class="form-label fw-bold">Member Number </label>
                                            <input type="member_no" class="form-control" id="member_no" name="member_no"
                                                placeholder="Member Number">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="policy_no" class="form-label fw-bold">Policy Number <span
                                                    class="fw-normal text-dark-color">(if applicable)</span> </label>
                                            <input type="text" class="form-control" id="policy_no" name="policy_no"
                                                placeholder="Policy Number">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="group_no" class="form-label fw-bold">Group Number <span
                                                    class="fw-normal text-dark-color">(if applicable)</span></label>
                                            <input type="text" class="form-control" id="group_no" name="group_no"
                                                placeholder="Group Number">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="mb-3">
                                            <label for="effective_form" class="form-label fw-bold">Effective Form</label>
                                            <input type="text" class="form-control" id="effective_form"
                                                name="effective_form" placeholder="mm/dd/yy">
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <button id="btn_insurance" class="btn bg-dark-color text-white">Continue</button>
                                    <button id="skip_insurance" class="btn btn-danger text-white px-4">Skip</button>
                                </div>
                            </div>
                        </div>
                        <div id="form_appointment">
                            <div class="row">
                                <!-- Left side: col-lg-6 for the form fields -->
                                <div class="col-lg-6">
                                    <form action="">
                                        <div class="mb-3">
                                            <label for="location" class="form-label fw-bold">Location : <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-select" id="location" name="location">
                                                <option value="">OVERCARE HEALTH SERVICE</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="visit_type" class="form-label fw-bold">Visit Type : <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-select" id="visit_type" name="visit_type">
                                                <option value="" disabled selected>Select</option>
                                                <option value="61">PSYCHIATRIC DIAGNOSTIC EVAL-TELE</option>
                                                <option value="75">THERAPY SESSION-TELE</option>
                                                <option value="2">FOLLOW UP-TELE</option>
                                                <option value="1">INITIAL ASSESSMENT - TELE</option>
                                                <option value="76">PSYCHIATRIC DIAGNOSTIC EVAL</option>
                                                <option value="4">THERAPY - 45 MIN</option>
                                                <option value="3">THERAPY - 30 MIN</option>
                                                <option value="62">INITIAL ASSESSMENT</option>
                                                <option value="5">FOLLOW UP</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="provider" class="form-label fw-bold">Provider : <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-select" id="provider" name="provider">
                                                <option value="" disabled selected>Select</option>
                                                <option value="61">CAROLINE NJANE PMHNP</option>
                                                <option value="75">FRANCOIS TUEGO PMHNP</option>
                                                <option value="2">CHARLES WANGUI</option>
                                                <option value="1">ABDUL C DOZA CRNP-PMH</option>
                                                <option value="76">KENETH KIBIRIU PMHNP</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label for="reason" class="form-label fw-bold">Reason : </label>
                                            <input type="text" class="form-control" id="reason" name="reason"
                                                placeholder="Reason">
                                        </div>
                                        <div class="d-flex align-items-center gap-4">
                                            <label class="form-label fw-bold">Time:</label>
                                            <div class="form-check d-flex align-items-baseline gap-2">
                                                <input class="form-check-input" type="checkbox" value="morning"
                                                    id="morningCheck">
                                                <label class="form-check-label" for="morningCheck">Morning</label>
                                            </div>
                                            <div class="form-check d-flex align-items-baseline gap-2">
                                                <input class="form-check-input" type="checkbox" value="afternoon"
                                                    id="afternoonCheck">
                                                <label class="form-check-label" for="afternoonCheck">Afternoon</label>
                                            </div>
                                        </div>
                                        <div class="mt-3">
                                            <button id="search_btn_after_register"
                                                class="btn bg-dark-color text-white">Search</button>
                                            <button id="cancel_btn_after_register"
                                                class="btn btn-danger text-white">Cancel</button>
                                        </div>
                                    </form>
                                </div>

                                <!-- Right side: col-lg-6 for the calendar and submit button -->
                                <div class="col-lg-6 col-md-6">
                                    <form action="">
                                        <div class="calendar">
                                            <div class="calendar-header">
                                                <span class="month-picker" id="month-picker">February</span>
                                                <div class="year-picker">
                                                    <span class="year-change" id="prev-year">
                                                        <pre><</pre>
                                                    </span>
                                                    <span id="year">2021</span>
                                                    <span class="year-change" id="next-year">
                                                        <pre>></pre>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="calendar-body">
                                                <div class="calendar-week-day">
                                                    <div>Sun</div>
                                                    <div>Mon</div>
                                                    <div>Tue</div>
                                                    <div>Wed</div>
                                                    <div>Thu</div>
                                                    <div>Fri</div>
                                                    <div>Sat</div>
                                                </div>
                                                <div class="calendar-days">
                                                    <!-- Here dates will dynamically appear -->
                                                    <div class="calendar-day" onclick="showTimeSlots()">1</div>
                                                    <div class="calendar-day" onclick="showTimeSlots()">2</div>
                                                    <!-- Add more dates similarly -->
                                                </div>
                                            </div>
                                            <div class="month-list"></div>
                                        </div>

                                        <!-- Time slots section (initially hidden) -->
                                        <div class="time-slots mt-3 p-3" id="time-slots">
                                            <h5 class="text-danger fw-bold pb-2">Select a Time Slot:</h5>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="timeSlot"
                                                    value="9:00 AM" id="timeSlot1">
                                                <label class="form-check-label" for="timeSlot1">9:00 AM</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="timeSlot"
                                                    value="11:00 AM" id="timeSlot2">
                                                <label class="form-check-label" for="timeSlot2">11:00 AM</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="timeSlot"
                                                    value="1:00 PM" id="timeSlot3">
                                                <label class="form-check-label" for="timeSlot3">1:00 PM</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="timeSlot"
                                                    value="3:00 PM" id="timeSlot4">
                                                <label class="form-check-label" for="timeSlot4">3:00 PM</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="timeSlot"
                                                    value="3:00 PM" id="timeSlot5">
                                                <label class="form-check-label" for="timeSlot4">3:00 PM</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="timeSlot"
                                                    value="3:00 PM" id="timeSlot6">
                                                <label class="form-check-label" for="timeSlot4">3:00 PM</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="timeSlot"
                                                    value="3:00 PM" id="timeSlot7">
                                                <label class="form-check-label" for="timeSlot4">3:00 PM</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="timeSlot"
                                                    value="3:00 PM" id="timeSlot8">
                                                <label class="form-check-label" for="timeSlot4">3:00 PM</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="timeSlot"
                                                    value="3:00 PM" id="timeSlot9">
                                                <label class="form-check-label" for="timeSlot4">3:00 PM</label>
                                            </div>
                                        </div>

                                        <!-- Submit Request button -->
                                        <div class="mt-3">
                                            <button id="submit_btn_after_register"
                                                class="btn bg-dark-color text-white ms-3">Submit
                                                Request</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Checkout area-->


@endsection

@section('script')
    {{-- New Patient and Practice Before --}}
    <script>
        // JavaScript to toggle forms based on selected patient type
        document.addEventListener('DOMContentLoaded', function() {
            const newPatientRadio = document.getElementById('newPatient');
            const returnPatientRadio = document.getElementById('returnPatient');
            const newPatientForm = document.getElementById('newPatientForm');
            const returningPatientForm = document.getElementById('returningPatientForm');

            // Function to toggle forms
            function toggleForms() {
                if (newPatientRadio.checked) {
                    newPatientForm.style.display = 'block';
                    returningPatientForm.style.display = 'none';
                } else if (returnPatientRadio.checked) {
                    newPatientForm.style.display = 'none';
                    returningPatientForm.style.display = 'block';
                }
            }

            // Attach event listeners
            newPatientRadio.addEventListener('change', toggleForms);
            returnPatientRadio.addEventListener('change', toggleForms);

            // Initialize form state
            toggleForms();

            // Initially hide all forms except form_account
            document.getElementById('form_address').style.display = 'none';
            document.getElementById('form_insurance').style.display = 'none';
            document.getElementById('form_appointment').style.display = 'none';

            // Handle btn_account click
            document.getElementById('btn_account').addEventListener('click', function() {
                // Show form_address, hide others and btn_account
                document.getElementById('form_address').style.display = 'block';
                document.getElementById('form_account').style.display = 'none';
                document.getElementById('form_insurance').style.display = 'none';
                document.getElementById('form_appointment').style.display = 'none';
                this.style.display = 'none'; // Hide btn_account
            });

            // Handle btn_address click
            document.getElementById('btn_address').addEventListener('click', function() {
                // Show form_insurance, hide others and btn_address
                document.getElementById('form_insurance').style.display = 'block';
                document.getElementById('form_account').style.display = 'none';
                document.getElementById('form_address').style.display = 'none';
                document.getElementById('form_appointment').style.display = 'none';
                this.style.display = 'none'; // Hide btn_address
            });

            // Handle btn_insurance click
            document.getElementById('btn_insurance').addEventListener('click', function() {
                // Show form_appointment, hide others and btn_insurance
                document.getElementById('form_appointment').style.display = 'block';
                document.getElementById('form_account').style.display = 'none';
                document.getElementById('form_address').style.display = 'none';
                document.getElementById('form_insurance').style.display = 'none';
                this.style.display = 'none'; // Hide btn_insurance
            });
        });
    </script>

    {{-- After Register Form Address Infomation --}}
    <script></script>


    <script>
        let calendar = document.querySelector('.calendar')

        const month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
            'October', 'November', 'December'
        ]

        isLeapYear = (year) => {
            return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 === 0)
        }

        getFebDays = (year) => {
            return isLeapYear(year) ? 29 : 28
        }

        generateCalendar = (month, year) => {
            let calendar_days = calendar.querySelector('.calendar-days');
            let calendar_header_year = calendar.querySelector('#year');

            let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

            calendar_days.innerHTML = ''; // Clear previous calendar

            let currDate = new Date(); // Get current date
            if (!month) month = currDate.getMonth();
            if (!year) year = currDate.getFullYear();

            let curr_month = `${month_names[month]}`;
            month_picker.innerHTML = curr_month;
            calendar_header_year.innerHTML = year;

            let first_day = new Date(year, month, 1);

            for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
                let day = document.createElement('div');
                day.classList.add('calendar-day');

                if (i >= first_day.getDay()) {
                    day.innerHTML = i - first_day.getDay() + 1;

                    // Enable the day and attach the click event to show time slots
                    day.onclick = function() {
                        showTimeSlots(); // Call function to show time slots
                    };

                    // Check if this is today's date and highlight it
                    if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() &&
                        month === currDate.getMonth()) {
                        day.classList.add('curr-date');
                    }
                } else {
                    day.classList.add('disabled'); // Disable days outside the current month
                }

                calendar_days.appendChild(day);
            }
        };

        let month_list = calendar.querySelector('.month-list')

        month_names.forEach((e, index) => {
            let month = document.createElement('div')
            month.innerHTML = `<div data-month="${index}">${e}</div>`
            month.querySelector('div').onclick = () => {
                month_list.classList.remove('show')
                curr_month.value = index
                generateCalendar(index, curr_year.value)
            }
            month_list.appendChild(month)
        })

        let month_picker = calendar.querySelector('#month-picker')

        month_picker.onclick = () => {
            month_list.classList.add('show')
        }

        let currDate = new Date()

        let curr_month = {
            value: currDate.getMonth()
        }
        let curr_year = {
            value: currDate.getFullYear()
        }

        generateCalendar(curr_month.value, curr_year.value)

        document.querySelector('#prev-year').onclick = () => {
            --curr_year.value
            generateCalendar(curr_month.value, curr_year.value)
        }

        document.querySelector('#next-year').onclick = () => {
            ++curr_year.value
            generateCalendar(curr_month.value, curr_year.value)
        }
    </script>
    <script>
        function showTimeSlots() {
            // Show the time slots when a date is clicked
            document.getElementById('time-slots').style.display = 'block';
        }
    </script>

@endsection