@extends('layouts.app')

@section('title', __('ui.road_trips_title').' — Coaster World')

@section('content')
<section class="road-trip-hub-hero">
    <div class="container road-trip-hub-hero-grid">
        <div>
            <span class="eyebrow">{{ __('ui.road_trips_kicker') }}</span>
            <h1>{{ __('ui.road_trips_title') }}</h1>
            <p>{{ __('ui.road_trips_intro') }}</p>
        </div>
        <details class="road-trip-create" @if($errors->any()) open @endif>
            <summary class="button button-primary">{{ __('ui.road_trip_create') }}</summary>
            <form method="post" action="{{ route('road-trips.store') }}" class="road-trip-create-form">
                @csrf
                <label>
                    <span>{{ __('ui.road_trip_title_label') }}</span>
                    <input type="text" name="title" maxlength="160" required value="{{ old('title') }}" placeholder="{{ __('ui.road_trip_title_placeholder') }}">
                </label>
                <div class="road-trip-date-grid">
                    <label>
                        <span>{{ __('ui.road_trip_start') }}</span>
                        <input type="date" name="starts_on" value="{{ old('starts_on') }}">
                    </label>
                    <label>
                        <span>{{ __('ui.road_trip_end') }}</span>
                        <input type="date" name="ends_on" value="{{ old('ends_on') }}">
                    </label>
                </div>
                <label>
                    <span>{{ __('ui.road_trip_description') }}</span>
                    <textarea name="description" rows="3" maxlength="2000" placeholder="{{ __('ui.road_trip_description_placeholder') }}">{{ old('description') }}</textarea>
                </label>
                @if($errors->any())
                    <div class="admin-error">{{ $errors->first() }}</div>
                @endif
                <button class="button button-primary" type="submit">{{ __('ui.road_trip_create_submit') }}</button>
            </form>
        </details>
    </div>
</section>

<section class="section">
    <div class="container">
        @if(session('road_trip_status'))
            <div class="admin-success">{{ session('road_trip_status') }}</div>
        @endif

        @if($invitations->isNotEmpty())
            <div class="road-trip-invite-zone">
                <div class="section-heading">
                    <span class="eyebrow">{{ __('ui.road_trip_invites_kicker') }}</span>
                    <h2>{{ __('ui.road_trip_invites_title') }}</h2>
                </div>
                <div class="road-trip-invite-grid">
                    @foreach($invitations as $invitation)
                        @php
                            $inviteTrip = $invitation->roadTrip;
                        @endphp
                        <article class="road-trip-invite-card">
                            <div class="road-trip-invite-icon">🧭</div>
                            <div>
                                <strong>{{ $inviteTrip?->title }}</strong>
                                <span>{{ __('ui.road_trip_invited_by', ['user' => $invitation->inviter?->username ?: $invitation->inviter?->name ?: '—']) }}</span>
                                @if($inviteTrip?->starts_on)
                                    <small>
                                        {{ $inviteTrip->starts_on->format('d/m/Y') }}
                                        @if($inviteTrip->ends_on && !$inviteTrip->ends_on->equalTo($inviteTrip->starts_on))
                                            → {{ $inviteTrip->ends_on->format('d/m/Y') }}
                                        @endif
                                    </small>
                                @endif
                            </div>
                            <div class="road-trip-invite-actions">
                                <form method="post" action="{{ route('road-trips.respond', $invitation) }}">
                                    @csrf
                                    <input type="hidden" name="decision" value="accept">
                                    <button class="button button-primary button-small">{{ __('ui.road_trip_accept') }}</button>
                                </form>
                                <form method="post" action="{{ route('road-trips.respond', $invitation) }}">
                                    @csrf
                                    <input type="hidden" name="decision" value="decline">
                                    <button class="button button-ghost button-small">{{ __('ui.road_trip_decline') }}</button>
                                </form>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        @endif

        <div class="section-heading split-heading road-trip-heading">
            <div>
                <span class="eyebrow">{{ __('ui.road_trip_library_kicker') }}</span>
                <h2>{{ __('ui.road_trip_library_title') }}</h2>
                <p>{{ __('ui.road_trip_library_intro') }}</p>
            </div>
            <span class="road-trip-total">{{ trans_choice('ui.road_trip_count', $trips->count(), ['count' => $trips->count()]) }}</span>
        </div>

        <div class="road-trip-card-grid">
            @forelse($trips as $trip)
                @php
                    $completed = $trip->stops->where('status', 'completed')->count();
                    $stopCount = $trip->stops->count();
                    $percent = $stopCount > 0 ? (int) round($completed / $stopCount * 100) : 0;
                    $firstStops = $trip->stops->take(4);
                @endphp
                <a href="{{ route('road-trips.show', $trip) }}" class="road-trip-card is-{{ $trip->status }}">
                    <div class="road-trip-card-top">
                        <span>{{ __('ui.road_trip_status_'.$trip->status) }}</span>
                        @if($trip->owner_user_id === auth()->id())
                            <em>{{ __('ui.road_trip_owner_badge') }}</em>
                        @else
                            <em>{{ __('ui.road_trip_member_badge') }}</em>
                        @endif
                    </div>
                    <h3>{{ $trip->title }}</h3>
                    <div class="road-trip-card-date">
                        @if($trip->starts_on)
                            <strong>{{ $trip->starts_on->format('d M Y') }}</strong>
                            @if($trip->ends_on && !$trip->ends_on->equalTo($trip->starts_on))
                                <span>→ {{ $trip->ends_on->format('d M Y') }}</span>
                            @endif
                        @else
                            <strong>{{ __('ui.road_trip_dates_tbd') }}</strong>
                        @endif
                    </div>
                    <div class="road-trip-mini-route">
                        @forelse($firstStops as $stop)
                            <span title="{{ $stop->park?->official_name }}">{{ $stop->park?->official_name }}</span>
                        @empty
                            <span class="is-empty">{{ __('ui.road_trip_no_stops_short') }}</span>
                        @endforelse
                        @if($stopCount > 4)
                            <b>+{{ $stopCount - 4 }}</b>
                        @endif
                    </div>
                    <div class="road-trip-card-progress">
                        <i style="width: {{ $percent }}%"></i>
                    </div>
                    <div class="road-trip-card-meta">
                        <span>📍 {{ $stopCount }}</span>
                        <span>👥 {{ $trip->members->count() }}</span>
                        <span>✓ {{ $completed }}/{{ $stopCount }}</span>
                    </div>
                </a>
            @empty
                <div class="empty-state road-trip-empty">
                    <div class="empty-state-icon">🗺️</div>
                    <h3>{{ __('ui.road_trip_empty_title') }}</h3>
                    <p>{{ __('ui.road_trip_empty_text') }}</p>
                </div>
            @endforelse
        </div>
    </div>
</section>
@endsection