@extends('layouts.customer')

@section('title', __('Selecionar papel — Lined'))

@section('content')

    <section class="min-h-screen flex items-center justify-center px-6 py-20">

        <div class="w-full max-w-md">

            <div class="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8">

                <div class="text-center mb-8">
                    <h1 class="font-heading font-bold text-white text-2xl mb-2">{{ __('Como deseja entrar?') }}</h1>
                    <p class="text-gray-400 text-sm">{{ __('Selecione o seu papel para continuar') }}</p>
                </div>

                @error('idrole')
                    <div class="mb-4 px-4 py-3 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
                        {{ $message }}
                    </div>
                @enderror

                <div class="flex flex-col gap-3">
                    @foreach ($roles as $role)
                        <form method="POST" action="{{ route('select-role.submit') }}">
                            @csrf
                            <input type="hidden" name="idrole" value="{{ $role->idrole }}">
                            <button type="submit"
                                class="w-full flex items-center justify-between px-5 py-4 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 hover:border-brand-green/40 transition-all duration-200 cursor-pointer text-left group">
                                <span class="text-white font-medium text-sm">{{ __($role->role_name) }}</span>
                                <svg class="w-4 h-4 text-gray-500 group-hover:text-brand-green transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </button>
                        </form>
                    @endforeach
                </div>

                <p class="text-center text-gray-500 text-sm mt-6">
                    <a href="{{ route('login') }}"
                        class="text-brand-green hover:text-brand-green-dark no-underline font-medium transition-colors">
                        {{ __('Voltar ao login') }}
                    </a>
                </p>

            </div>

        </div>

    </section>

@endsection