@extends('frontend.layout')

@section('content')
<!-- Appointment Section -->
<!-- Appointment Section -->
<section class="appointment-section pos-r pt-80">
    <div class="booking-section">
        <div class="container">
            <div >
                <!-- Existing code -->

                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <!-- Existing code -->
            </div>
        </div>
    </div>
</section>

 <section class="appointment-section pos-r pt-80">

	 <div class="booking-section">

		 <div class="container">

			 <div id="success" class="appointment_succses">
</div>
			 <div class="col-sm-6 col-sm-offset-3 text-center mb-30">

				 <h2>MAKE AN APPOINTMENT</h2>

				 <p class="lead">Fill in the form below.</p>

			 </div>

			 <div class="row">

				 <div class="col-sm-12">

					 <div class="left-block" > <img src="{{asset('assets/img/masaku7000.png')}}" alt="" /> </div>

					 <div class="right-block ">

						 <div class="appointment">

							 <form method="POST" action="{{ route('appointments.store') }}">
    @csrf

								 <div class="form-field-wrapper">

									 <label for="name">Enter Name</label>

									 <input type="text" id="name"  name="name" class="input-sm form-full">

								 </div>

								 <div class="form-field-wrapper">

									 <label for="gender">Select Gender</label>

									 <select name="gender" id="gender" class="input-sm form-full btm_input">

										 <option value="0">Select Gender</option>

										 <option value="Male">Male</option>

										 <option value="Female">Female</option>

									 </select>

								 </div>

								 <div class="form-field-wrapper">

									 <label for="mobile">Enter Mobile</label>

									 <input type="text" id="mobile" name="mobile" class="input-sm form-full">

								 </div>

								 <div class="form-field-wrapper">

									 <label for="email">Enter Email</label>

									 <input type="text" id="email" name="email" class="input-sm form-full">

								 </div>

								 <div class="form-field-wrapper form-full">

									 <label >Message</label>

									 <textarea name="message" class="input-sm form-full height-100" id="message"> </textarea>

								 </div>

								 <div class="form-field-wrapper">

									 <label for="date">Date of Appointment</label>

									 <input type="text" class="input-sm form-full datepicker" name="appointment_date" id="date">

									 <i class="fa fa-calendar" aria-hidden="true"></i> </div>

								 <div class="form-field-wrapper mt-40">

									 <button name="submit" id="submit" type="submit" class="btn btn-md btn-color-line input-sm form-full">Submit</button>

								 </div>

							 </form>

						 </div>

					 </div>

				 </div>

			 </div>

		 </div>

	 </div>

 </section>



 <!-- Section -->




@endsection