@section('externalcss')
    <style>
        @keyframes shake {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            25% {
                transform: translate(-2px, -2px) rotate(-2deg);
            }

            50% {
                transform: translate(0, 0) rotate(0deg);
            }

            75% {
                transform: translate(2px, 2px) rotate(2deg);
            }

            100% {
                transform: translate(0, 0) rotate(0deg);
            }
        }

        .shake {
            animation: shake 0.2s linear;
        }
    </style>
@endsection
<div class="site-main">

    <section class="ttm-row bg-layer bg-layer-equal-height res-991-p-0 clearfix">
        <div class="container">
            <div class="row g-0">
                <div class="ttm-col-bgcolor-yes ttm-bg ttm-bgcolor-grey ">
                    {{-- Patient OTP Login Section start --}}
                    <div class="row @if (session('session_loginpg') == true ) @else d-none @endif  ">
                        <div class="col-md-12 mb-5 ">
                            <div class="row ">
                                <div class="col-md-6 p-4">
                                    <p class="text-center title text-dark fw-bold fs-6">Welcome to <span
                                            class="text-danger fw-bolder">YODR.</span> <br />
                                        Your health and well-being are our top priorities, and we are committed to providing you with the highest standard of care.
                                    </p>
                                    <img src="{{ global_asset('assetsweb/images/doc_appointment.png') }}" width="100%" />
                                </div>
                                <div class="col-md-1"></div>
                                <div class="col-md-5 p-4">
                                    @if(session('session_regd_data') == false)
                                    <div class="card p-3 " style="box-shadow: 0px 2px 5px #000; border-radius: 10px;">
                                        <center>
                                            <img src="{{ global_asset('assetsweb/images/YoDr_original.png') }}" style="width: 100px" />
                                        </center>

                                        <h3 class="title mb-0">Get Started </h3>
                                        <p class="text-dark">Please enter your mobile number to continue</p>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-12 d-inline-flex">
                                                        <input class="form-control form" type="text" placeholder="999XXXXXXX" readonly
                                                               value="+91" onkeypress="return onlyNumberKey(event)" maxlength="2"
                                                               style="width:70px; border-radius: 5px; border:#38ada7 solid 2px; background-color: #fff; font-weight: normal; margin-right: 5px;" />
                                                <input class="form-control form " type="text" placeholder="Mobile Number"
                                                    wire:model.defer="mobile_no" onkeypress="return onlyNumberKey(event)" maxlength="10"
                                                    style="border-radius: 5px; border:#38ada7 solid 2px; " />
                                                    </div>
                                                </div>
                                                @error('mobile_no')
                                                    <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                                @enderror
                                                {{-- <p class="text-dark" style="font-size: 14px;">*We will send a verification code to your
                                                    mobile number</p> --}}


                                                @if (session('session_otp_expiry_time'))
                                                    @if (!session('session_otp_verify') && !session('session_otp_expiried'))
                                                        <p class="text-success d-none" style="font-size: 14px;">*We have sent a verification
                                                            code to
                                                            your mobile number</p>
                                                    @elseif(session('session_otp_expiried'))
                                                        <span class="text-danger fw-bold" style="font-size: 14px;">Your Verification code
                                                            has been expired. Please resend.</span>
                                                    @endif
                                                    @if (session('session_wrong_otp'))
                                                        <span class="text-danger fw-bold" style="font-size: 14px;">Invalid Verificatioin
                                                            Code, Please Try Again</span>
                                                    @endif
                                                    @if ((!session('session_otp_verify') && !session('session_otp_expiried')) || session('session_otp_expiried'))
                                                        <a href="javascript:void(0)" wire:click="changecontactno"
                                                            style="font-size: 12px;">Do You
                                                            Want To Change Contact No. ? </a>
                                                    @endif

                                                @endif
                                            </div>
                                            @if (session('session_otp_expiried') == false || session('session_otp_expiried') == '')
                                                <div class="col-md-12   @if ($otpresponse) @else d-none @endif ">
                                                    <label class="text-dark">Enter Verification Code </label>
                                                    <div class="row">
                                                        <div class="col-md-2">
                                                            <input class="form-control form " max-length="1"
                                                                onkeyup="clickEvent(this,'second')" id='first' type="text"
                                                                wire:model.defer="first"
                                                                style="border-radius: 5px; border:#38ada7 solid 2px; text-align: center; " />
                                                        </div>
                                                        <div class="col-md-2">
                                                            <input class="form-control form " max-length="1"
                                                                onkeyup="clickEvent(this,'third')" id='second' type="text"
                                                                wire:model.defer="second"
                                                                style="border-radius: 5px; border:#38ada7 solid 2px; text-align: center; " />
                                                        </div>
                                                        <div class="col-md-2">
                                                            <input class="form-control form " max-length="1"
                                                                onkeyup="clickEvent(this,'fourth')" id='third' type="text"
                                                                wire:model.defer="third"
                                                                style="border-radius: 5px; border:#38ada7 solid 2px; text-align: center; " />
                                                        </div>
                                                        <div class="col-md-2">
                                                            <input class="form-control form " max-length="1"
                                                                onkeyup="clickEvent(this,'fifth')" id='fourth' type="text"
                                                                wire:model.defer="fourth"
                                                                style="border-radius: 5px; border:#38ada7 solid 2px; text-align: center; " />
                                                        </div>
                                                        <div class="col-md-2">
                                                            <input class="form-control form " max-length="1"
                                                                onkeyup="clickEvent(this,'sixth')" id='fifth' type="text"
                                                                wire:model.defer="fifth"
                                                                style="border-radius: 5px; border:#38ada7 solid 2px; text-align: center; " />
                                                        </div>
                                                        <div class="col-md-2">
                                                            <input class="form-control form " max-length="1"
                                                                onkeyup="clickEvent(this,'sixth')" id='sixth' type="text"
                                                                wire:model.defer="sixth"
                                                                style="border-radius: 5px; border:#38ada7 solid 2px; text-align: center; " />
                                                        </div>
                                                    </div>
                                                    <p class="text-danger mt-2" style="font-size: 14px;">Expires In : <span
                                                            id="time"></span></p>

                                                </div>
                                            @endif


                                            @if (session('session_otp_expiry_time'))
                                                @if (!session('session_otp_verify') && !session('session_otp_expiried'))
                                                    <div class="col-md-12 mt-2 text-center">
                                                        <button class="btn btn-success"
                                                            style="width: 100%; font-weight: bolder; background: var(--dark-green-color)"
                                                            wire:click="verifyverificationcode">VERIFY</button>

                                                    </div>
                                                @elseif(session('session_otp_expiried') == true)
                                                    <div class="col-md-12 mt-2 text-center">
                                                        <button class="btn btn-success" wire:click="resendverificationcode"
                                                            style="width: 100%; font-weight: bolder; background: var(--dark-green-color)">RESEND
                                                            VERIFICATION CODE</button>
                                                    </div>
                                                @endif
                                            @else
                                                <div class="col-md-12 mt-2 text-center">
                                                    <button class="btn btn-success" wire:click="sendverificationcode"
                                                        style="width: 100%; font-weight: bolder; background: var(--dark-green-color)">GET
                                                        VERIFICATION CODE</button>
                                                    <div class="row mt-5">
                                                        <div class="col-md-10 offset-md-1">
                                                            <p class="text-dark" style="font-size: 14px;">By proceeding you agree to our <br /><a href="#"
                                                                    class="text-success">Terms & Conditions</a> & <a href="#"
                                                                    class="text-success">Privacy Policy</a></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    @elseif(session('session_regd_data') == true)
                                    <div class="row">
                                        <div class="col-md-12 mb-1">
                                            <lable>Name <span class="text-danger">*</span></lable>
                                            <input wire:model.defer="patient_name" class="boxshadowradius textbox" autofocus
                                                name="patient_name" type="text" autocomplete="off" placeholder="Enter Patient Name"
                                                style=" border: #38ada7 solid thin;" />
                                            @error('patient_name')
                                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-1">
                                            <lable>Mobile No. <span class="text-danger">*</span></lable>
                                            <input wire:model.defer="phone_no" class="boxshadowradius textbox" autofocus name="phone_no"
                                                type="number" min='0' autocomplete="off"
                                                placeholder="Enter 10 digits Mobile No." style=" border: #38ada7 solid thin;"
                                                disabled />
                                            @error('phone_no')
                                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="col-md-6 mb-1">
                                            <lable>Email Address </lable>
                                            <input wire:model.defer="email_id" class="boxshadowradius textbox" autofocus name="email_id"
                                                type="text" autocomplete="off" placeholder="Enter Email Address"
                                                style=" border: #38ada7 solid thin;" />
                                            @error('email_id')
                                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4 mb-2">
                                            <lable>Gender <span class="text-danger">*</span></lable>
                                            <select wire:model.defer="gender" class="boxshadowradius textbox" autofocus name="gender"
                                                autocomplete="off" style=" border: #38ada7 solid thin;">
                                                <option value="">Select</option>
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                                <option value="Other">Other</option>
                                            </select>
                                            @error('gender')
                                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="col-md-4 mb-2">
                                            <lable>Age <span class="text-danger">*</span>
                                            </lable>
                                            <input wire:model.defer="age" class="boxshadowradius textbox" autofocus name="age"
                                                type="number" min='0' autocomplete="off" placeholder="Enter Age"
                                                style=" border: #38ada7 solid thin;" />
                                            @error('age')
                                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        {{-- <div class="col-md-4 mb-2">
                                            <lable>City <span class="text-danger">*</span></lable>
                                            <select wire:model.debounce.0ms="city_id" class="boxshadowradius textbox" autofocus
                                                name="city_id" autocomplete="off" style=" border: #38ada7 solid thin;">
                                                <option value="">Select</option>
                                                @foreach ($cities as $city)
                                                    <option value="{{ $city['id'] }}">
                                                        {{ $city['city_name'] }}</option>
                                                @endforeach
                                            </select>
                                            @error('city_id')
                                                <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                            @enderror
                                        </div> --}}
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 d-flex" style="justify-content: center;">
                                            <button type="button" class="btn text-white" style=" background-color: var(--dark-green-color);"
                                                wire:click="register_pat">Submit</button>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Patient OTP Login Section end --}}
                    @if ($patient != null)
                    <div class="row">
                        <div class="col-md-2 bg-white">
                            {{-- <div class="row">
                                <div class="card bg-white py-3 text-center border-0"
                                    @if ($clnicreg == false) id="vibratingCard" @endif
                                    style="min-height: 110px; border-radius: 10px;">
                                    <div class="d-block"> --}}
                            {{-- @if ($clnicreg)
                                            <p class="text-success" style="font-size: 16px;">
                                                <b>
                                                    <img src="{{ global_asset('assetsweb/images/icons/party-popper.png') }}"
                                                        style="width: 30px;" />
                                                    Congratulation!
                                                </b>
                                                <br />Your Registration is Complete!
                                            </p>
                                            {{-- <h4>Registration Fee : INR 999.00</h4>
                                            <button class="btn btn-success"
                                                style="background: var(--dark-green-color); font-weight: bold;"
                                                wire:click="paynow">
                                                Pay Now
                                                <div wire:loading wire:target="paynow">
                                                    &nbsp; Processing ...
                                                </div>
                                            </button>
                                        @endif --}}
                            {{-- <div class="@if (!$verified) @else d-none @endif"
                                            id="vibratingCard">
                                            <br>
                                            <p class="text-danger" style="font-size: 16px;">
                                                <b>
                                                    Wait..!!
                                                </b>
                                                <br />You cannot acess below services untill the verification is
                                                complete
                                                successfully!
                                            </p>
                                        </div> --}}
                            {{-- </div>
                                </div>
                            </div> --}}
                            <div class="row mt-3">
                                <div class="col-sm-12 mb-4 d-flex justify-content-center">
                                    {{-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                        height="100px" width="100px" version="1.1" id="Layer_1"
                                        viewBox="0 0 511.999 511.999" xml:space="preserve" fill="#000000">
                                        <g id="SVGRepo_bgCarrier" stroke-width="0" />
                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
                                        <g id="SVGRepo_iconCarrier">
                                            <circle style="fill:#DAF3F7;" cx="256" cy="255.998" r="255.998" />
                                            <path style="fill:#B3B3B3;"
                                                d="M220.318,249.429c23.785,0,47.57,0,71.353,0l0.39,4.877l-34.87,52.863l-37.458-53.385l0.584-4.352 L220.318,249.429L220.318,249.429z" />
                                            <path style="fill:#F0BA7D;"
                                                d="M220.778,236.169l-0.618,29.819l-50.59,27.664v101.405h85.164h85.153V293.651l-47.016-29.223 l-2.582-29.814l-69.51,1.554H220.778z" />
                                            <path style="fill:#FED298;"
                                                d="M197.401,149.212c0,0-2.901-6.374-10.689-3.215c-7.79,3.155,0.35,34.651,3.327,39.045 c2.974,4.392,7.763,1.603,9.507,1.429c2.48,18.776,2.701,31.717,10.217,39.634c7.119,7.496,23.417,22.773,32.003,28.101 c5.815,1.228,10.153,1.949,14.234,2.165c4.079-0.216,8.421-0.939,14.234-2.165c8.585-5.325,24.886-20.605,32.003-28.101 c7.514-7.917,7.737-20.855,10.217-39.634c1.744,0.175,6.533,2.963,9.507-1.429c2.976-4.394,11.117-35.891,3.327-39.045 c-7.79-3.16-10.689,3.215-10.689,3.215s7.699-24.733-5.986-49.078c-9.378-16.686-30.767-25.34-52.612-25.975 c-21.845,0.635-43.234,9.289-52.612,25.975c-13.685,24.346-5.986,49.078-5.986,49.078L197.401,149.212L197.401,149.212z" />
                                            <path style="fill:#15BDB2;"
                                                d="M195.351,274.76l12.115-4.772l9.763-8.773l34.472,26.145h8.585l34.483-26.176l21.874,13.579 l38.011,64.61l-30.103,163.323c-21.821,6.052-44.809,9.3-68.558,9.3c-19.369,0-38.23-2.165-56.368-6.24L145.67,344.535 l49.678-69.774L195.351,274.76z" />
                                            <g>
                                                <path style="fill:#21D0C3;"
                                                    d="M305.588,266.591l-13.917-17.162l-31.381,37.932l26.936,29.93L305.588,266.591z" />
                                                <path style="fill:#21D0C3;"
                                                    d="M206.384,266.289l13.935-16.86l31.383,37.932l-28.006,29.622L206.384,266.289z" />
                                            </g>
                                            <path style="fill:#FFFFFF;"
                                                d="M206.386,266.289l-92.244,29.997c-3.751,1.217-6.107,4.407-6.871,8.279L80.146,442.023 c18.267,17.275,39.08,31.878,61.813,43.21l13.485-44.009c0.157-0.505,0.637-0.82,1.162-0.757c0.523,0.062,0.921,0.481,0.95,1.01 l1.947,51.688c29.781,12.135,62.355,18.831,96.499,18.831v-17.162L206.388,266.29L206.386,266.289z" />
                                            <g>
                                                <path style="fill:#EEF3F7;"
                                                    d="M206.386,266.289l-10.565,3.246l-27.99,47.759l35.335,1.107l-21.693,12.351l74.53,164.084 l-49.614-228.545L206.386,266.289z" />
                                                <path style="fill:#EEF3F7;"
                                                    d="M305.588,266.591l92.272,29.695c3.757,1.209,6.105,4.407,6.869,8.279l27.126,137.46 c-18.269,17.275-39.083,31.879-61.817,43.212l-13.487-44.011c-0.155-0.505-0.64-0.82-1.162-0.757 c-0.523,0.062-0.917,0.483-0.948,1.01l-1.942,51.688c-29.781,12.135-62.355,18.831-96.497,18.831H256v-17.162l49.587-228.242 L305.588,266.591z" />
                                            </g>
                                            <path style="fill:#FFFFFF;"
                                                d="M305.588,266.591l5.865,1.784l32.693,49.22l-35.335,1.109l21.695,12.352l-74.506,163.78 l49.587-228.242v-0.002H305.588z" />
                                            <path style="fill:#D9DADA;"
                                                d="M266.455,493.762c-3.111,0-5.633,2.516-5.633,5.616c0,3.105,2.524,5.62,5.633,5.62 c3.109,0,5.633-2.516,5.633-5.62C272.088,496.276,269.564,493.762,266.455,493.762z" />
                                            <path style="fill:#666666;"
                                                d="M307.877,156.576l5.428-0.19l1.747-6.194l5.113-5.102c3.377-25.428,4.372-65.003-20.867-63.861 c0,0-2.276-28.856-47.801-23.2c-45.528,5.658-66.098,35.048-63.647,59.568c2.449,24.52,1.462,27.49,1.462,27.49l5.113,5.104 l0.771,7.046l4.465-0.282c0,0,1.4-9.431,2.801-13.579c1.402-4.147,0.963-12.543,0.963-12.543s53.774,3.426,68.306-15.059 c8.975-11.415,29.587-31.194,30.625-3.802c0.308,8.123-2.712,20.298,3.067,29.159c5.781,8.862,2.452,15.443,2.452,15.443h0.002 V156.576z" />
                                            <path style="fill:#0F7986;"
                                                d="M256,494.834l14.536-66.904l-9.878-131.88l5.382-2.297l-5.753-6.391h-8.585l-5.9,6.242l5.538,2.447 l-9.631,132.947l14.292,65.837L256,494.834L256,494.834z" />
                                            <path style="fill:#FFFFFF;"
                                                d="M265.954,493.762c-2.833,0-5.133,2.29-5.133,5.115c0,2.828,2.299,5.12,5.133,5.12 c2.831,0,5.133-2.291,5.133-5.12C271.087,496.053,268.785,493.762,265.954,493.762z" />
                                            <path style="fill:#FEFEFE;"
                                                d="M346.395,409.066c-9.99-1.725-16.69-11.223-14.967-21.21c1.725-9.988,11.223-16.693,21.21-14.969 c9.99,1.725,16.69,11.225,14.967,21.215c-1.725,9.987-11.223,16.69-21.212,14.965L346.395,409.066L346.395,409.066z" />
                                            <path style="fill:#0F7986;"
                                                d="M346.576,408.012c-9.408-1.625-15.718-10.565-14.093-19.976c1.625-9.409,10.568-15.72,19.978-14.097 c9.408,1.625,15.718,10.57,14.093,19.978c-1.625,9.411-10.568,15.718-19.978,14.093V408.012z" />
                                            <path style="fill:#EBECEC;"
                                                d="M347.89,400.405c-5.204-0.897-8.696-5.85-7.799-11.055c0.897-5.206,5.85-8.696,11.053-7.799 c5.206,0.899,8.698,5.845,7.799,11.053c-0.897,5.204-5.848,8.696-11.053,7.799V400.405z" />
                                            <path style="fill:#FEFEFE;"
                                                d="M349.015,382.577l4.203,0.726l2.26-13.09l-4.203-0.726L349.015,382.577z" />
                                            <path style="fill:#21D0C3;"
                                                d="M208.24,412.697l7.876-1.563c3.347-0.666,6.118-2.635,7.887-5.279 c1.764-2.644,2.531-5.957,1.865-9.305l-9.263-46.667c-3.497-17.61-17.273-26.59-33.015-28.581 c-6.032-0.763-12.356-0.485-18.483,0.728c-6.132,1.213-12.076,3.369-17.357,6.376c-13.754,7.834-23.023,21.378-19.522,39.016 l9.263,46.669c0.666,3.347,2.639,6.116,5.281,7.885l0.007-0.002c2.644,1.769,5.953,2.531,9.3,1.867l7.872-1.563l-0.644-3.246 l-7.874,1.563c-2.454,0.487-4.885-0.075-6.822-1.367l0.002-0.002c-1.938-1.298-3.386-3.329-3.874-5.781l-9.263-46.669 c-3.177-16.005,5.316-28.341,17.901-35.504c4.974-2.835,10.583-4.868,16.373-6.017c5.79-1.147,11.752-1.406,17.434-0.688 c14.409,1.821,27.009,9.981,30.178,25.955l9.265,46.669c0.485,2.452-0.077,4.881-1.371,6.822c-1.298,1.936-3.329,3.384-5.784,3.869 l-7.876,1.563l0.644,3.246v0.005H208.24z" />
                                            <path style="fill:#4D4D4D;"
                                                d="M219.104,356.799l-1.415-7.128c-3.603-18.156-17.777-27.41-33.961-29.459 c-6.149-0.776-12.589-0.498-18.831,0.741c-6.242,1.235-12.301,3.435-17.682,6.497c-14.146,8.056-23.674,22.002-20.064,40.19 l1.417,7.128l5.406-1.076l-1.415-7.128c-3.067-15.458,5.168-27.393,17.361-34.336c4.874-2.774,10.37-4.765,16.047-5.891 c5.675-1.127,11.52-1.38,17.087-0.677c13.961,1.764,26.167,9.65,29.232,25.082l1.415,7.128l5.408-1.074L219.104,356.799z" />
                                            <g>
                                                <path style="fill:#076673;"
                                                    d="M153.704,424.235l4.214-0.837c1.058,1.187,2.695,1.796,4.363,1.466 c2.507-0.498,4.136-2.932,3.638-5.441c-0.496-2.505-2.932-4.134-5.439-3.636c-1.672,0.33-2.95,1.521-3.472,3.021l-4.211,0.835 l0.91,4.59L153.704,424.235z" />
                                                <path style="fill:#076673;"
                                                    d="M211.588,412.746l-4.209,0.837c-0.523,1.499-1.801,2.688-3.47,3.021 c-2.507,0.496-4.941-1.131-5.439-3.64c-0.496-2.505,1.131-4.941,3.636-5.437c1.669-0.33,3.308,0.282,4.361,1.466l4.211-0.837 L211.588,412.746z" />
                                            </g>
                                            <path style="fill:#666666;"
                                                d="M167.458,320.532l-1.607-8.096l-3.195,0.635l-3.191,0.633l1.625,8.176 c1.217-0.355,2.449-0.657,3.693-0.904C165.67,320.799,166.56,320.654,167.458,320.532z" />
                                            <g>
                                                <path style="fill:#0F7986;"
                                                    d="M160.566,419.73c0.758-0.15,1.251-0.89,1.1-1.645c-0.15-0.759-0.884-1.253-1.645-1.103 c-0.759,0.15-1.251,0.888-1.1,1.645c0.151,0.757,0.886,1.253,1.645,1.1V419.73z" />
                                                <path style="fill:#0F7986;"
                                                    d="M202.219,411.446c0.757-0.15,1.248-0.888,1.098-1.643c-0.15-0.761-0.884-1.253-1.645-1.103 c-0.759,0.15-1.251,0.888-1.1,1.647C200.72,411.105,201.458,411.597,202.219,411.446z" />
                                            </g>
                                            <path style="fill:#FEFEFE;"
                                                d="M347.379,400.317c-4.923-0.849-8.224-5.53-7.376-10.456c0.849-4.921,5.527-8.224,10.451-7.373 c4.923,0.849,8.226,5.53,7.376,10.451c-0.851,4.923-5.532,8.226-10.453,7.378H347.379z" />
                                            <g>
                                                <path style="fill:#4D4D4D;"
                                                    d="M206.431,268.717c-0.141,0.002-49.86,0.414-41.462,43.912l-4.624,0.884 c-9.467-49.038,45.874-49.49,46.031-49.492L206.431,268.717z" />
                                                <path style="fill:#4D4D4D;"
                                                    d="M305.643,264.243c8.112,0.219,23.792,2.43,35.862,17.111c11.811,14.367,20.091,40.752,13.9,89.128 l-4.661-0.589c5.993-46.822-1.751-72.032-12.865-85.554c-10.859-13.211-25.018-15.202-32.343-15.399l0.11-4.697L305.643,264.243z" />
                                            </g>
                                        </g>
                                    </svg> --}}
                                    @if ($patient['gender'] == 'Female')
                                    <img class="rounded-circle"
                                    src="{{ global_asset('assetsweb/images/icons/female_patient_avatar.webp') }}"
                                    width="100px" height="100px" style="border-radius: 50%;">
                                    @elseif ($patient['gender'] == 'Male')
                                    <img class="rounded-circle"
                                    src="{{ global_asset('assetsweb/images/icons/male_patient_avatar.webp') }}"
                                    width="100px" height="100px" style="border-radius: 50%;">
                                    @endif

                                </div>
                                <div class="col-sm-12">
                                    <div class="card border-0" wire:click="pat_profile"
                                        style="border-radius: 10px; cursor: pointer; @if ( session('session_profile_data') == true) background-color: var(--dark-green-color); @endif.">
                                        <span class="p-2 fs-7  fw-normal">Profile</span>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="card border-0"
                                        wire:click="apptlists"
                                        style="border-radius: 10px; cursor: pointer; @if ($appt_data == true ) background-color: var(--dark-green-color); @endif ">
                                        <span class="p-2 fs-7 fw-normal">Appointment History</span>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="card border-0"
                                        wire:click="familylist"
                                        style="border-radius: 10px; cursor: pointer; @if ($family_data == true ) background-color: var(--dark-green-color); @endif ">
                                        <span class="p-2 fs-7 fw-normal">Family</span>
                                    </div>
                                </div>

                                <div class="col-sm-12 ">
                                    {{-- <div class="row"
                                    style="display:flex; justify-content:center; align-items: flex-end; min-height:200px;"> --}}
                                    {{-- <button type="button" style="padding: 5px 10px; border-radius: 5px; transition: background-color 0.3s ease-in-out;">
                                        <i class="fa fa-sign-out" aria-hidden="true" style="width: 30px; height: 30px; justify-content: center; cursor: pointer; background-color: transparent; display: flex; align-items: center; justify-content: center;" onclick="confirmLogout()" onmouseover="this.style.backgroundColor = 'var(--dark-green-color)'" onmouseout="this.style.backgroundColor = 'transparent'">
                                            <span class="text-soft" style="color: rgba(0, 0, 0, 0.6);">Logout</span>
                                        </i>
                                    </button> --}}
                                    <a href="javascript:void(0)" id="logout_btn"
                                        class="btn btn-icon btn-active-color-primary me-n4" data-bs-toggle="tooltip"
                                        title="" data-bs-original-title="End session and signout">
                                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr076.svg-->
                                        <span class="svg-icon svg-icon-2 svg-icon-gray-400" onclick="confirmLogout()">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none">
                                                <rect opacity="0.3" width="12" height="2" rx="1"
                                                    transform="matrix(-1 0 0 1 15.5 11)" fill="black"></rect>
                                                <path
                                                    d="M13.6313 11.6927L11.8756 10.2297C11.4054 9.83785 11.3732 9.12683 11.806 8.69401C12.1957 8.3043 12.8216 8.28591 13.2336 8.65206L16.1592 11.2526C16.6067 11.6504 16.6067 12.3496 16.1592 12.7474L13.2336 15.3479C12.8216 15.7141 12.1957 15.6957 11.806 15.306C11.3732 14.8732 11.4054 14.1621 11.8756 13.7703L13.6313 12.3073C13.8232 12.1474 13.8232 11.8526 13.6313 11.6927Z"
                                                    fill="black"></path>
                                                <path
                                                    d="M8 5V6C8 6.55228 8.44772 7 9 7C9.55228 7 10 6.55228 10 6C10 5.44772 10.4477 5 11 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H11C10.4477 19 10 18.5523 10 18C10 17.4477 9.55228 17 9 17C8.44772 17 8 17.4477 8 18V19C8 20.1046 8.89543 21 10 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H10C8.89543 3 8 3.89543 8 5Z"
                                                    fill="#C4C4C4"></path>
                                            </svg>
                                            Logout
                                        </span>
                                    </a>
                                    {{-- </div> --}}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-10">
                            {{-- <div class="row">
                                <div class="col-md-12">
                                    <div class="card p-1 border-0"
                                        style="@if ($clinicinfo['action_require_comment']) background:lightyellow; @elseif ($clinicinfo['reason_for_rejection']) background: red;
                                    @elseif(!$verified) background: lightyellow; @else background: var(--skin-border-color); @endif font-size: 14px; border-radius: 10px;">


                                    </div>
                                </div>
                            </div> --}}
                            <div class="row">

                                {{-- <div class="col-md-12 d-none">
                                    <div class="card text-center p-3" style="height: 250px; border-radius: 10px;">
                                        <h4 style="margin-top: 50px;">Step into a World of Exclusive Benefits<br />
                                            Complete
                                            Your Registration Payment to Access Our Services</h4>
                                    </div>
                                </div> --}}
                                <div class="col-md-12 ">
                                    <div class="card text-center p-3" style="min-height: 250px; border-radius: 10px;">

                                        <div class="row @if (session('session_profile_data') == true || $appt_data == true || $family_data == true) @else d-none @endif">

                                            <div class="col-md-12">
                                                <div class="card" style="min-height: 300px; ">
                                                    <div class="row  p-2 @if (session('session_profile_data') == true) @else d-none @endif"
                                                        style="text-align: left !important;">
                                                        <div class="col-md-12 mb-2">
                                                            <label class="fs-6 text-gray-800">Name <span
                                                                    class="text-danger">*</span></label>
                                                            <input class="form-control form-control-solid"
                                                                type="text" @if($editable == true) @else disabled @endif placeholder="Enter Name"
                                                                wire:model="pat_name" />
                                                            @error('pat_name')
                                                                <span class="text-danger "
                                                                    style="font-size: 14px;">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-6 mb-2">
                                                            <label class="fs-6 text-gray-800">Mobile <span
                                                                    class="text-danger">*</span></label>
                                                            <input class="form-control form-control-solid "
                                                                type="text" disabled placeholder="Enter Your Mobile"
                                                                wire:model="pat_mobile" maxlength="10"/>
                                                            @error('pat_mobile')
                                                                <span class="text-danger "
                                                                    style="font-size: 14px;">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-6 mb-2">
                                                            <label class="fs-6 text-gray-800">Email
                                                                <span class="text-danger">*</span></label>
                                                            <input class="form-control form-control-solid "
                                                                type="email" @if($editable == true) @else disabled @endif
                                                                placeholder="Enter EmailId"
                                                                wire:model="pat_email" />
                                                            @error('pat_email')
                                                                <span class="text-danger "
                                                                    style="font-size: 14px;">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            <label class="fs-6 text-gray-800">Gender <span
                                                                    class="text-danger">*</span></label>
                                                            <select
                                                                class="form-control form-select form-control-solid "
                                                                type="text" placeholder="Enter Gender" @if($editable == true) @else disabled @endif
                                                                wire:model="pat_gender">
                                                                    <option value="">Select</option>
                                                                    <option value="Male">Male</option>
                                                                    <option value="Female">Female</option>
                                                                    <option value="Other">Other</option>
                                                            </select>
                                                            @error('pat_gender')
                                                                <span class="text-danger "
                                                                    style="font-size: 14px;">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            <label class="fs-6 text-gray-800">Age <span
                                                                    class="text-danger">*</span></label>
                                                            <input class="form-control form-control-solid"
                                                                type="text" placeholder="Enter Age" @if($editable == true) @else disabled @endif
                                                                wire:model="pat_age" />
                                                            @error('pat_age')
                                                                <span class="text-danger "
                                                                    style="font-size: 14px;">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            <label class="fs-6 text-gray-800">Marital Status <span
                                                                    class="text-danger">*</span></label>
                                                            <select
                                                                class="form-control form-select form-control-solid "
                                                                type="text" placeholder="Enter Marital Status"
                                                                @if($editable == true) @else disabled @endif
                                                                wire:model="pat_mrtlsts">
                                                                    <option value="">Select</option>
                                                                    <option value="Single">Single</option>
                                                                    <option value="Married">Married</option>
                                                                    <option value="Widow">Widow</option>
                                                                    <option value="Divorced">Divorced</option>
                                                            </select>
                                                            @error('pat_mrtlsts')
                                                                <span class="text-danger "
                                                                    style="font-size: 14px;">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-3 mb-2">
                                                            <label class="fs-6 text-gray-800">Blood Group <span
                                                                    class="text-danger">*</span></label>
                                                            <select
                                                                class="form-control form-select form-control-solid "
                                                                type="text" placeholder="Enter Blood Group"
                                                                @if($editable == true) @else disabled @endif
                                                                wire:model="pat_bldgrp">
                                                                    <option value="">Select</option>
                                                                    <option value="O+">O+</option>
                                                                    <option value="O-">O-</option>
                                                                    <option value="A+">A+</option>
                                                                    <option value="A-">A-</option>
                                                                    <option value="B+">B+</option>
                                                                    <option value="B-">B-</option>
                                                                    <option value="AB+">AB+</option>
                                                                    <option value="AB-">AB-</option>
                                                            </select>
                                                            @error('pat_bldgrp')
                                                                <span class="text-danger "
                                                                    style="font-size: 14px;">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-12 d-flex text-center"
                                                            style="justify-content: center; padding-top: 43px;">
                                                            {{-- @if ($verified || $clinicinfo['action_require_comment']) --}}
                                                            @if ($editable == false)
                                                            <button type="button" class="btn btn-success "
                                                            style=" float: right; font-weight: bolder; background: var(--dark-green-color); height: 50px; width: 100px; font-size: 13px;"
                                                            wire:click="edit_pat_details">Edit</button>

                                                            @elseif ($editable == true)
                                                            <button type="button" class="btn btn-success "
                                                                style=" float: right; font-weight: bolder; background: var(--dark-green-color); height: 50px; width: 100px; font-size: 13px;"
                                                                wire:click="updatepatient">Save</button>
                                                             @endif
                                                            {{-- @endif --}}
                                                        </div>
                                                    </div>
                                                    <div class="row  p-2 @if ($appt_data == true) @else d-none @endif" style="text-align: left !important;">
                                                        <table class="table align-middle table-row-bordered text-start fs-8 gy-5 mb-0" id="kt_table">
                                                            <!--begin::Table head-->
                                                            <thead>
                                                            <!--begin::Table row-->
                                                            <tr class="text-start text-gray-400 fw-bolder fs-8 text-uppercase gs-0">
                                                                <th class="text-center min-w-50px text-black p-2">Status</th>
                                                                <th class="min-w-50px text-black p-2">Session Date</th>
                                                                <th class="min-w-50px text-black p-2">Session Time</th>
                                                                <th class="min-w-50px text-black p-2">Session Name</th>
                                                                <th class="min-w-125px text-black p-2">Mode Of Payment</th>
                                                            </tr>
                                                            <!--end::Table row-->
                                                            </thead>
                                                            <!--end::Table head-->
                                                            <!--begin::Table body-->
                                                            <tbody class="text-gray-600">
                                                            @if(sizeof($appts)>0)
                                                                @foreach($appts as $appt)
                                                                    <tr>

                                                                        <td class="text-black p-2">
                                                                            <center>
                                                                            @if($appt['status'] != 0 && Carbon\Carbon::parse($appt['slot_sart_time'])->format('Y-m-d') >= Carbon\Carbon::now()->format('Y-m-d'))
                                                                                <span class="badge badge-success  fs-9 m-1 text-dark" style="cursor: pointer;"  wire:click="cancelclick({{$appt['id']}})">Cancel</span>
                                                                            @elseif($appt['status'] != 0 && Carbon\Carbon::parse($appt['slot_sart_time'])->format('Y-m-d') < Carbon\Carbon::now()->format('Y-m-d'))
                                                                                <span class="badge badge-secondary fs-9 m-1 text-dark" disabled>Cancel</span>
                                                                            @elseif($appt['status'] == 0 )
                                                                                <span class="badge badge-secondary fs-9 m-1 text-dark">Cancelled</span>
                                                                            @endif

                                                                            </center>

                                                                        </td>
                                                                        <!--begin::Name=-->
                                                                        <td class="text-black p-2">{{\Carbon\Carbon::parse($appt['slot_sart_time'])->format('d-M-Y')}}</td>
                                                                        <td class="text-black p-2">{{\Carbon\Carbon::parse($appt['slot_sart_time'])->format('H:i A')}} - {{\Carbon\Carbon::parse($appt['slot_end_time'])->format('H:i A')}}</td>
                                                                        <td class="text-black p-2">{{$appt['session_name']}}</td>
                                                                        @if ($appt['transaction_id'] != null)
                                                                        <td class="text-black p-2">ONLINE</td>
                                                                        @else
                                                                        <td class="text-black p-2">OFFLINE</td>
                                                                        @endif


                                                                        <!--end::Name=-->

                                                                        <!--begin::Action=-->

                                                                        <!--end::Action=-->
                                                                    </tr>
                                                                @endforeach
                                                            @else
                                                                <tr>
                                                                    <td class="p-2 justify-content-center text-center" colspan="9"><h2 class="fs-2">No Data
                                                                            Available</h2></td>
                                                                </tr>
                                                            @endif

                                                            </tbody>
                                                            <!--end::Table body-->

                                                        </table>
                                                    </div>
                                                    <div class="row  p-2 @if ($family_data == true) @else d-none @endif" style="text-align: left !important;">
                                                        @if(sizeof($family_lists)>0)
                                                        @foreach ($family_lists as $family_list)
                                                        <div class="card" style="width: 250px; margin-right:10px; margin-top:10px;">
                                                            <div class="row p-2">
                                                                <div class="col-sm-6">
                                                                    @if ($family_list['gender'] == 'Female')
                                                                        <img class="rounded-circle"
                                                                            src="{{ global_asset('assetsweb/images/icons/female_patient_avatar.webp') }}"
                                                                            width="30px" height="30px" style="border-radius: 50%;">
                                                                    @elseif($family_list['gender'] == 'Male')
                                                                        <img class="rounded-circle"
                                                                            src="{{ global_asset('assetsweb/images/icons/male_patient_avatar.webp') }}"
                                                                            width="30px" height="30px" style="border-radius: 50%;">
                                                                    @else
                                                                        <img class="rounded-circle"
                                                                            src="{{ global_asset('assetsweb/images/icons/female_patient_avatar.webp') }}"
                                                                            width="30px" height="30px" style="border-radius: 50%;"><br>
                                                                    @endif
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <div class="row">{{$family_list['patient_id']}}</div>
                                                                    <div class="row">{{$family_list['patient_name']}}</div>
                                                                    <div class="row">{{$family_list['gender']}}({{$family_list['age']}} yrs)</div>

                                                                </div>

                                                            </div>
                                                        </div>
                                                        @endforeach

                                                        @else
                                                        <span>No Data Available</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                </div><!-- row end -->
            </div>
        </div>
    </section>
    <!-- intro-section end -->


</div>

@section('externaljs')
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>


        window.addEventListener('showsuccessmsg', event => {
            if (event.detail.type == "success") {
                showsuccessmsg(event.detail.message);
            } else {
                showerrorsmsg(event.detail.message);
            }
            //showsuccessmsg();

        });

        function showsuccessmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "success",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-success"
                }
            });
        }

        function showerrorsmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-danger"
                }
            });
        }

        function showPosition(position) {
            var coordinates = {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            };

            // Update the Livewire component's coordinates property
            console.log(coordinates);
            Livewire.component('ClinicWizardRegLivewire').set('coordinates', coordinates);
        }

        var totalamount = 0;
        var ownername;
        var owneremail;
        var ownermoblieno;
        window.addEventListener('proceedtopayment', event => {

            totalamount = event.detail.netamount * 100;
            ownername = event.detail.ownername;
            owneremail = event.detail.owneremail;
            ownermoblieno = event.detail.ownermoblieno;

            var options = {
                "key": "{{ env('RAZORPAY_KEY') }}", // Enter the Key ID generated from the Dashboard
                "amount": totalamount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                "currency": "INR",
                "name": "YODR.",
                "description": "YODR. E-Clinic Management",
                "image": "{{ global_asset('assetsweb/images/finalYodrlogo.png') }}",
                "handler": function(response) {
                    paymentsuccess(response);
                    /*  alert(response.razorpay_payment_id);
                      alert(response.razorpay_order_id);
                      alert(response.razorpay_signature)*/
                },
                "prefill": {
                    "name": ownername,
                    "email": owneremail,
                    "contact": ownermoblieno
                },
                "theme": {
                    "color": "#3399cc"
                }
            };
            var rzp1 = new Razorpay(options);
            rzp1.on('payment.failed', function(response) {
                paymentfailed(response);

            });

            rzp1.open();
            //e.preventDefault();


        });

        function paymentsuccess(response) {

            Livewire.emit('paymentsuccess', response.razorpay_payment_id);
        }

        function paymentfailed(response) {

            showerrorsmsg("Sorry !!!, Payment Failed, Please Try Again !")
        }

        window.addEventListener('showservicemodal', event => {
            $('#reciept_modal').modal('show');
        });

        window.addEventListener('hideservicemodal', event => {
            $('#reciept_modal').modal('hide');
        });

        window.addEventListener('newtab_redirect', event => {
            window.open('/receipt_print', '_blank');
        });

        document.addEventListener("DOMContentLoaded", function() {
            const vibratingCard = document.getElementById("vibratingCard");

            // Get all elements with a data-action attribute containing "vibrateCard"
            const vibrateElements = document.querySelectorAll("[data-action^='vibrateCard']");

            // Add click event listener to each element
            vibrateElements.forEach(function(element) {
                element.addEventListener("click", function() {
                    // Check if the device supports the vibration API
                    if ("vibrate" in navigator) {
                        // Vibrate for 200 milliseconds
                        navigator.vibrate(200);
                    }

                    // Add a class to trigger the CSS animation
                    vibratingCard.classList.add("shake");

                    // Remove the class after the animation is complete
                    setTimeout(function() {
                        vibratingCard.classList.remove("shake");
                    }, 1000); // Adjust the duration (in milliseconds) based on your animation
                });
            });
        });

        function confirmLogout() {
            Swal.fire({
                text: "You are about to log out.",
                icon: "question",
                showCancelButton: !0,
                buttonsStyling: !1,
                confirmButtonText: "Yes, close it!",
                cancelButtonText: "No, return",
                customClass: {
                    confirmButton: "btn btn-danger",
                    cancelButton: "btn btn-active-light"
                }
            }).then((function(result) {

                if (result.isConfirmed) {
                    Livewire.emit('logoutConfirmed');
                } else if (
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your imaginary file is safe :)',
                        'error'
                    )
                }


            }))
        }

        function wait($msg) {
            Swal.fire({
                title: 'Wait !',
                text: 'You cannot access this service until it is verified!',
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-danger"
                }
            });
        }

        function startTimer(duration, display) {
            var timer = duration, minutes, seconds;
           var counter =  setInterval(function() {
                minutes = parseInt(timer / 60, 10);

                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;
                if (--timer < 0) {
                    timer = duration;
                    console.log("reach to 0")
                    // timer = '0';

                    // clearInterval(counter);
                    Livewire.emit('otpexpirefunc');
                    clearInterval(counter);
                    console.log("clear")

                }
            }, 1000);
        }

        window.addEventListener('starttimer', event => {
            var otptimediff = event.detail.otptimediff
            var fiveMinutes = otptimediff,
                display = document.querySelector('#time');

            startTimer(fiveMinutes, display);

        });

        function stopCounter(){
            clearInterval(counter);
        }

        window.addEventListener('stopcounter', event => {
            stopCounter();
        });
        function clickEvent(first, last) {

            if (first.value.length) {
                if (first.value.length > 1) {

                    first.value = "";
                }
                document.getElementById(last).focus();
            }
        }

    </script>
@endsection