@extends('Client.layouts.layout')

@section('content')

    <style>
        .appointment-form input[type=radio]:checked ~ .appointment-lable {
            box-shadow: 0px 0px 0px 1px black !important;
        }
    </style>

    <section class="py-5">
        <div class="container">
        	<div class="row justify-content-center">
        		<div class="col-lg-8 col-xl-6 col-md-8 col-12">
        			<div class="card text-center p-4">
        				<div class="card-body">
        					<p class="card-text text-dark text-normal">
        					    @lang('trans.otp_method')
        					</p>
        					<form action="{{ route('client.forget-otp') }}" method="POST" class="appointment-form row mb-4 mt-5">
        					    @csrf
        						<div class="col-sm-6 d-flex mb-3 mb-sm-0 cursor-pointer">
        							<div class="mb-3">
        								<input required type="radio" class="d-none" name="otp_type" id="appointment-one" value="whatsapp">
        								<label for="appointment-one" class="appointment-lable border rounded-4 py-2 col-12">
        									<div class="d-flex justify-content-between align-items-center container">
        										<div>
        											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px" clip-rule="evenodd"><path fill="#fff" d="M4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98c-0.001,0,0,0,0,0h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303z"/><path fill="#fff" d="M4.868,43.803c-0.132,0-0.26-0.052-0.355-0.148c-0.125-0.127-0.174-0.312-0.127-0.483l2.639-9.636c-1.636-2.906-2.499-6.206-2.497-9.556C4.532,13.238,13.273,4.5,24.014,4.5c5.21,0.002,10.105,2.031,13.784,5.713c3.679,3.683,5.704,8.577,5.702,13.781c-0.004,10.741-8.746,19.48-19.486,19.48c-3.189-0.001-6.344-0.788-9.144-2.277l-9.875,2.589C4.953,43.798,4.911,43.803,4.868,43.803z"/><path fill="#cfd8dc" d="M24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,4C24.014,4,24.014,4,24.014,4C12.998,4,4.032,12.962,4.027,23.979c-0.001,3.367,0.849,6.685,2.461,9.622l-2.585,9.439c-0.094,0.345,0.002,0.713,0.254,0.967c0.19,0.192,0.447,0.297,0.711,0.297c0.085,0,0.17-0.011,0.254-0.033l9.687-2.54c2.828,1.468,5.998,2.243,9.197,2.244c11.024,0,19.99-8.963,19.995-19.98c0.002-5.339-2.075-10.359-5.848-14.135C34.378,6.083,29.357,4.002,24.014,4L24.014,4z"/><path fill="#40c351" d="M35.176,12.832c-2.98-2.982-6.941-4.625-11.157-4.626c-8.704,0-15.783,7.076-15.787,15.774c-0.001,2.981,0.833,5.883,2.413,8.396l0.376,0.597l-1.595,5.821l5.973-1.566l0.577,0.342c2.422,1.438,5.2,2.198,8.032,2.199h0.006c8.698,0,15.777-7.077,15.78-15.776C39.795,19.778,38.156,15.814,35.176,12.832z"/><path fill="#fff" fill-rule="evenodd" d="M19.268,16.045c-0.355-0.79-0.729-0.806-1.068-0.82c-0.277-0.012-0.593-0.011-0.909-0.011c-0.316,0-0.83,0.119-1.265,0.594c-0.435,0.475-1.661,1.622-1.661,3.956c0,2.334,1.7,4.59,1.937,4.906c0.237,0.316,3.282,5.259,8.104,7.161c4.007,1.58,4.823,1.266,5.693,1.187c0.87-0.079,2.807-1.147,3.202-2.255c0.395-1.108,0.395-2.057,0.277-2.255c-0.119-0.198-0.435-0.316-0.909-0.554s-2.807-1.385-3.242-1.543c-0.435-0.158-0.751-0.237-1.068,0.238c-0.316,0.474-1.225,1.543-1.502,1.859c-0.277,0.317-0.554,0.357-1.028,0.119c-0.474-0.238-2.002-0.738-3.815-2.354c-1.41-1.257-2.362-2.81-2.639-3.285c-0.277-0.474-0.03-0.731,0.208-0.968c0.213-0.213,0.474-0.554,0.712-0.831c0.237-0.277,0.316-0.475,0.474-0.791c0.158-0.317,0.079-0.594-0.04-0.831C20.612,19.329,19.69,16.983,19.268,16.045z" clip-rule="evenodd"/></svg>
        										</div>
        										<div class="d-flex flex-column text-start mx-3">
        											<span class="text-danger fs-7">@lang('trans.whatsapp')</span>
        											<span class="text-dark fw-bold fs-7" style="direction: ltr;">+{{ $ExistingClient->phone_code }} {{ obfuscateNumber($ExistingClient->phone) }}</span>
        										</div>
        									</div>
        								</label>
        							</div>
        						</div>
        						<div class="col-sm-6 d-flex mb-3 mb-sm-0 cursor-pointer">
        							<div class="mb-3">
        								<input required type="radio" class="d-none" name="otp_type" id="appointment-two" value="sms">
        								<label for="appointment-two" class="appointment-lable border rounded-4 py-2 col-12">
        									<div class="d-flex justify-content-between align-items-center container">
        										<div>
        											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="50" width="50" version="1.1" id="Layer_1" viewBox="0 0 512 512" xml:space="preserve">
                                                        <circle cx="256" cy="256" r="256"/>
                                                        <g>
                                                        	<path style="fill:#FFFFFF;" d="M384.64,152c4,0,7.36,3.36,7.36,7.36v163.68c0,4-3.36,7.36-7.36,7.36h-46.8h-16v16v36.88   l-61.68-49.36l-4.4-3.52h-5.6h-122.8c-4,0-7.36-3.36-7.36-7.36V159.36c0-4,3.36-7.36,7.36-7.36H384.64 M384.64,136H127.36   c-12.8,0-23.36,10.56-23.36,23.36v163.68c0,12.88,10.56,23.36,23.36,23.36h122.8l87.68,70.16V346.4h46.8   c12.88,0,23.36-10.56,23.36-23.36V159.36C408,146.56,397.44,136,384.64,136L384.64,136z"/>
                                                        	<path style="fill:#FFFFFF;" d="M154.24,261.92c3.52,2.32,9.76,4.72,15.68,4.72c8.64,0,12.72-4.32,12.72-9.76   c0-5.68-3.36-8.8-12.16-12.08c-11.76-4.16-17.36-10.72-17.36-18.56c0-10.56,8.56-19.2,22.64-19.2c6.64,0,12.48,1.92,16.08,4.08   l-2.96,8.64c-2.56-1.6-7.28-3.76-13.36-3.76c-7.04,0-10.96,4.08-10.96,8.96c0,5.44,3.92,7.84,12.48,11.12   c11.36,4.32,17.2,10,17.2,19.76c0,11.52-8.96,19.6-24.48,19.6c-7.2,0-13.84-1.76-18.4-4.48L154.24,261.92z"/>
                                                        	<path style="fill:#FFFFFF;" d="M209.52,226.32c0-6.8-0.16-12.32-0.56-17.76h10.4l0.56,10.56h0.4c3.68-6.24,9.76-12.08,20.56-12.08   c8.96,0,15.68,5.44,18.56,13.12h0.24c2-3.68,4.64-6.48,7.28-8.56c3.92-2.96,8.24-4.64,14.48-4.64c8.64,0,21.52,5.68,21.52,28.4   v38.56h-11.68V236.8c0-12.56-4.64-20.16-14.24-20.16c-6.8,0-12.08,5.04-14.08,10.8c-0.56,1.6-0.96,3.76-0.96,6v40.48h-11.68v-39.28   c0-10.4-4.64-18-13.68-18c-7.44,0-12.88,6-14.72,11.92c-0.64,1.76-0.96,3.76-0.96,5.84v39.52h-11.68v-47.6H209.52z"/>
                                                        	<path style="fill:#FFFFFF;" d="M320.8,261.92c3.52,2.32,9.76,4.72,15.68,4.72c8.64,0,12.72-4.32,12.72-9.76   c0-5.68-3.36-8.8-12.16-12.08c-11.76-4.16-17.36-10.72-17.36-18.56c0-10.56,8.56-19.2,22.64-19.2c6.64,0,12.48,1.92,16.08,4.08   l-2.96,8.64c-2.56-1.6-7.28-3.76-13.36-3.76c-7.04,0-10.96,4.08-10.96,8.96c0,5.44,3.92,7.84,12.48,11.12   c11.36,4.32,17.2,10,17.2,19.76c0,11.52-8.96,19.6-24.48,19.6c-7.2,0-13.84-1.76-18.4-4.48L320.8,261.92z"/>
                                                        </g>
                                                    </svg>
        										</div>
        										<div class="d-flex flex-column text-start mx-3">
        											<span class="text-danger fs-7">@lang('trans.sms')</span>
        											<span class="text-dark fw-bold fs-7" style="direction: ltr;">+{{ $ExistingClient->phone_code }} {{ obfuscateNumber($ExistingClient->phone) }}</span>
        										</div>
        									</div>
        								</label>
        							</div>
        						</div>
            					<div class="mt-4">
            						<button type="submit" class="btn main_bt rounded-2 col-sm-12 fw-semibold"> @lang('trans.send') </button>
            					</div>
        					</form>
        					<span class="mt-6 text-dark">@lang('trans.Have an account ?') <a href="{{ route('client.login') }}" class="text-decoration-none fw-semibold"> @lang('trans.login') </a></span>
        				</div>
        			</div>
        		</div>
        	</div>
        </div>
    </section>

	
@endsection