@extends('layouts.app')
@section('title', 'Tugas Pemeriksaan')

@section('styles')
<style>
    /* Tambahan style untuk konsistensi */
    .badge-status {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    
    .badge-status.draft { background: #e2e8f0; color: #4a5568; }
    .badge-status.pending { background: #fef3c7; color: #92400e; }
    .badge-status.verifying { background: #dbeafe; color: #1e40af; }
    .badge-status.approved { background: #c6f6d5; color: #22543d; }
    .badge-status.rejected { background: #fed7d7; color: #9b2c2c; }
    .badge-status.completed { background: #c6f6d5; color: #22543d; }
    
    .detail-pemohon {
        font-size: 12px;
        color: #718096;
        margin-top: 4px;
    }
    
    .detail-pemohon i {
        margin-right: 4px;
        font-size: 10px;
    }
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2>Tugas Pemeriksaan</h2>
            <p>Daftar pengajuan yang ditugaskan kepada Anda</p>
        </div>
        <div class="text-muted small">
            <i class="bi bi-info-circle"></i> Total tugas aktif: {{ $pengajuan->count() }}
        </div>
    </div>
</div>

<!-- Active Tasks -->
<div class="content-card mb-4">
    <div class="card-header">
        <i class="bi bi-clipboard-check-fill me-2"></i>Tugas Aktif
        <span class="badge bg-primary ms-2">{{ $pengajuan->count() }}</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-modern">
                <thead>
                    <tr>
                        <th>No. Pengajuan</th>
                        <th>Data Pemohon</th>
                        <th>Data Bangunan</th>
                        <th>Lokasi</th>
                        <th>Status</th>
                        <th>Tanggal Masuk</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pengajuan 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>
                            <div><strong>{{ $p->nama_lengkap ?? $p->pemohon->name ?? '-' }}</strong></div>
                            <div class="detail-pemohon">
                                <i class="bi bi-card-text"></i> 
                                {{ $p->jenis_tanda_pengenal ?? 'KTP' }}: {{ $p->nomor_tanda_pengenal ?? '-' }}
                            </div>
                            <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 ?? $p->pemohon->email ?? '-' }}
                            </div>
                        </td>
                        <td>
                            <div><strong>{{ $p->nama_bangunan }}</strong></div>
                            <div class="detail-pemohon">
                                <i class="bi bi-building"></i> {{ $p->jenis_bangunan ?? '-' }}
                            </div>
                            <div class="detail-pemohon">
                                <i class="bi bi-aspect-ratio"></i> {{ $p->luas_bangunan ?? 0 }} m² / {{ $p->jumlah_lantai ?? 0 }} lantai
                            </div>
                            @if($p->jumlah_lantai && $p->jumlah_lantai >= 3)
                                <span class="badge bg-warning text-dark ms-1" style="font-size: 10px;" title="Bangunan 3 lantai atau lebih memerlukan dokumen APAR">
                                    <i class="bi bi-fire"></i> APAR
                                </span>
                            @endif
                        </td>
                        <td>
                            <div><i class="bi bi-geo-alt"></i> {{ $p->kecamatan ?? '-' }}</div>
                            <div class="detail-pemohon">{{ $p->kelurahan ?? '-' }}</div>
                            <div class="detail-pemohon text-muted small">{{ Str::limit($p->alamat_bangunan ?? $p->alamat_lengkap, 40) }}</div>
                        </td>
                        <td>
                            <span class="badge-status {{ $p->status }}">
                                {{ $p->status_label ?? ucfirst($p->status) }}
                            </span>
                            @if($p->jumlah_lantai && $p->jumlah_lantai >= 3)
                                <span class="badge bg-warning text-dark ms-1" style="font-size: 10px;" title="Bangunan 3 lantai atau lebih memerlukan dokumen APAR">
                                    <i class="bi bi-fire"></i> APAR
                                </span>
                            @endif
                        </td>
                        <td>
                            <div>{{ $p->created_at->format('d/m/Y') }}</div>
                            <div class="detail-pemohon">{{ $p->created_at->diffForHumans() }}</div>
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('pemeriksa.show', $p->id) }}" class="btn btn-sm btn-accent" title="Periksa">
                                    <i class="bi bi-pencil-square me-1"></i> Periksa
                                </a>
                                <a href="{{ route('pengajuan.cetak', $p->id) }}" class="btn btn-sm btn-outline-success" title="Cetak PBG">
                                    <i class="bi bi-printer"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                            Tidak ada tugas aktif saat ini.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

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

<!-- Completed Tasks -->
<div class="content-card">
    <div class="card-header">
        <i class="bi bi-check-all me-2"></i>Riwayat Selesai
        <span class="badge bg-secondary ms-2">{{ $selesai->count() }}</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</th>
                        <th>Nama Bangunan</th>
                        <th>Lokasi</th>
                        <th>Status</th>
                        <th>Tanggal Selesai</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($selesai 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') }}
                            </div>
                        </td>
                        <td>
                            <div><strong>{{ $p->nama_lengkap ?? $p->pemohon->name ?? '-' }}</strong></div>
                            <div class="detail-pemohon">
                                <i class="bi bi-telephone"></i> {{ $p->nomor_kontak ?? '-' }}
                            </div>
                        </td>
                        <td>
                            <div><strong>{{ $p->nama_bangunan }}</strong></div>
                            <div class="detail-pemohon">
                                <i class="bi bi-aspect-ratio"></i> {{ $p->luas_bangunan ?? 0 }} m²
                            </div>
                        </td>
                        <td>
                            <div><i class="bi bi-geo-alt"></i> {{ $p->kecamatan ?? '-' }}</div>
                            <div class="detail-pemohon">{{ $p->kelurahan ?? '-' }}</div>
                        </td>
                        <td>
                            <span class="badge-status {{ $p->status }}">
                                {{ $p->status_label ?? ucfirst($p->status) }}
                            </span>
                        </td>
                        <td>
                            <div>{{ $p->updated_at->format('d/m/Y') }}</div>
                            <div class="detail-pemohon">{{ $p->updated_at->diffForHumans() }}</div>
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('pemeriksa.show', $p->id) }}" class="btn btn-sm btn-outline-primary" title="Lihat Detail">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('pengajuan.cetak', $p->id) }}" class="btn btn-sm btn-outline-success" title="Cetak PBG">
                                    <i class="bi bi-printer"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            <i class="bi bi-check-circle fs-1 d-block mb-2"></i>
                            Belum ada tugas yang diselesaikan.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

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

@endsection

@section('scripts')
<script>
    // Inisialisasi tooltip jika menggunakan Bootstrap 5
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
</script>
@endsection