@extends('layouts.admin')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<style>
    .img-profile-table { width: 45px; height: 45px; object-fit: cover; border-radius: 50%; border: 2px solid #e2e8f0; }
    .card-clickable { transition: all 0.3s ease; cursor: pointer; text-decoration: none !important; border: none; border-radius: 15px; }
    .card-clickable:hover { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(0,0,0,0.1) !important; filter: brightness(1.08); }
    .nama-font { font-size: 14px; font-weight: 800; color: #1e293b; display: block; text-transform: uppercase; line-height: 1.2; }
    .nik-font { font-size: 12px; font-weight: 400; color: #64748b; display: block; }
    .table thead th { background: #f8fafc; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: #64748b; padding: 15px 20px; border: none; }
    .table tbody td { padding: 15px 20px; vertical-align: middle; }
    .card-table { border-radius: 15px; border: none; overflow: hidden; }
    .badge-bulan { background: #0d6efd; color: white; font-weight: 800; padding: 4px 8px; border-radius: 4px; font-size: 10px; text-transform: uppercase; display: inline-block; margin-right: 2px; margin-bottom: 2px; }
    .badge-bulan-lunas { background: #198754 !important; }
</style>

<div class="container-fluid px-4 py-4">
    {{-- HEADER --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bold text-dark mb-0">PUSAT KEUANGAN WARGA SINOMAN RW06 RW07 RW08</h3>
            <p class="text-muted mb-0">Monitoring & Validasi Pembayaran Seluruh Wilayah (Superadmin)</p>
        </div>
        <div class="bg-white p-2 rounded shadow-sm border">
            <form action="" method="GET" id="filterForm" class="d-flex align-items-center gap-2">
                <i class="fas fa-filter text-primary small"></i>
                <label class="fw-bold small mb-0">Filter Tahun:</label>
                <select name="tahun" class="form-select form-select-sm border-0 fw-bold" onchange="this.form.submit()" style="width: 100px; cursor: pointer;">
                    @for($i = date('Y'); $i >= 2023; $i--)
                        <option value="{{ $i }}" {{ $tahun == $i ? 'selected' : '' }}>{{ $i }}</option>
                    @endfor
                </select>
            </form>
        </div>
    </div>

    {{-- Widget Summary Toggle --}}
    <div class="row mb-4">
        <div class="col-xl-4 col-md-12 mb-4">
            <div onclick="toggleDetails()" class="card card-clickable bg-dark text-white shadow-sm h-100">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between mb-3">
                        <div>
                            <small class="text-uppercase fw-bold opacity-75">Saldo Gabungan</small>
                            <h2 class="fw-bold mb-0">Rp {{ number_format(($total_registrasi + $total_iuran), 0, ',', '.') }}</h2>
                        </div>
                        <i class="fas fa-wallet fa-3x opacity-25"></i>
                    </div>
                    <div class="pt-3 border-top border-white border-opacity-25 d-flex justify-content-between align-items-center">
                        <span class="small" id="toggle-text">Klik untuk rincian laporan</span>
                        <i class="fas fa-chevron-down" id="toggle-icon"></i>
                    </div>
                </div>
            </div>
        </div>

        <div id="detail-finance-cards" class="col-xl-8 col-md-12 row p-0 m-0" style="display: none;">
            <div class="col-md-6 mb-4">
                <a href="{{ route('adminrw.laporan_registrasi') }}" class="card card-clickable bg-primary text-white shadow-sm h-100 animate__animated animate__fadeInLeft">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between mb-3">
                            <div>
                                <small class="text-uppercase fw-bold opacity-75">Total Registrasi</small>
                                <h3 class="fw-bold mb-0">Rp {{ number_format($total_registrasi, 0, ',', '.') }}</h3>
                            </div>
                            <i class="fas fa-file-invoice-dollar fa-2x opacity-25"></i>
                        </div>
                        <div class="pt-2 border-top border-white border-opacity-25 d-flex justify-content-between align-items-center">
                            <span class="small">Laporan Pendaftaran</span>
                            <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-6 mb-4">
                <a href="{{ route('adminrw.laporan_iuran') }}" class="card card-clickable bg-success text-white shadow-sm h-100 animate__animated animate__fadeInLeft">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between mb-3">
                            <div>
                                <small class="text-uppercase fw-bold opacity-75">Total Iuran</small>
                                <h3 class="fw-bold mb-0">Rp {{ number_format($total_iuran, 0, ',', '.') }}</h3>
                            </div>
                            <i class="fas fa-coins fa-2x opacity-25"></i>
                        </div>
                        <div class="pt-2 border-top border-white border-opacity-25 d-flex justify-content-between align-items-center">
                            <span class="small">Detail Iuran Bulanan</span>
                            <i class="fas fa-arrow-circle-right"></i>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    {{-- Tabel Validasi Registrasi --}}
    <div class="card card-table shadow-sm mb-5">
        <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold text-primary"><i class="fas fa-user-plus me-2"></i>Validasi Registrasi Baru (Semua Wilayah)</h5>
        </div>
        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th>Warga / NIK</th>
                        <th>Wilayah (RT/RW)</th>
                        <th>Nominal</th>
                        <th>Bukti Bayar</th>
                        <th>Status Akun</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($registrasi as $reg)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                @php $avatar = ($reg->user->profile && $reg->user->profile->foto_path) ? asset('storage/foto_user/' . ltrim($reg->user->profile->foto_path, '/')) : "https://ui-avatars.com/api/?name=".urlencode($reg->user->name); @endphp
                                <img src="{{ $avatar }}" class="img-profile-table me-3 shadow-sm">
                                <div>
                                    <span class="nama-font">{{ $reg->user->profile->nama_lengkap ?? $reg->user->name }}</span>
                                    <span class="nik-font">NIK: {{ $reg->user->profile->nik ?? '-' }}</span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-warning text-dark border">
                                RT {{ str_pad($reg->user->ksk->rt ?? '0', 2, '0', STR_PAD_LEFT) }} / RW {{ str_pad($reg->user->rw->kode_rw ?? '0', 2, '0', STR_PAD_LEFT) }}
                            </span>
                        </td>
                        <td class="fw-bold text-dark">Rp {{ number_format($reg->nominal, 0, ',', '.') }}</td>
                        <td>
                            @if($reg->bukti_transfer)
                                <a href="{{ asset('storage/' . $reg->bukti_transfer) }}" target="_blank" class="btn btn-sm btn-outline-info">
                                    <i class="fas fa-image me-1"></i> Lihat Bukti
                                </a>
                            @else
                                <span class="badge bg-secondary opacity-50">Belum Upload</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge {{ $reg->status == 'valid' ? 'bg-success' : 'bg-danger' }} px-3 py-2">
                                {{ strtoupper($reg->status == 'valid' ? 'Aktif' : 'Menunggu') }}
                            </span>
                        </td>
                        <td>
                            @if($reg->status != 'valid')
                                <form action="{{ route('adminrw.validasiRegistrasi', $reg->id) }}" method="POST" id="form-reg-{{ $reg->id }}">
                                    @csrf
                                    <button type="button" onclick="confirmRegistrasi({{ $reg->id }}, '{{ $reg->user->name }}')" class="btn btn-primary btn-sm px-3 fw-bold">
                                        VERIFIKASI & AKTIFKAN
                                    </button>
                                </form>
                            @else
                                <div class="text-success small fw-bold">
                                    <i class="fas fa-check-double me-1"></i> TERVERIFIKASI<br>
                                    <span class="text-muted" style="font-size: 10px;">NIS: {{ $reg->user->nis }}</span>
                                </div>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center py-5 text-muted">Data registrasi tidak ditemukan.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Tabel Validasi Iuran --}}
    <div class="card card-table shadow-sm mb-4">
        <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold text-success"><i class="fas fa-money-check-alt me-2"></i>Validasi Iuran Masuk (Global)</h5>
        </div>
        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th>Warga</th>
                        <th>Wilayah</th>
                        <th style="width: 250px;">Bulan Dibayar</th>
                        <th>Total Nominal</th>
                        <th>Bukti</th>
                        <th>Tindakan Superadmin</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($iuran as $bukti => $group)
                    @php $first = $group->first(); @endphp
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                @php $avatarIuran = ($first->user->profile && $first->user->profile->foto_path) ? asset('storage/foto_user/' . ltrim($first->user->profile->foto_path, '/')) : "https://ui-avatars.com/api/?name=".urlencode($first->user->name); @endphp
                                <img src="{{ $avatarIuran }}" class="img-profile-table me-3 shadow-sm">
                                <div>
                                    <span class="nama-font">{{ $first->user->profile->nama_lengkap ?? $first->user->name }}</span>
                                    <span class="nik-font">NIS: {{ $first->user->nis ?? '-' }}</span>
                                </div>
                            </div>
                        </td>
                        <td>
                             <span class="badge bg-dark text-white border">
                                RW {{ str_pad($first->user->rw->kode_rw ?? '0', 2, '0', STR_PAD_LEFT) }}
                            </span>
                        </td>
                        <td>
                            @foreach($group as $item)
                                <span class="badge-bulan {{ $item->status == 'diterima_admin_rw' ? 'badge-bulan-lunas' : '' }}">
                                    {{ $bulanIndo[$item->iuran->bulan] ?? $item->iuran->bulan }}
                                </span>
                            @endforeach
                        </td>
                        <td class="fw-bold text-success">Rp {{ number_format($group->sum('nominal_dibayar'), 0, ',', '.') }}</td>
                        <td>
                            <a href="{{ asset('storage/' . $bukti) }}" target="_blank" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-file-invoice"></i>
                            </a>
                        </td>
                        <td>
                            @if($first->status != 'diterima_admin_rw')
                                <div class="d-flex align-items-center gap-2">
                                    <form action="{{ route('adminrw.validasiIuran', str_replace(['/', '\\'], '-', $bukti)) }}" method="POST" class="d-flex gap-2">
                                        @csrf
                                        <input type="text" name="catatan_admin" class="form-control form-control-sm" placeholder="Catatan Opsional" style="width: 120px;">
                                        <button type="submit" class="btn btn-success btn-sm fw-bold">TERIMA</button>
                                    </form>

                                    @php $idClean = str_replace(['/', '\\', '.', '-'], '', $bukti); @endphp
                                    <form action="{{ route('adminrw.tolakIuran', str_replace(['/', '\\'], '-', $bukti)) }}" method="POST" id="form-tolak-{{ $idClean }}">
                                        @csrf
                                        <button type="button" onclick="confirmTolak('{{ $idClean }}')" class="btn btn-danger btn-sm fw-bold">TOLAK</button>
                                    </form>
                                </div>
                            @else
                                <span class="badge bg-success px-3 py-2"><i class="fas fa-check-circle me-1"></i> VALIDATED</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center py-5 text-muted">Belum ada iuran masuk untuk divalidasi.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function toggleDetails() {
        const detailCards = document.getElementById('detail-finance-cards');
        const icon = document.getElementById('toggle-icon');
        const text = document.getElementById('toggle-text');

        if (detailCards.style.display === 'none') {
            detailCards.style.display = 'flex';
            icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
            text.innerText = 'Klik untuk tutup rincian';
        } else {
            detailCards.style.display = 'none';
            icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
            text.innerText = 'Klik untuk rincian laporan';
        }
    }

    function confirmRegistrasi(id, nama) {
        Swal.fire({
            title: 'Validasi Warga Baru?',
            html: `Konfirmasi pembayaran pendaftaran atas nama <b>${nama}</b>.<br><br><span class="badge bg-primary">User akan aktif dan mendapatkan NIS otomatis sesuai wilayahnya.</span>`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#0d6efd',
            confirmButtonText: 'Ya, Validasi Akun',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-reg-' + id).submit();
            }
        })
    }

    function confirmTolak(idClean) {
        Swal.fire({
            title: 'Tolak Pembayaran?',
            text: "Data iuran ini akan dihapus permanen agar warga bisa mengunggah ulang bukti bayar yang benar.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: 'Ya, Tolak Pembayaran',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-tolak-' + idClean).submit();
            }
        })
    }
</script>
@endsection