@extends('layouts.admin')

@section('content')

<div class="container-fluid">


    {{-- Judul --}}
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold text-success">
                Detail Moment Budaya
            </h2>

            <p class="text-muted">
                Informasi lengkap dokumentasi budaya
            </p>

        </div>


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

            <i class="bi bi-arrow-left me-2"></i>
            Kembali

        </a>

    </div>





    <div class="card shadow-sm">


        <div class="card-body">


            <div class="row g-4">



                {{-- Gambar --}}
                <div class="col-md-5">


                    @if($moment->gambar)


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


                    @else


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


                        <span class="text-muted">

                            Tidak ada gambar

                        </span>


                    </div>


                    @endif


                </div>





                {{-- Informasi --}}
                <div class="col-md-7">


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

                        {{ $moment->kategori }}

                    </span>




                    <h3 class="fw-bold">

                        {{ $moment->judul_moment }}

                    </h3>




                    <hr>




                    <p>

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

                        <strong>
                            Tanggal:
                        </strong>

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

                    </p>




                    <p>

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

                        <strong>
                            Lokasi:
                        </strong>

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

                    </p>





                    <hr>



                    <h5 class="fw-bold">
                        Deskripsi
                    </h5>


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

                        {{ $moment->deskripsi }}

                    </p>



                </div>


            </div>





            {{-- Video --}}
            @if($moment->video)


            <hr class="my-5">


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

                Video Dokumentasi

            </h4>



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


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


            </div>


            @endif




        </div>


    </div>


</div>


@endsection