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

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.warga.index') }}">Data Warga</a></li>
            <li class="breadcrumb-item active">Detail Warga</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1"><i class="bi bi-person-lines-fill me-2"></i>Detail Warga</h2>
            <p class="text-muted mb-0">Informasi lengkap data warga</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.warga.edit', $warga) }}" class="btn btn-warning">
                <i class="bi bi-pencil me-2"></i>Edit
            </a>
            <a href="{{ route('admin.warga.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>Kembali
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Data Warga -->
        <div class="col-md-8 mb-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-person-circle me-2"></i>Informasi Warga</h5>
                </div>
                <div class="card-body p-4">
                    <table class="table table-borderless mb-0">
                        <tr>
                            <td width="180" class="text-muted fw-semibold">NIK</td>
                            <td>: <code class="fs-6">{{ $warga->nik }}</code></td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold">Nama Lengkap</td>
                            <td>: <strong class="fs-5">{{ $warga->nama }}</strong></td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold">Alamat</td>
                            <td>: {{ $warga->alamat }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold">Dusun</td>
                            <td>: {{ $warga->dusun ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold">RT / RW</td>
                            <td>: RT {{ $warga->rt ?? '-' }} / RW {{ $warga->rw ?? '-' }}</td>
                        </tr>
                        @if($warga->wilayah)
                        <tr>
                            <td class="text-muted fw-semibold">Wilayah</td>
                            <td>: {{ $warga->wilayah->nama_wilayah }}</td>
                        </tr>
                        @endif
                        <tr>
                            <td class="text-muted fw-semibold">No. Telepon</td>
                            <td>: {{ $warga->no_telp ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold">Koordinat</td>
                            <td>:
                                @if($warga->latitude && $warga->longitude)
                                <span class="font-monospace">
                                    {{ $warga->latitude }}, {{ $warga->longitude }}
                                </span>
                                <span class="badge bg-info ms-2">Pusat RW</span>
                                @else
                                <span class="text-muted">-</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold">Status</td>
                            <td>:
                                @if($warga->is_aktif)
                                <span class="badge bg-success fs-6">Aktif</span>
                                @else
                                <span class="badge bg-secondary fs-6">Non-aktif</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold">Data Dibuat</td>
                            <td>: {{ $warga->created_at->format('d F Y, H:i') }} WIB</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-semibold">Terakhir Diupdate</td>
                            <td>: {{ $warga->updated_at->format('d F Y, H:i') }} WIB</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Action & Info Tambahan -->
        <div class="col-md-4 mb-4">
            <!-- Status Card -->
            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>Status Warga</h6>
                </div>
                <div class="card-body text-center py-4">
                    @if($warga->is_aktif)
                    <i class="bi bi-check-circle-fill text-success display-4"></i>
                    <h5 class="mt-3 mb-1">Warga Aktif</h5>
                    <p class="text-muted small mb-0">Dapat diikutsertakan dalam seleksi BLT-DD</p>
                    @else
                    <i class="bi bi-x-circle-fill text-secondary display-4"></i>
                    <h5 class="mt-3 mb-1">Warga Non-aktif</h5>
                    <p class="text-muted small mb-0">Tidak dapat diikutsertakan dalam seleksi</p>
                    @endif
                </div>
            </div>

            <!-- Action Card -->
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white">
                    <h6 class="mb-0"><i class="bi bi-gear me-2"></i>Aksi</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.warga.edit', $warga) }}" class="btn btn-warning">
                            <i class="bi bi-pencil me-2"></i>Edit Data Warga
                        </a>
                        <form action="{{ route('admin.warga.destroy', $warga) }}" method="POST" onsubmit="return confirm('Yakin hapus data {{ $warga->nama }}? Data yang terhapus tidak dapat dikembalikan!')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="bi bi-trash me-2"></i>Hapus Data Warga
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .table-borderless td {
        padding: 0.75rem 0;
    }
</style>
@endpush
@endsection