@extends('front.layouts.main')

@section('title', 'Beranda')

@section('content')

  <!-- ======= Hero Section ======= -->
   <section id="hero">

      <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 align-items-center">
            <div data-aos="zoom-out">
            <h1 class="text-center mt-0"><span>Selamat Datang</span></h1>
            <h2 class="text-center">Di Sistem Layanan Informasi Disabilitas <strong>(SILAIDIS)</strong>. Merupakan optimalisasi pemberian layanan informasi yang ramah bagi masyarakat
               berkebutuhan khusus pada <br><span class="title-pn">Pengadilan Negeri Denpasar</span>
            </h2>
            <div class="text-center">
               <img src="{{asset('assets/front/img/berahklak_pndps.pn')}}g" class="berakhlak img-fluid" alt="">
            </div>
            </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 -->

 <main id="main">

 <section id="icon-boxes" class="icon-boxes">
     <div class="container">

         <div class="row">
            <h2 class="text-center mt-2 mb-4">Jenis Pelayanan PN Denpasar</h2>
            
            @foreach ($standarPelayanan as $layanan )
               <div class="col-md-6 col-lg-3 align-items-stretch mb-5 mb-lg-4 aos-init aos-animate" data-aos="fade-up">
                  <div class="icon-box text-center">
                     <a href="{{ route('single-pages',['jenis-pelayanan',$layanan->sub_menu_slug]) }}">
                        <div class="icon"><i class="bx bx-file"></i></div>
                        <h4 class="title">{{$layanan->sub_menu}}</h4>
                        <p class="description">Klik untuk lebih detail. </p>
                     </a>
                     
                     </div>
               </div>
            @endforeach
           
         </div>

     </div>
 </section>



<!-- The Modal -->
<div class="modal" id="myModal">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
 
      <div class="modal-header"> 
         <h4 class="modal-title">Silaidis - Sistem Layanan Informasi Disabilitas</h4> 
        </div> 
       <!-- Modal body -->
       <div class="modal-body">
         <iframe width="100%" height="520" src="{{$video}}?rel=0&amp;autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>     
       </div>
 
       <!-- Modal footer -->
       <div class="modal-footer">
         <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Tutup</button>
       </div>
 
     </div>
   </div>
 </div>

 </main><!-- End #main -->

@endsection
@push('js')
<script>
   $(document).ready(function(){
      $('#myModal').modal('show');
   });

   $(".modal").on("hidden.bs.modal", function(){
      $(".modal-body").html("");
   });
</script>
@endpush