@php
/**
 * $plans: array of available plans
 * $selected: selected plan id or null
 * $numTrucks: number of trucks (default 1)
 * $trial: whether the onboarding trial option is selected
 */
$selected = old('plan', $plan ?? $selected ?? null);
$subscriptionType = old('subscription_type', 'paid');
$trial = $subscriptionType === 'trial';
@endphp

@extends('layouts.themed-app')

@section('content')
<div class="max-w-xl mx-auto mt-8">
    <h3 class="text-lg font-semibold mb-4">Choose Your Plan</h3>
    @if ($errors->any())
        <div class="bg-red-50 border border-red-300 text-red-700 rounded p-3 mb-4">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif
    <form method="POST" action="{{ route('onboard.submit') }}">
        @csrf
        <input type="hidden" name="onboard_action" id="onboard-action" value="">
        <div class="mb-6 rounded-2xl border border-sky-200 bg-white p-4 shadow-sm">
            @foreach ($plans as $plan)
                <div class="rounded-2xl border p-4 shadow-sm {{ $selected == $plan['id'] && !$trial ? 'border-blue-600 bg-blue-50' : 'border-gray-200 bg-white' }}">
                    <label class="flex items-start gap-4 cursor-pointer mb-4">
                        <input type="radio" name="plan_option" value="plan" {{ !$trial ? 'checked' : '' }} class="mt-1 h-4 w-4 text-sky-600 border-slate-300 focus:ring-sky-500" onchange="selectPlan()">
                        <div class="flex-1">
                            <div class="flex items-center justify-between gap-4">
                                <div>
                                    <h4 class="text-lg font-semibold text-slate-900">{{ $plan['name'] }}</h4>
                                    <p class="mt-1 text-green-700 font-semibold">${{ $plan['price'] }}/month</p>
                                </div>
                            </div>
                            <div class="mt-4 text-sm text-gray-600">{!! $plan['desc'] !!}</div>
                        </div>
                    </label>

                    <label class="flex items-start gap-4 cursor-pointer {{ $trial ? 'rounded-2xl border border-sky-200 bg-sky-50 p-3' : '' }}">
                        <input type="radio" name="plan_option" value="trial" {{ $trial ? 'checked' : '' }} class="mt-1 h-4 w-4 text-sky-600 border-slate-300 focus:ring-sky-500" onchange="selectTrial()">
                        <div class="flex-1">
                            <span class="font-semibold text-slate-900">Start a 7-day free trial</span>
                            <p class="text-sm text-slate-600 mt-1">Try the plan free for seven days. After the trial ends, we will bill your saved card automatically.</p>
                        </div>
                    </label>
                </div>
                <input type="hidden" name="plan" value="{{ $plan['id'] }}">
                <input type="hidden" name="subscription_type" id="subscription-type-input" value="{{ $trial ? 'trial' : 'paid' }}">
            @endforeach
        </div>
        <div class="mb-4">
            <label class="block font-semibold mb-1">Number of Trucks</label>
            <input type="number" name="num_trucks" min="1" value="{{ old('num_trucks', $numTrucks ?? 1) }}" class="input w-32" required>
            <span class="ml-2 text-gray-500">$5/month per additional truck</span>
        </div>
        <div class="flex justify-between mt-6">
            <button type="button" onclick="document.getElementById('onboard-action').value='prev'; this.form.submit();" class="btn bg-gray-300 text-gray-700 px-4 py-2 rounded">Back</button>
            <button type="button" onclick="document.getElementById('onboard-action').value='next'; this.form.submit();" class="btn bg-blue-900 text-white px-4 py-2 rounded">Next</button>
        </div>
    </form>
</div>
<style>
.input { border: 2px solid #E5E7EB; border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 1rem; }
.input:focus { border-color: #003D7A; outline: none; }
.btn { transition: background 0.2s, color 0.2s; }
</style>

<script>
function selectPlan() {
    document.getElementById('subscription-type-input').value = 'paid';
}

function selectTrial() {
    document.getElementById('subscription-type-input').value = 'trial';
}
</script>
@endsection