@extends('admin.layouts.app')

@section('title', 'Detail Wisata')
@section('page_title', $wisata->title)
@section('page_subtitle', 'Detail destinasi untuk demo Flutter dan AR')

@section('content')
<div class="row g-3">
    <div class="col-lg-7">
        <div class="card soft-card">
            <img src="{{ $wisata->image_url }}" class="img-fluid w-100 card-img-top" style="max-height:420px; object-fit:cover;" alt="{{ $wisata->title }}">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2 mb-3">
                    <span class="badge text-bg-ocean">{{ $wisata->kategori?->nama }}</span>
                    @if($wisata->model_path)<span class="badge text-bg-info">Tombol AR aktif</span>@endif
                    @if($wisata->is_video)<span class="badge text-bg-dark">Video player aktif</span>@endif
                </div>
                <p class="text-muted">{{ $wisata->short_description }}</p>
                <h2 class="h6">Overview</h2>
                <p>{{ $wisata->overview }}</p>
                <div class="d-flex flex-wrap gap-2">
                    @if($wisata->google_maps_url)
                        <a class="btn btn-nature" href="{{ $wisata->google_maps_url }}" target="_blank" rel="noopener"><i class="bi bi-geo-alt me-1"></i>Buka Google Maps</a>
                    @endif
                    <a class="btn btn-outline-ocean" href="{{ route('admin.wisata.edit', $wisata) }}"><i class="bi bi-pencil me-1"></i>Edit</a>
                    <a class="btn btn-outline-secondary" href="{{ route('admin.wisata.index') }}">Kembali</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card soft-card mb-3">
            <div class="card-body">
                <h2 class="h6 mb-3">Informasi</h2>
                <dl class="row mb-0">
                    <dt class="col-5">Rating</dt><dd class="col-7">{{ $wisata->rating_label }}</dd>
                    <dt class="col-5">Distance</dt><dd class="col-7">{{ $wisata->distance ?: '-' }}</dd>
                    <dt class="col-5">Elevation</dt><dd class="col-7">{{ $wisata->elevation ?: '-' }}</dd>
                    <dt class="col-5">Tiket Parkir</dt><dd class="col-7">{{ $wisata->tiket_parkir ?: '-' }}</dd>
                    <dt class="col-5">Jam</dt><dd class="col-7">{{ $wisata->jam_operasional ?: '-' }}</dd>
                    <dt class="col-5">Koordinat</dt><dd class="col-7">{{ $wisata->latitude }}, {{ $wisata->longitude }}</dd>
                </dl>
            </div>
        </div>
        @if($wisata->model_path)
            <div class="card soft-card mb-3">
                <div class="card-body">
                    <h2 class="h6 mb-3">Preview Model AR</h2>
                    <model-viewer class="w-100 border rounded" style="height:320px" src="{{ $wisata->fileUrl($wisata->model_path) }}" camera-controls auto-rotate></model-viewer>
                </div>
            </div>
        @endif
        @if($wisata->is_video && $wisata->video_path)
            <div class="card soft-card">
                <div class="card-body">
                    <h2 class="h6 mb-3">Video Wisata</h2>
                    <video class="w-100 rounded border" src="{{ $wisata->fileUrl($wisata->video_path) }}" controls></video>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
@endpush