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

@section('styles')
<style>
    .stat-card {
        background: white;
        border-radius: 20px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        transition: transform 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-3px);
    }
    .stat-card .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 12px;
    }
    .stat-card .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: #1e2a3e;
    }
    .stat-card .stat-label {
        font-size: 13px;
        color: #718096;
        margin-top: 5px;
    }
    .badge-status {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
    }
    .badge-status.diverifikasi, .badge-status.disetujui {
        background: #c6f6d5;
        color: #22543d;
    }
    .badge-status.revisi {
        background: #fed7d7;
        color: #9b2c2c;
    }
    .filter-card {
        background: #f8fafc;
        border-radius: 16px;
        padding: 16px 20px;
        margin-bottom: 24px;
    }
    .ttd-card {
        background: #f8fafc;
        border-radius: 16px;
        padding: 20px 24px;
        margin-bottom: 24px;
        border-left: 4px solid #1a3c2c;
    }
    .ttd-card .ttd-title {
        font-size: 14px;
        font-weight: 700;
        color: #1a3c2c;
        margin-bottom: 16px;
    }
    .ttd-card .ttd-title i {
        margin-right: 8px;
    }
    .ttd-preview {
        background: white;
        border-radius: 12px;
        padding: 16px 20px;
        text-align: center;
        border: 2px dashed #d1d5db;
        margin-top: 16px;
    }
    .ttd-preview .ttd-label {
        font-size: 10px;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 6px;
    }
    .ttd-preview .jabatan {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 2px;
        font-weight: 500;
    }
    .ttd-preview .nama {
        font-size: 18px;
        font-weight: 700;
        color: #1a3c2c;
        text-decoration: underline;
        margin: 4px 0;
    }
    .ttd-preview .nip {
        font-size: 14px;
        color: #4b5563;
    }

    /* ============================================================ */
    /* 🔥🔥🔥 FORM VERTICAL - NAMA DI ATAS, NIP DI BAWAH 🔥🔥🔥 */
    /* ============================================================ */
    .ttd-form-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .ttd-form-wrapper .form-group {
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    .ttd-form-wrapper .form-group label {
        display: block !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        margin-bottom: 4px !important;
    }

    .ttd-form-wrapper .form-group label i {
        margin-right: 4px;
    }

    .ttd-form-wrapper .form-group label .required {
        color: #dc2626 !important;
        margin-left: 2px;
    }

    .ttd-form-wrapper .form-control-custom {
        width: 100% !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        padding: 8px 14px !important;
        border: 2px solid #e5e7eb !important;
        height: 42px !important;
        background: white !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s, box-shadow 0.2s !important;
    }

    .ttd-form-wrapper .form-control-custom:focus {
        border-color: #1a3c2c !important;
        box-shadow: 0 0 0 3px rgba(26, 60, 44, 0.1) !important;
        outline: none !important;
    }

    .ttd-form-wrapper .text-help {
        font-size: 11px !important;
        color: #9ca3af !important;
        margin-top: 4px !important;
    }

    .ttd-form-wrapper .nip-counter-custom {
        font-size: 11px !important;
        color: #6b7280 !important;
        margin-top: 4px !important;
    }

    .ttd-form-wrapper .nip-counter-custom .count {
        font-weight: 700 !important;
        color: #1a3c2c !important;
    }

    .ttd-form-wrapper .btn-simpan-custom {
        background: #1a3c2c !important;
        color: white !important;
        border: none !important;
        border-radius: 40px !important;
        padding: 0 32px !important;
        font-weight: 600 !important;
        height: 42px !important;
        min-width: 140px !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
    }

    .ttd-form-wrapper .btn-simpan-custom:hover {
        background: #0f2a1e !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(26, 60, 44, 0.3) !important;
    }

    .ttd-form-wrapper .btn-simpan-custom i {
        font-size: 16px !important;
    }

    .ttd-form-wrapper .btn-wrapper {
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 4px !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .ttd-form-wrapper .btn-wrapper {
            justify-content: stretch !important;
        }
        .ttd-form-wrapper .btn-simpan-custom {
            width: 100% !important;
            min-width: unset !important;
        }
    }
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2>Laporan Penilaian</h2>
            <p>Rekap hasil pemeriksaan dokumen PBG</p>
        </div>
        <div>
            <a href="{{ route('pemeriksa.laporan.cetak', array_merge(request()->all(), [
                'ttd_nama' => session('ttd_nama', auth()->user()->name),
                'ttd_nip' => session('ttd_nip', auth()->user()->nip ?? '')
            ])) }}" 
               class="btn btn-accent" style="border-radius: 40px;">
                <i class="bi bi-printer-fill me-2"></i> Cetak Laporan
            </a>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- 🔥 FORM TANDA TANGAN - VERTICAL (NAMA DI ATAS, NIP DI BAWAH) 🔥 -->
<!-- ============================================================ -->
<div class="ttd-card">
    <div class="ttd-title">
        <i class="bi bi-pencil-square"></i> Nama Penanda Tangan
    </div>

    <form method="GET" action="{{ route('pemeriksa.laporan') }}">
        @csrf
        <div class="ttd-form-wrapper">
            <!-- NAMA (di atas) -->
            <div class="form-group">
                <label for="ttd_nama">
                    <i class="bi bi-person-fill"></i> Nama Penanda Tangan
                </label>
                <input type="text" 
                       name="ttd_nama" 
                       id="ttd_nama" 
                       class="form-control-custom"
                       value="{{ session('ttd_nama', auth()->user()->name) }}"
                       placeholder="Masukkan nama penanda tangan">
                <div class="text-help">
                    <i class="bi bi-info-circle"></i> Kosongkan untuk menggunakan nama user yang login
                </div>
            </div>

            <!-- NIP (di bawah Nama) -->
            <div class="form-group">
                <label for="ttd_nip">
                    <i class="bi bi-id-card"></i> NIP 
                    <span class="required">*</span>
                </label>
                <input type="text" 
                       name="ttd_nip" 
                       id="ttd_nip"
                       class="form-control-custom"
                       value="{{ session('ttd_nip', auth()->user()->nip ?? '') }}"
                       placeholder="197504022000031005"
                       maxlength="18"
                       pattern="[0-9]{18}"
                       title="NIP harus 18 digit angka"
                       autocomplete="off"
                       required>
                <div class="text-help">
                    <i class="bi bi-info-circle"></i> 18 digit angka (contoh: 197504022000031005)
                </div>
                <div class="nip-counter-custom">
                    <span class="count" id="nipCount">0</span> / 18 karakter
                </div>
            </div>

            <!-- TOMBOL SIMPAN (di bawah NIP, rata kanan) -->
            <div class="btn-wrapper">
                <button type="submit" class="btn-simpan-custom" id="btnSimpan">
                    <i class="bi bi-save"></i> Simpan
                </button>
            </div>
        </div>
    </form>

    <!-- PREVIEW -->
    <div class="ttd-preview">
        <div class="ttd-label">— Preview Tanda Tangan —</div>
        @php
            $roleLabels = [
                'admin' => 'ADMINISTRATOR',
                'operator' => 'OPERATOR',
                'tpa' => 'Tim Pemeriksa A (TPA)',
                'tpt' => 'Tim Pemeriksa Teknis (TPT)',
                'pemohon' => 'PEMOHON',
            ];
            $jabatan = $roleLabels[auth()->user()->role] ?? 'PEMERIKSA';
        @endphp
        <div class="jabatan" id="previewJabatan">{{ $jabatan }}</div>
        <div class="nama" id="previewNama">{{ session('ttd_nama', auth()->user()->name) }}</div>
        <div class="nip" id="previewNip">NIP. {{ session('ttd_nip', auth()->user()->nip ?? '-') }}</div>
    </div>
</div>

<!-- NOTIFIKASI -->
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle me-2"></i> {{ session('success') }}
        <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-circle me-2"></i> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<!-- ============================================================ -->
<!-- STATISTIK -->
<!-- ============================================================ -->
<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <div class="stat-card">
            <div class="stat-icon" style="background: #e0e7ff; color: #4f46e5;">
                <i class="bi bi-files"></i>
            </div>
            <div class="stat-value">{{ $statistik['total'] }}</div>
            <div class="stat-label">Total Pemeriksaan</div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="stat-card">
            <div class="stat-icon" style="background: #d1fae5; color: #059669;">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            <div class="stat-value">{{ $statistik['selesai'] }}</div>
            <div class="stat-label">Selesai / Diverifikasi</div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="stat-card">
            <div class="stat-icon" style="background: #fee2e2; color: #dc2626;">
                <i class="bi bi-arrow-return-left"></i>
            </div>
            <div class="stat-value">{{ $statistik['revisi'] }}</div>
            <div class="stat-label">Perlu Revisi</div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="stat-card">
            <div class="stat-icon" style="background: #fef3c7; color: #d97706;">
                <i class="bi bi-calendar-check"></i>
            </div>
            <div class="stat-value">{{ $statistik['bulan_ini'] }}</div>
            <div class="stat-label">Bulan Ini</div>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- FILTER -->
<!-- ============================================================ -->
<div class="filter-card">
    <form method="GET" action="{{ route('pemeriksa.laporan') }}" class="row g-3 align-items-end">
        <div class="col-md-3">
            <label class="form-label fw-bold small">Tahun</label>
            <select name="tahun" class="form-select">
                <option value="">Semua Tahun</option>
                @foreach($tahunList as $tahun)
                    <option value="{{ $tahun }}" {{ request('tahun') == $tahun ? 'selected' : '' }}>
                        {{ $tahun }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label fw-bold small">Bulan</label>
            <select name="bulan" class="form-select">
                <option value="">Semua Bulan</option>
                @foreach(['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'] as $key => $nama)
                    <option value="{{ $key+1 }}" {{ request('bulan') == $key+1 ? 'selected' : '' }}>
                        {{ $nama }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
    <label class="form-label fw-bold small">Status</label>
    <select name="status" class="form-select">
        <option value="">Semua Status</option>

        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>
            Pending
        </option>

        <option value="ditugaskan" {{ request('status') == 'ditugaskan' ? 'selected' : '' }}>
            Ditugaskan
        </option>

        <option value="diperiksa" {{ request('status') == 'diperiksa' ? 'selected' : '' }}>
            Sedang Diperiksa
        </option>

        <option value="diverifikasi" {{ request('status') == 'diverifikasi' ? 'selected' : '' }}>
            Diverifikasi
        </option>

        <option value="revisi" {{ request('status') == 'revisi' ? 'selected' : '' }}>
            Perlu Revisi
        </option>

        <option value="ditolak" {{ request('status') == 'ditolak' ? 'selected' : '' }}>
            Ditolak
        </option>

        <option value="disetujui" {{ request('status') == 'disetujui' ? 'selected' : '' }}>
            Disetujui
        </option>
    </select>
</div>
        <div class="col-md-3">
            <button type="submit" class="btn btn-primary w-100" style="border-radius: 40px;">
                <i class="bi bi-funnel me-1"></i> Filter
            </button>
        </div>
    </form>
</div>

<!-- ============================================================ -->
<!-- TABEL DATA -->
<!-- ============================================================ -->
<div class="content-card">
    <div class="card-header">
        <i class="bi bi-table me-2"></i> Data Pemeriksaan
        <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</th>
                        <th>Nama Bangunan</th>
                        <th>Lokasi</th>
                        <th>Luas / Lantai</th>
                        <th>Status</th>
                        <th>Tanggal</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pengajuan as $p)
                    <tr>
                        <td>
                            <strong>{{ $p->nomor_pengajuan }}</strong>
                            <div class="small text-muted">{{ $p->created_at->format('d/m/Y H:i') }}</div>
                        </td>
                        <td>
                            <div><strong>{{ $p->nama_lengkap ?? $p->pemohon->name ?? '-' }}</strong></div>
                            <div class="small text-muted">
                                <i class="bi bi-telephone"></i> {{ $p->nomor_kontak ?? '-' }}
                            </div>
                        </td>
                        <td>
                            <div><strong>{{ $p->nama_bangunan }}</strong></div>
                            <div class="small text-muted">
                                {{ $p->fungsi_bangunan ?? $p->jenis_bangunan ?? '-' }}
                            </div>
                        </td>
                        <td>
                            <div><i class="bi bi-geo-alt"></i> {{ $p->kecamatan ?? '-' }}</div>
                            <div class="small text-muted">{{ $p->kelurahan ?? '-' }}</div>
                        </td>
                        <td>
                            <div>{{ number_format($p->luas_bangunan ?? 0, 0) }} m²</div>
                            <div class="small text-muted">{{ $p->jumlah_lantai ?? 0 }} lantai</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="small text-muted">{{ $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" target="_blank">
                                    <i class="bi bi-printer"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted py-5">
                            <i class="bi bi-file-text fs-1 d-block mb-2"></i>
                            Belum ada data pemeriksaan.
                        </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

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // UPDATE PREVIEW
    function updateTtdPreview() {
        var nama = document.getElementById('ttd_nama');
        var nip = document.getElementById('ttd_nip');
        var previewNama = document.getElementById('previewNama');
        var previewNip = document.getElementById('previewNip');

        if (nama && previewNama) {
            previewNama.textContent = nama.value || '{{ auth()->user()->name }}';
        }
        if (nip && previewNip) {
            previewNip.textContent = nip.value ? 'NIP. ' + nip.value : 'NIP. -';
        }
    }

    // VALIDASI NIP
    var nipInput = document.getElementById('ttd_nip');
    var nipCount = document.getElementById('nipCount');

    if (nipInput) {
        nipInput.addEventListener('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '').slice(0, 18);
            if (nipCount) nipCount.textContent = this.value.length;
            updateTtdPreview();
        });
    }

    // UPDATE PREVIEW SAAT NAMA BERUBAH
    var namaInput = document.getElementById('ttd_nama');
    if (namaInput) {
        namaInput.addEventListener('input', updateTtdPreview);
    }

    // CEK NIP SEBELUM SUBMIT
    var btnSimpan = document.getElementById('btnSimpan');
    if (btnSimpan && nipInput) {
        btnSimpan.addEventListener('click', function(e) {
            var nip = nipInput.value.trim();
            if (nip.length > 0 && nip.length !== 18) {
                e.preventDefault();
                alert('⚠️ NIP harus 18 digit angka!');
                nipInput.focus();
            }
        });
    }

    // TOMBOL CETAK
    var cetakBtn = document.querySelector('a[href*="cetak"]');
    if (cetakBtn) {
        cetakBtn.addEventListener('click', function(e) {
            var nama = document.getElementById('ttd_nama')?.value || '{{ auth()->user()->name }}';
            var nip = document.getElementById('ttd_nip')?.value || '';
            var url = new URL(this.href);
            url.searchParams.set('ttd_nama', nama);
            url.searchParams.set('ttd_nip', nip);
            this.href = url.toString();
        });
    }
});
</script>
@endsection