@extends('layouts.admin')

@section('title', 'Fiscais')

@section('header')
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-semibold text-gray-900">Fiscais</h1>
        <a href="{{ route('admin.fiscais.create') }}"
           class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg">
            + Novo Fiscal
        </a>
    </div>
@endsection

@section('content')
<div class="space-y-6">
    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-sm text-gray-500">Total</div>
            <div class="text-2xl font-bold">{{ $statusCounts['total'] }}</div>
        </div>
        <div class="bg-green-50 rounded-lg shadow p-4">
            <div class="text-sm text-green-600">Ativos</div>
            <div class="text-2xl font-bold text-green-700">{{ $statusCounts['active'] }}</div>
        </div>
        <div class="bg-yellow-50 rounded-lg shadow p-4">
            <div class="text-sm text-yellow-600">Inativos</div>
            <div class="text-2xl font-bold text-yellow-700">{{ $statusCounts['inactive'] }}</div>
        </div>
        <div class="bg-red-50 rounded-lg shadow p-4">
            <div class="text-sm text-red-600">Suspensos</div>
            <div class="text-2xl font-bold text-red-700">{{ $statusCounts['suspended'] }}</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow p-4">
        <form method="GET" class="flex flex-wrap gap-4">
            <div class="flex-1 min-w-[200px]">
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="Buscar por nome, crachá ou telefone..."
                       class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <select name="status" class="px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Todos os status</option>
                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Ativos</option>
                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inativos</option>
                    <option value="suspended" {{ request('status') == 'suspended' ? 'selected' : '' }}>Suspensos</option>
                </select>
            </div>
            <div>
                <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg">
                    Filtrar
                </button>
                <a href="{{ route('admin.fiscais.index') }}" class="ml-2 text-gray-600 hover:text-gray-800 px-4 py-2">
                    Limpar
                </a>
            </div>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Crachá</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nome</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Telefone</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Mercados</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Ações</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse($fiscais as $fiscal)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 text-sm font-medium text-gray-900">
                        {{ $fiscal->badge_number }}
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm font-medium text-gray-900">{{ $fiscal->full_name }}</div>
                        <div class="text-xs text-gray-500">ID: {{ $fiscal->id }}</div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">
                        {{ $fiscal->user->email }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">
                        {{ $fiscal->phone }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            {{ $fiscal->activeAssignments()->count() }} ativo(s)
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        @php
                            $statusColors = [
                                'active' => 'green',
                                'inactive' => 'gray',
                                'suspended' => 'red'
                            ];
                        @endphp
                        <span class="px-2 py-1 text-xs rounded-full bg-{{ $statusColors[$fiscal->status] }}-100 text-{{ $statusColors[$fiscal->status] }}-800">
                            {{ ucfirst($fiscal->status) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm">
                        <div class="flex space-x-2">
                            <a href="{{ route('admin.fiscais.show', $fiscal) }}"
                               class="text-blue-600 hover:text-blue-900">Ver</a>
                            <a href="{{ route('admin.fiscais.edit', $fiscal) }}"
                               class="text-yellow-600 hover:text-yellow-900">Editar</a>
                            @if($fiscal->status == 'active')
                                <form action="{{ route('admin.fiscais.suspend', $fiscal) }}"
                                      method="POST"
                                      class="inline"
                                      onsubmit="return confirm('Suspender este fiscal?')">
                                    @csrf
                                    @method('PUT')
                                    <button type="submit" class="text-red-600 hover:text-red-900">Suspender</button>
                                </form>
                            @elseif($fiscal->status == 'suspended')
                                <form action="{{ route('admin.fiscais.activate', $fiscal) }}"
                                      method="POST"
                                      class="inline"
                                      onsubmit="return confirm('Ativar este fiscal?')">
                                    @csrf
                                    @method('PUT')
                                    <button type="submit" class="text-green-600 hover:text-green-900">Ativar</button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                        Nenhum fiscal encontrado.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>

        <div class="px-6 py-4 border-t">
            {{ $fiscais->links() }}
        </div>
    </div>
</div>
@endsection