@extends('layouts.app')
@section('title', __('Request a financial analysis'))

@section('content')
<div x-data="{ card: @js(old('card')) }" class="space-y-6">

    {{-- Header --}}
    <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6">
        <h1 class="text-xl sm:text-2xl font-semibold text-slate-900 dark:text-white">{{ __('Request a financial analysis') }}</h1>
        <p class="text-sm text-slate-500 dark:text-slate-400 mt-2 max-w-2xl">
            {{ __('Tell us what you need. We will prepare it from the data we already have on file and send you the result.') }}
        </p>
    </div>

    @if(session('error'))
        <div class="px-4 py-2 rounded-lg bg-rose-50 text-rose-800 dark:bg-rose-900/30 dark:text-rose-200 text-sm">
            {{ session('error') }}
        </div>
    @endif

    <form method="POST" action="{{ route('client.request.store') }}" class="space-y-6">
        @csrf

        {{-- Cards --}}
        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6">
            <h2 class="text-base font-semibold text-slate-900 dark:text-white mb-4">
                {{ __('What kind of analysis do you need?') }}
            </h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                @foreach($catalogue as $key => $entry)
                    <label class="block h-full cursor-pointer"
                           :class="card === '{{ $key }}'
                                    ? 'ring-2 ring-indigo-500 ring-offset-2 dark:ring-offset-slate-900 rounded-xl'
                                    : ''">
                        <input type="radio" name="card" value="{{ $key }}" class="sr-only" required
                               x-model="card" @checked(old('card') === $key)>
                        <span class="flex h-full min-h-[112px] rounded-xl border-2 p-4 transition-all hover:border-indigo-400 dark:hover:border-indigo-500"
                              :class="card === '{{ $key }}'
                                       ? 'border-indigo-600 bg-indigo-50 dark:border-indigo-400 dark:bg-indigo-900/30'
                                       : 'border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50'">
                            <span class="flex w-full items-start gap-3">
                                <span class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center transition-colors"
                                      :class="card === '{{ $key }}'
                                               ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-200'
                                               : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'">
                                    <x-icon name="{{ $entry['icon'] }}" class="w-5 h-5"/>
                                </span>
                                <span class="min-w-0">
                                    <span class="block font-semibold text-sm text-slate-900 dark:text-white">{{ __($entry['title_key']) }}</span>
                                    <span class="block text-xs text-slate-500 dark:text-slate-400 mt-1 leading-relaxed">{{ __($entry['desc_key']) }}</span>
                                </span>
                            </span>
                        </span>
                    </label>
                @endforeach
            </div>

            <p class="mt-3 text-xs text-slate-500 dark:text-slate-400">
                ❓ {{ __('Not sure which one? Pick "Health check" — that is a good general-purpose review.') }}
            </p>
        </div>

        {{-- Optional period + note --}}
        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6 space-y-5">
            <h2 class="text-base font-semibold text-slate-900 dark:text-white">{{ __('Anything else?') }}</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="period_start" class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">
                        {{ __('Period — from') }}
                        <span class="text-slate-400 font-normal">({{ __('optional') }})</span>
                    </label>
                    <input type="date" id="period_start" name="period_start" value="{{ old('period_start') }}"
                           style="color-scheme: light dark"
                           class="form-input cursor-pointer text-sm">
                </div>
                <div>
                    <label for="period_end" class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">
                        {{ __('Period — to') }}
                        <span class="text-slate-400 font-normal">({{ __('optional') }})</span>
                    </label>
                    <input type="date" id="period_end" name="period_end" value="{{ old('period_end') }}"
                           style="color-scheme: light dark"
                           class="form-input cursor-pointer text-sm">
                </div>
            </div>
            <p class="text-[11px] text-slate-500 dark:text-slate-400 -mt-3">
                {{ __('Leave blank if you are not sure — your accountant will use the most recent suitable period.') }}
            </p>

            <div>
                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">
                    {{ __('Anything specific you would like us to focus on?') }}
                    <span class="text-slate-400 font-normal">({{ __('optional') }})</span>
                </label>
                <textarea name="note" rows="3" maxlength="1000"
                          placeholder="{{ __('e.g. I would like to understand why my margin dropped in March.') }}"
                          class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-950 px-3 py-2 text-sm leading-relaxed">{{ old('note') }}</textarea>
            </div>
        </div>

        {{-- Submit --}}
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <p class="text-xs text-slate-500 dark:text-slate-400">
                {{ __('Your request goes straight to your accountant. Usually ready within 48 hours.') }}
            </p>
            <button type="submit"
                    class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 text-sm font-semibold hover:bg-slate-800 dark:hover:bg-white disabled:opacity-50 disabled:cursor-not-allowed"
                    x-bind:disabled="!card">
                {{ __('Submit my request') }}
                <span class="opacity-60">→</span>
            </button>
        </div>
    </form>
</div>
@endsection