@extends('layouts.frontend.master')

@section('content')
<section class="location-detail-page">
    <div class="location-detail-shell">
        <div class="location-detail-hero">
            <span class="location-detail-kicker">{{ $marker->category?->name ?? 'TomohonHebat Maps' }}</span>
            <h1>{{ $marker->title }}</h1>
            <p>{{ $marker->description ?: strip_tags($marker->popup_content ?: 'Lokasi ini terdaftar di TomohonHebat Maps.') }}</p>
            <div class="location-detail-actions">
                <a href="{{ route('peta.index') }}" class="location-detail-btn secondary">
                    <i class="fas fa-arrow-left"></i>
                    <span>Kembali ke Peta</span>
                </a>
                <a href="{{ route('peta.index') }}?focus={{ $marker->id }}" class="location-detail-btn primary">
                    <i class="fas fa-map-location-dot"></i>
                    <span>Buka di Peta</span>
                </a>
            </div>
        </div>

        <div class="location-detail-meta">
            <div class="location-meta-item">
                <span>Koordinat</span>
                <strong>{{ number_format($marker->lat, 5) }}, {{ number_format($marker->lng, 5) }}</strong>
            </div>
            <div class="location-meta-item">
                <span>Layer</span>
                <strong>{{ $marker->layer?->name ?? 'Peta umum' }}</strong>
            </div>
            <div class="location-meta-item">
                <span>Kategori</span>
                <strong>{{ $marker->category?->name ?? 'Tempat' }}</strong>
            </div>
        </div>

        @if($nearbyLocations->isNotEmpty())
            <div class="location-detail-nearby">
                <div class="section-heading">
                    <span>Lokasi terdekat</span>
                    <h2>Masih dalam jangkauan peta yang sama</h2>
                </div>

                <div class="location-nearby-list">
                    @foreach($nearbyLocations as $nearby)
                        <a href="{{ route('peta.location.detail', $nearby->slug) }}" class="location-nearby-item">
                            <div>
                                <span>{{ $nearby->category?->name ?? 'Lokasi' }}</span>
                                <strong>{{ $nearby->title }}</strong>
                                <p>{{ $nearby->description ?: strip_tags($nearby->popup_content ?: 'Lokasi terdekat pada peta publik.') }}</p>
                            </div>
                            <i class="fas fa-arrow-up-right-from-square"></i>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</section>
@endsection

@section('stylesheet')
<style>
    .location-detail-page {
        min-height: calc(100vh - 120px);
        background:
            radial-gradient(circle at top left, rgba(66, 133, 244, 0.16), transparent 34%),
            linear-gradient(180deg, #eef4ff 0%, #f8fafc 52%, #ffffff 100%);
        padding: 48px 20px 72px;
    }

    .location-detail-shell {
        max-width: 960px;
        margin: 0 auto;
        display: grid;
        gap: 24px;
    }

    .location-detail-hero,
    .location-detail-meta,
    .location-detail-nearby {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 24px;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
    }

    .location-detail-hero {
        padding: 32px;
    }

    .location-detail-kicker,
    .location-meta-item span,
    .section-heading span,
    .location-nearby-item span {
        display: inline-flex;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        color: #4f46e5;
    }

    .location-detail-hero h1,
    .section-heading h2 {
        margin: 10px 0 14px;
        color: #0f172a;
        line-height: 1.05;
    }

    .location-detail-hero h1 {
        font-size: clamp(2rem, 4vw, 3.5rem);
    }

    .location-detail-hero p,
    .location-nearby-item p {
        margin: 0;
        color: #475569;
        line-height: 1.8;
        font-size: 15px;
    }

    .location-detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 24px;
    }

    .location-detail-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 18px;
        border-radius: 999px;
        text-decoration: none;
        font-weight: 600;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .location-detail-btn:hover {
        transform: translateY(-1px);
    }

    .location-detail-btn.primary {
        background: #1d4ed8;
        color: #fff;
        box-shadow: 0 16px 30px rgba(29, 78, 216, 0.22);
    }

    .location-detail-btn.secondary {
        background: #eff6ff;
        color: #1e3a8a;
    }

    .location-detail-meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        overflow: hidden;
    }

    .location-meta-item {
        padding: 24px 28px;
        background: rgba(248, 250, 252, 0.72);
    }

    .location-meta-item strong,
    .location-nearby-item strong {
        display: block;
        margin-top: 8px;
        color: #0f172a;
        font-size: 18px;
    }

    .location-detail-nearby {
        padding: 28px;
    }

    .location-nearby-list {
        display: grid;
        gap: 14px;
        margin-top: 18px;
    }

    .location-nearby-item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        padding: 18px 20px;
        border-radius: 20px;
        text-decoration: none;
        background: #f8fafc;
        border: 1px solid rgba(148, 163, 184, 0.22);
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .location-nearby-item:hover {
        transform: translateY(-2px);
        border-color: rgba(59, 130, 246, 0.32);
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
    }

    .location-nearby-item i {
        color: #2563eb;
        margin-top: 6px;
    }

    @media (max-width: 768px) {
        .location-detail-page {
            padding: 32px 16px 56px;
        }

        .location-detail-hero,
        .location-detail-nearby {
            padding: 24px;
        }

        .location-detail-meta {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection