@extends('frontend.layouts.default')

@section('title', __('pre_arrival.title'))

@section('content')
<style>
    .prearrivals-hero {
        color: #e5e7eb;
    }
    .glass-card {
        background: rgba(12, 17, 30, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 70px rgba(0,0,0,0.35);
        border-radius: 18px;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .step-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255,255,255,0.08);
        padding: 10px 14px;
        border-radius: 999px;
        font-size: 13px;
        letter-spacing: 0.02em;
    }
    .step-pill .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.2);
    }
    .cta-btn {
        background: linear-gradient(120deg, #22c55e, #16a34a);
        border: none;
        color: #0b1b31;
        font-weight: 700;
        letter-spacing: 0.01em;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .cta-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 15px 35px rgba(22, 163, 74, 0.35);
    }
    .form-control, select {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.15);
        color: #e5e7eb;
    }
    .form-control:focus, select:focus {
        border-color: #22c55e;
        box-shadow: 0 0 0 2px rgba(34,197,94,0.25);
    }
    .label-muted {
        color: #cbd5e1;
        font-size: 13px;
        letter-spacing: 0.01em;
    }
    @media (max-width: 767px) {
        .glass-card {
            border-radius: 14px;
            padding: 16px !important;
            width: 100%;
        }
        .step-pill {
            width: 100%;
            justify-content: center;
            gap: 8px;
        }
        .hero-headline {
            font-size: 22px;
        }
        .hero-sub {
            font-size: 14px;
        }
    }
</style>
<div class="row justify-content-center prearrivals-hero">
    <div class="col-12 col-lg-9 col-xl-8">
        <div class="glass-card p-4 p-md-5">
            <div class="d-flex justify-content-between align-items-center mb-3 flex-column flex-md-row gap-2">
                <div class="step-pill w-100 w-md-auto justify-content-center">
                    <span class="dot"></span>
                    <span>{{ __('pre_arrival.subtitle') }}</span>
                </div>
                <div class="text-end w-100 w-md-auto text-center text-md-end">
                    <span class="label-muted">{{ __('pre_arrival.need_help') }}</span>
                </div>
            </div>

            <h1 class="h3 fw-bold text-white mb-1 hero-headline text-center text-md-start">{{ __('pre_arrival.title') }}</h1>
            <p class="text-muted mb-4 hero-sub text-center text-md-start">{{ __('pre_arrival.hero_copy') }}</p>

            @if (session('status'))
                <div class="alert alert-success">
                    {{ session('status') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Step 1: choose place --}}
            <div class="mb-4">
                @if(! $selectedPlace)
                    <form method="GET" action="{{ route('pre-arrival.show') }}" class="row g-3 align-items-end">
                        <div class="col-12 col-md-9">
                            <label for="place_public_id" class="form-label label-muted">{{ __('pre_arrival.place') }}</label>
                            <select name="place_public_id" id="place_public_id" class="form-control" required>
                                <option value="">{{ __('pre_arrival.select_place') }}</option>
                                @foreach ($places as $id => $name)
                                    <option value="{{ $id }}" @selected(old('place_public_id') == $id)>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-3 d-grid">
                            <button type="submit" class="btn cta-btn">{{ __('pre_arrival.continue') }}</button>
                        </div>
                    </form>
                @else
                    <input type="hidden" name="place_public_id" value="{{ $selectedPlace->public_id ?? $selectedPlacePublicId }}">
                @endif
            </div>

            @if($selectedPlace)
                <hr class="border-secondary opacity-50 mb-4">
                {{-- Step 2: details --}}
                <div class="mb-3">
                    <p class="text-muted mb-4 text-center text-md-start">{{ __('pre_arrival.details_copy') }}</p>
                </div>

                <form method="POST" action="{{ route('pre-arrival.submit') }}">
                    @csrf
                    <input type="hidden" name="place_public_id" value="{{ $selectedPlace?->public_id ?? $selectedPlacePublicId }}">

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="firstname" class="form-label label-muted">{{ __('pre_arrival.firstname') }}</label>
                            <input type="text" name="firstname" id="firstname" class="form-control" value="{{ old('firstname') }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="lastname" class="form-label label-muted">{{ __('pre_arrival.lastname') }}</label>
                            <input type="text" name="lastname" id="lastname" class="form-control" value="{{ old('lastname') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label label-muted">{{ __('pre_arrival.email') }}</label>
                            <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="phone" class="form-label label-muted">{{ __('pre_arrival.phone') }}</label>
                            <input type="text" name="phone" id="phone" class="form-control" value="{{ old('phone') }}">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="arrival_at" class="form-label label-muted">{{ __('pre_arrival.arrival_at') }}</label>
                        <input
                            type="datetime-local"
                            name="arrival_at"
                            id="arrival_at"
                            class="form-control"
                            value="{{ old('arrival_at') }}"
                            required
                        >
                        <small class="text-muted">{{ __('pre_arrival.arrival_at_help') }}</small>
                    </div>
                    <div class="mb-4">
                        <label for="notes" class="form-label label-muted">{{ __('pre_arrival.notes') }}</label>
                        <textarea name="notes" id="notes" class="form-control" rows="3">{{ old('notes') }}</textarea>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn cta-btn btn-lg">{{ __('pre_arrival.submit') }}</button>
                    </div>
                </form>
            @else
                <div class="alert alert-secondary mt-4 mb-0">
                    {{ __('pre_arrival.choose_place_cta') }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection