@extends('layouts.welcome')

@section('content')
<link rel="stylesheet" href="/js/maxcdn/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    /*width: 70%;*/
    /*max-height: 100vh;*/
    margin: auto;
  }
  .lain-card {
    background-color: transparent;
    height: auto;
    text-align: center;
  }
  .lain-card img {
    width: 40rem;
    height: auto;
    border-radius: 0.9375rem;
  }
  .lain-card p {
    font-size: 20px;
    text-align: left;
   }
   .lain-card h1 {
    text-align: left;
   }
   .btn.btn-outline-secondary.btn-block.text-left:hover {
    background-color: transparent !important;
    color: black;
    }
    .btn.btn-outline-secondary.btn-block.text-left p{
    font-size: 1.5rem;
    }

</style>
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: ">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            @foreach(\App\Models\Slider::where('status_aktif', 'AKTIF')->get() as $key => $slider)
                <li data-target="#myCarousel" data-slide-to="{{$key}}" class="{{$key == 0 ? 'active':''}}"></li>
            @endforeach
        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            @foreach(\App\Models\Slider::where('status_aktif', 'AKTIF')->get() as $key => $slider)
            <div class="item {{$key == 0 ? 'active':''}}">
                <div style="width: 100%; height: 44rem; overflow: hidden;">
                    <img src="/images/slider/{{$slider->foto}}" alt="{{$key}}"
                         style="width: 100%; height:110%; object-fit: cover; object-position: center;">
                  </div>
                {{-- <div class="carousel-caption">
                    <h3>{{$slider->judul}}</h3>
                    <p>{{$slider->keterangan}}</p>
                </div> --}}
            </div>
            @endforeach
        </div>
        
        <a class="left carousel-control" href="#myCarousel" style="background: transparent" data-slide="prev">
          <span class="icon-prev fa fa-chevron-left"></span><span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" style="background: transparent" data-slide="next">
          <span class="icon-next fa fa-chevron-right"></span><span class="sr-only">Next</span>
        </a>
    </div>
    <br>

<section>
    
    <div class="mt-4">
    <br><br>
    </div>
    <div class="row ml-5 mr-5">

        @foreach ( \App\Models\LandingPage::where('status', 'AKTIF')->orderBy('kode_posisi')->get() as $key => $landingPage )
            <div class="lain-card pl-10 mb-5">
                <div class="row">
                    {{-- gambar kanan --}}
                    @if ($loop->iteration % 2 == 0)
                      <div class="col-md-6">
                            <h1><b>{{ $landingPage['judul'] }}</b></h1>
                            <br>
                            <p>{{ $landingPage['deskripsi'] }}</p>
                            <a href="{{ asset('file/landing/' . $landingPage['gambar']) }}" download="{{ $landingPage['judul'] }}" class="btn btn-danger float-left mb-1">
                                <i class="fas fa-download"></i> Download Image
                            </a>
                        </div>
                        <div class="col-md-6">
                            <img src="file/landing/{{ $landingPage['gambar'] }}" class="img-fluid" alt="Landing Page Image">
                        </div>
                    {{-- gambar kiri --}}
                    @else
                        <div class="col-md-6">
                            <img src="file/landing/{{ $landingPage['gambar'] }}" class="img-fluid" alt="Landing Page Image">
                        </div>
                        <div class="col-md-6">
                            <h1><b>{{ $landingPage['judul'] }}</b></h1>
                            <br>
                            <p>{{ $landingPage['deskripsi'] }}</p>
                            <a href="{{ asset('file/landing/' . $landingPage['gambar']) }}" download="{{ $landingPage['judul'] }}" class="btn btn-danger float-left mb-1">
                                <i class="fas fa-download"></i> Download Image
                            </a>
                        </div>
                        
                    @endif
                    
                </div> 

            </div>
        @endforeach
    </div>
    <div class="m-5" style="background: transparent">
        <div class="col-md-12 text-left">
            <br>
            <h1><b>Pertanyaan yang sering di ajukan</b></h1>
            @foreach (\App\Models\Pertanyaan::where('status', 'AKTIF')->orderBy('posisi')->get() as $key => $pertanyaan)
                @php
                    // Generate a unique ID for each button and collapse content
                    $buttonId = 'button_' . $key;
                    $collapseId = 'collapse_' . $key;
                @endphp

                <button type="button" class="btn btn-outline-secondary btn-lg btn-block text-left mt-4 d-flex justify-content-between" data-toggle="collapse" data-target="#{{$collapseId}}">
                    <span style="font-size: 1.2rem;">{{ $loop->iteration }}. {{$pertanyaan['pertanyaan']}}</span>
                    <span style="font-size: 1.2rem;"><i class="fas fa-caret-down"></i></span>
                </button>
                <div id="{{$collapseId}}" class="collapse ml-4" style="font-size: 20px;">
                    {{$pertanyaan['jawaban']}}
                </div>
            @endforeach
            {{-- <ul>
                <li>Pastikan perangkat PC Desktop, Laptop, serta HP atau Smartphone anda memiliki kuota akses internet yang mencukupi</li>
                <li>Sangat direkomendasikan menggunakan browser Google Chrome atau Mozilla Firefox versi terbaru</li>
                <li>Pastikan anda membaca informasi dan ketentuan dan mengikuti instruksi pendaftaran dengan benar</li>
                <li>Masukan seluruh data dengan teliti dan benar sebelum disimpan, data tidak bisa lagi diubah setelah disimpan</li>
                <li>Jika mengalami kesulitan dan atau memiliki pertanyaan, silahkan menghubungi operator PPDB Online unit melalui fitur pesan di pojok kiri bawah</li>
            </ul> --}}
        </div>
    </div>
    <div class="col-md-12">
        <div style="background:transparent; height: 30rem;">
                @php
                    $data = \App\Models\AppConfig::first(); // Assuming you want to get the first record
                @endphp
                @if ($data)
                    <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
                            src="{{ $data->map_url }}" 
                            aria-label="{{ $data->map_label }}"
                            style="width: 100%; height: 100%;">
                    </iframe>
                @else
                    <p>No AppConfig data found</p>
                @endif
        </div>
    </div>
</section>
@endsection

@push('custom-scripts')
@endpush