@extends('layouts.app')
@section('title', isset($cliente) ? 'Editar Cliente' : 'Novo Cliente')
@section('page_title', isset($cliente) ? 'Editar Cliente' : 'Novo Cliente')

@section('content')
<div class="py-6 max-w-3xl space-y-5">

    {{-- ── Dados do Cliente ────────────────────────────────────────── --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
        <form method="POST"
              action="{{ isset($cliente) ? route('admin.clientes.update', $cliente) : route('admin.clientes.store') }}"
              id="form-cliente">
            @csrf
            @if(isset($cliente)) @method('PUT') @endif

            <h2 class="text-xs font-bold uppercase tracking-widest mb-5" style="color:#0A1E3D;">Dados da Empresa</h2>

            <div class="grid grid-cols-1 gap-5">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Razão Social *</label>
                        <input type="text" name="razao_social"
                               value="{{ old('razao_social', $cliente->razao_social ?? '') }}" required
                               class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        @error('razao_social')<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">Nome Fantasia</label>
                        <input type="text" name="nome_fantasia"
                               value="{{ old('nome_fantasia', $cliente->nome_fantasia ?? '') }}"
                               class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">CNPJ</label>
                        <input type="text" name="cnpj"
                               value="{{ old('cnpj', $cliente->cnpj ?? '') }}" placeholder="00.000.000/0000-00"
                               class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <p class="mt-1 text-[11px] text-gray-400">É salvo com 14 dígitos; zeros faltantes à esquerda são completados automaticamente.</p>
                        @error('cnpj')<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">E-mail Corporativo</label>
                        <input type="email" name="email"
                               value="{{ old('email', $cliente->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-orange-400">
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
                        <input type="text" name="telefone"
                               value="{{ old('telefone', $cliente->telefone ?? '') }}"
                               class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nome do Contato Principal</label>
                        <input type="text" name="contato_nome"
                               value="{{ old('contato_nome', $cliente->contato_nome ?? '') }}"
                               class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Endereço</label>
                    <input type="text" name="endereco"
                           value="{{ old('endereco', $cliente->endereco ?? '') }}"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div class="grid grid-cols-3 gap-4">
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Cidade</label>
                        <input type="text" name="cidade"
                               value="{{ old('cidade', $cliente->cidade ?? '') }}"
                               class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Estado (UF)</label>
                        <input type="text" name="estado"
                               value="{{ old('estado', $cliente->estado ?? '') }}" maxlength="2" placeholder="RJ"
                               class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 uppercase">
                    </div>
                </div>
                <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 rounded border-gray-300"
                           style="accent-color:#F26522;"
                           {{ old('is_active', $cliente->is_active ?? true) ? 'checked' : '' }}>
                    <label for="is_active" class="text-sm font-medium text-gray-700">Cliente ativo</label>
                </div>
            </div>

            @if(isset($cliente))
            {{-- ── Unidades / locais importados ─────────────────────────── --}}
            <div class="mt-8 pt-6 border-t border-gray-200">
                <div class="flex items-center justify-between gap-3 mb-3">
                    <div>
                        <h2 class="text-xs font-bold uppercase tracking-widest" style="color:#0A1E3D;">Unidades / Locais vinculados</h2>
                        <p class="text-xs text-gray-400 mt-1">Locais preservados da base mestre. Servirão também para resolver origens/destinos na importação operacional.</p>
                    </div>
                    <span class="text-xs text-gray-400">{{ $cliente->unidades->count() }} unidade(s)</span>
                </div>
                <div class="max-h-64 overflow-y-auto rounded-lg border border-gray-200 divide-y divide-gray-100 bg-gray-50/40">
                    @forelse($cliente->unidades->sortBy('nome') as $u)
                        <div class="px-3 py-2.5 bg-white text-sm">
                            <div class="flex flex-wrap items-center justify-between gap-2">
                                <div class="font-semibold text-gray-800">{{ $u->nome }}</div>
                                <div class="text-[11px] text-gray-400">{{ $u->fonte }}@if($u->referencia_externa) · ID {{ $u->referencia_externa }}@endif</div>
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                {{ collect([$u->logradouro, $u->numero, $u->bairro, $u->cidade, $u->estado])->filter()->join(' · ') ?: 'Endereço não informado' }}
                                @if($u->latitude !== null && $u->longitude !== null)
                                    <span class="ml-2 text-green-700">GPS {{ number_format($u->latitude,6,',','.') }}, {{ number_format($u->longitude,6,',','.') }}</span>
                                @endif
                            </div>
                        </div>
                    @empty
                        <div class="px-3 py-6 text-center text-sm text-gray-400">Nenhuma unidade/local vinculada.</div>
                    @endforelse
                </div>
                @if($cliente->aliases->isNotEmpty())
                    <div class="mt-3 flex flex-wrap gap-1.5">
                        @foreach($cliente->aliases->sortBy('alias')->take(20) as $alias)
                            <span class="px-2 py-1 rounded bg-blue-50 text-blue-700 border border-blue-100 text-[11px]">{{ $alias->alias }}</span>
                        @endforeach
                        @if($cliente->aliases->count() > 20)<span class="text-xs text-gray-400 px-2 py-1">+{{ $cliente->aliases->count()-20 }} alias</span>@endif
                    </div>
                @endif
            </div>
            @endif

            {{-- ── Plataformas / Sondas do Cliente ───────────────────────── --}}
            <div class="mt-8 pt-6 border-t border-gray-200">
                <div class="flex items-center justify-between gap-3 mb-3">
                    <div>
                        <h2 class="text-xs font-bold uppercase tracking-widest" style="color:#0A1E3D;">Plataformas / Sondas autorizadas</h2>
                        <p class="text-xs text-gray-400 mt-1">Somente as selecionadas aparecerão nas solicitações deste cliente.</p>
                    </div>
                    <span class="text-xs text-gray-400">{{ $plataformas->count() }} cadastrada(s)</span>
                </div>
                @php
                    $selecionadas = collect(old('plataforma_ids', isset($cliente) ? $cliente->plataformas->pluck('id')->all() : []))->map(fn($id) => (int)$id)->all();
                @endphp
                <div class="max-h-56 overflow-y-auto rounded-lg border border-gray-200 p-3 grid grid-cols-1 md:grid-cols-2 gap-2 bg-gray-50/50">
                    @forelse($plataformas as $p)
                        <label class="flex items-center gap-2 rounded-md bg-white border border-gray-200 px-3 py-2 text-sm cursor-pointer hover:border-orange-300">
                            <input type="checkbox" name="plataforma_ids[]" value="{{ $p->id }}"
                                   {{ in_array((int)$p->id, $selecionadas, true) ? 'checked' : '' }}
                                   class="w-4 h-4 rounded border-gray-300 text-orange-600 focus:ring-orange-400">
                            <span class="min-w-0">
                                <span class="font-semibold text-gray-700">{{ $p->codigo ?: $p->nome }}</span>@unless($p->is_active)<span class="text-[10px] text-red-500 font-semibold">INATIVA</span>@endunless
                                @if($p->codigo && $p->nome && $p->nome !== $p->codigo)
                                    <span class="text-xs text-gray-400">· {{ $p->nome }}</span>
                                @endif
                            </span>
                        </label>
                    @empty
                        <p class="text-sm text-gray-500 col-span-2">Nenhuma plataforma/sonda ativa cadastrada.</p>
                    @endforelse
                </div>
            </div>

            {{-- ── Usuários de Acesso ao Sistema ────────────────────────── --}}
            <div class="mt-8 pt-6 border-t border-gray-100" x-data="usuariosForm()">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div class="w-1 h-5 rounded-full" style="background:#F26522;"></div>
                        <h2 class="text-xs font-bold uppercase tracking-widest" style="color:#0A1E3D;">Usuários de Acesso ao Sistema</h2>
                    </div>
                    <button type="button" x-on:click="addUsuario()"
                            class="inline-flex items-center gap-1 text-xs font-medium px-3 py-1.5 rounded-md transition"
                            style="border:1px solid #F26522;color:#F26522;" onmouseover="this.style.background='#fff5f0'" onmouseout="this.style.background='transparent'">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                        Adicionar usuário
                    </button>
                </div>

                {{-- Usuários existentes (edição) --}}
                @if(isset($cliente) && $cliente->usuarios->isNotEmpty())
                <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 space-y-2 mb-4">
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Usuários cadastrados</p>
                    @foreach($cliente->usuarios as $u)
                    <div class="flex items-center justify-between text-sm py-1">
                        <div>
                            <span class="font-medium text-gray-800">{{ $u->name }}</span>
                            <span class="text-gray-400 mx-2">·</span>
                            <span class="text-gray-500">{{ $u->email }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium {{ $u->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                {{ $u->is_active ? 'Ativo' : 'Suspenso' }}
                            </span>
                            <a href="{{ route('admin.usuarios.edit', $u) }}"
                               class="inline-flex items-center px-2.5 py-1 rounded-md text-white text-xs font-medium transition"
                               style="background:#2563eb;" onmouseover="this.style.background='#1d4ed8'" onmouseout="this.style.background='#2563eb'">Editar</a>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif

                {{-- Novos usuários para criar --}}
                <div class="space-y-4">
                    <template x-for="(u, idx) in novosUsuarios" :key="u.id">
                        <div class="rounded-lg border border-dashed border-orange-300 bg-orange-50/30 p-4">
                            <div class="flex items-center justify-between mb-3">
                                <span class="text-xs font-semibold text-orange-700" x-text="'Novo usuário ' + (idx+1)"></span>
                                <button type="button" x-on:click="removeUsuario(idx)"
                                        class="text-xs text-red-500 hover:text-red-700 font-medium transition">✕ Remover</button>
                            </div>
                            <div class="grid grid-cols-2 gap-3 mb-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1">Nome completo *</label>
                                    <input type="text" :name="`novos_usuarios[${idx}][nome]`"
                                           x-model="u.nome" placeholder="Ex: Cemy Almeida"
                                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1">E-mail de login *</label>
                                    <input type="email" :name="`novos_usuarios[${idx}][email]`"
                                           x-model="u.email" placeholder="usuario@empresa.com.br"
                                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1">Senha *</label>
                                    <input type="password" :name="`novos_usuarios[${idx}][password]`"
                                           x-model="u.password" placeholder="Mínimo 8 caracteres"
                                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1">Confirmar Senha *</label>
                                    <input type="password" :name="`novos_usuarios[${idx}][password_confirmation]`"
                                           x-model="u.password_confirmation" placeholder="Repita a senha"
                                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                                </div>
                            </div>
                        </div>
                    </template>
                </div>

                <p class="text-xs text-gray-400 mt-3">
                    @if(isset($cliente) && $cliente->usuarios->isNotEmpty())
                        Use o botão acima para criar usuários adicionais para este cliente.
                    @else
                        Clique em "Adicionar usuário" para criar o acesso ao sistema. Pode criar quantos precisar.
                    @endif
                </p>
            </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-semibold transition"
                        style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                    {{ isset($cliente) ? 'Salvar Alterações' : 'Criar Cliente' }}
                </button>
                <a href="{{ route('admin.clientes.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>

<script>
function usuariosForm() {
    return {
        nextId: 1,
        novosUsuarios: [],
        addUsuario() {
            this.novosUsuarios.push({
                id: this.nextId++,
                nome: '',
                email: '',
                password: '',
                password_confirmation: '',
            });
        },
        removeUsuario(idx) {
            this.novosUsuarios.splice(idx, 1);
        },
    };
}
</script>
@endsection