@extends('layouts.app')

@section('title', $roadTrip->title.' — Coaster World')

@push('head')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
@endpush

@section('content')
@php
    $formatTravelMinutes = static function (int $minutes): string {
        if ($minutes < 60) {
            return $minutes.' min';
        }

        $hours = intdiv($minutes, 60);
        $rest = $minutes % 60;

        return $rest > 0 ? $hours.' h '.str_pad((string) $rest, 2, '0', STR_PAD_LEFT) : $hours.' h';
    };
    $transportIcons = [
        'car' => '🚗',
        'train' => '🚆',
        'plane' => '✈️',
        'shuttle' => '🚌',
        'other' => '🧭',
    ];
@endphp
<section class="road-trip-detail-hero">
    <div class="container">
        <a href="{{ route('road-trips.index') }}" class="road-trip-back">← {{ __('ui.road_trip_back') }}</a>
        <div class="road-trip-detail-hero-grid">
            <div>
                <div class="road-trip-hero-badges">
                    <span>{{ __('ui.road_trip_status_'.$roadTrip->status) }}</span>
                    <em>{{ trans_choice('ui.road_trip_stop_count', $roadTrip->stops->count(), ['count' => $roadTrip->stops->count()]) }}</em>
                </div>
                <h1>{{ $roadTrip->title }}</h1>
                @if($roadTrip->description)
                    <p>{{ $roadTrip->description }}</p>
                @endif
                <div class="road-trip-hero-meta">
                    <span>📅 {{ $roadTrip->starts_on?->format('d/m/Y') ?: __('ui.road_trip_dates_tbd') }}@if($roadTrip->ends_on && $roadTrip->starts_on && !$roadTrip->ends_on->equalTo($roadTrip->starts_on)) → {{ $roadTrip->ends_on->format('d/m/Y') }}@endif</span>
                    <span>👤 {{ $roadTrip->owner?->username ?: $roadTrip->owner?->name }}</span>
                    @if($durationDays)
                        <span>🧳 {{ trans_choice('ui.road_trip_days', $durationDays, ['count' => $durationDays]) }}</span>
                    @endif
                </div>
            </div>
            @if($canManage)
                <details class="road-trip-manage" @if($errors->has('title') || $errors->has('status')) open @endif>
                    <summary class="button button-ghost">{{ __('ui.road_trip_manage') }}</summary>
                    <form method="post" action="{{ route('road-trips.update', $roadTrip) }}" class="road-trip-manage-form">
                        @csrf
                        @method('PUT')
                        <label>
                            <span>{{ __('ui.road_trip_title_label') }}</span>
                            <input type="text" name="title" required maxlength="160" value="{{ old('title', $roadTrip->title) }}">
                        </label>
                        <div class="road-trip-date-grid">
                            <label><span>{{ __('ui.road_trip_start') }}</span><input type="date" name="starts_on" value="{{ old('starts_on', $roadTrip->starts_on?->format('Y-m-d')) }}"></label>
                            <label><span>{{ __('ui.road_trip_end') }}</span><input type="date" name="ends_on" value="{{ old('ends_on', $roadTrip->ends_on?->format('Y-m-d')) }}"></label>
                        </div>
                        <label>
                            <span>{{ __('ui.road_trip_status') }}</span>
                            <select name="status">
                                @foreach(['planned','active','completed','cancelled'] as $status)
                                    <option value="{{ $status }}" @selected(old('status', $roadTrip->status) === $status)>{{ __('ui.road_trip_status_'.$status) }}</option>
                                @endforeach
                            </select>
                        </label>
                        <label><span>{{ __('ui.road_trip_description') }}</span><textarea name="description" rows="3" maxlength="2000">{{ old('description', $roadTrip->description) }}</textarea></label>
                        <button class="button button-primary" type="submit">{{ __('ui.road_trip_save') }}</button>
                    </form>
                </details>
            @endif
        </div>
    </div>
</section>

<section class="road-trip-stats-strip">
    <div class="container road-trip-stats-grid road-trip-stats-grid-v2">
        <div><strong>{{ $uniqueParks }}</strong><span>{{ __('ui.road_trip_stat_parks') }}</span></div>
        <div><strong>{{ $countryCount }}</strong><span>{{ __('ui.road_trip_stat_countries') }}</span></div>
        <div><strong>{{ $acceptedMembers->count() }}</strong><span>{{ __('ui.road_trip_stat_travelers') }}</span></div>
        <div><strong>{{ $completionPercent }}%</strong><span>{{ __('ui.road_trip_stat_progress') }}</span></div>
        <div><strong>{{ $knownLegs > 0 ? '≈ '.number_format($tripDistanceKm, 0, ',', ' ') : '—' }}</strong><span>{{ __('ui.road_trip_v2_distance') }}</span></div>
        <div><strong>{{ $knownLegs > 0 ? $formatTravelMinutes($tripTravelMinutes) : '—' }}</strong><span>{{ __('ui.road_trip_v2_travel_time') }}</span></div>
    </div>
</section>

<section class="section road-trip-v2-planner-section">
    <div class="container">
        @if(session('road_trip_status'))
            <div class="admin-success">{{ session('road_trip_status') }}</div>
        @endif
        @if($errors->any())
            <div class="admin-error">{{ $errors->first() }}</div>
        @endif

        <div class="section-heading split-heading road-trip-v2-heading">
            <div>
                <span class="eyebrow">{{ __('ui.road_trip_v2_planner_kicker') }}</span>
                <h2>{{ __('ui.road_trip_v2_planner_title') }}</h2>
                <p>{{ __('ui.road_trip_v2_planner_intro') }}</p>
            </div>
            <span class="road-trip-v2-data-badge">{{ __('ui.road_trip_v2_mapped_stops', ['mapped' => $mappedStops, 'total' => $roadTrip->stops->count()]) }}</span>
        </div>

        <div class="road-trip-v2-command-grid">
            <section class="road-trip-v2-map-card">
                <div class="road-trip-v2-card-head">
                    <div><span>🗺️</span><div><strong>{{ __('ui.road_trip_v2_map_title') }}</strong><small>{{ __('ui.road_trip_v2_map_help') }}</small></div></div>
                    @if($knownLegs > 0)
                        <em>≈ {{ number_format($tripDistanceKm, 0, ',', ' ') }} km</em>
                    @endif
                </div>
                @if($routeMapPoints->isNotEmpty())
                    <div id="road-trip-route-map" class="road-trip-v2-map" aria-label="{{ __('ui.road_trip_v2_map_title') }}"></div>
                @else
                    <div class="road-trip-v2-map-empty"><span>📍</span><strong>{{ __('ui.road_trip_v2_no_coordinates') }}</strong><p>{{ __('ui.road_trip_v2_map_unavailable') }}</p></div>
                @endif
                <p class="road-trip-v2-disclaimer">{{ __('ui.road_trip_v2_route_disclaimer') }}</p>
            </section>

            <section class="road-trip-v2-day-card">
                <div class="road-trip-v2-card-head">
                    <div><span>📆</span><div><strong>{{ __('ui.road_trip_v2_day_planner') }}</strong><small>{{ __('ui.road_trip_v2_day_planner_help') }}</small></div></div>
                </div>
                @if($plannerDays->isEmpty() && $unscheduledStops->isEmpty())
                    <div class="road-trip-v2-day-empty">{{ __('ui.road_trip_v2_schedule_empty') }}</div>
                @else
                    <div class="road-trip-v2-days">
                        @foreach($plannerDays as $day)
                            <article class="road-trip-v2-day {{ $day['is_empty'] ? 'is-empty' : '' }}">
                                <div class="road-trip-v2-day-date">
                                    <span>{{ __('ui.road_trip_v2_day_number', ['number' => $day['number']]) }}</span>
                                    <strong>{{ $day['date']->locale(app()->getLocale())->translatedFormat('D d M') }}</strong>
                                </div>
                                <div class="road-trip-v2-day-stops">
                                    @forelse($day['stops'] as $dayStop)
                                        @php
                                            $dayPt = $dayStop->park?->translations?->firstWhere('locale', app()->getLocale()) ?? $dayStop->park?->translations?->firstWhere('locale', 'en');
                                        @endphp
                                        <a href="#road-trip-stop-{{ $dayStop->id }}">
                                            <b>{{ $dayStop->arrival_time ? substr($dayStop->arrival_time, 0, 5) : '•' }}</b>
                                            <span>{{ $dayStop->title ?: ($dayPt?->name ?: $dayStop->park?->official_name) }}</span>
                                        </a>
                                    @empty
                                        <small>{{ __('ui.road_trip_v2_day_empty') }}</small>
                                    @endforelse
                                </div>
                            </article>
                        @endforeach
                        @if($unscheduledStops->isNotEmpty())
                            <article class="road-trip-v2-day is-unscheduled">
                                <div class="road-trip-v2-day-date"><span>{{ __('ui.road_trip_v2_unscheduled') }}</span><strong>{{ $unscheduledStops->count() }}</strong></div>
                                <div class="road-trip-v2-day-stops">
                                    @foreach($unscheduledStops as $dayStop)
                                        <a href="#road-trip-stop-{{ $dayStop->id }}"><b>?</b><span>{{ $dayStop->title ?: $dayStop->park?->official_name }}</span></a>
                                    @endforeach
                                </div>
                            </article>
                        @endif
                    </div>
                @endif
            </section>
        </div>
    </div>
</section>

<section class="section road-trip-v2-route-section">
    <div class="container road-trip-detail-layout">
        <main>
            <div class="section-heading split-heading">
                <div><span class="eyebrow">{{ __('ui.road_trip_route_kicker') }}</span><h2>{{ __('ui.road_trip_route_title') }}</h2><p>{{ __('ui.road_trip_route_intro') }}</p></div>
                @if($canManage)
                    <details class="road-trip-add-stop" @if($errors->has('park_id')) open @endif>
                        <summary class="button button-primary button-small">+ {{ __('ui.road_trip_add_stop') }}</summary>
                        <form method="post" action="{{ route('road-trips.stops.store', $roadTrip) }}" class="road-trip-stop-form">
                            @csrf
                            <label>
                                <span>{{ __('ui.road_trip_park') }}</span>
                                <select name="park_id" required>
                                    <option value="">{{ __('ui.road_trip_choose_park') }}</option>
                                    @foreach($parks as $park)
                                        @php
                                            $parkTranslation = $park->translations->firstWhere('locale', app()->getLocale()) ?? $park->translations->firstWhere('locale', 'en');
                                        @endphp
                                        <option value="{{ $park->id }}" @selected(old('park_id') == $park->id)>{{ $parkTranslation?->name ?: $park->official_name }}</option>
                                    @endforeach
                                </select>
                            </label>
                            <div class="road-trip-date-grid">
                                <label><span>{{ __('ui.road_trip_stop_start') }}</span><input type="date" name="starts_on" value="{{ old('starts_on') }}"></label>
                                <label><span>{{ __('ui.road_trip_stop_end') }}</span><input type="date" name="ends_on" value="{{ old('ends_on') }}"></label>
                            </div>
                            <div class="road-trip-date-grid">
                                <label><span>{{ __('ui.road_trip_v2_arrival_time') }}</span><input type="time" name="arrival_time" value="{{ old('arrival_time') }}"></label>
                                <label><span>{{ __('ui.road_trip_v2_departure_time') }}</span><input type="time" name="departure_time" value="{{ old('departure_time') }}"></label>
                            </div>
                            <label><span>{{ __('ui.road_trip_stop_title') }}</span><input type="text" name="title" maxlength="160" value="{{ old('title') }}" placeholder="{{ __('ui.road_trip_stop_title_placeholder') }}"></label>
                            <details class="road-trip-v2-form-section">
                                <summary>🚗 {{ __('ui.road_trip_v2_transport_section') }}</summary>
                                <label>
                                    <span>{{ __('ui.road_trip_v2_transport_mode') }}</span>
                                    <select name="transport_mode">
                                        @foreach(['car','train','plane','shuttle','other'] as $mode)
                                            <option value="{{ $mode }}" @selected(old('transport_mode', 'car') === $mode)>{{ __('ui.road_trip_v2_transport_'.$mode) }}</option>
                                        @endforeach
                                    </select>
                                </label>
                                <label><span>{{ __('ui.road_trip_v2_travel_override') }}</span><input type="number" min="1" max="2880" name="travel_minutes_override" value="{{ old('travel_minutes_override') }}" placeholder="{{ __('ui.road_trip_v2_travel_override_placeholder') }}"><small>{{ __('ui.road_trip_v2_travel_override_help') }}</small></label>
                                <label><span>{{ __('ui.road_trip_v2_travel_notes') }}</span><textarea name="travel_notes" rows="2" maxlength="2000">{{ old('travel_notes') }}</textarea></label>
                            </details>
                            <details class="road-trip-v2-form-section">
                                <summary>🛏️ {{ __('ui.road_trip_v2_lodging_section') }}</summary>
                                <label><span>{{ __('ui.road_trip_v2_lodging_name') }}</span><input type="text" name="lodging_name" maxlength="160" value="{{ old('lodging_name') }}"></label>
                                <label><span>{{ __('ui.road_trip_v2_lodging_notes') }}</span><textarea name="lodging_notes" rows="2" maxlength="2000">{{ old('lodging_notes') }}</textarea></label>
                            </details>
                            <label>
                                <span>{{ __('ui.road_trip_linked_visit') }}</span>
                                <select name="linked_visit_id">
                                    <option value="">{{ __('ui.road_trip_no_linked_visit') }}</option>
                                    @foreach($linkedVisits as $visit)
                                        <option value="{{ $visit->id }}">{{ $visit->groupLink?->group?->name }} · {{ $visit->park?->official_name }} · {{ $visit->starts_on?->format('d/m/Y') }}</option>
                                    @endforeach
                                </select>
                                <small>{{ __('ui.road_trip_linked_visit_help') }}</small>
                            </label>
                            <label><span>{{ __('ui.road_trip_notes') }}</span><textarea name="notes" rows="3" maxlength="2000">{{ old('notes') }}</textarea></label>
                            <button class="button button-primary" type="submit">{{ __('ui.road_trip_add_stop_submit') }}</button>
                        </form>
                    </details>
                @endif
            </div>

            @if($roadTrip->stops->isEmpty())
                <div class="empty-state road-trip-empty"><div class="empty-state-icon">📍</div><h3>{{ __('ui.road_trip_no_stops_title') }}</h3><p>{{ __('ui.road_trip_no_stops_text') }}</p></div>
            @else
                <div class="road-trip-timeline road-trip-timeline-v2">
                    @foreach($roadTrip->stops as $index => $stop)
                        @php
                            $pt = $stop->park?->translations?->firstWhere('locale', app()->getLocale()) ?? $stop->park?->translations?->firstWhere('locale', 'en');
                            $ct = $stop->park?->country?->translations?->firstWhere('locale', app()->getLocale()) ?? $stop->park?->country?->translations?->firstWhere('locale', 'en');
                            $groupLink = $stop->linkedVisit?->groupLink;
                            $leg = $routeLegs->get($stop->id);
                            $mode = $stop->transport_mode ?: 'car';
                        @endphp

                        @if($index > 0 && $leg)
                            <div class="road-trip-v2-leg">
                                <span class="road-trip-v2-leg-icon">{{ $transportIcons[$leg['mode']] ?? '🧭' }}</span>
                                <div>
                                    <strong>{{ __('ui.road_trip_v2_transport_'.$leg['mode']) }}</strong>
                                    <small>
                                        @if($leg['distance_km'] !== null)
                                            ≈ {{ number_format($leg['distance_km'], 0, ',', ' ') }} km · {{ $formatTravelMinutes($leg['duration_minutes']) }}
                                        @elseif($leg['duration_minutes'] > 0)
                                            {{ $formatTravelMinutes($leg['duration_minutes']) }}
                                        @else
                                            {{ __('ui.road_trip_v2_leg_unavailable') }}
                                        @endif
                                        @if($leg['is_override'])
                                            · {{ __('ui.road_trip_v2_manual_duration') }}
                                        @endif
                                    </small>
                                    @if($stop->travel_notes)
                                        <p>{{ $stop->travel_notes }}</p>
                                    @endif
                                </div>
                            </div>
                        @endif

                        <article class="road-trip-stop is-{{ $stop->status }}" id="road-trip-stop-{{ $stop->id }}">
                            <div class="road-trip-stop-index"><span>{{ $index + 1 }}</span></div>
                            <div class="road-trip-stop-card road-trip-stop-card-v2">
                                <div class="road-trip-stop-head">
                                    <div>
                                        <span class="road-trip-stop-status">{{ __('ui.road_trip_stop_status_'.$stop->status) }}</span>
                                        <h3>{{ $stop->title ?: ($pt?->name ?: $stop->park?->official_name) }}</h3>
                                        @if($stop->title)
                                            <a href="{{ route('parks.show', $stop->park->slug) }}">{{ $pt?->name ?: $stop->park?->official_name }}</a>
                                        @endif
                                    </div>
                                    @if($canManage)
                                        <div class="road-trip-stop-order">
                                            <form method="post" action="{{ route('road-trips.stops.move', [$roadTrip, $stop]) }}">
                                                @csrf
                                                <input type="hidden" name="direction" value="up">
                                                <button type="submit" @disabled($loop->first) aria-label="{{ __('ui.road_trip_move_up') }}">↑</button>
                                            </form>
                                            <form method="post" action="{{ route('road-trips.stops.move', [$roadTrip, $stop]) }}">
                                                @csrf
                                                <input type="hidden" name="direction" value="down">
                                                <button type="submit" @disabled($loop->last) aria-label="{{ __('ui.road_trip_move_down') }}">↓</button>
                                            </form>
                                        </div>
                                    @endif
                                </div>
                                <div class="road-trip-stop-meta">
                                    @if($ct?->name)<span>🌍 {{ $ct->name }}</span>@endif
                                    @if($stop->park?->city)<span>📌 {{ $stop->park->city }}</span>@endif
                                    @if($stop->starts_on)<span>📅 {{ $stop->starts_on->format('d/m/Y') }}@if($stop->ends_on && !$stop->ends_on->equalTo($stop->starts_on)) → {{ $stop->ends_on->format('d/m/Y') }}@endif</span>@endif
                                    @if($stop->arrival_time)<span>🕐 {{ __('ui.road_trip_v2_arrival_short') }} {{ substr($stop->arrival_time, 0, 5) }}</span>@endif
                                    @if($stop->departure_time)<span>↗ {{ __('ui.road_trip_v2_departure_short') }} {{ substr($stop->departure_time, 0, 5) }}</span>@endif
                                </div>
                                @if($stop->notes)
                                    <p class="road-trip-stop-notes">{{ $stop->notes }}</p>
                                @endif
                                @if($stop->lodging_name || $stop->lodging_notes)
                                    <div class="road-trip-v2-lodging">
                                        <span>🛏️</span>
                                        <div><strong>{{ $stop->lodging_name ?: __('ui.road_trip_v2_lodging') }}</strong>@if($stop->lodging_notes)<p>{{ $stop->lodging_notes }}</p>@endif</div>
                                    </div>
                                @endif
                                <div class="road-trip-stop-links">
                                    <a class="button button-ghost button-small" href="{{ route('parks.show', $stop->park->slug) }}">{{ __('ui.road_trip_open_park') }}</a>
                                    @if($groupLink && $accessibleGroupIds->contains($groupLink->group_id))
                                        <a class="button button-ghost button-small" href="{{ route('groups.visits.show', [$groupLink->group, $stop->linkedVisit]) }}">{{ __('ui.road_trip_open_group_visit') }}</a>
                                    @elseif($groupLink)
                                        <span class="road-trip-linked-label">🔗 {{ __('ui.road_trip_group_visit_linked') }}</span>
                                    @endif
                                </div>
                                @if($canManage)
                                    <details class="road-trip-stop-manage">
                                        <summary>{{ __('ui.road_trip_edit_stop') }}</summary>
                                        <form method="post" action="{{ route('road-trips.stops.update', [$roadTrip, $stop]) }}" class="road-trip-stop-form is-inline">
                                            @csrf
                                            @method('PUT')
                                            <div class="road-trip-date-grid">
                                                <label><span>{{ __('ui.road_trip_stop_start') }}</span><input type="date" name="starts_on" value="{{ $stop->starts_on?->format('Y-m-d') }}"></label>
                                                <label><span>{{ __('ui.road_trip_stop_end') }}</span><input type="date" name="ends_on" value="{{ $stop->ends_on?->format('Y-m-d') }}"></label>
                                            </div>
                                            <div class="road-trip-date-grid">
                                                <label><span>{{ __('ui.road_trip_v2_arrival_time') }}</span><input type="time" name="arrival_time" value="{{ $stop->arrival_time ? substr($stop->arrival_time, 0, 5) : '' }}"></label>
                                                <label><span>{{ __('ui.road_trip_v2_departure_time') }}</span><input type="time" name="departure_time" value="{{ $stop->departure_time ? substr($stop->departure_time, 0, 5) : '' }}"></label>
                                            </div>
                                            <label>
                                                <span>{{ __('ui.road_trip_stop_status') }}</span>
                                                <select name="status">
                                                    @foreach(['planned','active','completed','skipped'] as $status)
                                                        <option value="{{ $status }}" @selected($stop->status === $status)>{{ __('ui.road_trip_stop_status_'.$status) }}</option>
                                                    @endforeach
                                                </select>
                                            </label>
                                            <label><span>{{ __('ui.road_trip_stop_title') }}</span><input type="text" name="title" maxlength="160" value="{{ $stop->title }}"></label>
                                            <details class="road-trip-v2-form-section" @if($stop->travel_notes || $stop->travel_minutes_override) open @endif>
                                                <summary>🚗 {{ __('ui.road_trip_v2_transport_section') }}</summary>
                                                <label>
                                                    <span>{{ __('ui.road_trip_v2_transport_mode') }}</span>
                                                    <select name="transport_mode">
                                                        @foreach(['car','train','plane','shuttle','other'] as $transportMode)
                                                            <option value="{{ $transportMode }}" @selected($mode === $transportMode)>{{ __('ui.road_trip_v2_transport_'.$transportMode) }}</option>
                                                        @endforeach
                                                    </select>
                                                </label>
                                                <label><span>{{ __('ui.road_trip_v2_travel_override') }}</span><input type="number" min="1" max="2880" name="travel_minutes_override" value="{{ $stop->travel_minutes_override }}" placeholder="{{ __('ui.road_trip_v2_travel_override_placeholder') }}"><small>{{ __('ui.road_trip_v2_travel_override_help') }}</small></label>
                                                <label><span>{{ __('ui.road_trip_v2_travel_notes') }}</span><textarea name="travel_notes" rows="2" maxlength="2000">{{ $stop->travel_notes }}</textarea></label>
                                            </details>
                                            <details class="road-trip-v2-form-section" @if($stop->lodging_name || $stop->lodging_notes) open @endif>
                                                <summary>🛏️ {{ __('ui.road_trip_v2_lodging_section') }}</summary>
                                                <label><span>{{ __('ui.road_trip_v2_lodging_name') }}</span><input type="text" name="lodging_name" maxlength="160" value="{{ $stop->lodging_name }}"></label>
                                                <label><span>{{ __('ui.road_trip_v2_lodging_notes') }}</span><textarea name="lodging_notes" rows="2" maxlength="2000">{{ $stop->lodging_notes }}</textarea></label>
                                            </details>
                                            <label>
                                                <span>{{ __('ui.road_trip_linked_visit') }}</span>
                                                <select name="linked_visit_id">
                                                    <option value="">{{ __('ui.road_trip_no_linked_visit') }}</option>
                                                    @foreach($linkedVisits as $visit)
                                                        <option value="{{ $visit->id }}" @selected($stop->linked_visit_id == $visit->id)>{{ $visit->groupLink?->group?->name }} · {{ $visit->park?->official_name }} · {{ $visit->starts_on?->format('d/m/Y') }}</option>
                                                    @endforeach
                                                </select>
                                            </label>
                                            <label><span>{{ __('ui.road_trip_notes') }}</span><textarea name="notes" rows="3" maxlength="2000">{{ $stop->notes }}</textarea></label>
                                            <div class="road-trip-stop-manage-actions"><button class="button button-primary button-small">{{ __('ui.road_trip_save_stop') }}</button></div>
                                        </form>
                                        <form method="post" action="{{ route('road-trips.stops.destroy', [$roadTrip, $stop]) }}" data-admin-confirm="{{ __('ui.road_trip_delete_stop_confirm') }}">
                                            @csrf
                                            @method('DELETE')
                                            <button class="button button-danger button-small" type="submit">{{ __('ui.road_trip_delete_stop') }}</button>
                                        </form>
                                    </details>
                                @endif
                            </div>
                        </article>
                    @endforeach
                </div>
            @endif
        </main>

        <aside class="road-trip-sidebar">
            <section class="road-trip-side-card road-trip-v2-summary-card">
                <div class="road-trip-side-head"><span class="eyebrow">{{ __('ui.road_trip_v2_practical_kicker') }}</span><h3>{{ __('ui.road_trip_v2_practical_title') }}</h3></div>
                <div class="road-trip-v2-summary-list">
                    <div><span>🗺️</span><p><strong>{{ $knownLegs > 0 ? '≈ '.number_format($tripDistanceKm, 0, ',', ' ').' km' : '—' }}</strong><small>{{ __('ui.road_trip_v2_total_distance') }}</small></p></div>
                    <div><span>⏱️</span><p><strong>{{ $knownLegs > 0 ? $formatTravelMinutes($tripTravelMinutes) : '—' }}</strong><small>{{ __('ui.road_trip_v2_total_travel') }}</small></p></div>
                    <div><span>📍</span><p><strong>{{ $mappedStops }} / {{ $roadTrip->stops->count() }}</strong><small>{{ __('ui.road_trip_v2_geocoded') }}</small></p></div>
                </div>
            </section>

            <section class="road-trip-side-card">
                <div class="road-trip-side-head"><span class="eyebrow">{{ __('ui.road_trip_people_kicker') }}</span><h3>{{ __('ui.road_trip_people_title') }}</h3></div>
                <div class="road-trip-member-list">
                    @foreach($acceptedMembers as $member)
                        @php
                            $memberName = $member->user?->username ?: $member->user?->name ?: '—';
                        @endphp
                        <div class="road-trip-member">
                            <span>{{ mb_strtoupper(mb_substr($memberName, 0, 1)) }}</span>
                            <div><strong>{{ $memberName }}</strong><small>{{ $member->role === 'owner' ? __('ui.road_trip_owner_badge') : __('ui.road_trip_member_badge') }}</small></div>
                            @if($canManage && $member->user_id !== $roadTrip->owner_user_id)
                                <form method="post" action="{{ route('road-trips.members.remove', [$roadTrip, $member->user]) }}" data-admin-confirm="{{ __('ui.road_trip_remove_member_confirm') }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" title="{{ __('ui.road_trip_remove_member') }}">×</button>
                                </form>
                            @endif
                        </div>
                    @endforeach
                </div>
                @if($pendingMembers->isNotEmpty())
                    <div class="road-trip-pending">
                        <strong>{{ __('ui.road_trip_pending_invites') }}</strong>
                        @foreach($pendingMembers as $member)
                            <span>{{ $member->user?->username ?: $member->user?->name }}</span>
                        @endforeach
                    </div>
                @endif
                @if($canManage)
                    <form method="post" action="{{ route('road-trips.invite', $roadTrip) }}" class="road-trip-invite-form">
                        @csrf
                        <label>
                            <span>{{ __('ui.road_trip_invite_friend') }}</span>
                            <select name="user_id" @disabled($friends->isEmpty())>
                                <option value="">{{ $friends->isEmpty() ? __('ui.road_trip_no_friend_available') : __('ui.road_trip_choose_friend') }}</option>
                                @foreach($friends as $friend)
                                    <option value="{{ $friend->id }}">{{ $friend->username ?: $friend->name }}</option>
                                @endforeach
                            </select>
                        </label>
                        <button class="button button-ghost button-small" type="submit" @disabled($friends->isEmpty())>{{ __('ui.road_trip_invite') }}</button>
                    </form>
                @endif
            </section>

            <section class="road-trip-side-card road-trip-progress-card">
                <span class="eyebrow">{{ __('ui.road_trip_progress_kicker') }}</span><h3>{{ __('ui.road_trip_progress_title') }}</h3>
                <div class="road-trip-big-progress"><strong>{{ $completionPercent }}%</strong><div><i style="width:{{ $completionPercent }}%"></i></div><span>{{ $completedStops }} / {{ $roadTrip->stops->count() }} {{ __('ui.road_trip_stops_completed') }}</span></div>
            </section>

            @if($canManage)
                <section class="road-trip-side-card road-trip-danger-zone"><span class="eyebrow">{{ __('ui.road_trip_danger_kicker') }}</span><h3>{{ __('ui.road_trip_danger_title') }}</h3><p>{{ __('ui.road_trip_danger_text') }}</p><form method="post" action="{{ route('road-trips.destroy', $roadTrip) }}" data-admin-confirm="{{ __('ui.road_trip_delete_confirm') }}">@csrf @method('DELETE')<button class="button button-danger button-small">{{ __('ui.road_trip_delete') }}</button></form></section>
            @else
                <section class="road-trip-side-card road-trip-danger-zone"><span class="eyebrow">{{ __('ui.road_trip_leave_kicker') }}</span><h3>{{ __('ui.road_trip_leave_title') }}</h3><p>{{ __('ui.road_trip_leave_text') }}</p><form method="post" action="{{ route('road-trips.leave', $roadTrip) }}" data-admin-confirm="{{ __('ui.road_trip_leave_confirm') }}">@csrf @method('DELETE')<button class="button button-ghost button-small">{{ __('ui.road_trip_leave') }}</button></form></section>
            @endif
        </aside>
    </div>
</section>
@endsection

@push('scripts')
@if($routeMapPoints->isNotEmpty())
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
(() => {
    const points = @json($routeMapPoints->values());
    const container = document.getElementById('road-trip-route-map');
    if (!container || !window.L || points.length === 0) return;

    const map = L.map(container, { scrollWheelZoom: false });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    const latLngs = points.map(point => [Number(point.latitude), Number(point.longitude)]);
    points.forEach(point => {
        const marker = L.marker([Number(point.latitude), Number(point.longitude)]).addTo(map);
        const safeName = String(point.name || point.park_name || '').replace(/[&<>'"]/g, char => ({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#039;','"':'&quot;'}[char]));
        marker.bindPopup(`<div class="road-trip-map-popup"><b>${point.order}</b><strong>${safeName}</strong>${point.date ? `<small>${point.date.split('-').reverse().join('/')}</small>` : ''}</div>`);
    });

    if (latLngs.length > 1) {
        L.polyline(latLngs, { weight: 4, opacity: 0.75 }).addTo(map);
        map.fitBounds(latLngs, { padding: [28, 28], maxZoom: 8 });
    } else {
        map.setView(latLngs[0], 9);
    }
})();
</script>
@endif
@endpush