@extends('front.frontLayout')
@section('title', 'Booking')
@section('pagelevelcss')
    <link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/appointment.css') }}">
    <link rel="stylesheet" href="{{ asset('appointment/dist/style.css') }}">

    <!-- Calender CSS -->
    <link rel="stylesheet" href="{{ asset('appointment/calendar/css/style.css') }}">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Calender CSS -->
    <style>
        .calendar_content div.disabled-date {
            color: #d5d5d5 !important;
            /* cursor: none; */
            pointer-events: none;
        }

        .timeslot {
            padding: 7px 20px 7px 20px;
            cursor: pointer;
            font-size: .85rem;
            text-align: center;
            border-radius: 8px;
            background: #fff;
            color: #444;
            border: 1px solid #aab5c1;
        }

        .button {
            border-radius: 5px;
            border: 1px solid #eee;
            float: left;
            margin: 0 5px 0 0;
            width: 100px;
            height: 40px;
            position: relative;
        }

        .button label,
        .button input {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .button input[type="radio"] {
            opacity: 0.011;
            z-index: 100;
        }

        .button input[type="radio"]:checked+label {
            background: #1089ff;
            border-radius: 4px;
        }

        .button label {
            cursor: pointer;
            z-index: 90;
            line-height: 1.8em;
        }
    </style>
@stop
@section('content')
    <section class=" section-padding" id="table-tab">
        <div class="container">
            <h1 class="page-title"> Book Appointment</h1>

            <!-- Tab panes -->
            <div class="tab-content">
                <div id="result-tab" class=" tab-pane active">
                    <div class="content">
                        <!--content inner-->
                        <div class="content__inner">
                            <div class="row">
                                <div class="col-md-5" id="left-app">
                                    <div class="container">
                                        <!--content title-->
                                        <!--animations form-->
                                        <div class="lab-details-sidebar-header">
                                            <div class="text-left heading-1">Altus Lab</div>
                                            <div class="sub-text-f0_85 px-1 text-left">3681 Fishinger Boulevard</div>
                                            <div class="promotion-item promotion-sidebar-item">
                                                <div class="promotion-contact">
                                                    <div class="heading-5 px-1"><strong>Contact:</strong> <a
                                                            href="tel:16148455120">(614) 845-5120</a></div>

                                                </div>
                                                <div class="promotion-email">
                                                    <div class="heading-5 px-1"><strong>Email:</strong> <a
                                                            href="mailto:info@altuslab.com?subject=Query regarding Promotion Booking"
                                                            target="_blank" rel="noopener noreferrer">info@altuslab.com</a>
                                                    </div>

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

                                        <div class="package-container promotion-sidebar-header ">
                                            <div class="py-1 heading-1">{{$getPackage->name}}</div>
                                            <div class="promotion-pricing-book-now">
                                                <div class="price-section">
                                                    <div class="py-1 heading-3 pr-2">${{$getPackage->price}}</div>
                                                    <div class="sub-text"></div>
                                                </div>
                                            </div>
                                            <div></div>
                                        </div>







                                        <!--content title-->
                                        <div class="row">
                                            <div class="col-12 col-lg-12 ml-auto mr-auto mb-4">
                                                <div class="multisteps-form__progress">
                                                    <button class="multisteps-form__progress-btn js-active" type="button"
                                                        title="User Info">Region</button>
                                                    <button class="multisteps-form__progress-btn" type="button"
                                                        title="Address">Date & Time</button>
                                                    <button class="multisteps-form__progress-btn" type="button"
                                                        title="Order Info">Your Details</button>
                                                    <button class="multisteps-form__progress-btn" type="button"
                                                        title="Comments">Complete </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-7" id="right-app">
                                    <div class="container overflow-hidden">
                                        <!--multisteps-form-->
                                        <div class="multisteps-form">
                                            <!--progress bar-->

                                            <!--form panels-->
                                            <div class="row">
                                                <div class="col-12 col-lg-10 m-auto">
                                                    <form class="multisteps-form__form" id="formSubmit" action="{{ route('book.confirm')}}" method="post">
                                                        @csrf
                                                        <!--single form panel-->
                                                        <div class="multisteps-form__panel shadow p-4 rounded bg-white js-active"
                                                            data-animation="scaleIn">
                                                            <div class="multisteps-form__content">
                                                                <div class="form-row mt-4"
                                                                    style="    margin-top: 0rem!important;">
                                                                    <div class="col-12 col-sm-6" id="image-first-box">

                                                                        <div class="section-container">
                                                                            <img class="promotion-img"
                                                                                src="{{ asset('uploads/'.$getPackage->package_image)}}"
                                                                                alt="">
                                                                            <div class="package-container">
                                                                                <div class="hide-on-sidebar">
                                                                                    <div class="heading-3">
                                                                                      {{$getPackage->name}}</div>
                                                                                    <div
                                                                                        class="promotion-pricing-book-now pb-1">
                                                                                        <div class="price-section">
                                                                                            <div class="heading-3 pr-2">${{$getPackage->price}}
                                                                                            </div>
                                                                                            <div class="sub-text">
                                                                                               </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="promotion-description-section">
                                                                                    <div class="promotion-description">
                                                                                        <h5>
                                                                                        {{$getPackage->name}}E</h5>
                                                                                       


                                                                                    </div>

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







                                                                    </div>

                                                                    <div class="button-row d-flex mt-4"
                                                                        style="    width: 100%;
                                          
                                          display: block;">
                                                                        <button class="btn btn-primary ml-auto js-btn-next"
                                                                            type="button" title="Next"><i
                                                                                class="fa fa-calendar"
                                                                                aria-hidden="true"></i> Book Now</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!--single form panel-->
                                                        <div class="multisteps-form__panel shadow p-4 rounded bg-white"
                                                            data-animation="scaleIn">
                                                            <div class="multisteps-form__content">
                                                                <div class="form-row mt-4">
                                                                    <div class="col">
                                                                        <div id="date_slot_section-title"
                                                                            class="title-container">
                                                                            <div class="title-icon"><svg width="63px"
                                                                                    height="50px" viewBox="0 0 63 50"
                                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                                    xmlns:xlink="http://www.w3.org/1999/xlink">
                                                                                    <title>appointments-home-collections
                                                                                    </title>
                                                                                    <g id="CrelioHealth" stroke="none"
                                                                                        stroke-width="1" fill="none"
                                                                                        fill-rule="evenodd">
                                                                                        <g id="Artboard-15-Copy-2"
                                                                                            transform="translate(-1047.000000, -1498.000000)">
                                                                                            <g id="appointments-home-collections"
                                                                                                transform="translate(1047.000000, 1498.000000)">
                                                                                                <path
                                                                                                    d="M21.8922288,45.6942371 C9.91011718,42.0365637 3.15237002,38.5608361 1.61898735,35.2670541 C-0.681086671,30.3263812 -0.681086671,22.2635283 2.59674223,17.3664485 C5.87457113,12.4693687 6.84255467,7.59458575 27.1022813,8.9195708 C47.362008,10.2445559 43.9038795,-1.48825755 52.5829245,0.158887041 C61.2619696,1.80603163 63.8370253,15.6449936 60.4407212,26.962239 C57.044417,38.2794845 51.8426407,43.688224 46.0937915,45.6942371 C42.2612253,47.0315791 34.1940377,47.0315791 21.8922288,45.6942371 Z"
                                                                                                    id="Path-2"
                                                                                                    fill="#818798"
                                                                                                    opacity="0.200000003">
                                                                                                </path>
                                                                                                <g id="Group"
                                                                                                    transform="translate(8.333333, 0.078196)">
                                                                                                    <path
                                                                                                        d="M29.1666667,36.3095238 C29.1666667,38.247619 29.6559524,40.0714286 30.5154762,41.6666667 L1.20770137,41.6666667 L1.20770137,4.27559524 L46.8210175,4.27559524 L46.8210175,26.3488095 C45.2257794,25.4892857 42.4142857,25 40.4761905,25 C34.2297619,25 29.1666667,30.0630952 29.1666667,36.3095238 Z"
                                                                                                        id="Shape"
                                                                                                        fill="#FFFFFF">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M40.7546603,47.1542221 C46.8297925,47.1542221 51.7546603,42.2293543 51.7546603,36.1542221 C51.7546603,30.0790898 46.8297925,25.1542221 40.7546603,25.1542221 C34.679528,25.1542221 29.7546603,30.0790898 29.7546603,36.1542221 C29.7546603,42.2293543 34.679528,47.1542221 40.7546603,47.1542221 Z"
                                                                                                        id="Oval"
                                                                                                        fill="#E4F8E6"
                                                                                                        class="fill-primary-5-tint">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M41.0714286,24.25 C34.4111375,24.25 29.0119048,29.6492327 29.0119048,36.3095238 C29.0119048,42.9698149 34.4111375,48.3690476 41.0714286,48.3690476 C47.7317197,48.3690476 53.1309524,42.9698149 53.1309524,36.3095238 C53.1309524,29.6492327 47.7317197,24.25 41.0714286,24.25 Z M41.0714286,25.75 C46.9032925,25.75 51.6309524,30.4776598 51.6309524,36.3095238 C51.6309524,42.1413878 46.9032925,46.8690476 41.0714286,46.8690476 C35.2395646,46.8690476 30.5119048,42.1413878 30.5119048,36.3095238 C30.5119048,30.4776598 35.2395646,25.75 41.0714286,25.75 Z"
                                                                                                        id="Oval"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary"
                                                                                                        fill-rule="nonzero">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M41.0714286,28.7928571 C41.4511243,28.7928571 41.7649195,29.075011 41.814582,29.4410866 L41.8214286,29.5428571 L41.821,36.153 L46.8210175,36.1535714 C47.2007133,36.1535714 47.5145085,36.4357253 47.5641709,36.8018009 L47.5710175,36.9035714 C47.5710175,37.2832672 47.2888636,37.5970624 46.922788,37.6467248 L46.8210175,37.6535714 L41.0714286,37.6535714 C40.6917328,37.6535714 40.3779376,37.3714175 40.3282752,37.005342 L40.3214286,36.9035714 L40.3214286,29.5428571 C40.3214286,29.1286436 40.657215,28.7928571 41.0714286,28.7928571 Z"
                                                                                                        id="Path-3"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary"
                                                                                                        fill-rule="nonzero">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M9.08329646,3.52559524 C9.49751002,3.52559524 9.83329646,3.86138168 9.83329646,4.27559524 C9.83329646,4.655291 9.55114258,4.9690862 9.18506702,5.01874862 L9.08329646,5.02559524 L2.20770137,5.02559524 C2.08935463,5.02559524 1.99021454,5.10782865 1.96430404,5.21827253 L1.95770137,5.27559524 L1.95770137,40.5 C1.95770137,40.6183467 2.03993478,40.7174868 2.15037866,40.7433973 L2.20770137,40.75 L28.0921885,40.75 C28.5064021,40.75 28.8421885,41.0857864 28.8421885,41.5 C28.8421885,41.8796958 28.5600346,42.193491 28.1939591,42.2431534 L28.0921885,42.25 L2.20770137,42.25 C1.28952797,42.25 0.536509025,41.5428897 0.463502565,40.6435272 L0.457701365,40.5 L0.457701365,5.27559524 C0.457701365,4.35742184 1.16481164,3.6044029 2.06417416,3.53139644 L2.20770137,3.52559524 L9.08329646,3.52559524 Z"
                                                                                                        id="Path-51"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary"
                                                                                                        fill-rule="nonzero">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M45.8210175,3.56428571 C46.7391909,3.56428571 47.4922098,4.27139599 47.5652163,5.17075851 L47.5710175,5.31428571 L47.5710175,23.6437225 C47.5710175,24.0579361 47.2352311,24.3937225 46.8210175,24.3937225 C46.4413217,24.3937225 46.1275265,24.1115687 46.0778641,23.7454931 L46.0710175,23.6437225 L46.0710175,5.31428571 C46.0710175,5.19593898 45.9887841,5.09679889 45.8783402,5.07088839 L45.8210175,5.06428571 L38.6666667,5.06428571 C38.2524531,5.06428571 37.9166667,4.72849928 37.9166667,4.31428571 C37.9166667,3.93458995 38.1988205,3.62079475 38.5648961,3.57113233 L38.6666667,3.56428571 L45.8210175,3.56428571 Z"
                                                                                                        id="Path-52"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary"
                                                                                                        fill-rule="nonzero">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M31.8677851,3.52559524 C32.2819987,3.52559524 32.6177851,3.86138168 32.6177851,4.27559524 C32.6177851,4.655291 32.3356313,4.9690862 31.9695557,5.01874862 L31.8677851,5.02559524 L16.3377711,5.02559524 C15.9235575,5.02559524 15.5877711,4.6898088 15.5877711,4.27559524 C15.5877711,3.89589947 15.869925,3.58210428 16.2360005,3.53244185 L16.3377711,3.52559524 L31.8677851,3.52559524 Z"
                                                                                                        id="Path-53"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary"
                                                                                                        fill-rule="nonzero">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M12.6666667,0.250009537 C13.0463624,0.250009537 13.3601576,0.532163418 13.4098201,0.898238979 L13.4166667,1.00000954 L13.4166667,7.21335793 C13.4166667,7.62757149 13.0808802,7.96335793 12.6666667,7.96335793 C12.2869709,7.96335793 11.9731757,7.68120404 11.9235133,7.31512848 L11.9166667,7.21335793 L11.9166667,1.00000954 C11.9166667,0.585795974 12.2524531,0.250009537 12.6666667,0.250009537 Z"
                                                                                                        id="Path-54"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary"
                                                                                                        fill-rule="nonzero">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M35.5,0.250009537 C35.8796958,0.250009537 36.193491,0.532163418 36.2431534,0.898238979 L36.25,1.00000954 L36.25,7.21335793 C36.25,7.62757149 35.9142136,7.96335793 35.5,7.96335793 C35.1203042,7.96335793 34.806509,7.68120404 34.7568466,7.31512848 L34.75,7.21335793 L34.75,1.00000954 C34.75,0.585795974 35.0857864,0.250009537 35.5,0.250009537 Z"
                                                                                                        id="Path-55"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary"
                                                                                                        fill-rule="nonzero">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M7.13452381,27.7952381 L21.9452381,27.7952381 C22.4285714,27.7952381 22.822619,28.1324316 22.822619,28.5452381 C22.822619,28.9580446 22.4285714,29.2952381 21.9452381,29.2952381 L7.13452381,29.2952381 C6.65238095,29.2952381 6.25714286,28.9580446 6.25714286,28.5452381 C6.25714286,28.1324316 6.65238095,27.7952381 7.13452381,27.7952381 L7.13452381,27.7952381 Z"
                                                                                                        id="Path"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M6.25714286,21.7738095 C6.25714286,21.361003 6.65238095,21.0238095 7.13452381,21.0238095 L33.3440476,21.0238095 C33.827381,21.0238095 34.2214286,21.361003 34.2214286,21.7738095 C34.2214286,22.1866161 33.8380952,22.5238095 33.3440476,22.5238095 L7.13452381,22.5238095 C6.65238095,22.5238095 6.25714286,22.1866161 6.25714286,21.7738095 L6.25714286,21.7738095 Z"
                                                                                                        id="Path"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M6.25714286,14.8928571 C6.25714286,14.4810724 6.65238095,14.1428571 7.13452381,14.1428571 L41.3309524,14.1428571 C41.8142857,14.1428571 42.2095238,14.4810724 42.2095238,14.8928571 C42.2095238,15.3056637 41.8142857,15.6428571 41.3202381,15.6428571 L7.13452381,15.6428571 C6.65238095,15.6428571 6.25714286,15.3056637 6.25714286,14.8928571 L6.25714286,14.8928571 Z"
                                                                                                        id="Path"
                                                                                                        fill="#4BD15A"
                                                                                                        class="fill-primary">
                                                                                                    </path>
                                                                                                </g>
                                                                                            </g>
                                                                                        </g>
                                                                                    </g>
                                                                                </svg></div>
                                                                            <div class="heading-3">Choose Date &amp; Time
                                                                            </div>
                                                                            <div class="sub-text-f0_85">Please select a
                                                                                date &amp; time when you want the service to
                                                                                be performed</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-row mt-4">
                                                                    <div class="col">
                                                                        <!-- Calender Code Start -->

                                                                        <section class="ftco-section">
                                                                            <div class="container">

                                                                                <div class="row">
                                                                                    <div class="col-md-12">
                                                                                        <div class="calendar calendar-first"
                                                                                            id="calendar_first">
                                                                                            <div class="calendar_header">
                                                                                                <button type="button"
                                                                                                    class="switch-month switch-left">
                                                                                                    <i
                                                                                                        class="fa fa-chevron-left"></i></button>
                                                                                                <h2></h2>
                                                                                                <button type="button"
                                                                                                    class="switch-month switch-right">
                                                                                                    <i
                                                                                                        class="fa fa-chevron-right"></i></button>
                                                                                            </div>
                                                                                            <div class="calendar_weekdays">
                                                                                            </div>
                                                                                            <div class="calendar_content">
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </section>
                                                                        <!-- Calender Code Start -->





                                                                    </div>
                                                                </div>
                                                                <div class="form-row mt-4">
                                                                    <div class="timeslot-wrapper">
                                                                        <input type="hidden" name="date"
                                                                            id="bookDate">
                                                                        <div class="timeslot-header">
                                                                         </div>
                                                                        <div class="timeslot-slots-section">
                                                                            <div class="timeslot-slots-section-title">
                                                                                Morning</div>
                                                                            <div class="timeslot-slots">
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="09:00 am">
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">09:00 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time"  value="09:15 am"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">09:15 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="09:30 am"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">09:30 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="09:45 am"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">09:45 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time"  value="10:00 am"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">10:00 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="10:15 am" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">10:15 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="10:30 am"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">10:30 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="10:45 am" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">10:45 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a50"
                                                                                        name="time" value="11:00 am"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a50">11:00 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a50"
                                                                                        name="time"  value="11:15 am"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a50">11:15 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a75"
                                                                                        name="time" value="11:30 am"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a75">11:30 am</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a75"
                                                                                        name="time" value="11:45 am" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a75">11:45 am</label>
                                                                                </div>
                                                                                {{-- <div data-time="10:00:00-11:00:00" class="timeslot">10:00 am</div>
                                                                                <div data-time="11:00:00-12:00:00" class="timeslot">11:00 am</div> --}}
                                                                            </div>
                                                                        </div>
                                                                        <div class="timeslot-slots-section">
                                                                            <div class="timeslot-slots-section-title">
                                                                                Afternoon</div>
                                                                            <div class="timeslot-slots">
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="12:00 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">12:00 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="12:15 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">12:15 pm</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="12:30 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">12:30 pm</label>
                                                                                </div>
                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="12:45 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">12:45 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="1:00 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">1:00 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="1:15 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">1:15 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="1:30 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">1:30 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time"  value="1:45 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">1:45 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time"  value="2:00 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">2:00 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="2:15 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">2:15 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="2:30 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">2:30 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="2:45 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">2:45 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time"  value="3:00 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">3:00 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="3:15 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">3:15 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time"  value="3:30 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">3:30 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time"  value="3:45 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">3:45 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="4:00 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">4:00 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time"  value="4:15 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">4:15 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time"  value="4:30 pm"/>
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">4:30 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="4:45 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">4:45 pm</label>
                                                                                </div>

                                                                                <div class="button">
                                                                                    <input class="timeslot" type="radio"
                                                                                        id="a25"
                                                                                        name="time" value="5:00 pm" />
                                                                                    <label class="btn btn-default"
                                                                                        for="a25">5:00 pm</label>
                                                                                </div>





                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="button-row d-flex mt-4">
                                                                    <button class="btn btn-primary js-btn-prev"
                                                                        type="button" title="Prev">Back</button>
                                                                    <button class="btn btn-primary ml-auto js-btn-next timeslotSection"
                                                                        type="button" title="Next" >Next</button>
                                                                </div>
                                                            </div>  
                                                        </div>
                                                        <!--single form panel-->
                                                        <div class="multisteps-form__panel shadow p-4 rounded bg-white"
                                                            data-animation="scaleIn">
                                                            <h3 class="multisteps-form__title">
                                                                <div id="patient_demographics-title"
                                                                    class="title-container">
                                                                    <div class="title-icon"><svg width="65px"
                                                                            height="49px" viewBox="0 0 65 49"
                                                                            xmlns="http://www.w3.org/2000/svg"
                                                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                                                            <title>customer-patient-info</title>
                                                                            <g id="CrelioHealth" stroke="none"
                                                                                stroke-width="1" fill="none"
                                                                                fill-rule="evenodd">
                                                                                <g id="Artboard-15-Copy-2"
                                                                                    transform="translate(-1442.000000, -1498.000000)">
                                                                                    <g id="customer-patient-info"
                                                                                        transform="translate(1442.000000, 1498.000000)">
                                                                                        <path
                                                                                            d="M21.978833,47.9694592 C9.94996188,44.297512 3.16584303,40.8082206 1.62647642,37.5015848 C-0.682573497,32.5416312 -0.682573497,24.4473136 2.60804693,19.5311232 C5.89866736,14.6149328 6.8704284,9.72112632 27.2092174,11.0512821 C47.5480064,12.3814378 44.0763828,0.602837783 52.7892973,2.25641026 C61.5022117,3.90998273 64.0873165,17.8029504 60.6777585,29.1643607 C57.2682004,40.525771 52.0461245,45.9556178 46.2748408,47.9694592 C42.4273182,49.3120202 34.328649,49.3120202 21.978833,47.9694592 Z"
                                                                                            id="Path-2" fill="#818798"
                                                                                            opacity="0.200000003"></path>
                                                                                        <path
                                                                                            d="M9.30955559,0.311288305 C9.72376915,0.311288305 10.0595556,0.647074743 10.0595556,1.06128831 C10.0595556,1.44098407 9.7774017,1.75477927 9.41132614,1.80444169 L9.30955559,1.81128831 L8.20950594,1.81128831 C6.47647448,1.81128831 5.06026001,3.16774307 4.96465073,4.8768644 L4.95950594,5.06128831 L4.95950594,9.11257036 C4.95950594,9.75977905 5.45138061,10.2921043 6.0817007,10.3561167 L6.20950594,10.3625704 L11.7479675,10.3625704 C12.162181,10.3625704 12.4979675,10.6983568 12.4979675,11.1125704 C12.4979675,11.4922661 12.2158136,11.8060613 11.849738,11.8557237 L11.7479675,11.8625704 L6.20950594,11.8625704 C4.7469741,11.8625704 3.55110166,10.7208658 3.46452474,9.28009269 L3.45950594,9.11257036 L3.45950594,5.06128831 C3.45950594,2.51080665 5.46964723,0.429818645 7.99207794,0.316176165 L8.20950594,0.311288305 L9.30955559,0.311288305 Z"
                                                                                            id="Path-62" fill="#4BD15A"
                                                                                            class="fill-primary"
                                                                                            fill-rule="nonzero"></path>
                                                                                        <path
                                                                                            d="M7.97873671,1.06128831 C10.3623913,1.06128831 12.2947252,2.99362215 12.2947252,5.37727675 L12.2947252,20.069182 L12.2947252,20.069182 L12.2947252,44.2920575 C12.2947252,45.396627 13.1901557,46.2920575 14.2947252,46.2920575 L41.1582239,46.2920575 C42.2627934,46.2920575 43.1582239,45.396627 43.1582239,44.2920575 L43.1582239,3.06128831 C43.1582239,1.95671881 42.2627934,1.06128831 41.1582239,1.06128831 L8.35032979,1.06128831 L8.35032979,1.06128831"
                                                                                            id="Path-63" fill="#FFFFFF">
                                                                                        </path>
                                                                                        <path
                                                                                            d="M11.6194028,1.86133888 L11.82911,2.09888569 C12.3497186,2.71575663 12.7167066,3.36144452 12.923565,4.03505391 C12.98381,4.23123469 13.0218421,4.43333443 13.0370913,4.63755548 L13.0447252,4.84234298 L13.0447252,44.2920575 C13.0447252,44.9392662 13.5365998,45.4715914 14.1669199,45.5356039 L14.2947252,45.5420575 L35.5,45.5420575 C35.9142136,45.5420575 36.25,45.877844 36.25,46.2920575 C36.25,46.6717533 35.9678461,46.9855485 35.6017706,47.0352109 L35.5,47.0420575 L14.2947252,47.0420575 C12.8321933,47.0420575 11.6363209,45.9003529 11.549744,44.4595799 L11.5447252,44.2920575 L11.5447252,4.84233312 C11.5447268,4.71796403 11.5261652,4.59428828 11.4896537,4.47539298 C11.3449589,4.00421166 11.0781727,3.53482131 10.6827861,3.06632646 C10.2009113,2.49535137 9.63555853,2.05346656 8.98184006,1.73590118 C8.29832768,1.40386243 8.4929495,0.40766981 9.20443738,0.317792876 L9.30955559,0.311288305 L41.1582239,0.311288305 C42.6207557,0.311288305 43.8166282,1.4529929 43.9032051,2.89376597 L43.9082239,3.06128831 L43.9082239,12.9971857 C43.9082239,13.4113993 43.5724375,13.7471857 43.1582239,13.7471857 C42.7785281,13.7471857 42.4647329,13.4650319 42.4150705,13.0989563 L42.4082239,12.9971857 L42.4082239,3.06128831 C42.4082239,2.41407961 41.9163492,1.88175441 41.2860291,1.81774191 L41.1582239,1.81128831 L11.571,1.811 L11.6194028,1.86133888 Z"
                                                                                            id="Path-50" fill="#4BD15A"
                                                                                            class="fill-primary"
                                                                                            fill-rule="nonzero"></path>
                                                                                        <circle id="Oval"
                                                                                            fill="#DCF1E2"
                                                                                            class="fill-primary-5-tint"
                                                                                            cx="46.9274547"
                                                                                            cy="31.4715447"
                                                                                            r="16.3333333"></circle>
                                                                                        <path
                                                                                            d="M46.9274547,14.3882114 C37.4925902,14.3882114 29.8441213,22.0366802 29.8441213,31.4715447 C29.8441213,40.9064092 37.4925902,48.554878 46.9274547,48.554878 C56.3623191,48.554878 64.010788,40.9064092 64.010788,31.4715447 C64.010788,22.0366802 56.3623191,14.3882114 46.9274547,14.3882114 Z M46.9274547,15.8882114 C55.533892,15.8882114 62.510788,22.8651074 62.510788,31.4715447 C62.510788,40.0779821 55.533892,47.054878 46.9274547,47.054878 C38.3210173,47.054878 31.3441213,40.0779821 31.3441213,31.4715447 C31.3441213,22.8651074 38.3210173,15.8882114 46.9274547,15.8882114 Z"
                                                                                            id="Oval" fill="#4BD15A"
                                                                                            class="fill-primary"
                                                                                            fill-rule="nonzero"></path>
                                                                                        <circle id="Oval"
                                                                                            fill="#FFFFFF" cx="46.9274547"
                                                                                            cy="25.1894934"
                                                                                            r="5.02564103"></circle>
                                                                                        <path
                                                                                            d="M43.3178156,32.4336958 L43.3178156,32.4336958 L43.3178156,32.4336958 L44.6984601,33.3695552 C46.0460038,34.2829775 47.8126936,34.2886046 49.1660285,33.3837847 L50.6244911,32.4086781 L50.6244911,32.4086781 C52.794859,32.5860178 54.4659162,34.3991854 54.4659162,36.5767864 L54.4659162,40.2035499 C54.4659162,40.7558346 54.0182009,41.2035499 53.4659162,41.2035499 L40.3889931,41.2035499 C39.8367084,41.2035499 39.3889931,40.7558346 39.3889931,40.2035499 L39.3889931,36.6619865 C39.3889931,34.4410754 41.1028831,32.5965468 43.3178156,32.4336958 Z"
                                                                                            id="Rectangle" fill="#FFFFFF">
                                                                                        </path>
                                                                                        <path
                                                                                            d="M46.9274547,19.4138524 C43.7376562,19.4138524 41.1518136,21.999695 41.1518136,25.1894934 C41.1518136,28.3792919 43.7376562,30.9651345 46.9274547,30.9651345 C50.1172531,30.9651345 52.7030957,28.3792919 52.7030957,25.1894934 C52.7030957,21.999695 50.1172531,19.4138524 46.9274547,19.4138524 Z M46.9274547,20.9138524 C49.288826,20.9138524 51.2030957,22.8281221 51.2030957,25.1894934 C51.2030957,27.5508648 49.288826,29.4651345 46.9274547,29.4651345 C44.5660833,29.4651345 42.6518136,27.5508648 42.6518136,25.1894934 C42.6518136,22.8281221 44.5660833,20.9138524 46.9274547,20.9138524 Z"
                                                                                            id="Oval" fill="#4BD15A"
                                                                                            class="fill-primary"
                                                                                            fill-rule="nonzero"></path>
                                                                                        <path
                                                                                            d="M50.6855697,31.6611693 L50.4249864,31.6398771 L48.7491756,32.7602996 C47.649591,33.4954658 46.2141555,33.4908938 45.1192762,32.7487382 L43.5144199,31.6608984 L43.0386931,31.707409 C40.5237292,32.0145035 38.6389931,34.1379796 38.6389931,36.6619865 L38.6389931,40.2035499 C38.6389931,41.1700482 39.4224948,41.9535499 40.3889931,41.9535499 L53.4659162,41.9535499 C54.4324145,41.9535499 55.2159162,41.1700482 55.2159162,40.2035499 L55.2159162,36.5767864 C55.2159162,34.0086543 53.2451715,31.8703131 50.6855697,31.6611693 Z M50.811,33.186 L50.9384617,33.2075407 C52.5334597,33.515819 53.7159162,34.9173643 53.7159162,36.5767864 L53.7159162,40.2035499 C53.7159162,40.3416211 53.6039874,40.4535499 53.4659162,40.4535499 L40.3889931,40.4535499 C40.2509219,40.4535499 40.1389931,40.3416211 40.1389931,40.2035499 L40.1389931,36.6619865 L40.1439971,36.4739843 C40.2303804,34.8546944 41.4260238,33.5072163 43.0173142,33.2259853 L43.125,33.209 L44.277644,33.9903723 C45.8778521,35.0750613 47.9757963,35.0817433 49.5828815,34.0072698 L50.811,33.186 Z"
                                                                                            id="Rectangle" fill="#4BD15A"
                                                                                            class="fill-primary"
                                                                                            fill-rule="nonzero"></path>
                                                                                        <path
                                                                                            d="M37.1325829,12.2471857 C37.5467964,12.2471857 37.8825829,12.5829722 37.8825829,12.9971857 C37.8825829,13.3768815 37.600429,13.6906767 37.2343534,13.7403391 L37.1325829,13.7471857 L18.286429,13.7471857 C17.8722155,13.7471857 17.536429,13.4113993 17.536429,12.9971857 C17.536429,12.61749 17.8185829,12.3036948 18.1846585,12.2540324 L18.286429,12.2471857 L37.1325829,12.2471857 Z"
                                                                                            id="Path-64" fill="#4BD15A"
                                                                                            class="fill-primary"
                                                                                            fill-rule="nonzero"></path>
                                                                                        <path
                                                                                            d="M29.5941213,17.2728268 C30.0083349,17.2728268 30.3441213,17.6086132 30.3441213,18.0228268 C30.3441213,18.4025225 30.0619674,18.7163177 29.6958919,18.7659802 L29.5941213,18.7728268 L18.286429,18.7728268 C17.8722155,18.7728268 17.536429,18.4370403 17.536429,18.0228268 C17.536429,17.643131 17.8185829,17.3293358 18.1846585,17.2796734 L18.286429,17.2728268 L29.5941213,17.2728268 Z"
                                                                                            id="Path-64" fill="#4BD15A"
                                                                                            class="fill-primary"
                                                                                            fill-rule="nonzero"></path>
                                                                                    </g>
                                                                                </g>
                                                                            </g>
                                                                        </svg></div>
                                                                    <div class="heading-3">About You</div>
                                                                    <div class="sub-text-f0_85">Give your personal details
                                                                        for performing test</div>
                                                                </div>
                                                            </h3>
                                                            <div class="multisteps-form__content">
                                                                <div class="row">



                                                                    <div class="form-row mt-4">
                                                                        <div class="col-12 col-sm-12">
                                                                            <label class="frm-label">Patient Name *
                                                                            </label>
                                                                            <input
                                                                                class="multisteps-form__input form-control"
                                                                                type="text"
                                                                                placeholder="Enter Patient Name" id="patientName"  name="patientname" />
                                                                                <small id="patientNameError" class="text-danger"></small>
                                                                        </div>
                                                                        <div class="col-12 col-sm-12">
                                                                            <label class="frm-label">Patient Email *
                                                                            </label>
                                                                            <input
                                                                                class="multisteps-form__input form-control"
                                                                                type="email"
                                                                                placeholder="Enter Patient Email*" id="patientEmail" name="email"/>
                                                                                <small id="patientEmailError" class="text-danger"></small>
                                                                        </div>
                                                                         <div class="col-12 col-sm-12">
                                                                            <label class="frm-label">Patient Date of Birth *
                                                                            </label>
                                                                            <input
                                                                                class="multisteps-form__input form-control"
                                                                                type="date"
                                                                                placeholder="Enter Patient Email*" id="patientEmail" name="dob"/>
                                                                                <small id="patientEmailError" class="text-danger"></small>
                                                                        </div>
                                                                        <div class="col-12 col-sm-12 mt-4 mt-sm-0">
                                                                            <label class="frm-label">Patient Contact *
                                                                            </label>
                                                                            <input
                                                                                class="multisteps-form__input form-control"
                                                                                type="text"
                                                                                placeholder="Enter Patient Contact" id="patientContact" name="contact"/>
                                                                                <small id="patientContactError" class="text-danger"></small>
                                                                            <div class="help-text">All numbers from United
                                                                                States are allowed!</div>
                                                 <input class="multisteps-form__input form-control" type="hidden"  name="test_id" value="{{$getPackage->id}}"/>
                                                <input class="multisteps-form__input form-control" type="hidden" placeholder="Enter Package Name" name="testname" value="{{$getPackage->name}}"/>
                                                <input class="multisteps-form__input form-control" type="hidden" placeholder="Enter price " name="price" value="{{$getPackage->price}}"/>



                                                                        </div>


                                                                    </div>


                                                                </div>
                                                                <div class="row">
                                                                    <div class="button-row d-flex mt-4 col-12">
                                                                        <button class="btn btn-primary js-btn-prev"
                                                                            type="button" title="Prev">Prev</button>
                                                                        <button class="btn btn-primary ml-auto js-btn-next yourDetailBtn"
                                                                            type="button" title="Next">Next</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>




                                                        <!--single form panel-->
                                                        <div class="multisteps-form__panel shadow p-4 rounded bg-white"
                                                            data-animation="scaleIn">

                                                            <div class="multisteps-form__content">
                                                                <div class="row">

                                                                    <div class="form-row mt-4" id="final-term">
                                                                        <div class="col-12 col-sm-12">
                                                                            <div class="promotion-container">
                                                                                <div class="promotion-section-wrapper">
                                                                                    <p class="promotion-section-header">
                                                                                        Terms, Conditions &amp; Patient
                                                                                        Consent</p>
                                                                                    <div class="consent-wrapper">
                                                                                        <p class="m-0 consent-text">I agree
                                                                                            that the information provided
                                                                                            above is correct and accurate
                                                                                            and I voluntarily consent and
                                                                                            authorize Altus Direct Health
                                                                                            dba Altus Lab to conduct
                                                                                            collection, testing, and
                                                                                            analysis of my specimen. I
                                                                                            understand, the Services do not
                                                                                            constitute treatment or
                                                                                            diagnosis of any condition,
                                                                                            disease or illness.
                                                                                            Additionally, I acknowledge that
                                                                                            my information and results will
                                                                                            be shared with my ordering
                                                                                            provider if one exists, and when
                                                                                            required by law, with certain
                                                                                            federal, state, or local
                                                                                            agencies for public health
                                                                                            reporting purposes</p>
                                                                                    </div>
                                                                                    <div
                                                                                        class="promotion-component-wrapper d-flex">
                                                                                        <input id="consent"
                                                                                            dir="ltr" type="checkbox"
                                                                                            class="promotion-consent-cb form-check-input"><span
                                                                                            class="cursor-pointer" required>I agree
                                                                                            to the above terms and
                                                                                            conditions</span></div>
                                                                                            <small class="text-danger" id="consentError"></small>
                                                                                </div>
                                                                            </div>
                                                                        </div>



                                                                    </div>















                                                                </div>














                                                                <div class="button-row d-flex mt-4">
                                                                    <button class="btn btn-primary js-btn-prev"
                                                                        type="button" title="Prev">Prev</button>

                                                                    <button class="btn btn-success ml-auto" type="submit"
                                                                        title="Confirm Booking" id="submitForm"><i
                                                                            class="fa fa-calendar-check"
                                                                            aria-hidden="true"></i>&nbsp;Confirm
                                                                        Booking</button>
                                                                </div>
                                                            </div>
                                                        </div>








                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('pageleveljs')
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script>
    <script src="{{ asset('appointment/dist/script.js') }}"></script>

    <!-- Calender jS -->
    <script src="{{ asset('appointment/calendar/js/jquery.min.js') }}"></script>
    <script src="{{ asset('appointment/calendar/js/popper.js') }}"></script>
    <script src="{{ asset('appointment/calendar/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('appointment/calendar/js/main_cal.js') }}"></script>


    <!-- Calender jS -->
    <script>
        $(document).ready(function(){
            $('#submitForm').on('click',function(e){
                // alert();
                e.preventDefault();
                if($("#consent").is(':checked')){
                    $('#consentError').text(' ');
                    $('#formSubmit').submit();
                }
                else{
                    $('#consentError').text('You must agree with our term & services.');
                }
            });
            $("#patientName").on('keyup',function(){
                $('#patientNameError').text(' ');
            });
            $("#patientEmail").on('keyup',function(){
                $('#patientEmailError').text(' ');
            });
            $("#patientContact").on('keyup',function(){
                $('#patientContactError').text(' ');
            });
        })
    </script>

@stop