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

@section('content')
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle-fill me-2"></i>
        <strong>Berhasil!</strong> {{ session('success') }}
        @if(session('nomor_registrasi'))
            <br><small>Nomor: <strong>{{ session('nomor_registrasi') }}</strong></small>
        @endif
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        <strong>Gagal!</strong> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="page-header mb-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
        <h2>Pengajuan Saya</h2>
        <p>Daftar semua permohonan PBG Anda</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('pengajuan.create', ['new' => 1]) }}" class="btn btn-accent">
            <i class="bi bi-plus-lg me-1"></i> Buat Pengajuan
        </a>
    </div>
</div>

<!-- SECTION: DRAFT -->
<div id="draftSection" class="mb-4">
    <div class="content-card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <i class="bi bi-archive me-2"></i> 
                <strong>Draft Tersimpan</strong>
                <span class="badge bg-warning text-dark ms-2" id="draftCount">0</span>
            </div>
            <button type="button" id="refreshDraftBtn" class="btn btn-sm btn-outline-secondary" title="Refresh draft">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
        </div>
        <div class="card-body" id="draftsList">
            <div class="text-muted text-center py-3">Memuat draft...</div>
        </div>
    </div>
</div>

<!-- SECTION: PENGAJUAN AKTIF -->
<div class="content-card mb-4">
    <div class="card-header">
        <i class="bi bi-list-ul me-2"></i> 
        <strong>Riwayat Pengajuan</strong>
        <span class="badge bg-secondary ms-2">{{ $pengajuan->total() }}</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>Status</th>
                        <th>Nama Bangunan</th>
                        <th>Tanggal</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($pengajuan as $p)
                <tr>
                    <td><strong>{{ $p->nomor_pengajuan }}</strong></td>
                    <td>{{ $p->nama_lengkap ?? '-' }}</td> 
                    <td><span class="badge-status {{ $p->status }}">{{ $p->status_label }}</span></td>
                    <td>{{ $p->nama_bangunan ?? '-' }}</td>
                    <td>{{ $p->created_at->format('d/m/Y') }}</td>
                    <td>
                        <div class="d-flex gap-1">
                            <a href="{{ route('pengajuan.show', $p->id) }}" class="btn btn-sm btn-outline-primary" title="Detail">
                                <i class="bi bi-eye"></i>
                            </a>
                            @if($p->status === 'revisi')
                            <a href="{{ route('pengajuan.edit', $p->id) }}" class="btn btn-sm btn-outline-warning" title="Revisi">
                                <i class="bi bi-pencil"></i>
                            </a>
                            @endif
                            @if($p->status === 'disetujui')
                            <a href="{{ route('pengajuan.cetak', $p->id) }}" class="btn btn-sm btn-outline-success" title="Cetak PBG">
                                <i class="bi bi-printer"></i>
                            </a>
                            <!-- Tombol Cetak PBG Baru (format admin) -->
        <a href="{{ route('pengajuan.cetak_pbg', $p->id) }}" 
           class="btn btn-sm btn-success" 
           title="Cetak PBG (Format Resmi)" 
           target="_blank">
            <i class="bi bi-file-pdf me-1"></i> PBG
        </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 py-5">
                        <i class="bi bi-folder2-open" style="font-size:48px; color:#cbd5e0;"></i>
                        <p class="text-muted mt-2">Belum ada pengajuan yang diajukan.</p>
                        <a href="{{ route('pengajuan.create', ['new' => 1]) }}" class="btn btn-accent btn-sm">
                            <i class="bi bi-plus-lg me-1"></i> Buat Pengajuan
                        </a>
                    </td>
                </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- PAGINATION - HANYA 1 KALI, DI BAWAH -->
    @if($pengajuan->hasPages())
    <div class="card-footer bg-transparent border-top-0">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div class="text-muted small">
                Menampilkan {{ $pengajuan->firstItem() ?? 0 }} - {{ $pengajuan->lastItem() ?? 0 }} 
                dari {{ $pengajuan->total() }} hasil
            </div>
            <div>
                {{ $pengajuan->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
    @endif
</div>

<script>
    const STORAGE_KEY_PREFIX = 'pbg_draft_';
    const userId = {{ auth()->id() }};
    const STORAGE_KEY = STORAGE_KEY_PREFIX + userId;

    function getDraft() {
        const raw = localStorage.getItem(STORAGE_KEY);
        if (!raw) return null;
        try {
            return JSON.parse(raw);
        } catch(e) { return null; }
    }

    function deleteDraft() {
        if (!confirm('Hapus semua data draft? File sementara juga akan dihapus (jika ada).')) return;
        
        const draft = getDraft();
        if (!draft) return;

        const uploadedDocs = draft.uploadedDocs || {};
        const dokumenLain = draft.dokumenLain || [];
        const deletePromises = [];

        for (let nama in uploadedDocs) {
            if (uploadedDocs[nama]?.temp_path) {
                deletePromises.push(
                    fetch('{{ route("pengajuan.delete_temp") }}', {
                        method: 'DELETE',
                        headers: { 
                            'X-CSRF-TOKEN': '{{ csrf_token() }}', 
                            'Content-Type': 'application/json' 
                        },
                        body: JSON.stringify({ temp_path: uploadedDocs[nama].temp_path })
                    }).catch(() => {})
                );
            }
        }
        dokumenLain.forEach(doc => {
            if (doc.temp_path) {
                deletePromises.push(
                    fetch('{{ route("pengajuan.delete_temp") }}', {
                        method: 'DELETE',
                        headers: { 
                            'X-CSRF-TOKEN': '{{ csrf_token() }}', 
                            'Content-Type': 'application/json' 
                        },
                        body: JSON.stringify({ temp_path: doc.temp_path })
                    }).catch(() => {})
                );
            }
        });

        Promise.all(deletePromises).finally(() => {
            localStorage.removeItem(STORAGE_KEY);
            renderDrafts();
        });
    }

    function renderDrafts() {
        const draft = getDraft();
        const container = document.getElementById('draftsList');
        const countBadge = document.getElementById('draftCount');
        
        if (!draft) {
            container.innerHTML = `
                <div class="text-center py-4">
                    <i class="bi bi-inbox" style="font-size:32px; color:#cbd5e0;"></i>
                    <p class="text-muted mt-2 mb-0">Tidak ada draft tersimpan</p>
                    <small class="text-muted">Mulai pengajuan baru untuk menyimpan draft</small>
                </div>
            `;
            countBadge.textContent = '0';
            return;
        }

        const fields = draft.fields || {};
        const namaBangunan = fields.nama_bangunan || '(Tidak ada nama)';
        const tglDraft = new Date(parseInt(localStorage.getItem(STORAGE_KEY + '_timestamp') || Date.now())).toLocaleDateString('id-ID', {
            day: 'numeric',
            month: 'long',
            year: 'numeric'
        });
        const step = draft.step || 1;
        const uploadedDocsCount = Object.keys(draft.uploadedDocs || {}).length;
        const dokumenLainCount = (draft.dokumenLain || []).length;
        const totalDocs = uploadedDocsCount + dokumenLainCount;
        
        let html = `
            <div class="border rounded p-3 bg-light">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center gap-2">
                            <div class="bg-warning bg-opacity-25 p-2 rounded">
                                <i class="bi bi-file-earmark-text" style="font-size:24px; color:#856404;"></i>
                            </div>
                            <div>
                                <strong class="fs-5">${escapeHtml(namaBangunan)}</strong>
                                <div class="small text-muted">
                                    <i class="bi bi-clock me-1"></i> Terakhir diedit: ${tglDraft}
                                    <span class="mx-1">|</span>
                                    <i class="bi bi-layers me-1"></i> Step ${step} dari 4
                                    <span class="mx-1">|</span>
                                    <i class="bi bi-file-earmark me-1"></i> ${totalDocs} file
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 text-md-end mt-2 mt-md-0">
                        <div class="d-flex gap-2 justify-content-md-end">
                            <a href="{{ route('pengajuan.create') }}" class="btn btn-primary" id="continueDraftBtn">
                                <i class="bi bi-arrow-right-circle"></i> Lanjutkan
                            </a>
                            <button type="button" class="btn btn-outline-danger" id="deleteDraftBtn">
                                <i class="bi bi-trash3"></i> Hapus
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        container.innerHTML = html;
        countBadge.textContent = '1';
        
        document.getElementById('continueDraftBtn')?.addEventListener('click', (e) => {
            e.preventDefault();
            window.location.href = '{{ route("pengajuan.create") }}';
        });
        
        document.getElementById('deleteDraftBtn')?.addEventListener('click', deleteDraft);
    }

    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>"']/g, function(m) {
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return map[m];
        });
    }

    document.getElementById('refreshDraftBtn')?.addEventListener('click', renderDrafts);
    document.addEventListener('DOMContentLoaded', renderDrafts);
</script>

<style>
    .card-header .badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }
    #draftSection .card-header {
        background: #fff8e1;
        border-bottom: 1px solid #ffe69b;
    }
    #draftSection .content-card {
        border-left: 4px solid #ffc107;
    }
    .btn-outline-danger:hover {
        background: #dc3545;
        color: white;
    }
    /* Perbaiki pagination biar rapi */
    .card-footer .pagination {
        margin-bottom: 0;
    }
    .card-footer .pagination .page-link {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
</style>
@endsection