@extends('index')

@section('content')
<section class="berita-page-section theTop container">
        <h1 class="text-center">HUBUNGI KAMI</h1>
        <br>
        <div class="row">
          <div class="col-md-8">
            <form onsubmit="event.preventDefault(); sendMessage();">
              <div style="margin-bottom: 20px">
                <label for="inputNama" class="form-label font-weight-semi-bold"
                  >Nama <span class="text-danger">*</span></label
                >
                <input
                  type="text"
                  class="form-control"
                  id="inputNama"
                  style="outline: none; box-shadow: none"
                  placeholder="Nama Anda"
                  oninvalid="this.setCustomValidity('Nama masih kosong')"
                  oninput="this.setCustomValidity('')"
                  required
                />
              </div>
              <div style="margin-bottom: 20px">
                <label
                  for="inputNomorTelepon"
                  class="form-label font-weight-semi-bold"
                  >Nomor Telepon
                  <span class="text-danger">*</span></label
                >
                <input
                  type="text"
                  class="form-control"
                  id="inputNomorTelepon"
                  style="outline: none; box-shadow: none"
                  placeholder="08xxxxxxxxxx"
                  oninvalid="this.setCustomValidity('Nomor telepon masih kosong')"
                  oninput="this.setCustomValidity('')"
                  required
                />
              </div>
              <div  style="margin-bottom: 20px">
                <label
                  for="inputEmail"
                  class="form-label font-weight-semi-bold"
                  >Email
                  <span class="text-danger">*</span></label
                >
                <input
                  type="text"
                  class="form-control"
                  id="inputEmail"
                  style="outline: none; box-shadow: none"
                  placeholder="Email Anda"
                  oninvalid="this.setCustomValidity('Email masih kosong')"
                  oninput="this.setCustomValidity('')"
                  required
                />
              </div>
            <div style="margin-bottom: 20px">
            <label
                for="inputKeluhan"
                class="form-label font-weight-semi-bold"
                >Keluhan
                <span class="text-danger">*</span></label
            >

            <textarea
                class="form-control"
                id="inputKeluhan"
                style="
                outline: none;
                box-shadow: none;
                width: 100%;
                height: 150px;
                min-height: 150px;
                resize: vertical;
                "
                placeholder="Tuliskan keluhan Anda di sini..."
                oninvalid="this.setCustomValidity('Keluhan masih kosong')"
                oninput="this.setCustomValidity('')"
                required
            ></textarea>
            </div>

            <div class="text-left">
            <button
                class="btn btn-success"
                style="height: 50px; font-weight: bold;"
                type="submit"
            >
                <i class="fab fa-whatsapp" style="font-size: 20px; margin-right: 8px;"></i>
                Kirim Pesan
            </button>
            </div>

            </form>
          </div>
          <style>
            @media (max-width: 768px) {
              .detailKontak {
                margin-top: 50px;
              }
            }
          </style>
          <div class="detailKontak col-md-4">
            <div style="margin-bottom: 20px">
              <div style="display: flex; align-items: center; ">
                <i
                  class="fa fa-house"
                  style="margin-right: 10px"
                ></i>
                <h6
                  class="text-black text-uppercase"
                  style="letter-spacing: 1px; font-weight: bold;"
                >
                  Alamat kantor
                </h6>
              </div>
              <p class="text-muted">
                Jl. Indragiri, Sumberejo, Kec. Batu, Kota Batu, Jawa Timur 65318
                - INDONESIA
              </p>
            </div>
            <div>
              <div style="display: flex; align-items: center;">
                <i
                  class="fa fa-clock"
                  style="margin-right: 10px"
                ></i>
                <h6
                  class="text-uppercase"
                  style="letter-spacing: 1px; font-weight: bold;"
                >
                  Technical Support
                </h6>
              </div>
              <p class="text-muted">
                Nomor Telp: +62 859-2815-8662 <br> eMail:
                bersamakitabisa125@gmail.com
              </p>
            </div>
          </div>
        </div>
</section>

@stop
