@extends('layouts.app')

@section('title', 'Performance Monitoring')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-white mb-2">Performance Monitoring</h1>
        <p class="text-gray-400">Monitoring performa Polda, Polres, dan Polsek</p>
    </div>

    <!-- Filters -->
    <div class="bg-surface border border-border rounded-xl p-4 mb-6">
        <form method="GET" action="{{ route('performance.index') }}" class="flex flex-wrap gap-4">
            <div>
                <label class="block text-sm text-gray-400 mb-1">Tipe Unit</label>
                <select name="type" class="bg-surface border border-border rounded-lg px-4 py-2 text-white">
                    <option value="polda" {{ request('type') === 'polda' ? 'selected' : '' }}>Polda</option>
                    <option value="polres" {{ request('type') === 'polres' ? 'selected' : '' }}>Polres</option>
                    <option value="polsek" {{ request('type') === 'polsek' ? 'selected' : '' }}>Polsek</option>
                </select>
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Periode</label>
                <select name="date_range" class="bg-surface border border-border rounded-lg px-4 py-2 text-white">
                    <option value="7" {{ request('date_range') == '7' ? 'selected' : '' }}>7 Hari</option>
                    <option value="30" {{ request('date_range') == '30' ? 'selected' : '' }}>30 Hari</option>
                    <option value="90" {{ request('date_range') == '90' ? 'selected' : '' }}>90 Hari</option>
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">
                    Filter
                </button>
            </div>
        </form>
    </div>

    <!-- Overall Stats -->
    @if(isset($overallStats))
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-surface border border-border rounded-xl p-4">
            <div class="text-gray-400 text-sm mb-1">Total Aduan</div>
            <div class="text-2xl font-bold text-white">{{ number_format($overallStats['total_complaints']) }}</div>
        </div>
        <div class="bg-surface border border-border rounded-xl p-4">
            <div class="text-gray-400 text-sm mb-1">Aduan Selesai</div>
            <div class="text-2xl font-bold text-white">{{ number_format($overallStats['completed_complaints']) }}</div>
        </div>
        <div class="bg-surface border border-border rounded-xl p-4">
            <div class="text-gray-400 text-sm mb-1">Tingkat Penyelesaian</div>
            <div class="text-2xl font-bold text-white">{{ number_format($overallStats['completion_rate'], 2) }}%</div>
        </div>
    </div>
    @endif

    <!-- Performance Table -->
    <div class="bg-surface border border-border rounded-xl overflow-hidden">
        <div class="px-6 py-4 border-b border-border">
            <h2 class="text-xl font-semibold text-white">Ranking {{ ucfirst($type) }}</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead class="bg-white/5">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Rank</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Nama</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Kode</th>
                        @if($type === 'polres')
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Polda</th>
                        @endif
                        @if($type === 'polsek')
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Polres</th>
                        @endif
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Total Aduan</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Selesai</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Tingkat Penyelesaian</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Avg Response</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Score</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                    @forelse($performances as $performance)
                    <tr class="hover:bg-white/5">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="text-white font-semibold">#{{ $performance['rank'] }}</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-white">{{ $performance['name'] }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-gray-400">{{ $performance['code'] }}</td>
                        @if($type === 'polres')
                        <td class="px-6 py-4 whitespace-nowrap text-gray-400">{{ $performance['polda_name'] ?? '-' }}</td>
                        @endif
                        @if($type === 'polsek')
                        <td class="px-6 py-4 whitespace-nowrap text-gray-400">{{ $performance['polres_name'] ?? '-' }}</td>
                        @endif
                        <td class="px-6 py-4 whitespace-nowrap text-white">{{ number_format($performance['total_complaints']) }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-white">{{ number_format($performance['completed_complaints']) }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="text-green-400">{{ number_format($performance['completion_rate'], 1) }}%</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-gray-400">{{ number_format($performance['avg_response_time'], 1) }}m</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @php
                                $scoreColor = $performance['score'] >= 80 ? 'text-green-400' : ($performance['score'] >= 60 ? 'text-yellow-400' : 'text-red-400');
                            @endphp
                            <span class="{{ $scoreColor }} font-semibold">{{ number_format($performance['score'], 1) }}</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <a href="{{ route('performance.show', ['type' => $type, 'id' => $performance['id']]) }}" 
                               class="text-blue-400 hover:text-blue-300 text-sm">
                                Detail →
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="px-6 py-4 text-center text-gray-400">
                            Tidak ada data
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection