@extends('layouts.admin')

@section('title', 'Manajemen Konten Utama')

@section('breadcrumbs', 'Beranda')

@section('second-breadcrumb')
    <li>Overview Tampilan Utama</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card shadow-sm">
            <div class="card-body">
                
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Berhasil!</strong> {{session('success')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="m-0"><i class="fa fa-desktop text-warning"></i> Preview Konten Lampung Wedding Light</h3>
                    <a href="{{route('heros.edit', [$heros[0]->id])}}" class="btn btn-warning text-white shadow-sm">
                        <i class="fa fa-edit"></i> Edit Semua Konten
                    </a>
                </div>

                <div class="card mb-4 bg-light border-left-warning">
                    <div class="card-header bg-dark text-white">
                        <h5 class="mb-0">1. Bagian Banner Utama (Hero Section)</h5>
                    </div>
                    <div class="card-body p-0">
                        <div style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('{{asset('user/images/'.$heros[0]->image)}}') center center; 
                                    background-size: cover; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white;">
                            <h1 style="color: #d4af37; font-weight: bold;">{{ $heros[0]->title ?? 'The Art of Wedding Lighting' }}</h1>
                            <p class="px-5">{{ $heros[0]->subtitle ?? 'Menciptakan Atmosfer Magis dengan Tata Cahaya Profesional' }}</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<style>
    .border-left-warning { border-left: 5px solid #ffc107 !important; }
    .border-left-success { border-left: 5px solid #28a745 !important; }
    .card-header h5 { font-size: 1rem; letter-spacing: 1px; }
</style>
@endsection