@extends('layout/main')

@section('content')
    <!-- Start Hero Section -->
    <div class="hero">
        <img src="{{ url('images/galeri.png') }}" class="d-block w-100 h-slider" alt="monggopro.com/images/info-booking.png">
    </div>
    <!-- End Hero Section -->

    <!-- Start Blog Section -->
    <div class="blog-section">
        <div class="container">
            <div class="row">
                @foreach ($params as $key => $value)
                    <div class="col-12 col-sm-6 col-md-4 mb-5">
                        <div class="post-entry" data-bs-toggle="modal" data-bs-target="#galleryModal-{{ $value->id }}">
                            <a class="post-thumbnail" href="javascript:void(0)">
                                @if (\App\Models\Galeri::TYPE_VIDEO == $value->type)
                                    <img class="img-fluid"
                                        src="https://img.youtube.com/vi/{{ $value->url }}/maxresdefault.jpg"
                                        alt="monggopro.com/galeri">
                                @elseif (\App\Models\Galeri::TYPE_IMAGE == $value->type)
                                    <img class="img-fluid" src="{{ url('/images/galeri/' . $value->url) }}"
                                        alt="monggopro.com/galeri">
                                @endif
                            </a>
                            <div class="post-content-entry">
                                <a href="javascript:void(0)">
                                    <h3>{{ $value->title }}</h3>
                                </a>
                                <div class="meta">
                                    <b>{{ date('d/m/Y H:i:s', strtotime($value->created_at)) }}</b>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="galleryModal-{{ $value->id }}" tabindex="-1" role="dialog"
                        aria-labelledby="galleryModal-{{ $value->id }}-Label" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    @if (\App\Models\Galeri::TYPE_VIDEO == $value->type)
                                        <iframe class="rounded" width="100%" height="500"
                                            src="https://www.youtube.com/embed/{{ $value->url }}"></iframe>
                                    @elseif (\App\Models\Galeri::TYPE_IMAGE == $value->type)
                                        <img class="img-fluid" src="{{ url('/images/galeri/' . $value->url) }}"
                                            alt="monggopro.com/galeri">
                                    @endif
                                    <h3>{{ $value->title }}</h3>
                                    <div class="meta">
                                        <b>{{ date('d/m/Y H:i:s', strtotime($value->created_at)) }}</b>
                                    </div>
                                    <p>{{ $value->keterangan }}</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                @if (count($params) < 1)
                    <div class="col-12 text-center">
                        <img src="{{ url('images/data-not-found-monggopro.png') }}"
                            class="img-fluid product-thumbnail w-50"
                            alt="{{ url('images/data-not-found-monggopro.png') }}">
                    </div>
                @endif
            </div>
        </div>
    </div>
    <!-- End Blog Section -->
@endsection