@extends('layout.front')

@section('container')

@php

  use Illuminate\Support\Facades\DB;
  $sosmed = DB::select("SELECT * FROM sosialmedia ");

@endphp

<style>

	.info-contact{
	  font-size: 20pt;
	  margin: 30px;
	  padding: 10px;
	  border-radius: 50%;
	  width: 70px;
	  height: 70px;
	  display: inline-flex;
	  justify-content: center;
	  align-items: center;
	  border: 2px solid #007bff;
	}

	.sosial-media{
	  max-width: 350px;
	  margin-right: auto;
	  margin-left: auto;
	}

	.sosial-media div{
	  text-align: center;
	}

	.sosial-media div i{
	  cursor: pointer;
	  font-size: 16pt;
	  margin: 20px 0;
	  padding: 10px;
	  background: #007bff;
	  color: #fff;
	  border-radius: 50%;
	  width: 45px;
	  height: 45px;
	  display: inline-flex;
	  justify-content: center;
	  align-items: center;
	}

</style>

<div class="container">
	<div class="row">
		<div class="col-12">
			<div class="col-sm-12 mt-5 mb-5 text-center">
				<h1>Kontak Kami</h1>
			</div>
			<div class="card">
				<div class="card-body" style="padding: 25px;">
					<div class="row mt-5 mb-5 d-flex align-items-center">
						<div class="col-lg-6">
							<h2 class="mb-5">Get In Touch</h2>
							<form action="">
								<div class="form-group">
									<input id="nama" type="text" class="form-control" placeholder="Nama Lengkap">
								</div>
								<div class="form-group">
									<input id="email" type="email" class="form-control" placeholder="Inputkan Email">
								</div>
								<div class="form-group">
									<input id="telp" type="telp" class="form-control" placeholder="Inputkan No Telp">
								</div>
								<div class="form-group">
									<select id="transaksi" class="form-control">
										<option value="">Pilih Transaksi</option>
										<option>Jual</option>
										<option>Beli</option>
										<option>Sewa</option>
									</select>
								</div>
								<div class="form-group">
									<textarea id="pesan" class="form-control" placeholder="Inputkan Pesan"></textarea>
								</div>
								<div class="form-group">
									<button type="button" id="send" class="btn btn-primary">Kirim</button>
								</div>
							</form>
						</div>
						<div class="col-lg-6 text-center">
							<div class="row">
								<div class="col-sm-12">
									<h2>Contact <br> Information</h2>
								</div>
								<div class="col-12">
									<i class="fas fa-info info-contact"></i>
									<p>Click To View</p>
								</div>
							</div>
							<div class="sosial-media row d-flex justify-content-center">
            					@foreach($sosmed as $sosmed)
									<div class="col-2">
										<i onclick="window.open('{{$sosmed->link}}', '_blank')" id="{{$sosmed->sosialmedia}}" class="fab fa-{{$sosmed->sosialmedia}}"></i>
									</div>
            					@endforeach
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@section('js')
<script type="text/javascript">

	const __id = function(a){
		return document.getElementById(a);
	}

	__id('send').addEventListener('click', function(){
		var data = {
			_token: $('meta[name=csrf-token]').attr('content'),
			nama: __id('nama').value,
			email: __id('email').value,
			telp: __id('telp').value,
			transaksi: __id('transaksi').value,
			pesan: __id('pesan').value
		}
		$.ajax({
			url: '/send-message',
			method: 'POST',
			dataType: 'text',
			data: data
		})
		.done(function() {

			Swal.fire(
			  'Pesan Terkirim',
			  'Pesan anda sudah kami terima, mohon menunggu informasi berikutnya dari kami untuk kelanjutannya!',
			  'success'
			)

			__id('nama').value = '';
			__id('email').value = '';
			__id('telp').value = '';
			__id('transaksi').value = '';
			__id('pesan').value = '';


		})
		.fail(function() {
			console.log("error");
		})

	}, false)
window.scrollTo(0, 0);
</script>
@endsection