@extends('layout/user')

@section('tittle', 'Kontak Info')

@section('container')
<section class="page-header page-header-modern bg-color-dark-scale-1 page-header-md">
	<div class="container">
		<div class="row">
			<div class="col-md-12 align-self-center p-static order-2 text-center">
				<h1 class="text-light font-weight-bold text-8">@yield('tittle')</h1>
				<span class="sub-title text-light">Sekolah Tinggi Ilmu Tarbiyah Al-Bukhary Labuhanbatu</span>
			</div>
			<div class="col-md-12 align-self-center order-1">
				<ul class="breadcrumb d-block text-center">
					<li><a href="{{url('/')}}">Home</a></li>
					<li class="active">Profil Kampus</li>
				</ul>
			</div>
		</div>
	</div>
</section>
<section class="section section-default border-0 my-5 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="750">
	<div class="container py-4">
		<div class="row align-items-center">
			<div class="col-md-6 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1000">
				<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3987.1836789182457!2d99.84155827789478!3d2.082311653391158!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x302da1bd6ea0cd5b%3A0xd0960be0755a610c!2sKAMPUS%20STITA%20AL%20BUKHARY!5e0!3m2!1sid!2sid!4v1701095902200!5m2!1sid!2sid" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
			</div>
			<div class="col-md-6 ps-5 mt-0" style="height: 500px;">
				<div class="overflow-hidden mb-2">
					<h2 class="text-color-dark font-weight-normal text-7 mb-0 pt-0 mt-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1200">Kontak <strong class="font-weight-extra-bold">Info</strong></h2>
				</div>
				<div class="row">
					<div class="col-sm-12 mt-3">
						<p>
							<i class="fas fa-map-marker text-center" style="width: 19.81px;"></i><span style="padding-left: 10px;"> {{$alamat->link}}</span>
						</p>
						<p>
							<i class="fas fa-phone text-center" style="width: 19.81px;"></i><span style="padding-left: 10px;"> {{$telp->link}}</span>
						</p>
						<p>
							<i class="far fa-envelope text-center" style="width: 19.81px;"> </i><span style="padding-left: 10px;"> {{$email->link}}</span>
						</p>
					</div>
				</div>
				<hr class="dotted short">
				<div class="widget-toggle-expand mb-3">
					<ul class="social-icons social-icons-medium social-icons-clean-with-border social-icons-clean-with-border-border-grey social-icons-clean-with-border-icon-dark me-3 mb-0">
						<li class="social-icons-facebook"><a href="{{$h_facebook->link}}" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
						<li class="social-icons-twitter"><a href="{{$h_twitter->link}}" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li>
						<li class="social-icons-instagram"><a href="{{$h_instagram->link}}" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a></li>
						<li class="social-icons-youtube"><a href="{{$h_youtube->link}}" target="_blank" title="Youtube"><i class="fab fa-youtube"></i></a></li>
					</ul>
				</div>
			</div>
		</div>

	</div>
</section>

@endsection