@php
    /** @var array<string, mixed> $filters */
    $f = $filters ?? [];
@endphp

<x-app-layout>

<x-page.header title="Painel de chamados Uber" />

<x-page.card>
    <h2 class="mb-3 text-sm font-semibold text-gray-900">Importar CSV da Uber for Business</h2>
    <p class="mb-4 text-xs text-gray-600">
        Envie o CSV exportado da Uber. O sistema tenta identificar o código interno pela justificativa
        (como <strong>EV12345</strong> ou <strong>UBR-XXXX</strong>) e faz a conciliação automática.
    </p>

    <form method="POST" action="{{ route('uber.requests.import') }}" enctype="multipart/form-data" class="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto_auto] sm:items-end">
        @csrf
        <div>
            <x-form.label for="csv_file" value="Arquivo CSV" />
            <input
                type="file"
                id="csv_file"
                name="csv_file"
                accept=".csv,text/csv,.txt"
                required
                class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40"
            />
            <x-form.error name="csv_file" />
        </div>
        <x-ui.button type="submit" class="w-full justify-center sm:w-auto">Importar CSV</x-ui.button>
        <a href="{{ route('uber.requests.imports.index') }}"
           class="inline-flex w-full items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 sm:w-auto">
            Ver importações
        </a>
    </form>
</x-page.card>

<x-page.card>
    <h2 class="text-sm font-semibold text-gray-900 mb-3">Filtros</h2>
    <form method="GET" action="{{ route('uber.requests.dashboard') }}" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
        <div>
            <x-form.label for="date_from" value="Período — de (corrida)" />
            <input type="date" name="date_from" id="date_from"
                   value="{{ old('date_from', $f['date_from'] ?? '') }}"
                   class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40" />
            <x-form.error name="date_from" />
        </div>
        <div>
            <x-form.label for="date_to" value="Período — até (corrida)" />
            <input type="date" name="date_to" id="date_to"
                   value="{{ old('date_to', $f['date_to'] ?? '') }}"
                   class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40" />
            <x-form.error name="date_to" />
        </div>
        <div>
            <x-form.label for="sector_id" value="Setor" />
            <select name="sector_id" id="sector_id"
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                <option value="">Todos</option>
                @foreach($sectors as $sector)
                    <option value="{{ $sector->id }}" @selected((string) old('sector_id', $f['sector_id'] ?? '') === (string) $sector->id)>
                        {{ $sector->name }}
                    </option>
                @endforeach
            </select>
            <x-form.error name="sector_id" />
        </div>
        <div>
            <x-form.label for="user_id" value="Pessoa ou líder" />
            <select name="user_id" id="user_id"
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                <option value="">Todos</option>
                @foreach($usersForFilter as $u)
                    <option value="{{ $u->id }}" @selected((string) old('user_id', $f['user_id'] ?? '') === (string) $u->id)>
                        {{ $u->name }}
                    </option>
                @endforeach
            </select>
            <x-form.error name="user_id" />
            <p class="text-xs text-gray-500 mt-1">Inclui chamados em que a pessoa é <strong>solicitante</strong> ou <strong>liderança efetiva</strong> (aprovador, líder do setor ou gestor direto do solicitante).</p>
        </div>
        <div class="md:col-span-2 lg:col-span-4 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:gap-3">
            <x-ui.button type="submit" class="w-full justify-center sm:w-auto">Aplicar filtros</x-ui.button>
            <a href="{{ route('uber.requests.dashboard') }}" class="inline-flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900">
                Limpar
            </a>
        </div>
    </form>
</x-page.card>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 mt-6">
    <x-page.card>
        <p class="text-sm text-gray-500">Total de chamados (com filtros)</p>
        <p class="text-3xl font-semibold text-gray-900 mt-1">{{ number_format($summary['total'], 0, ',', '.') }}</p>
    </x-page.card>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <x-page.card>
        <h2 class="text-base font-semibold text-gray-900 mb-4">Por solicitante</h2>
        <div class="overflow-x-auto">
        <x-table.table>
            <thead class="bg-gray-50 border-b">
                <tr>
                    <x-table.th>Pessoa</x-table.th>
                    <x-table.th class="text-right">Chamados</x-table.th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($summary['by_requester'] as $row)
                    <tr class="hover:bg-gray-50">
                        <x-table.td>{{ $row->label }}</x-table.td>
                        <x-table.td class="text-right font-medium">{{ number_format($row->total, 0, ',', '.') }}</x-table.td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" class="px-4 py-6 text-center text-sm text-gray-500">Nenhum chamado no período/filtros.</td>
                    </tr>
                @endforelse
            </tbody>
        </x-table.table>
        </div>
    </x-page.card>

    <x-page.card>
        <h2 class="text-base font-semibold text-gray-900 mb-4">Por setor</h2>
        <div class="overflow-x-auto">
        <x-table.table>
            <thead class="bg-gray-50 border-b">
                <tr>
                    <x-table.th>Setor</x-table.th>
                    <x-table.th class="text-right">Chamados</x-table.th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($summary['by_sector'] as $row)
                    <tr class="hover:bg-gray-50">
                        <x-table.td>{{ $row->label }}</x-table.td>
                        <x-table.td class="text-right font-medium">{{ number_format($row->total, 0, ',', '.') }}</x-table.td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" class="px-4 py-6 text-center text-sm text-gray-500">Nenhum chamado no período/filtros.</td>
                    </tr>
                @endforelse
            </tbody>
        </x-table.table>
        </div>
    </x-page.card>

    <x-page.card>
        <h2 class="text-base font-semibold text-gray-900 mb-4">Por liderança (aprovador)</h2>
        <p class="text-xs text-gray-500 mb-3">
            Por aprovador do chamado; se vazio, usa o líder do setor em Inventário; se ainda vazio, o <strong>gestor direto</strong> do solicitante (cadastro em Usuários).
        </p>
        <div class="overflow-x-auto">
        <x-table.table>
            <thead class="bg-gray-50 border-b">
                <tr>
                    <x-table.th>Liderança</x-table.th>
                    <x-table.th class="text-right">Chamados</x-table.th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($summary['by_approver'] as $row)
                    <tr class="hover:bg-gray-50">
                        <x-table.td>{{ $row->label }}</x-table.td>
                        <x-table.td class="text-right font-medium">{{ number_format($row->total, 0, ',', '.') }}</x-table.td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" class="px-4 py-6 text-center text-sm text-gray-500">Nenhum chamado no período/filtros.</td>
                    </tr>
                @endforelse
            </tbody>
        </x-table.table>
        </div>
    </x-page.card>
</div>

</x-app-layout>