@extends('layout.app')

@section('content')
    <div class="breadcumb-wrapper" data-bg-src="assets/img/bg/breadcumb-bg.jpg">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">{{ $translation?->name ?? $city->name }}</h1>
                <ul class="breadcumb-menu">
                    <li><a href="{{ url(app()->getLocale()) }}">Home</a></li>
                    <li>{{ $translation?->name ?? $city->name }}</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="space-top space-extra-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    @if($city->image)
                        <div class="mb-4">
                            <img src="{{ url('storage/' . $city->image) }}"
                                 alt="{{ $translation?->name ?? $city->name }}"
                                 class="img-fluid rounded"
                                 style="width: 100%; height: 400px; object-fit: cover;">
                        </div>
                    @endif

                    @if($translation?->description)
                        <div class="mb-4">
                            {!! $translation->description !!}
                        </div>
                    @endif

                    @if($city->images && is_array($city->images) && count($city->images) > 0)
                        <div class="row">
                            <div class="col-12">
                                <h3 class="mb-3">{{ __('city.gallery') }}</h3>
                            </div>
                            @foreach($city->images as $image)
                                <div class="col-md-4 mb-3">
                                    <img src="{{ url('storage/' . $image) }}"
                                         alt="{{ $translation?->name ?? $city->name }}"
                                         class="img-fluid rounded"
                                         style="width: 100%; height: 200px; object-fit: cover;">
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <div class="col-lg-4">
                    <div class="sidebar-area">

                        @if($city->tours && $city->tours->count() > 0)
                            <div class="widget widget_categories mt-4">
                                <h3 class="widget_title">{{ __('city.available_tours') }}</h3>
                                <ul>
                                    @foreach($city->tours as $tour)
                                        @php
                                            $language = \App\Models\Language::query()->where('locale', app()->getLocale())->first()->id;
                                            $tourTranslation = $tour->translations->where('language_id', $language)->first();
                                        @endphp
                                        <li>
                                            <a href="{{ url(app()->getLocale() . '/tours/' . ($tourTranslation?->slug ?? $tour->slug)) }}">
                                                {{ $tourTranslation?->name ?? $tour->name }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection