@extends('app._layout')
@section('title', 'İletişim')
@section('description', 'İletşim bilgilerimiz')

@push('js')
<script>
$(function() {
  $('#iletisimForm').on('submit', function(){
     $('#iletisimForm').addClass('loading');

     $.post('{{url('iletisim')}}', $(this).serialize(), function(d){
       $('#iletisimForm').removeClass('loading');

       if (d.status == 'ok') {
         $('#iletisimForm').html('<div class="ui green message"><div class="header">Mesajınız gönderildi <i class="send icon"></i></div></div>')
       }

       if (d.status == 'error') {
         swal({title: d.errors, icon: "warning", button:'Tamam', dangerMode: true});
       }
     });

     return false;
  });

});
</script>
@endpush

@section('content')
<section id="breadcrumbs" class="breadcrumbs">
	<div class="container">
		<ol>
			<li><a href="/">Anasayfa</a></li>
			<li>İletişim</li>
		</ol>
	</div>
</section>

<section id="contact" class="contact">
  <div class="container" data-aos="fade-up">

    <div class="section-title">
      <h2>Bize Ulaşın</h2>
    </div>

    <div class="row">

      <div class="col-lg-5 d-flex align-items-stretch">
        <div class="info">
          <div class="address">
            <i class="bi bi-geo-alt"></i>
            <h4>Adres:</h4>
            <p>Kale Mah, Şehit Mustafa Çinik Sokak No:18/A Tatvan / Bitlis </p>
          </div>

          <div class="email">
            <i class="bi bi-envelope"></i>
            <h4>Email:</h4>
            <p>info@tatvandusunurkoleji.com.tr</p>
          </div>

          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Tel:</h4>
            <p>(0434) 825 11 11</p>
          </div>

          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24974.95316510347!2d42.28058955413899!3d38.5137286964084!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x400d391377f41a97%3A0x8055148c1b70ee80!2zRMOcxZ7DnE7DnFIgS09MRUrEsCBUQVRWQU4gS0FNUMOcU8Oc!5e0!3m2!1str!2str!4v1663081374100!5m2!1str!2str" width="600" height="450" style="border:0; width: 100%; height: 290px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>

      </div>

      <div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
        <form id="iletisimForm" action="# method="post" role="form" class="php-email-form">
          @csrf
          <div class="row">
            <div class="form-group col-md-6">
              <label for="name">Ad</label>
              <input type="text" name="ad" class="form-control" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">Soyad</label>
              <input type="text" class="form-control" name="soyad" required>
            </div>
          </div>
          <div class="form-group">
            <label for="name">Telefon</label>
            <input type="text" class="form-control" name="telefon" required>
          </div>
          <div class="form-group">
            <label for="name">Mesaj</label>
            <textarea class="form-control" name="mesaj" rows="10" required></textarea>
          </div>
          <div class="my-3">
            <div class="loading">Gönderiliyor</div>
            <div class="error-message"></div>
            <div class="sent-message">Mesajınız gönderildi!</div>
          </div>

          <div class="form-group">
            <label id="cpt">{!! captcha_img('flat') !!}</label>
            <input class="form-control" name="captcha" type="text" required placeholder="Güvenlik kodu" />
          </div>


          <div class="text-center"><button type="submit">Gönder</button></div>
        </form>
      </div>

    </div>

  </div>
</section>

@endsection