<x-admin-layout title="Contratos — OPCON">

    <div x-data="{ filterStatus: '', search: '' }">

        {{-- Header --}}
        <div class="px-6 py-6" style="background: #ffffff; border-bottom: 1px solid #e2e8f0;">
            <div class="flex items-center justify-between flex-wrap gap-4">
                <div>
                    <h1 class="text-2xl font-bold" style="color: #1e3a5f;">Módulo de Contratos</h1>
                    <p class="text-sm mt-0.5" style="color: #94a3b8;">Geração automática com cláusulas por regime tributário</p>
                </div>
                <a href="{{ route('contratos.create') }}" class="btn-primary">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    Novo contrato
                </a>
            </div>

            {{-- Stats --}}
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mt-5">
                @php
                    $statCards = [
                        ['label' => 'Total',      'value' => $stats['total'],     'color' => '#2563eb', 'bg' => '#eff6ff'],
                        ['label' => 'Ativos',     'value' => $stats['ativos'],    'color' => '#25b87e', 'bg' => '#e8f8f1'],
                        ['label' => 'Pendentes',  'value' => $stats['pendentes'], 'color' => '#f59e0b', 'bg' => '#fffbeb'],
                        ['label' => 'Rascunhos',  'value' => $stats['rascunhos'], 'color' => '#94a3b8', 'bg' => '#f8fafc'],
                    ];
                @endphp
                @foreach($statCards as $sc)
                    <div class="p-4 rounded-xl" style="background: {{ $sc['bg'] }};">
                        <p class="text-2xl font-bold" style="color: {{ $sc['color'] }};">{{ $sc['value'] }}</p>
                        <p class="text-xs font-medium mt-0.5" style="color: #565656;">{{ $sc['label'] }}</p>
                    </div>
                @endforeach
            </div>

            {{-- Filter --}}
            <div class="mt-4 flex flex-wrap gap-2 items-center">
                <input x-model="search" type="text" placeholder="Buscar por nome ou CNPJ…"
                       class="px-3 py-2 rounded-lg border text-sm outline-none"
                       style="border-color:#e2e8f0; color:#1e3a5f; min-width:200px; max-width:260px;"
                       onfocus="this.style.borderColor='#25b87e'" onblur="this.style.borderColor='#e2e8f0'">
                <select x-model="filterStatus"
                        class="px-3 py-2 rounded-lg border text-sm outline-none"
                        style="border-color: #e2e8f0; color: #565656;">
                    <option value="">Todos os status</option>
                    @foreach(array_keys(\App\Models\Contrato::workflowSteps()) as $s)
                        <option>{{ $s }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Contracts list --}}
        <div class="p-6">
            @if($contratos->isEmpty())
                <div class="text-center py-20">
                    <div class="w-16 h-16 rounded-2xl mx-auto flex items-center justify-center mb-4" style="background: #e8f8f1;">
                        <svg class="w-8 h-8" style="color: #25b87e;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                    <p class="font-semibold" style="color: #1e3a5f;">Nenhum contrato ainda</p>
                    <p class="text-sm mt-2 mb-5" style="color: #94a3b8;">Crie o primeiro contrato para começar</p>
                    <a href="{{ route('contratos.create') }}" class="btn-primary inline-flex">Criar primeiro contrato</a>
                </div>
            @else
                <div class="space-y-3">
                    @php $steps = \App\Models\Contrato::workflowSteps(); @endphp
                    @foreach($contratos as $contrato)
                        @php
                            $step  = $steps[$contrato->status_workflow] ?? ['color' => '#94a3b8', 'label' => $contrato->status_workflow];
                            $color = $step['color'];
                        @endphp
                        <div class="bg-white rounded-xl p-5 border transition-all hover:shadow-md"
                             style="border-color: #e2e8f0;"
                             x-show="(filterStatus === '' || filterStatus === '{{ $contrato->status_workflow }}') && (search === '' || '{{ strtolower($contrato->razao_social) }}'.includes(search.toLowerCase()) || '{{ $contrato->cnpj }}'.includes(search))">
                            <div class="flex items-center justify-between flex-wrap gap-4">
                                <div class="flex items-center gap-4">
                                    <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                                         style="background: {{ $color }}18;">
                                        <svg class="w-6 h-6" style="color: {{ $color }};" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold" style="color: #1e3a5f;">{{ $contrato->razao_social }}</h3>
                                        <div class="flex items-center gap-3 mt-0.5">
                                            <span class="text-xs" style="color: #94a3b8;">{{ $contrato->cnpj ?? 'CNPJ não informado' }}</span>
                                            <span class="text-xs" style="color: #94a3b8;">•</span>
                                            <span class="text-xs" style="color: #94a3b8;">{{ $contrato->regime_tributario }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex items-center gap-4">
                                    @if($contrato->honorario)
                                        <div class="text-right">
                                            <p class="text-xs" style="color: #94a3b8;">Honorário</p>
                                            <p class="font-bold text-sm" style="color: #1e3a5f;">
                                                R$ {{ number_format($contrato->honorario, 2, ',', '.') }}
                                            </p>
                                        </div>
                                    @endif

                                    <span class="px-3 py-1 rounded-full text-xs font-semibold"
                                          style="background: {{ $color }}18; color: {{ $color }};">
                                        {{ $step['label'] }}
                                    </span>

                                    <div class="flex gap-2">
                                        <a href="{{ route('contratos.show', $contrato) }}"
                                           class="px-3 py-1.5 rounded-lg text-xs font-medium border transition-all"
                                           style="border-color: #e2e8f0; color: #565656;"
                                           onmouseover="this.style.borderColor='#25b87e'; this.style.color='#25b87e'"
                                           onmouseout="this.style.borderColor='#e2e8f0'; this.style.color='#565656'">
                                            Abrir
                                        </a>
                                        <a href="{{ route('contratos.pdf', $contrato) }}"
                                           class="px-3 py-1.5 rounded-lg text-xs font-medium border transition-all"
                                           style="border-color: #e2e8f0; color: #565656;"
                                           onmouseover="this.style.borderColor='#1e3a5f'; this.style.color='#1e3a5f'"
                                           onmouseout="this.style.borderColor='#e2e8f0'; this.style.color='#565656'">
                                            PDF
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</x-admin-layout>
