@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;
        min-height: 380px;
        display: flex;
        align-items: center;
    ">

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

        <h1 class="fw-bold">
            {{ $budaya->nama_budaya }}
        </h1>

        <p class="lead">
            {{ $budaya->jenis_budaya }}
        </p>

    </div>

</section>

<section class="py-5">

    <div class="container">

        <div class="row">

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

                @if($budaya->gambar)

                    <img src="{{ asset('storage/'.$budaya->gambar) }}"
                         class="img-fluid rounded shadow">

                @endif

            </div>

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

                <div class="card shadow border-0">

                    <div class="card-body">

                        <h3 class="fw-bold">
                            {{ $budaya->nama_budaya }}
                        </h3>

                        <hr>

                        <p>
                            <strong>Jenis Budaya</strong><br>
                            {{ $budaya->jenis_budaya }}
                        </p>

                        <p>
                            <strong>Asal Daerah</strong><br>
                            {{ $budaya->asal_daerah }}
                        </p>

                        <p>
                            <strong>Deskripsi</strong><br>
                            {{ $budaya->deskripsi }}
                        </p>

                        <a href="{{ route('frontend.data-budaya') }}"
                           class="btn btn-dark">

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

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

@endsection