@extends('layouts.app')


@section('content')

<!-- Hero -->
<section
    class="hero"
    style="
        background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        url('{{ asset('images/gambar1.jpg') }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 420px;
        display: flex;
        align-items: center;
    ">

    <div class="container text-center text-white">


<div class="container">


<h1 class="fw-bold">

{{ $moment->judul_moment }}

</h1>


<p>

Dokumentasi Moment Budaya Mandailing Natal

</p>


</div>


</section>





<!-- DETAIL -->

<section class="py-5">


<div class="container">


<div class="row g-5 align-items-start">



<!-- GAMBAR -->

<div class="col-lg-6">


@if($moment->gambar)


<img src="{{ asset('storage/'.$moment->gambar) }}"
class="img-fluid rounded shadow"
style="width:100%;height:400px;object-fit:cover;">



@else


<div class="bg-light rounded d-flex align-items-center justify-content-center"
style="height:400px;">


<p class="text-muted">

Tidak ada gambar dokumentasi

</p>


</div>


@endif


</div>





<!-- INFORMASI -->

<div class="col-lg-6">


<span class="badge bg-success mb-3">

{{ $moment->kategori }}

</span>



<h2 class="fw-bold">

{{ $moment->judul_moment }}

</h2>



<p class="text-muted">


<i class="bi bi-calendar-event"></i>

{{ $moment->tanggal 
? date('d F Y', strtotime($moment->tanggal))
: '-' }}


</p>




<p class="text-muted">


<i class="bi bi-geo-alt-fill"></i>

{{ $moment->lokasi ?? '-' }}


</p>



<hr>



<p style="line-height:1.8;">


{{ $moment->deskripsi }}


</p>


</div>


</div>


</div>


</section>







<!-- VIDEO -->

@if($moment->video)


<section class="py-5 bg-light">


<div class="container">


<h3 class="fw-bold text-center mb-4">

Video Dokumentasi

</h3>



<div class="ratio ratio-16x9">


<iframe
src="{{ str_replace('watch?v=','embed/',$moment->video) }}"
allowfullscreen>
</iframe>


</div>


</div>


</section>


@endif





<!-- KEMBALI -->


<div class="container text-center pb-5">


<a href="{{ route('frontend.moment') }}"
class="btn btn-success">


<i class="bi bi-arrow-left"></i>

Kembali ke Moment


</a>


</div>



@endsection