@extends('layouts.app')
@section('title', 'Semua Pengajuan')

@section('styles')
<style>
    .badge-status {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    .badge-status.pending { background: #fef3c7; color: #92400e; }
    .badge-status.ditugaskan { background: #dbeafe; color: #1e40af; }
    .badge-status.diperiksa { background: #e0e7ff; color: #3730a3; }
    .badge-status.diverifikasi { background: #d1fae5; color: #065f46; }
    .badge-status.ditolak { background: #fee2e2; color: #991b1b; }
    .badge-status.revisi { background: #ffedd5; color: #9a3412; }
    .badge-status.disetujui { background: #c6f6d5; color: #22543d; }
    
    .filter-card {
        background: #f8fafc;
        border-radius: 16px;
        padding: 16px 20px;
        margin-bottom: 24px;
    }
    .detail-info {
        font-size: 12px;
        color: #718096;
        margin-top: 4px;
    }
    .detail-info i {
        margin-right: 4px;
        font-size: 10px;
    }
    .stat-filter {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 30px;
        font-size: 13px;
        background: white;
        border: 1px solid #e2e8f0;
        transition: all 0.2s;
    }
    .stat-filter:hover {
        background: #f1f5f9;
        transform: translateY(-1px);
    }
    .stat-filter.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }
    .stat-filter .count {
        font-weight: 700;
    }
    .status-riwayat {
        font-size: 11px;
        color: #718096;
        margin-top: 4px;
    }
    .status-riwayat i {
        font-size: 10px;
    }
    .stat-filter{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:150px;
    min-height:95px;
    padding:15px;
    border-radius:14px;
    text-decoration:none;
    color:#fff;
    font-size:13px;
    font-weight:600;
    transition:.25s;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.stat-filter i{
    font-size:26px;
    margin-bottom:8px;
}

.stat-filter .count{
    font-size:20px;
    font-weight:700;
    margin-top:4px;
}

.stat-filter:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 20px rgba(0,0,0,.15);
    color:#fff;
}

.stat-filter.active{
    outline:3px solid #212529;
    outline-offset:2px;
}
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2>Semua Pengajuan</h2>
            <p>Daftar lengkap seluruh pengajuan PBG dan status prosesnya</p>
        </div>
        <div>
            <a href="{{ route('operator.dashboard') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i> Kembali ke Dashboard
            </a>
        </div>
    </div>
</div>

<!-- Filter Statistik -->
<div class="filter-card">
    <div class="d-flex flex-wrap gap-2 mb-3">
        <a href="{{ route('operator.pengajuan.index') }}"
   class="stat-filter bg-secondary {{ !request('status') ? 'active' : '' }}">
            <i class="bi bi-files"></i> Semua
            <span class="count">({{ $statistik['semua'] }})</span>
        </a>
        <a href="{{ route('operator.pengajuan.index',['status'=>'pending']) }}"
   class="stat-filter bg-warning text-dark {{ request('status')=='pending' ? 'active' : '' }}">
            <i class="bi bi-hourglass-split"></i> Menunggu Arahan
            <span class="count">({{ $statistik['pending'] }})</span>
        </a>
        <a href="{{ route('operator.pengajuan.index',['status'=>'ditugaskan']) }}"
   class="stat-filter bg-primary {{ request('status')=='ditugaskan' ? 'active' : '' }}">
            <i class="bi bi-send"></i> Ditugaskan
            <span class="count">({{ $statistik['ditugaskan'] }})</span>
        </a>
        <a href="{{ route('operator.pengajuan.index',['status'=>'diperiksa']) }}"
   class="stat-filter bg-info {{ request('status')=='diperiksa' ? 'active' : '' }}">
            <i class="bi bi-search"></i> Diperiksa
            <span class="count">({{ $statistik['diperiksa'] }})</span>
        </a>
        <a href="{{ route('operator.pengajuan.index',['status'=>'diverifikasi']) }}"
   class="stat-filter bg-success {{ request('status')=='diverifikasi' ? 'active' : '' }}">
            <i class="bi bi-check-circle"></i> Diverifikasi
            <span class="count">({{ $statistik['diverifikasi'] }})</span>
        </a>
        <a href="{{ route('operator.pengajuan.index',['status'=>'revisi']) }}"
   class="stat-filter bg-danger {{ request('status')=='revisi' ? 'active' : '' }}">
            <i class="bi bi-arrow-return-left"></i> Revisi
            <span class="count">({{ $statistik['revisi'] }})</span>
        </a>
        <a href="{{ route('operator.pengajuan.index',['status'=>'disetujui']) }}"
   class="stat-filter" style="background:#198754;"
   {{ request('status')=='disetujui' ? 'active' : '' }}>
            <i class="bi bi-check2-circle"></i> Disetujui
            <span class="count">({{ $statistik['disetujui'] }})</span>
        </a>
    </div>
    
    <form method="GET" action="{{ route('operator.pengajuan.index') }}" class="row g-2">
        <div class="col-md-4">
            <div class="input-group">
                <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                <input type="text" name="search" class="form-control" placeholder="Cari nomor pengajuan, nama pemohon, nama bangunan..." value="{{ request('search') }}">
            </div>
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary w-100">
                <i class="bi bi-funnel me-1"></i> Filter
            </button>
        </div>
        @if(request('search') || request('status'))
        <div class="col-md-2">
            <a href="{{ route('operator.pengajuan.index') }}" class="btn btn-outline-secondary w-100">
                <i class="bi bi-x-circle me-1"></i> Reset
            </a>
        </div>
        @endif
    </form>
</div>

<!-- Tabel Data -->
<div class="content-card">
    <div class="card-header">
        <i class="bi bi-table me-2"></i> Data Pengajuan
        <span class="badge bg-secondary ms-2">{{ $pengajuan->total() }} data</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-modern">
                <thead>
                    <tr>
                        <th>No. Pengajuan</th>
                        <th>Pemohon / Kontak</th>
                        <th>Nama Bangunan</th>
                        <th>Lokasi</th>
                        <th>Status & Pemeriksa</th>
                        <th>Progress</th>
                        <th>Tanggal</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pengajuan as $p)
                    <tr>
                        <td>
                            <strong>{{ $p->nomor_pengajuan }}</strong>
                            <div class="detail-info">
                                <i class="bi bi-calendar"></i> {{ $p->created_at->format('d/m/Y H:i') }}
                            </div>
                        </td>
                        <td>
                            <div><strong>{{ $p->nama_lengkap ?? $p->pemohon->name ?? '-' }}</strong></div>
                            <div class="detail-info">
                                <i class="bi bi-telephone"></i> {{ $p->nomor_kontak ?? '-' }}
                            </div>
                            <div class="detail-info">
                                <i class="bi bi-envelope"></i> {{ Str::limit($p->email ?? $p->pemohon->email ?? '-', 25) }}
                            </div>
                        </td>
                        <td>
                            <div><strong>{{ $p->nama_bangunan }}</strong></div>
                            <div class="detail-info">
                                <i class="bi bi-aspect-ratio"></i> {{ number_format($p->luas_bangunan ?? 0, 0) }} m² / {{ $p->jumlah_lantai ?? 0 }} lantai
                            </div>
                            <div class="detail-info">
                                <i class="bi bi-building"></i> {{ $p->fungsi_bangunan ?? $p->jenis_bangunan ?? '-' }}
                            </div>
                        </td>
                        <td>
                            <div><i class="bi bi-geo-alt"></i> {{ $p->kecamatan ?? '-' }}</div>
                            <div class="detail-info">{{ $p->kelurahan ?? '-' }}</div>
                            <div class="detail-info text-muted small">{{ Str::limit($p->alamat_bangunan ?? $p->alamat_lengkap, 35) }}</div>
                        </td>
                        <td>
                            <!-- Status -->
                            <span class="badge-status {{ $p->status }}">
                                {{ $p->status_label ?? ucfirst($p->status) }}
                            </span>
                            
                            <!-- Pemeriksa -->
                            @if($p->pemeriksa)
                                <div class="detail-info text-success mt-1">
                                    <i class="bi bi-person-check-fill"></i> {{ $p->pemeriksa->name }}
                                </div>
                                <div class="detail-info">
                                    <i class="bi bi-tag"></i> {{ $p->pemeriksa->role_label ?? ucfirst($p->pemeriksa->role) }}
                                </div>
                            @else
                                <div class="detail-info text-muted mt-1">
                                    <i class="bi bi-clock-history"></i> Belum ditugaskan
                                </div>
                            @endif
                            
                            <!-- Catatan Revisi -->
                            @if($p->status === 'revisi' && $p->catatan_revisi)
                                <div class="detail-info text-danger mt-1">
                                    <i class="bi bi-chat-dots"></i> {{ Str::limit($p->catatan_revisi, 30) }}
                                </div>
                            @endif
                        </td>
                        <td>
                            <!-- Progress Timeline Sederhana -->
                            <div class="status-riwayat">
                                @php
                                    $statusOrder = ['pending', 'ditugaskan', 'diperiksa', 'diverifikasi', 'disetujui'];
                                    $currentStatus = $p->status;
                                    $currentIndex = array_search($currentStatus, $statusOrder);
                                @endphp
                                <div class="d-flex align-items-center gap-1">
                                    @foreach(['pending', 'ditugaskan', 'diperiksa', 'diverifikasi', 'disetujui'] as $index => $status)
                                        <div class="text-center" style="flex: 1;">
                                            @if($index <= $currentIndex)
                                                <i class="bi bi-check-circle-fill text-success" style="font-size: 10px;"></i>
                                            @else
                                                <i class="bi bi-circle text-muted" style="font-size: 10px;"></i>
                                            @endif
                                        </div>
                                        @if($index < 4)
                                            <div class="text-muted" style="font-size: 8px;">→</div>
                                        @endif
                                    @endforeach
                                </div>
                                <div class="text-center mt-1">
                                    @if($currentStatus == 'pending')
                                        <span class="text-warning">Menunggu Arahan</span>
                                    @elseif($currentStatus == 'ditugaskan')
                                        <span class="text-info">Menunggu Pemeriksa</span>
                                    @elseif($currentStatus == 'diperiksa')
                                        <span class="text-primary">Sedang Diperiksa</span>
                                    @elseif($currentStatus == 'diverifikasi')
                                        <span class="text-success">Terverifikasi</span>
                                    @elseif($currentStatus == 'revisi')
                                        <span class="text-danger">Perlu Revisi</span>
                                    @elseif($currentStatus == 'disetujui')
                                        <span class="text-success">Selesai</span>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <div>{{ $p->updated_at->format('d/m/Y') }}</div>
                            <div class="detail-info">{{ $p->updated_at->diffForHumans() }}</div>
                            @if($p->tanggal_disetujui && $p->status == 'disetujui')
                                <div class="detail-info text-success">
                                    <i class="bi bi-check2-circle"></i> {{ \Carbon\Carbon::parse($p->tanggal_disetujui)->format('d/m/Y') }}
                                </div>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex gap-1 flex-wrap">
                                <a href="{{ route('operator.show', $p->id) }}" class="btn btn-sm btn-accent" title="Detail & Tugaskan">
                                    <i class="bi bi-eye"></i>
                                </a>
                                @if($p->status === 'disetujui')
                                <a href="{{ route('pengajuan.cetak', $p->id) }}" class="btn btn-sm btn-outline-success" title="Cetak PBG" target="_blank">
                                    <i class="bi bi-printer"></i>
                                </a>
                                @endif
                                @if($p->status === 'revisi')
                                <a href="{{ route('pengajuan.edit', $p->id) }}" class="btn btn-sm btn-outline-warning" title="Edit Pengajuan">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted py-5">
                            <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                            Tidak ada data pengajuan.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@if($pengajuan->hasPages())
<div class="d-flex justify-content-center mt-4">
    {{ $pengajuan->links() }}
</div>
@endif
@endsection