@extends('layouts.app')
@section('title', 'Dashboard Operator')

@section('content')
<div class="page-header mb-4">
    <h2>Dashboard Operator</h2>
    <p>Kelola dan arahkan pengajuan yang masuk</p>
</div>

<!-- STATISTIK CARD - SUDAH SINKRON DENGAN DATA -->
<div class="row g-4 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="stat-card animate-in">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="stat-value">{{ $stats['pending'] ?? 0 }}</div>
                    <div class="stat-label">Menunggu Arahan</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
                    <i class="bi bi-exclamation-circle-fill"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card animate-in" style="animation-delay: 0.1s">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="stat-value">{{ $stats['ditugaskan'] ?? 0 }}</div>
                    <div class="stat-label">Sedang Ditugaskan</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
                    <i class="bi bi-arrow-left-right"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card animate-in" style="animation-delay: 0.2s">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="stat-value">{{ $stats['diperiksa'] ?? 0 }}</div>
                    <div class="stat-label">Sedang Diperiksa</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
                    <i class="bi bi-search"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card animate-in" style="animation-delay: 0.3s">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="stat-value">{{ $stats['diverifikasi'] ?? 0 }}</div>
                    <div class="stat-label">Diverifikasi</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b, #38f9d7);">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- TABEL PENGAJUAN MENUNGGU -->
<div class="content-card animate-in" style="animation-delay: 0.4s">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-exclamation-triangle-fill me-2 text-warning"></i>Pengajuan Menunggu Arahan</span>
        <a href="{{ route('operator.index') }}" class="btn btn-sm btn-primary">Lihat Semua</a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-modern">
                <thead>
                    <tr>
                        <th>No. Pengajuan</th>
                        <th>Pemohon</th>
                        <th>Nama Bangunan</th>
                        <th>Tanggal</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pengajuanPending as $p)
                    <tr>
                        <td><strong>{{ $p->nomor_pengajuan }}</strong></td>
                        <td>{{ $p->pemohon->name ?? '-' }}</td>
                        <td>{{ $p->nama_bangunan }}</td>
                        <td>{{ $p->created_at->format('d/m/Y H:i') }}</td>
                        <td>
                            <a href="{{ route('operator.show', $p->id) }}" class="btn btn-sm btn-accent">
                                <i class="bi bi-arrow-right-circle me-1"></i> Tugaskan
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">
                            <i class="bi bi-check-circle-fill text-success" style="font-size: 24px;"></i>
                            <p class="mt-2">Semua pengajuan sudah ditugaskan atau tidak ada data.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        height: 100%;
    }
    
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    }
    
    .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: #1a1a2e;
        line-height: 1.2;
    }
    
    .stat-label {
        font-size: 13px;
        color: #666;
        margin-top: 4px;
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 22px;
    }
    
    .content-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    
    .content-card .card-header {
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        font-weight: 600;
        background: #fafafa;
    }
    
    .table-modern {
        margin-bottom: 0;
    }
    
    .table-modern th {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #666;
    }
    
    .table-modern td {
        vertical-align: middle;
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .table-modern tbody tr:hover {
        background: #f8f9fa;
    }
    
    .btn-accent {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        transition: all 0.3s ease;
    }
    
    .btn-accent:hover {
        transform: scale(1.05);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    
    .animate-in {
        opacity: 0;
        animation: fadeInUp 0.6s ease forwards;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endsection