@extends('layouts.admin')

@section('title', $fiscal->full_name)

@section('header')
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900">{{ $fiscal->full_name }}</h1>
            <p class="text-gray-500">Crachá: {{ $fiscal->badge_number }}</p>
        </div>
        <div class="flex space-x-2">
            <a href="{{ route('admin.fiscais.edit', $fiscal) }}"
               class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg">
                Editar
            </a>
            <a href="{{ route('admin.fiscais.index') }}"
               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg">
                Voltar
            </a>
        </div>
    </div>
@endsection

@section('content')
<div class="space-y-6">
    <!-- Status Banner -->
    <div class="bg-{{ $fiscal->status == 'active' ? 'green' : ($fiscal->status == 'suspended' ? 'red' : 'gray') }}-50 border border-{{ $fiscal->status == 'active' ? 'green' : ($fiscal->status == 'suspended' ? 'red' : 'gray') }}-200 rounded-lg p-4">
        <div class="flex items-center">
            <div class="flex-1">
                <span class="font-medium">Status: {{ ucfirst($fiscal->status) }}</span>
            </div>
            @if($fiscal->status == 'suspended')
                <form action="{{ route('admin.fiscais.activate', $fiscal) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
                        Ativar Fiscal
                    </button>
                </form>
            @elseif($fiscal->status == 'active')
                <form action="{{ route('admin.fiscais.suspend', $fiscal) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">
                        Suspender Fiscal
                    </button>
                </form>
            @endif
        </div>
    </div>

    <!-- 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 Pagamentos</div>
            <div class="text-2xl font-bold">{{ number_format($statistics['total_payments'], 0, ',', '.') }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-sm text-gray-500">Valor Arrecadado</div>
            <div class="text-2xl font-bold">{{ number_format($statistics['total_amount'], 2, ',', '.') }} Kz</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-sm text-gray-500">Ocorrências</div>
            <div class="text-2xl font-bold">{{ number_format($statistics['total_occurrences'], 0, ',', '.') }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-sm text-gray-500">Hoje</div>
            <div class="text-2xl font-bold">{{ number_format($statistics['today_payments'], 0, ',', '.') }}</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Informações Pessoais -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-medium">Informações Pessoais</h2>
            </div>
            <div class="p-6 space-y-3">
                <div class="grid grid-cols-2">
                    <span class="text-gray-500">Nome Completo:</span>
                    <span class="font-medium">{{ $fiscal->full_name }}</span>
                </div>
                <div class="grid grid-cols-2">
                    <span class="text-gray-500">Número de Crachá:</span>
                    <span class="font-medium">{{ $fiscal->badge_number }}</span>
                </div>
                <div class="grid grid-cols-2">
                    <span class="text-gray-500">Telefone:</span>
                    <span class="font-medium">{{ $fiscal->phone }}</span>
                </div>
                <div class="grid grid-cols-2">
                    <span class="text-gray-500">Email:</span>
                    <span class="font-medium">{{ $fiscal->user->email }}</span>
                </div>
                <div class="grid grid-cols-2">
                    <span class="text-gray-500">Data de Criação:</span>
                    <span class="font-medium">{{ $fiscal->created_at->format('d/m/Y H:i') }}</span>
                </div>
            </div>
        </div>

        <!-- Mercados Atribuídos -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b flex justify-between items-center">
                <h2 class="text-lg font-medium">Mercados Atribuídos</h2>
                <button onclick="openAssignMarketModal()"
                        class="text-blue-600 hover:text-blue-800 text-sm">
                    + Atribuir Mercado
                </button>
            </div>
            <div class="p-6">
                @if($statistics['assigned_markets']->count() > 0)
                    <div class="space-y-3">
                        @foreach($statistics['assigned_markets'] as $market)
                            <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                                <div>
                                    <p class="font-medium">{{ $market->name }}</p>
                                    <p class="text-sm text-gray-500">
                                        @if($market->pivot->primary_fiscal)
                                            <span class="text-blue-600">Fiscal Principal</span>
                                        @endif
                                        @if($market->pivot->assigned_zones)
                                            | Zonas: {{ implode(', ', json_decode($market->pivot->assigned_zones, true) ?? []) }}
                                        @endif
                                    </p>
                                </div>
                                <form action="{{ route('admin.fiscais.unassign-market', [$fiscal, $market]) }}"
                                      method="POST"
                                      onsubmit="return confirm('Remover este mercado?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-800 text-sm">
                                        Remover
                                    </button>
                                </form>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-gray-500 text-center py-4">Nenhum mercado atribuído</p>
                @endif
            </div>
        </div>

        <!-- Últimos Pagamentos -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-medium">Últimos Pagamentos</h2>
            </div>
            <div class="divide-y">
                @forelse($fiscal->payments as $payment)
                    <div class="p-4">
                        <div class="flex justify-between">
                            <div>
                                <p class="font-medium">{{ number_format($payment->amount, 2, ',', '.') }} Kz</p>
                                <p class="text-sm text-gray-500">{{ $payment->created_at->format('d/m/Y H:i') }}</p>
                            </div>
                            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">
                                {{ $payment->status }}
                            </span>
                        </div>
                    </div>
                @empty
                    <div class="p-6 text-center text-gray-500">
                        Nenhum pagamento registado
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Últimas Ocorrências -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-medium">Últimas Ocorrências</h2>
            </div>
            <div class="divide-y">
                @forelse($fiscal->occurrences as $occurrence)
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="font-medium">{{ $occurrence->title }}</p>
                                <p class="text-sm text-gray-500">{{ $occurrence->type }} • {{ $occurrence->created_at->diffForHumans() }}</p>
                            </div>
                            <span class="px-2 py-1 text-xs rounded-full
                                @if($occurrence->status == 'open') bg-yellow-100 text-yellow-800
                                @elseif($occurrence->status == 'resolved') bg-green-100 text-green-800
                                @else bg-gray-100 text-gray-800 @endif">
                                {{ $occurrence->status }}
                            </span>
                        </div>
                    </div>
                @empty
                    <div class="p-6 text-center text-gray-500">
                        Nenhuma ocorrência registada
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Modal Atribuir Mercado -->
<div id="assignMarketModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-lg w-full max-w-md">
        <div class="px-6 py-4 border-b flex justify-between items-center">
            <h3 class="text-lg font-medium">Atribuir Mercado</h3>
            <button onclick="closeAssignMarketModal()" class="text-gray-400 hover:text-gray-600">&times;</button>
        </div>
        <form action="{{ route('admin.fiscais.assign-market', $fiscal) }}" method="POST">
            @csrf
            <div class="p-6 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Mercado *</label>
                    <select name="market_id" id="market_id" class="w-full px-3 py-2 border rounded-lg" required>
                        <option value="">Selecione um mercado</option>
                        @foreach($markets as $market)
                            <option value="{{ $market->id }}">{{ $market->name }} ({{ $market->location }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Data de Início *</label>
                    <input type="date" name="start_date" value="{{ date('Y-m-d') }}" class="w-full px-3 py-2 border rounded-lg" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Data de Fim (Opcional)</label>
                    <input type="date" name="end_date" class="w-full px-3 py-2 border rounded-lg">
                </div>
                <div class="flex items-center">
                    <input type="checkbox" name="primary_fiscal" value="1" id="primary_fiscal" class="mr-2">
                    <label for="primary_fiscal" class="text-sm text-gray-700">Fiscal Principal</label>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Observações</label>
                    <textarea name="notes" rows="3" class="w-full px-3 py-2 border rounded-lg"></textarea>
                </div>
            </div>
            <div class="px-6 py-4 border-t flex justify-end space-x-3">
                <button type="button" onclick="closeAssignMarketModal()" class="px-4 py-2 border rounded-lg text-gray-700 hover:bg-gray-50">
                    Cancelar
                </button>
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    Atribuir
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openAssignMarketModal() {
    document.getElementById('assignMarketModal').classList.remove('hidden');
}
function closeAssignMarketModal() {
    document.getElementById('assignMarketModal').classList.add('hidden');
}
</script>
@endsection