@extends('front.layouts.main')

@section('title', 'Beranda')

@section('content')

  <!-- ======= Hero Section ======= -->
  <section id="hero" class="single-page">

   <div class="container">
   <div class="row justify-content-center">
      <div class="col-lg-10 pt-5 pt-lg-0 order-2 order-lg-1 d-flex justify-content-center">
         <div data-aos="zoom-out">
         <h1 class="text-center mt-0"><span>Form Kedatangan</span></h1>
            
         </div>
      </div>

   </div>
   </div>

   <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
   <defs>
      <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
   </defs>
   <g class="wave1">
      <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
   </g>
   <g class="wave2">
      <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
   </g>
   <g class="wave3">
      <use xlink:href="#wave-path" x="50" y="9" fill="#fff">
   </g>
   </svg>

</section><!-- End Hero -->


<section id="form" class="faq section-bg d-flex content-page">
    <div class="container mt-100 ptb-100">
       <div class="row">
          <div id="p-form" class="card">
             <div class="card-body" style="font-size:12pt">
               @if ($message = Session::get('success'))
               <div class="alert alert-success alert-block">
                   <strong>{{ $message }}</strong>
               </div>
             @endif
               <p>
                   Silahkan mengisi form di bawah ini untuk menghubungi kami.
               </p>
               {{-- <div id="confirm-status" class="alert alert-success" role="alert">
                   <h4 class="alert-heading">Konfirmasi</h4>
                   <p>Terimakasih atas respon anda. Kami akan mengevaluasi data yang anda kirim.</p>
                </div> --}}

               <form id="save-form" class="ptsp-form" action="{{route('hubungi-kami')}}" method="post">
                   @csrf
                   <div class="mb-3 row field-confirmation-name required">
                     <label class="col-sm-2 col-form-label" for="confirmation-name">Nama</label>
                     <div class="col-sm-10">
                        <input type="text" id="confirmation-name" class="form-control" name="nama" maxlength="50" aria-required="true">
                        <div class="invalid-feedback "></div>
                     </div>
                  </div>
                  <div class="mb-3 row field-confirmation-name required">
                   <label class="col-sm-2 col-form-label" for="confirmation-name">Email</label>
                   <div class="col-sm-10">
                      <input type="text" id="confirmation-name" class="form-control" name="email" maxlength="50" aria-required="true">
                      <div class="invalid-feedback "></div>
                   </div>
                </div>

                  <div class="mb-3 row field-confirmation-address required">
                     <label class="col-sm-2 col-form-label" for="confirmation-address">Alamat</label>
                     <div class="col-sm-10">
                        <input type="text" id="confirmation-address" class="form-control" name="alamat" maxlength="60" aria-required="true">
                        <div class="invalid-feedback "></div>
                     </div>
                  </div>
                  <div class="mb-3 row field-confirmation-phone required">
                     <label class="col-sm-2 col-form-label" for="confirmation-phone">Nomor Telepon / WA</label>
                     <div class="col-sm-10">
                        <input type="text" id="confirmation-phone" class="form-control" name="nomor" maxlength="17" aria-required="true">
                        <div class="invalid-feedback "></div>
                     </div>
                  </div>

                  <div class="mb-3 row field-confirmation-phone required">
                   <label class="col-sm-2 col-form-label" for="confirmation-phone">Pesan</label>
                   <div class="col-sm-10">
                       <textarea class="form-control" name="pesan" id="" cols="30" rows="3"></textarea>
                       <div class="invalid-feedback "></div>
                   </div>
                </div>

                 <div class="form-group" style="border-top: #eee 1px solid;background-color: #fafafa;margin: 1rem -1.7rem -1rem -1.7rem; padding: 1rem 1.7rem;">
                   <div class="col-md-10 offset-md-2">
                       <button type="submit" class="btn btn-primary" name="contact-button" style="padding: 0.5rem 1rem;border-radius: 5px;box-shadow: 0 0.125rem 0.25rem 0 rgb(105 108 255 / 40%)">Kirim</button>
                   </div>    
                   
                 </div>
               </form>
             </div>
          </div>
         
       </div>
    </div>
</section>
@endsection