@extends('layouts.app')

@section('title', 'Nagar Panchayat Manjhanpur | Uttar Pradesh')

@section('content')

{{-- ===== Hero Banner with Breadcrumb ===== --}}
<div class="page-hero" style="background-image: url('{{ asset('assets/image/lalitpur2.jpg') }}');">
    <div class="page-hero-overlay"></div>
    <div class="container position-relative">
        <h1 class="page-hero-title">
            {{  $menu->title ?? 'Page' }}
        </h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb page-hero-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ url('/') }}"><i class="fa-solid fa-house me-1"></i>Home</a>
                </li>
                @isset($menu)
                    <li class="breadcrumb-item">
                        <a href="{{ $menu->url ?? '#' }}">{{ $menu->title }}</a>
                    </li>
                @endisset
                @isset($submenu)
                    <li class="breadcrumb-item active" aria-current="page">{{ $submenu->title }}</li>
                @endisset
            </ol>
        </nav>
    </div>
</div>

<div class="container py-5">

   @if($content)
    <h2 class="mb-4 fw-bold">{{ $content->heading }}</h2>

    <div class="content-box">

    @if($content->image)
        <img src="{{ asset($content->image) }}" class="content-image rounded mb-4" alt="{{ $content->heading }}">
    @endif

    @if($content->content_type === 'text')
        <div class="content-body">
            {!! clean($content->body) !!}
        </div>

    @elseif($content->content_type === 'pdf' && $content->pdf_file)
        <div class="ratio ratio-16x9 mb-3">
            <iframe src="{{ asset($content->pdf_file) }}"></iframe>
        </div>
        <a href="{{ asset($content->pdf_file) }}" class="btn btn-primary" target="_blank" download>
            <i class="fa-solid fa-download me-1"></i> Download PDF
        </a>

    @elseif($content->content_type === 'video')
        @if($content->video_file)
            <div class="video-wrapper mb-3">
                <div class="ratio ratio-16x9">
                    <video src="{{ asset($content->video_file) }}" controls class="w-50 h-100"></video>
                </div>
            </div>
        @elseif($content->video_url)
            <div class="video-wrapper mb-3">
                <div class="ratio ratio-16x9">
                    <iframe src="{{ \App\Helpers\VideoHelper::toEmbedUrl($content->video_url) }}"
                            allowfullscreen
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
                </div>
            </div>
        @endif

    @elseif($content->content_type === 'link' && $content->link_url)
        @if(str_contains($content->link_url, 'maps/embed'))
            <div class="ratio ratio-16x9 mb-3">
                <iframe src="{{ $content->link_url }}" style="border:0;" allowfullscreen loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>
            </div>
        @else
            <a href="{{ $content->link_url }}" target="_blank" class="btn btn-primary">
                <i class="fa-solid fa-arrow-up-right-from-square me-1"></i> {{ $content->heading }}
            </a>
        @endif
    @endif

</div> {{-- .content-box end --}}
@else
    <h2 class="mb-4 fw-bold">{{ $submenu->title ?? $menu->title ?? 'Page' }}</h2>
    <p class="text-muted text-center py-5">No content available for this page yet.</p>
@endif

<style>
    /* ===== Hero Banner ===== */
    .page-hero {
        position: relative;
        background-size: cover;
        background-position: center;
        background-color: #1c1d46;
        padding: 3.5rem 0 2rem;
        min-height: 220px;
        display: flex;
        align-items: flex-end;
    }

    .page-hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
    }

    .page-hero-title {
        position: relative;
        color: #fff;
        font-weight: 800;
        font-size: 2.4rem;
        margin-bottom: 1rem;
    }

    .page-hero-breadcrumb {
        position: relative;
        background: transparent;
        margin-bottom: 0;
        padding: 0;
        font-size: .95rem;
    }

    .page-hero-breadcrumb .breadcrumb-item a {
        color: #b7deed;
        text-decoration: none;
    }

    .page-hero-breadcrumb .breadcrumb-item a:hover {
        text-decoration: underline;
    }

    .page-hero-breadcrumb .breadcrumb-item.active {
        color: #fff;
        font-weight: 600;
    }

    .page-hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        color: #fff;
        content: "/";
    }

    /* ===== Content Styling ===== */
    .content-image {
        max-width: 400px;
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
    }
    .video-wrapper {
        max-width: 400px;
        width: 100%;
        height: 250px;
    }

    .content-box {
    border: 1px solid #e5e5e5 !important;
    border-top: 4px solid #914249 !important;
    border-radius: 6px !important;
    padding: 1.75rem !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}                                                                 
</style>
@endsection