@extends('public.layout.app') {{-- change if your front layout is different --}}
@section('title', $event->title)

@section('body')
@php
    $img = $event->cover_image ?? $event->thumbnail ?? $event->image ?? null; // adjust
    $start = $event->start_date ?? $event->date ?? null;
    $end   = $event->end_date ?? null;
    $loc   = $event->location ?? null;
@endphp

<section class="section pt-5">
    <div class="container">

        {{-- Header --}}
        <div class="glass shadow-soft p-4 p-lg-5 mb-4">
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                <div>
                    <a href="{{ route('front.events.index') }}" class="btn btn-outline-light btn-sm mb-3">
                        <i class="fa-solid fa-arrow-left me-1"></i> {{ __('front.back_to_events') }}
                    </a>

                    <div class="d-flex flex-wrap gap-2 mb-2">
                        @if($start)
                            <span class="badge-soft">
                                <i class="fa-regular fa-calendar me-1"></i>
                                {{ \Carbon\Carbon::parse($start)->format('Y-m-d') }}
                            </span>
                        @else
                            <span class="badge-soft">
                                <i class="fa-regular fa-calendar me-1"></i>
                                {{ optional($event->created_at)->format('Y-m-d') }}
                            </span>
                        @endif

                        @if($end)
                            <span class="badge-soft">
                                <i class="fa-regular fa-calendar-check me-1"></i>
                                {{ __('front.end') }}: {{ \Carbon\Carbon::parse($end)->format('Y-m-d') }}
                            </span>
                        @endif

                        @if($loc)
                            <span class="badge-soft">
                                <i class="fa-solid fa-location-dot me-1"></i>
                                {{ $loc }}
                            </span>
                        @endif

                        <span class="badge-soft">
                            <i class="fa-solid fa-link me-1"></i>
                            {{ $event->slug }}
                        </span>
                    </div>

                    <h2 class="fw-extrabold mb-0" style="letter-spacing:-.02em;">
                        {{ $event->title }}
                    </h2>

                    @if($event->excerpt)
                        <p class="text-muted2 mb-0 mt-2" style="max-width:900px;">
                            {{ $event->excerpt }}
                        </p>
                    @endif
                </div>

                <div class="text-end">
                    <a class="btn btn-info-soft" href="{{ route('front.events.index') }}">
                        <i class="fa-solid fa-list me-1"></i> {{ __('front.all_events') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="row g-3">
            {{-- Content --}}
            <div class="col-lg-8">
                <div class="card-soft shadow-soft overflow-hidden">
                    @if($img)
                        <div class="thumb-wrap">
                            <img class="thumb-img" src="{{ asset('storage/'.$img) }}" alt="{{ $event->title }}">
                        </div>
                    @endif

                    <div class="p-3 p-lg-4">
                        <h5 class="fw-bold mb-3">
                            <i class="fa-regular fa-file-lines me-1 text-muted2"></i>
                            {{ __('front.event_details') }}
                        </h5>

                        <div class="text-muted2" style="line-height:1.9;">
                            {!! $event->description ?? $event->body ?? nl2br(e($event->content ?? '')) !!}
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="col-lg-4">
                <div class="card-soft shadow-soft p-3 p-lg-4 mb-3">
                    <h6 class="fw-bold mb-3">
                        <i class="fa-regular fa-id-card me-1 text-muted2"></i> {{ __('front.event_info') }}
                    </h6>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.start') }}</span>
                        <span class="fw-semibold">
                            {{ $start ? \Carbon\Carbon::parse($start)->format('Y-m-d') : '—' }}
                        </span>
                    </div>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.end') }}</span>
                        <span class="fw-semibold">
                            {{ $end ? \Carbon\Carbon::parse($end)->format('Y-m-d') : '—' }}
                        </span>
                    </div>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.location') }}</span>
                        <span class="fw-semibold">{{ $loc ?? '—' }}</span>
                    </div>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.updated') }}</span>
                        <span class="fw-semibold">{{ optional($event->updated_at)->format('Y-m-d') }}</span>
                    </div>
                </div>

                <div class="glass shadow-soft p-3 p-lg-4">
                    <h6 class="fw-bold mb-2">
                        <i class="fa-solid fa-lightbulb me-1 text-muted2"></i> {{ __('front.tip') }}
                    </h6>
                    <p class="text-muted2 mb-0">
                        {{ __('front.use_search_in_events_list_to_find_events_by_title_locat') }}
                    </p>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection