@extends('layouts.main')
@section('content')
<!-- appointment sec -->
<section class="appointment-sec py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-8">
<h3 class="clrBlueDark f-22 fw-500 mb-3">Appointment Details</h3>
</div>
<div class="col-4 text-end">
<a href="javascript:void(0)" class="btn btn-back btn-outline btn-sm mb-3">Back</a>
</div>
</div>
<!-- ++ -->
<div class="row">
<x-appointment-left :appointmentleft="$doctor"></x-appointment-left>
<div class="col-lg-8">
<div class="border round-3 appointment-content-right p-3">
<h4 class="clrGreyDark f-18 fw-500 mb-3">Book An Appointment</h4>
<p class="mb-2">Select Hospital</p>
<select class="form-control f-14 select-with-down-angle">
<option>Sarvodaya Hospital & Research Centre, Sector-8, Faridabad</option>
<option>Sarvodaya Hospital & Research Centre, Sector-8, Faridabad</option>
<option>Sarvodaya Hospital & Research Centre, Sector-8, Faridabad</option>
<option>Sarvodaya Hospital & Research Centre, Sector-8, Faridabad</option>
</select>
<p class="mb-3 mt-4 f-14 ps-md-3">Fee <b class="f-12">₹1500</b></p>
<p class="select-time-available">Select an available time</p>
<ul class="nav nav-pills justify-content-between contact-form-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#enquiry">Today</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#compliments">Tomorrow</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#complaints">More DateSee Calender</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active fade px-0 show pt-4" id="enquiry">
<div class="row">
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a25" name="check-substitution-2" />
<label class="btn btn-default" for="a25">09:00 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a50" name="check-substitution-2" />
<label class="btn btn-default" for="a50">09:30 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">10:00 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">10:30 AM</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a25" name="check-substitution-2" />
<label class="btn btn-default" for="a25">11:00 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a50" name="check-substitution-2" />
<label class="btn btn-default" for="a50">11:30 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">12:00 PM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">12:30 PM</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a25" name="check-substitution-2" />
<label class="btn btn-default" for="a25">04:00 PM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button hidden-button">
<input type="radio" id="a50" name="check-substitution-2" />
<label class="btn btn-default" for="a50">04:30 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">07:00 PM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">07:30 PM</label>
</div>
</div>
</div>
<!-- == -->
<div class="payment-option-wrapper">
<p class="f-14">Choose a payment option to book Appointment</p>
<div class="payment-border-box p-3 mb-3 border">
<div class="d-flex align-items-center">
<div class="circle-box">
<input type="radio" id="test2" name="radio-group">
</div>
<div class="ps-3">
<h4 class="mb-0 fw-500 f-12">₹1350</h4>
<p class="f-12 mb-0">Pay Online - get instant 10% off on paying online</p>
</div>
</div>
</div>
<div class="payment-border-box p-3 border">
<div class="d-flex align-items-center">
<div class="circle-box">
<input type="radio" id="test3" name="radio-group">
</div>
<div class="ps-3">
<h4 class="mb-0 fw-500 f-12">₹1350</h4>
<p class="f-12 mb-0">Pay Online - get instant 10% off on paying online</p>
</div>
</div>
</div>
<button class="text-white payment-btn btn d-block w-100">Proceed to Pay <i
class="fa-solid fa-arrow-right text-white"></i></button>
</div>
</div>
<div class="tab-pane container fade px-0 pt-4" id="compliments">
<div class="row">
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a25" name="check-substitution-2" />
<label class="btn btn-default" for="a25">09:00 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a50" name="check-substitution-2" />
<label class="btn btn-default" for="a50">09:30 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">10:00 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">10:30 AM</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a25" name="check-substitution-2" />
<label class="btn btn-default" for="a25">11:00 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a50" name="check-substitution-2" />
<label class="btn btn-default" for="a50">11:30 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">12:00 PM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">12:30 PM</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a25" name="check-substitution-2" />
<label class="btn btn-default" for="a25">04:00 PM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button hidden-button">
<input type="radio" id="a50" name="check-substitution-2" />
<label class="btn btn-default" for="a50">04:30 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">07:00 PM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">07:30 PM</label>
</div>
</div>
</div>
<!-- == -->
<div class="payment-option-wrapper">
<p class="f-14">Choose a payment option to book Appointment</p>
<div class="payment-border-box p-3 mb-3 border">
<div class="d-flex align-items-center">
<div class="circle-box">
<input type="radio" id="test2" name="radio-group">
</div>
<div class="ps-3">
<h4 class="mb-0 fw-500 f-12">₹1350</h4>
<p class="f-12 mb-0">Pay Online - get instant 10% off on paying online</p>
</div>
</div>
</div>
<div class="payment-border-box p-3 border">
<div class="d-flex align-items-center">
<div class="circle-box">
<input type="radio" id="test3" name="radio-group">
</div>
<div class="ps-3">
<h4 class="mb-0 fw-500 f-12">₹1350</h4>
<p class="f-12 mb-0">Pay Online - get instant 10% off on paying online</p>
</div>
</div>
</div>
<button class="text-white payment-btn btn d-block w-100">Proceed to Pay <i
class="fa-solid fa-arrow-right text-white"></i></button>
</div>
</div>
<div class="tab-pane container fade px-0 pt-4" id="complaints">
<div class="row">
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a25" name="check-substitution-2" />
<label class="btn btn-default" for="a25">09:00 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a50" name="check-substitution-2" />
<label class="btn btn-default" for="a50">09:30 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">10:00 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">10:30 AM</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a25" name="check-substitution-2" />
<label class="btn btn-default" for="a25">11:00 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a50" name="check-substitution-2" />
<label class="btn btn-default" for="a50">11:30 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">12:00 PM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">12:30 PM</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a25" name="check-substitution-2" />
<label class="btn btn-default" for="a25">04:00 PM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button hidden-button">
<input type="radio" id="a50" name="check-substitution-2" />
<label class="btn btn-default" for="a50">04:30 AM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">07:00 PM</label>
</div>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="button">
<input type="radio" id="a75" name="check-substitution-2" />
<label class="btn btn-default" for="a75">07:30 PM</label>
</div>
</div>
</div>
<!-- == -->
<div class="payment-option-wrapper">
<p class="f-14">Choose a payment option to book Appointment</p>
<div class="payment-border-box p-3 mb-3 border">
<div class="d-flex align-items-center">
<div class="circle-box">
<input type="radio" id="test2" name="radio-group">
</div>
<div class="ps-3">
<h4 class="mb-0 fw-500 f-12">₹1350</h4>
<p class="f-12 mb-0">Pay Online - get instant 10% off on paying online</p>
</div>
</div>
</div>
<div class="payment-border-box p-3 border">
<div class="d-flex align-items-center">
<div class="circle-box">
<input type="radio" id="test3" name="radio-group">
</div>
<div class="ps-3">
<h4 class="mb-0 fw-500 f-12">₹1350</h4>
<p class="f-12 mb-0">Pay Online - get instant 10% off on paying online</p>
</div>
</div>
</div>
<button class="text-white payment-btn btn d-block w-100">Proceed to Pay <i
class="fa-solid fa-arrow-right text-white"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- appointment sec end-->
@endsection