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

@section('content')
<div class="page-header mb-4">
    <h2>Dashboard Administrator</h2>
    <p>Selamat datang, {{ auth()->user()->name }}</p>
</div>

<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['total_pengajuan'] }}</div>
                    <div class="stat-label">Total Pengajuan</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
                    <i class="bi bi-folder-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['pending'] }}</div>
                    <div class="stat-label">Menunggu</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
                    <i class="bi bi-hourglass-split"></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['disetujui'] }}</div>
                    <div class="stat-label">Disetujui</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 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['total_users'] }}</div>
                    <div class="stat-label">Total Pengguna</div>
                </div>
                <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
                    <i class="bi bi-people-fill"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row g-4 mb-4">
    <div class="col-md-8">
        <div class="content-card animate-in" style="animation-delay: 0.4s">
            <div class="card-header">
                <i class="bi bi-bar-chart-fill me-2"></i>Pengajuan Per Bulan
            </div>
            <div class="card-body">
                <canvas id="chartBulanan" height="250"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="content-card animate-in" style="animation-delay: 0.5s">
            <div class="card-header">
                <i class="bi bi-pie-chart-fill me-2"></i>Distribusi Status
            </div>
            <div class="card-body">
                <canvas id="chartStatus" height="250"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Quick Stats Row -->
<div class="row g-3 mb-4">
    <div class="col-md-2 col-4">
        <div class="text-center p-3 rounded-3" style="background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
            <div class="fw-bold" style="font-size: 20px; color: #e8a838;">{{ $stats['diperiksa'] }}</div>
            <small class="text-muted" style="font-size: 11px;">Diperiksa</small>
        </div>
    </div>
    <div class="col-md-2 col-4">
        <div class="text-center p-3 rounded-3" style="background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
            <div class="fw-bold" style="font-size: 20px; color: #38a169;">{{ $stats['diverifikasi'] }}</div>
            <small class="text-muted" style="font-size: 11px;">Diverifikasi</small>
        </div>
    </div>
    <div class="col-md-2 col-4">
        <div class="text-center p-3 rounded-3" style="background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
            <div class="fw-bold" style="font-size: 20px; color: #e53e3e;">{{ $stats['ditolak'] }}</div>
            <small class="text-muted" style="font-size: 11px;">Ditolak</small>
        </div>
    </div>
    <div class="col-md-2 col-4">
        <div class="text-center p-3 rounded-3" style="background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
            <div class="fw-bold" style="font-size: 20px; color: #dd6b20;">{{ $stats['revisi'] }}</div>
            <small class="text-muted" style="font-size: 11px;">Revisi</small>
        </div>
    </div>
</div>

<div class="content-card animate-in" style="animation-delay: 0.6s">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-clock-history me-2"></i>Pengajuan Terbaru</span>
        <a href="{{ route('admin.pengajuan') }}" 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>Status</th>
                        <th>Tanggal</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>

                   @forelse($pengajuanTerbaru as $p)
<tr>
    <td>
        <strong>{{ $p->nomor_pengajuan }}</strong>
        <div class="detail-pemohon">
            <i class="bi bi-calendar"></i> {{ $p->created_at->format('d/m/Y H:i') }}
        </div>
    </td>
    <td>
        <strong>{{ $p->nama_lengkap ?? $p->pemohon->name ?? '-' }}</strong>
        <div class="detail-pemohon">
            <i class="bi bi-telephone"></i> {{ $p->nomor_kontak ?? '-' }}
        </div>
        <div class="detail-pemohon">
            <i class="bi bi-envelope"></i> {{ $p->email ?? '-' }}
        </div>
    </td>
    <td>
        <strong>{{ $p->nama_bangunan ?? '-' }}</strong>
        <div class="detail-pemohon">
            <i class="bi bi-building"></i> {{ $p->fungsi_bangunan ?? $p->jenis_bangunan ?? '-' }}
        </div>
        <div class="detail-pemohon">
            <i class="bi bi-aspect-ratio"></i> {{ $p->luas_bangunan ?? 0 }} m² / {{ $p->jumlah_lantai ?? 1 }} lt
        </div>
    </td>
    <td>
        <div><i class="bi bi-geo-alt"></i> {{ $p->kecamatan ?? '-' }}</div>
        <div class="detail-pemohon">{{ $p->kelurahan ?? '-' }}</div>
        <div class="detail-pemohon">{{ $p->alamat_bangunan ?? '-' }}</div>
    </td>
    <td>
        <span class="badge-status {{ $p->status }}">
            {{ $p->status_label ?? ucfirst($p->status) }}
        </span>
        <div class="detail-pemohon">
            <i class="bi bi-person-check"></i> {{ $p->pemohon->name ?? '-' }}
        </div>
    </td>
    <td>
        <div class="d-flex gap-1">
            <a href="{{ route('admin.pengajuan.show', $p->id) }}" 
               class="btn btn-sm btn-outline-primary" 
               title="Detail">
                <i class="bi bi-eye"></i>
            </a>
            @if($p->status === 'disetujui' || $p->status === 'diverifikasi')
            <a href="{{ route('admin.pengajuan.cetak', $p->id) }}" 
               class="btn btn-sm btn-outline-success" 
               target="_blank"
               title="Cetak PBG">
                <i class="bi bi-printer"></i>
            </a>
            @endif
            @if(in_array($p->status, ['pending', 'draft']))
<form action="{{ route('pengajuan.destroy', $p->id) }}"
      method="POST"
      style="display:inline;"
      onsubmit="return confirm('Yakin ingin menghapus pengajuan ini? Semua dokumen dan riwayat akan ikut dihapus.')">

    @csrf
    @method('DELETE')

    <button type="submit"
            class="btn btn-sm btn-outline-danger"
            title="Hapus">
        <i class="bi bi-trash"></i>
    </button>

</form>
@endif
        </div>
    </td>
</tr>
@empty
<tr>
    <td colspan="6" class="text-center text-muted py-4">
        <i class="bi bi-inbox fs-1 d-block mb-2"></i>
        Belum ada pengajuan.
    </td>
</tr>
@endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
// Chart Pengajuan Per Bulan
const ctxBulanan = document.getElementById('chartBulanan').getContext('2d');
new Chart(ctxBulanan, {
    type: 'bar',
    data: {
        labels: {!! json_encode($chartBulanan->pluck('bulan')) !!},
        datasets: [{
            label: 'Pengajuan',
            data: {!! json_encode($chartBulanan->pluck('total')) !!},
            backgroundColor: 'rgba(30, 58, 95, 0.8)',
            borderColor: 'rgba(30, 58, 95, 1)',
            borderWidth: 1,
            borderRadius: 8,
            maxBarThickness: 40,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { stepSize: 1, font: { size: 11 } },
                grid: { color: 'rgba(0,0,0,0.05)' }
            },
            x: {
                ticks: { font: { size: 11 } },
                grid: { display: false }
            }
        }
    }
});

// Chart Distribusi Status
const statusColors = {
    'pending': '#f6ad55',
    'ditugaskan': '#63b3ed',
    'diperiksa': '#7f9cf5',
    'diverifikasi': '#68d391',
    'disetujui': '#48bb78',
    'ditolak': '#fc8181',
    'revisi': '#f6ad55'
};
const statusLabels = {
    'pending': 'Menunggu',
    'ditugaskan': 'Ditugaskan',
    'diperiksa': 'Diperiksa',
    'diverifikasi': 'Diverifikasi',
    'disetujui': 'Disetujui',
    'ditolak': 'Ditolak',
    'revisi': 'Revisi'
};
const statusData = {!! json_encode($chartStatus) !!};

const ctxStatus = document.getElementById('chartStatus').getContext('2d');
new Chart(ctxStatus, {
    type: 'doughnut',
    data: {
        labels: statusData.map(s => statusLabels[s.status] || s.status),
        datasets: [{
            data: statusData.map(s => s.total),
            backgroundColor: statusData.map(s => statusColors[s.status] || '#a0aec0'),
            borderWidth: 2,
            borderColor: '#fff',
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: { font: { size: 11 }, padding: 12, usePointStyle: true }
            }
        }
    }
});
</script>
@endsection