@extends('layouts.customer')

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

@section('content')

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

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

            <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">{{ __('Selecione a empresa') }}</h1>
                    <p class="text-gray-400 text-sm">{{ __('Escolha a empresa e a filial para continuar') }}</p>
                </div>

                @error('idbranch')
                    <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-6">
                    @foreach ($owner->companies as $company)
                        <div>
                            <p class="text-gray-400 text-xs uppercase tracking-widest mb-2 px-1">
                                {{ $company->trade_name ?? $company->name_company }}
                            </p>

                            <div class="flex flex-col gap-2">
                                @foreach ($company->branches as $branch)
                                    <form method="POST" action="{{ route('select-branch.submit') }}">
                                        @csrf
                                        <input type="hidden" name="idcompany" value="{{ $company->idcompany }}">
                                        <input type="hidden" name="idbranch"  value="{{ $branch->idbranch }}">
                                        <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">{{ $branch->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>
                        </div>
                    @endforeach
                </div>

                <p class="text-center text-gray-500 text-sm mt-6">
                    <a href="{{ route('select-role') }}"
                        class="text-brand-green hover:text-brand-green-dark no-underline font-medium transition-colors">
                        {{ __('Voltar à seleção de papel') }}
                    </a>
                </p>

            </div>

        </div>

    </section>

@endsection