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

@section('styles')
<style>
    .detail-card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
        background: #fff;
        transition: all 0.2s;
        margin-bottom: 24px;
        overflow: hidden;
    }
    .detail-card .card-header {
        background: #f8fafc;
        padding: 16px 24px;
        border-bottom: 1px solid #e9eef3;
        font-weight: 700;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .detail-card .card-header i {
        font-size: 1.4rem;
        color: var(--primary);
    }
    .detail-card .card-body {
        padding: 24px;
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px 32px;
    }
    .info-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .info-label {
        font-size: 12px;
        font-weight: 600;
        color: #5a6e8a;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .info-value {
        font-size: 16px;
        font-weight: 500;
        color: #1e2a3e;
        word-break: break-word;
    }
    .badge-status {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 40px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }
    .badge-status.pending {
        background: #e2e8f0;
        color: #4a5568;
    }
    .badge-status.diverifikasi, .badge-status.disetujui {
        background: #c6f6d5;
        color: #22543d;
    }
    .badge-status.ditolak, .badge-status.revisi {
        background: #fed7d7;
        color: #9b2c2c;
    }
    .table-dokumen {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14px;
    }
    .table-dokumen thead th {
        background: #f1f5f9;
        padding: 14px 16px;
        font-weight: 600;
        color: #1e2a3e;
        border-bottom: 1px solid #e2e8f0;
    }
    .table-dokumen tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid #edf2f7;
        vertical-align: middle;
    }
    .table-dokumen tbody tr:hover {
        background: #fafcff;
    }
    .btn-icon-sm {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    .timeline {
        position: relative;
        padding-left: 20px;
    }
    .timeline-item {
        position: relative;
        padding-left: 20px;
        margin-bottom: 20px;
        border-left: 2px solid #e2e8f0;
    }
    .timeline-date {
        font-size: 11px;
        color: #718096;
        margin-bottom: 4px;
    }
    .timeline-title {
        font-weight: 700;
        font-size: 14px;
        color: #1e2a3e;
        margin-bottom: 4px;
    }
    .timeline-desc {
        font-size: 13px;
        color: #4a5568;
    }
    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    @media (max-width: 768px) {
        .info-grid {
            grid-template-columns: 1fr;
        }
        .table-dokumen {
            font-size: 12px;
        }
        .table-dokumen thead th, .table-dokumen tbody td {
            padding: 10px 12px;
        }
    }
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
        <div>
            <h2 class="mb-1">Detail Pengajuan</h2>
            <p class="text-muted mb-0">Nomor: <strong>{{ $pengajuan->nomor_pengajuan }}</strong></p>
        </div>
        <div class="d-flex gap-2">
            @if(auth()->user()->isAdmin() && $pengajuan->status === 'diverifikasi')
                <form action="{{ route('admin.pengajuan.approve', $pengajuan->id) }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-success" style="border-radius:40px; padding: 8px 20px;" onclick="return confirm('Setujui pengajuan ini dan terbitkan PBG?')">
                        <i class="bi bi-check-circle me-1"></i> Setujui & Terbitkan
                    </button>
                </form>
            @endif
            
            @if($pengajuan->status === 'disetujui')
                <a href="{{ route('pengajuan.cetak', $pengajuan->id) }}" class="btn btn-accent" style="border-radius:40px; padding: 8px 20px;">
                    <i class="bi bi-printer me-1"></i> Cetak PBG
                </a>
            @endif
            
            @if(auth()->user()->isPemohon() && $pengajuan->status === 'revisi')
                <a href="{{ route('pengajuan.edit', $pengajuan->id) }}" class="btn btn-accent" style="border-radius:40px; padding: 8px 20px;">
                    <i class="bi bi-pencil-square me-1"></i> Revisi & Kirim Ulang
                </a>
            @endif
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-7">
        <!-- Data Pemohon -->
        <div class="detail-card">
            <div class="card-header">
                <i class="bi bi-person-badge"></i> Data Pemohon
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Nama Lengkap</span>
                        <span class="info-value">{{ $pengajuan->nama_lengkap ?? $pengajuan->pemohon->name ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Jenis Tanda Pengenal</span>
                        <span class="info-value">{{ $pengajuan->jenis_tanda_pengenal ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nomor Tanda Pengenal</span>
                        <span class="info-value">{{ $pengajuan->nomor_tanda_pengenal ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nomor Kontak</span>
                        <span class="info-value">{{ $pengajuan->nomor_kontak ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Email</span>
                        <span class="info-value">{{ $pengajuan->email ?? $pengajuan->pemohon->email ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Alamat Lengkap</span>
                        <span class="info-value">{{ $pengajuan->alamat_lengkap ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Kecamatan</span>
                        <span class="info-value">{{ $pengajuan->kecamatan ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Desa/Kelurahan</span>
                        <span class="info-value">{{ $pengajuan->kelurahan ?? '-' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- A. DATA TANAH -->
        <div class="detail-card">
            <div class="card-header">
                <i class="bi bi-file-earmark-text"></i> A. Data Tanah
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Nomor Dokumen Tanah</span>
                        <span class="info-value">{{ $pengajuan->nomor_dokumen_tanah ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Tanggal Terbit Dokumen Tanah</span>
                        <span class="info-value">{{ $pengajuan->tanggal_terbit_dokumen_tanah ? \Carbon\Carbon::parse($pengajuan->tanggal_terbit_dokumen_tanah)->format('d M Y') : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Luas Tanah (m²)</span>
                        <span class="info-value">{{ $pengajuan->luas_tanah ? number_format($pengajuan->luas_tanah, 2) : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Hak Kepemilikan Tanah</span>
                        <span class="info-value">{{ $pengajuan->hak_kepemilikan_tanah ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nama Pemilik Hak Tanah</span>
                        <span class="info-value">{{ $pengajuan->nama_pemilik_hak_tanah ?? '-' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- B. LOKASI TANAH -->
        <div class="detail-card">
            <div class="card-header">
                <i class="bi bi-geo-alt"></i> B. Lokasi Tanah
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Kecamatan</span>
                        <span class="info-value">{{ $pengajuan->kecamatan_tanah ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Desa/Kelurahan</span>
                        <span class="info-value">{{ $pengajuan->kelurahan_tanah ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Alamat Lengkap Lokasi Tanah</span>
                        <span class="info-value">{{ $pengajuan->alamat_bangunan ?? '-' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- C. PEMANFAATAN TANAH -->
        <div class="detail-card">
            <div class="card-header">
                <i class="bi bi-shield-check"></i> C. Pemanfaatan Tanah
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Pemilik Tanah Sama Dengan Pemilik Bangunan</span>
                        <span class="info-value">{{ $pengajuan->pemilik_tanah_sama_dengan_pemilik_bangunan == '1' ? 'Ya' : 'Tidak' }}</span>
                    </div>
                    @if($pengajuan->pemilik_tanah_sama_dengan_pemilik_bangunan == '0')
                    <div class="info-item">
                        <span class="info-label">Nomor Surat Perjanjian Pemanfaatan Tanah</span>
                        <span class="info-value">{{ $pengajuan->nomor_surat_perjanjian_pemanfaatan_tanah ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Tanggal Terbit Surat Perjanjian</span>
                        <span class="info-value">{{ $pengajuan->tanggal_terbit_surat_perjanjian_pemanfaatan_tanah ? \Carbon\Carbon::parse($pengajuan->tanggal_terbit_surat_perjanjian_pemanfaatan_tanah)->format('d M Y') : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nama Penerima Surat Perjanjian</span>
                        <span class="info-value">{{ $pengajuan->nama_penerima_surat_perjanjian_pemanfaatan_tanah ?? '-' }}</span>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- D. DATA BANGUNAN -->
        <div class="detail-card">
            <div class="card-header">
                <i class="bi bi-building"></i> D. Data Bangunan
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Fungsi Bangunan</span>
                        <span class="info-value">{{ $pengajuan->fungsi_bangunan ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Sub Fungsi Bangunan</span>
                        <span class="info-value">{{ $pengajuan->sub_fungsi_bangunan ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Nama Bangunan</span>
                        <span class="info-value">{{ $pengajuan->nama_bangunan ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Luas Bangunan (m²)</span>
                        <span class="info-value">{{ $pengajuan->luas_bangunan ? number_format($pengajuan->luas_bangunan, 2) : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Ketinggian Bangunan (meter)</span>
                        <span class="info-value">{{ $pengajuan->ketinggian_bangunan ? number_format($pengajuan->ketinggian_bangunan, 2) : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Jumlah Lantai</span>
                        <span class="info-value">{{ $pengajuan->jumlah_lantai ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Jumlah Lapis Basemen</span>
                        <span class="info-value">{{ $pengajuan->jumlah_lapis_basemen ?? '0' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Luas Basemen (m²)</span>
                        <span class="info-value">{{ $pengajuan->luas_basemen ? number_format($pengajuan->luas_basemen, 2) : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Jumlah Unit Bangunan</span>
                        <span class="info-value">{{ $pengajuan->jumlah_unit_bangunan ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Estimasi Jumlah Penghuni</span>
                        <span class="info-value">{{ $pengajuan->estimasi_jumlah_penghuni ?? '-' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- E. INTENSITAS BANGUNAN -->
        <div class="detail-card">
            <div class="card-header">
                <i class="bi bi-activity"></i> E. Intensitas Bangunan
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Nomor Dokumen KKPR/KRK</span>
                        <span class="info-value">{{ $pengajuan->nomor_dokumen_kkpr_krk ?? '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Garis Sempadan Bangunan (meter)</span>
                        <span class="info-value">{{ $pengajuan->garis_sempadan_bangunan ? number_format($pengajuan->garis_sempadan_bangunan, 2) : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Koefisien Dasar Bangunan (%)</span>
                        <span class="info-value">{{ $pengajuan->koefisien_dasar_bangunan ? number_format($pengajuan->koefisien_dasar_bangunan, 2) : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Koefisien Lantai Bangunan</span>
                        <span class="info-value">{{ $pengajuan->koefisien_lantai_bangunan ? number_format($pengajuan->koefisien_lantai_bangunan, 2) : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Koefisien Dasar Hijau (%)</span>
                        <span class="info-value">{{ $pengajuan->koefisien_dasar_hijau ? number_format($pengajuan->koefisien_dasar_hijau, 2) : '-' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- F. DATA PENDUKUNG -->
        <div class="detail-card">
            <div class="card-header">
                <i class="bi bi-info-circle"></i> F. Data Pendukung
            </div>
            <div class="card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">Tanggal Pengajuan</span>
                        <span class="info-value">{{ $pengajuan->created_at ? $pengajuan->created_at->format('d M Y, H:i') : '-' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Tahun Rencana Pembangunan</span>
                        <span class="info-value">{{ $pengajuan->tahun_rencana_bangun ?? '-' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Dokumen -->
        <div class="detail-card">
            <div class="card-header">
                <i class="bi bi-file-earmark-check"></i> Dokumen ({{ $pengajuan->dokumen->count() }} file)
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table-dokumen">
                        <thead>
                            <tr>
                                <th style="width: 40px;">No</th>
                                <th>Nama Dokumen</th>
                                <th style="width: 80px;">Tipe</th>
                                <th style="width: 60px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pengajuan->dokumen as $i => $dok)
                            <tr>
                                <td>{{ $i+1 }}</td>
                                <td><strong>{{ $dok->nama_dokumen }}</strong></td>
                                <td><span class="text-uppercase">{{ $dok->tipe_file }}</span></td>
                                <td>
                                    <a href="{{ asset('storage/' . $dok->file_path) }}" target="_blank" class="btn btn-outline-primary btn-icon-sm">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <!-- Status Badge -->
        <div class="detail-card mb-4">
            <div class="card-header">
                <i class="bi bi-info-circle"></i> Status Pengajuan
            </div>
            <div class="card-body text-center">
                <span class="badge-status {{ $pengajuan->status }}" style="font-size: 18px; padding: 10px 30px;">
                    {{ $pengajuan->status_label }}
                </span>
                @if($pengajuan->status === 'revisi' && $pengajuan->catatan_revisi)
                    <div class="alert alert-warning mt-3 mb-0" style="border-radius: 12px;">
                        <small><strong>Catatan Revisi:</strong><br>{{ $pengajuan->catatan_revisi }}</small>
                    </div>
                @endif
            </div>
        </div>

        <!-- Assign Form untuk Operator -->
        @if(auth()->user()->isOperator() && $pengajuan->status === 'pending')
        <div class="detail-card mb-4" style="border: 2px solid var(--accent);">
            <div class="card-header" style="background: linear-gradient(135deg, #fef3c7, #fde68a);">
                <i class="bi bi-arrow-right-circle-fill me-2"></i>Tugaskan ke TPA / TPT
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('operator.assign', $pengajuan->id) }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-bold">Pilih Pemeriksa <span class="text-danger">*</span></label>
                        <select name="assigned_to" class="form-select" required style="border-radius:10px;">
                            <option value="">-- Pilih TPA/TPT --</option>
                            @php $currentRole = ''; @endphp
                            @foreach($pemeriksaList as $p)
                                @if($currentRole !== $p->role)
                                    @if($currentRole !== '') </optgroup> @endif
                                    <optgroup label="{{ strtoupper($p->role) }}">
                                    @php $currentRole = $p->role; @endphp
                                @endif
                                <option value="{{ $p->id }}">{{ $p->name }} ({{ strtoupper($p->role) }})</option>
                            @endforeach
                            @if($currentRole !== '') </optgroup> @endif
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Catatan <small class="text-muted">(opsional)</small></label>
                        <textarea name="catatan_operator" class="form-control" rows="3" placeholder="Catatan untuk pemeriksa..." style="border-radius:10px;"></textarea>
                    </div>
                    <button type="submit" class="btn btn-accent w-100" style="padding: 10px;">
                        <i class="bi bi-send-fill me-1"></i> Tugaskan Sekarang
                    </button>
                </form>
            </div>
        </div>
        @endif

        <!-- Informasi Pemeriksa -->
        @if($pengajuan->pemeriksa)
        <div class="detail-card mb-4">
            <div class="card-header"><i class="bi bi-person-check me-2"></i>Pemeriksa</div>
            <div class="card-body">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon">
                        <i class="bi bi-person-fill"></i>
                    </div>
                    <div>
                        <strong>{{ $pengajuan->pemeriksa->name }}</strong>
                        <br><small class="text-muted">{{ $pengajuan->pemeriksa->role_label ?? strtoupper($pengajuan->pemeriksa->role) }}</small>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Riwayat / Timeline -->
        <div class="detail-card">
            <div class="card-header"><i class="bi bi-clock-history me-2"></i>Riwayat Pengajuan</div>
            <div class="card-body">
                @if($pengajuan->riwayat && count($pengajuan->riwayat) > 0)
                    <div class="timeline">
                        @foreach($pengajuan->riwayat as $r)
                        <div class="timeline-item">
                            <div class="timeline-date">{{ $r->created_at->format('d M Y, H:i') }}</div>
                            <div class="timeline-title">{{ $r->aksi }}</div>
                            <div class="timeline-desc">{{ $r->keterangan }}</div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-muted mb-0">Belum ada riwayat aktivitas.</p>
                @endif
            </div>
        </div>
    </div>
</div>

<a href="{{ url()->previous() }}" class="btn btn-outline-secondary mt-3" style="border-radius:10px;">
    <i class="bi bi-arrow-left me-1"></i> Kembali
</a>
@endsection