@extends('layouts.full')

{{-- Title --}}
@section('title','Home')

{{-- Vendor Styles --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
@endsection

{{-- Page Styles --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/authentication.css')}}">
@endsection

{{-- Content --}}
@section('content')

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top shadow">
    <div class="container">
        <!-- Logo di Kiri -->
        <a class="navbar-brand d-flex align-items-center" href="{{ url('/') }}">
            <img src="{{ asset('images/logo.png') }}" alt="Logo Sekolah" height="40" class="me-2">
            <span class="fw-bold">Sekolah Qur'an Darul Fattah</span>
        </a>
        
        <!-- Tombol Toggle untuk Mobile -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Menu Navbar -->
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link {{ Request::is('/') ? 'active' : '' }}" href="{{ url('/') }}">Beranda</a></li>
                <li class="nav-item"><a class="nav-link {{ Request::is('fasilitas') ? 'active' : '' }}" href="{{ url('/fasilitas') }}">Fasilitas</a></li>
                <li class="nav-item"><a class="nav-link {{ Request::is('kegiatan') ? 'active' : '' }}" href="{{ url('/kegiatan') }}">Kegiatan</a></li>
               
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {{ Request::is('sekolah*') ? 'active' : '' }}" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                        Sekolah
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item {{ Request::is('sekolah/sd') ? 'active' : '' }}" href="{{ url('/sekolah/sd') }}">SD</a></li>
                        <li><a class="dropdown-item {{ Request::is('sekolah/smp-fullday') ? 'active' : '' }}" href="{{ url('/sekolah/smp-fullday') }}">SMP Full Day</a></li>
                        <li><a class="dropdown-item {{ Request::is('sekolah/smp-boarding') ? 'active' : '' }}" href="{{ url('/sekolah/smp-boarding') }}">SMP Boarding</a></li>
                        <li><a class="dropdown-item {{ Request::is('sekolah/sma') ? 'active' : '' }}" href="{{ url('/sekolah/sma') }}">SMA</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link {{ Request::is('berita') ? 'active' : '' }}" href="{{ url('/berita') }}">Berita</a></li>
                <li class="nav-item"><a class="nav-link {{ Request::is('#kontak') ? 'active' : '' }}" href="#kontak">Kontak</a></li>
                
                <li class="nav-item"><a class="nav-link {{ Request::is('ppdb') ? 'active' : '' }}" href="{{ route('ppdb') }}">Daftar Sekolah</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Tambahkan padding agar konten tidak tertutup navbar -->
<div style="padding-top: 80px;"></div>

<!-- Banner -->
<div class="banner text-center text-white d-flex align-items-center justify-content-center" style="background: url('https://source.unsplash.com/1600x600/?school') no-repeat center center; background-size: cover; height: 300px;">
    <h1>Selamat Datang di Sekolah Qur'an Darul Fattah</h1>
</div>

<!-- Content Section -->
<section class="container my-5">
    <h2 class="text-center">Tentang Sekolah Kami</h2>
    <p class="text-center">Sekolah Qur'an Darul Fattah adalah lembaga pendidikan yang berfokus pada pembelajaran berbasis Al-Qur'an, teknologi, dan karakter.</p>
</section>

<!-- Kontak Section -->
<section id="kontak" class="container my-5">
    <h2 class="text-center">Kontak Sekolah</h2>
    <div class="row">
        <div class="col-md-6">
            <h5><i class="bi bi-telephone"></i> Telepon:</h5>
            <p>(021) 1234-5678</p>

            <h5><i class="bi bi-envelope"></i> Email:</h5>
            <p>info@darulfattah.ac.id</p>

            <h5><i class="bi bi-geo-alt"></i> Alamat:</h5>
            <p>Jl. Pendidikan No. 123, Jakarta</p>
        </div>
        <div class="col-md-6">
            <h5><i class="bi bi-map"></i> Lokasi Sekolah:</h5>
            <!-- Google Maps -->
            <div class="ratio ratio-16x9">
                <iframe 
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3952.196410320233!2d110.35632207408992!3d-7.871300278969861!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a57658d3f07b1%3A0xe92a2e4b5e92e72a!2sSMA%20Negeri%201!5e0!3m2!1sen!2sid!4v1649590104769!5m2!1sen!2sid" 
                    width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy">
                </iframe>
            </div>
        </div>
    </div>
</section>

@endsection


{{-- page styles --}}
@section('page-styles')
<style>
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }

</style>
@endsection

{{-- page scripts --}}
@section('page-scripts')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

@endsection