@extends('layouts.app')
@section('title', isset($usuario) ? 'Editar Usuário' : 'Novo Usuário')
@section('page_title', isset($usuario) ? 'Editar Usuário' : 'Novo Usuário')

@section('content')
<div class="py-6 max-w-2xl">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">

        <form method="POST" action="{{ isset($usuario) ? route('admin.usuarios.update', $usuario) : route('admin.usuarios.store') }}">
            @csrf
            @if(isset($usuario)) @method('PUT') @endif

            <div class="grid grid-cols-1 gap-6">

                {{-- Nome --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nome completo <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name', $usuario->name ?? '') }}"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror"
                           required>
                    @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- E-mail --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">E-mail <span class="text-red-500">*</span></label>
                    <input type="email" name="email" value="{{ old('email', $usuario->email ?? '') }}"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('email') border-red-500 @enderror"
                           required>
                    @error('email') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Telefone --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
                    <input type="text" name="phone" value="{{ old('phone', $usuario->phone ?? '') }}"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="(00) 00000-0000">
                </div>

                {{-- Papel --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Papel (Role) <span class="text-red-500">*</span></label>
                    <select name="role" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('role') border-red-500 @enderror" required>
                        @foreach($roles as $role)
                            <option value="{{ $role->name }}"
                                {{ old('role', isset($usuario) ? ($usuario->roles->first()?->name ?? $usuario->role_label ?? '') : '') === $role->name ? 'selected' : '' }}>
                                {{ ucfirst($role->name) }}
                            </option>
                        @endforeach
                    </select>
                    @error('role') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Cliente (visível para role=cliente) --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Cliente vinculado</label>
                    <select name="cliente_id" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">— Nenhum —</option>
                        @foreach($clientes as $cliente)
                            <option value="{{ $cliente->id }}"
                                {{ old('cliente_id', $usuario->cliente_id ?? '') == $cliente->id ? 'selected' : '' }}>
                                {{ $cliente->nome_fantasia ?? $cliente->razao_social }}
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-400">Vincule um cliente quando o papel for "cliente".</p>
                </div>

                {{-- Senha --}}
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Senha {{ isset($usuario) ? '(deixe em branco para manter)' : '*' }}
                        </label>
                        <input type="password" name="password"
                               class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('password') border-red-500 @enderror"
                               {{ !isset($usuario) ? 'required' : '' }}>
                        @error('password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Confirmar Senha</label>
                        <input type="password" name="password_confirmation"
                               class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                {{-- Ativo --}}
                <div class="flex items-center gap-3">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1" id="is_active"
                           class="w-4 h-4 text-blue-600 rounded border-gray-300"
                           {{ old('is_active', $usuario->is_active ?? true) ? 'checked' : '' }}>
                    <label for="is_active" class="text-sm font-medium text-gray-700">Usuário ativo</label>
                </div>

            </div>

            {{-- Botões --}}
            <div class="mt-8 flex items-center gap-4">
                <button type="submit"
                        class="text-white px-6 py-2.5 rounded-lg text-sm font-medium transition" style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                    {{ isset($usuario) ? 'Salvar Alterações' : 'Criar Usuário' }}
                </button>
                <a href="{{ route('admin.usuarios.index') }}"
                   class="inline-flex items-center px-5 py-2.5 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm font-medium transition">Cancelar</a>
            </div>
        </form>

    </div>
</div>
@endsection