@extends('layouts.app')

@section('content')

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
*, *::before, *::after { box-sizing: border-box; }

body { font-family: 'Plus Jakarta Sans', sans-serif; }

.page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.page-header-icon {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #064e3b, #0d6e4f);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(6,78,59,0.3);
}

.page-header h1 {
    font-size: 22px;
    font-weight: 800;
    color: #1a2e1a;
    margin: 0;
    line-height: 1.2;
}

.page-header p {
    font-size: 13px;
    color: #8a9e8a;
    margin: 0;
}

/* ── ALERT ── */
.alert-success-custom {
    background: #f0faf4;
    border: 1px solid #a8e6be;
    border-left: 4px solid #1a6e3a;
    border-radius: 12px;
    padding: 12px 16px;
    color: #1a4e2a;
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

/* ── CARD ── */
.premium-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e8f0e8;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    margin-bottom: 24px;
    overflow: hidden;
}

.premium-card-header {
    padding: 16px 22px;
    background: #ffffff;
    border-bottom: 1px solid #f0f5f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.premium-card-header .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.header-icon.green { background: #d1fae5; color: #064e3b; }
.header-icon.blue  { background: #eaf0fb; color: #1a4e8e; }

.premium-card-header h6 {
    font-size: 14px;
    font-weight: 700;
    color: #1a2e1a;
    margin: 0;
}

.premium-card-body { padding: 20px 22px; }

/* ── KAVLING GRID ── */
.kavling-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #5a6e5a;
    font-weight: 500;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.legend-dot.kosong { background: #064e3b; }
.legend-dot.terisi { background: #e53e3e; }

.kavling-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
}

.kavling {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 52px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    user-select: none;
}

.kavling span.kav-label {
    font-size: 9px;
    font-weight: 500;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

.kosong {
    background: linear-gradient(135deg, #064e3b, #0d6e4f);
    box-shadow: 0 2px 8px rgba(6,78,59,0.3);
}

.terisi {
    background: linear-gradient(135deg, #c53030, #e53e3e);
    cursor: not-allowed;
    box-shadow: 0 2px 8px rgba(197,48,48,0.25);
}

.kosong:hover {
    box-shadow: 0 6px 18px rgba(6,78,59,0.4);
}

/* ══════════════════════════════════════
   TABLE SCROLL WRAPPER
   — membungkus seluruh DataTable wrapper
   ══════════════════════════════════════ */
.dt-scroll-outer {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* scrollbar tipis agar tidak memakan ruang */
}

.dt-scroll-outer::-webkit-scrollbar {
    height: 5px;
}
.dt-scroll-outer::-webkit-scrollbar-track {
    background: #f0f5f0;
}
.dt-scroll-outer::-webkit-scrollbar-thumb {
    background: #b0cdb0;
    border-radius: 10px;
}

/* ── TABLE ── */
.premium-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

/* Lebar minimum tabel agar semua kolom tampil */
#tablePenghuni { min-width: 1080px; }
#tableRumah    { min-width: 780px; }

.premium-table thead tr th {
    background: #f6fbf7;
    color: #3a5a3a;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 11px 14px;
    border-bottom: 2px solid #e0ede0;
    white-space: nowrap;
}

.premium-table thead tr th:first-child { border-radius: 10px 0 0 0; }
.premium-table thead tr th:last-child  { border-radius: 0 10px 0 0; }

.premium-table tbody tr td {
    padding: 11px 14px;
    border-bottom: 1px solid #f2f7f2;
    color: #2a3a2a;
    vertical-align: middle;
}

/* Kolom yang memang sebaiknya tidak wrap */
.premium-table tbody tr td.nowrap { white-space: nowrap; }

.premium-table tbody tr:hover td {
    background: #f8fdf8;
}

.premium-table tbody tr:last-child td { border-bottom: none; }

/* badges */
.badge-pill-custom {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-green  { background: #eaf7f0; color: #1a6e3a; }
.badge-red    { background: #fdf0f0; color: #c53030; }
.badge-yellow { background: #fdfbea; color: #7a6010; }

/* action buttons */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
}

.btn-action:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-action:active { transform: translateY(0); }

.btn-action.info   { background: #eaf0fb; color: #1a4e8e; }
.btn-action.warn   { background: #fdf8ea; color: #8a6000; }
.btn-action.danger { background: #fdf0f0; color: #c53030; }

.btn-group-action {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

/* ── MODAL ── */
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

.modal-header-custom {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #10b981 100%);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header-custom h5 {
    color: white;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.modal-header-custom .modal-icon {
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.18);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.modal-detail-body { padding: 22px 24px; }

.modal-detail-body button[type="submit"] {
    background: linear-gradient(135deg, #064e3b, #10b981) !important;
}

.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f2f7f2;
}

.detail-row:last-child { border-bottom: none; }

.detail-row .detail-icon {
    width: 30px;
    height: 30px;
    background: #ecfdf5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #064e3b;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.detail-row .detail-label {
    font-size: 11px;
    color: #8a9e8a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.detail-row .detail-value {
    font-size: 13.5px;
    color: #1a2e1a;
    font-weight: 600;
}

.detail-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #064e3b;
    padding: 14px 0 6px;
    border-top: 2px dashed #d1fae5;
    margin-top: 6px;
}

/* ══════════════════════════════════════
   DATATABLE OVERRIDES
   ══════════════════════════════════════ */
.dataTables_wrapper {
    padding: 0;
}

/* Baris atas: length + filter */
.dataTables_wrapper > div:first-child {
    padding: 14px 22px 10px;
    border-bottom: 1px solid #f0f5f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 13px;
    color: #5a6e5a;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: 9px;
    border: 1.5px solid #e0ede0;
    padding: 6px 12px;
    font-size: 13px;
    outline: none;
    margin-left: 6px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #1a6e3a;
    box-shadow: 0 0 0 3px rgba(26,110,58,0.12);
}

.dataTables_wrapper .dataTables_length select {
    border-radius: 9px;
    border: 1.5px solid #e0ede0;
    padding: 5px 10px;
    font-size: 13px;
    margin: 0 6px;
}

/* Baris bawah: info + paginate */
.dataTables_wrapper > div:last-child {
    padding: 14px 22px;
    border-top: 1px solid #f0f5f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dataTables_wrapper .dataTables_info {
    font-size: 12.5px;
    color: #8a9e8a;
    font-weight: 500;
    padding: 0;
    line-height: 36px;
}

div.dataTables_wrapper div.dataTables_paginate {
    display: flex !important;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 0; }

div.dataTables_wrapper div.dataTables_paginate .paginate_button {
    box-sizing: border-box !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 2px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1.5px solid #e0ede0 !important;
    color: #5a6e5a !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: #f0f7ff !important;
    border-color: #90caf9 !important;
    color: #1976d2 !important;
    box-shadow: none !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover {
    background: #ffffff !important;
    border: 2px solid #2196f3 !important;
    color: #2196f3 !important;
    box-shadow: 0 0 0 3px rgba(33,150,243,0.12) !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled:hover {
    color: #c8d8c8 !important;
    border-color: #edf5ed !important;
    background: #fafafa !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 992px) {
    .page-header h1 { font-size: 18px; }
    .page-header p  { font-size: 12px; }

    .kavling-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
    .kavling { height: 48px; font-size: 12px; }
    .kavling span.kav-label { font-size: 8px; }

    .dataTables_wrapper > div:first-child,
    .dataTables_wrapper > div:last-child {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 12px 16px;
    }

    .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
    .dataTables_wrapper .dataTables_filter label { flex-direction: column; align-items: flex-start; width: 100%; }

    .premium-card-body { padding: 16px; }
    .premium-card-header { padding: 14px 16px; }
}

@media (max-width: 576px) {
    .container-fluid { padding-left: 12px; padding-right: 12px; }

    .page-header { gap: 10px; margin-bottom: 20px; }
    .page-header-icon { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
    .page-header h1 { font-size: 15px; }
    .page-header p  { font-size: 11px; }

    .alert-success-custom { font-size: 12.5px; padding: 10px 14px; }

    .premium-card { border-radius: 12px; margin-bottom: 16px; }
    .premium-card-header { padding: 12px 14px; }
    .premium-card-header h6 { font-size: 13px; }
    .premium-card-body { padding: 0; }

    .kavling-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .kavling { height: 42px; font-size: 11px; border-radius: 8px; }
    .kavling span.kav-label { display: none; }
    .kavling-legend { gap: 12px; }
    .legend-item { font-size: 11.5px; }

    .premium-card-body.kav-body { padding: 12px; }

    .badge-pill-custom { font-size: 10.5px; padding: 3px 8px; }
    .btn-action { padding: 4px 8px; font-size: 11px; gap: 3px; }

    .dataTables_wrapper > div:first-child,
    .dataTables_wrapper > div:last-child {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 10px 12px;
    }

    .dataTables_wrapper .dataTables_info { line-height: 1.5; }

    div.dataTables_wrapper div.dataTables_paginate .paginate_button {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 12px !important;
    }

    .modal-dialog { margin: 10px; }
    .modal-content { border-radius: 12px !important; }
    .modal-header-custom { padding: 14px 16px; }
    .modal-header-custom h5 { font-size: 13.5px; }
    .modal-detail-body { padding: 16px; }
    .detail-row .detail-value { font-size: 13px; }
}

@media (max-width: 380px) {
    .kavling-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .kavling { height: 36px; font-size: 10px; border-radius: 6px; }
    .page-header h1 { font-size: 14px; }
}

{{-- tambah style dulu di dalam <style> --}}
.sudah-input {
    background: linear-gradient(135deg, #92400e, #b45309);
    cursor: not-allowed;
    box-shadow: 0 2px 8px rgba(146,64,14,0.25);
}
.legend-dot.sudah { background: #b45309; }

/* Legend tambahan */
.legend-dot.diinput { background: #fde68a; }

/* Denah cluster */
.denah-clusters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.cluster-section { margin-bottom: 16px; }

.cluster-title {
    font-size: 11px;
    font-weight: 600;
    color: #5a6e5a;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.kavling-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.kavling-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform .1s, box-shadow .1s;
    user-select: none;
}

.kavling-item .kav-num { font-size: 11px; font-weight: 700; line-height: 1; }
.kavling-item .kav-lbl { font-size: 7px; font-weight: 500; opacity: .75; margin-top: 2px; text-transform: uppercase; }

.kavling-item.kosong  { background: #d1fae5; border-color: #6ee7b7; color: #064e3b; }
.kavling-item.kosong:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(6,78,59,.25); }
.kavling-item.diinput { background: #fde68a; border-color: #f59e0b; color: #78350f; cursor: not-allowed; }
.kavling-item.terisi  { background: #fecaca; border-color: #f87171; color: #7f1d1d; cursor: not-allowed; }

@media (max-width: 768px) {
    .denah-clusters { grid-template-columns: 1fr; }
    .kavling-item { width: 40px; height: 40px; }
}
</style>

<div class="container-fluid">

    {{-- PAGE HEADER --}}
    <div class="page-header">
        <div class="page-header-icon"><i class="fas fa-home"></i></div>
        <div>
            <h1>Kelola Data Perumahan</h1>
            <p>Manajemen kavling, penghuni, dan rumah</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert-success-custom">
            <i class="fas fa-check-circle"></i>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
    <div class="alert-success-custom" style="background:#fdf0f0; border-color:#fca5a5; border-left-color:#c53030; color:#c53030;">
        <i class="fas fa-exclamation-circle"></i>
        {{ session('error') }}
    </div>
    @endif

    {{-- KAVLING VISUAL --}}
<div class="premium-card">
    <div class="premium-card-header">
        <div class="header-left">
            <div class="header-icon green"><i class="fas fa-th"></i></div>
            <h6>Denah Kavling</h6>
        </div>
    </div>
    <div class="premium-card-body kav-body">

        <div class="kavling-legend">
            <div class="legend-item"><div class="legend-dot kosong"></div> Kosong — tersedia</div>
            <div class="legend-item"><div class="legend-dot diinput"></div> Sudah Diinput — belum ada penghuni</div>
            <div class="legend-item"><div class="legend-dot terisi"></div> Terisi — ada penghuni</div>
        </div>

        @php
        $clusterDef = [
            ['name' => 'Cluster Gardenia Blok A', 'blok' => 'A', 'max' => 24],
            ['name' => 'Cluster Gardenia Blok B', 'blok' => 'B', 'max' => 20],
            ['name' => 'Cluster Gardenia Blok C', 'blok' => 'C', 'max' => 24],
            ['name' => 'Cluster Gardenia Blok D', 'blok' => 'D', 'max' => 20],
            ['name' => 'Cluster Gardenia Blok E', 'blok' => 'E', 'max' => 20],
            ['name' => 'Cluster Gardenia Blok F', 'blok' => 'F', 'max' => 21],
            ['name' => 'Cluster Gardenia Blok G', 'blok' => 'G', 'max' => 32],
            ['name' => 'Cluster Edelweis Blok H', 'blok' => 'H', 'max' => 37],
            ['name' => 'Cluster Edelweis Blok I', 'blok' => 'I', 'max' => 31],
            ['name' => 'Blok J',                  'blok' => 'J', 'max' => 17],
            ['name' => 'Blok K',                  'blok' => 'K', 'max' => 16],
            ['name' => 'Blok L',                  'blok' => 'L', 'max' => 10],
        ];
        @endphp

        <div class="denah-clusters">
        @foreach($clusterDef as $cl)
            <div class="cluster-section">
                <div class="cluster-title">{{ $cl['name'] }}</div>
                <div class="kavling-row">
                    @for($i = 1; $i <= $cl['max']; $i++)
                        @php
                            $dataRumah = $rumahList->where('blok', $cl['blok'])->where('no_rumah', $i)->first();
                            if (!$dataRumah) {
                                $kelas = 'kosong';
                                $lbl   = 'Kosong';
                            } elseif ($dataRumah->status == 'Terisi') {
                                $kelas = 'terisi';
                                $lbl   = 'Terisi';
                            } else {
                                $kelas = 'diinput';
                                $lbl   = 'Input';
                            }
                        @endphp
                        <div class="kavling-item {{ $kelas }}"
                            @if($kelas == 'kosong')
                                onclick="pilihKavling('{{ $cl['blok'] }}', {{ $i }})"
                            @endif
                            title="{{ $cl['blok'] }}{{ $i }} — {{ $lbl }}">
                            <span class="kav-num">{{ $cl['blok'] }}{{ $i }}</span>
                            <span class="kav-lbl">{{ $lbl }}</span>
                        </div>
                    @endfor
                </div>
            </div>
        @endforeach
        </div>

    </div>
</div>

    {{-- DATA PENGHUNI --}}
    <div class="premium-card">
        <div class="premium-card-header">
            <div class="header-left">
                <div class="header-icon blue"><i class="fas fa-users"></i></div>
                <h6>Data Penghuni</h6>
            </div>
        </div>
        <div class="premium-card-body" style="padding:0;">
            {{-- Wrapper scroll horizontal membungkus SELURUH DataTable --}}
            <div class="dt-scroll-outer" id="wrap-penghuni">
                <table class="premium-table" id="tablePenghuni">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Nama</th>
                            <th>No KTP</th>
                            <th>Email</th>
                            <th>No HP</th>
                            <th>Alamat</th>
                            {{-- Header --}}
                            <th>Cluster</th>
                            <th>Blok</th>
                            <th>No Rumah</th>

                            {{-- Body --}}
                            @php
                            $clusterMap = [
                                'A'=>'Gardenia','B'=>'Gardenia','C'=>'Gardenia',
                                'D'=>'Gardenia','E'=>'Gardenia','F'=>'Gardenia','G'=>'Gardenia',
                                'H'=>'Edelweis','I'=>'Edelweis',
                                'J'=>'J','K'=>'K','L'=>'L',
                            ];
                            $blok = $p->rumah->blok ?? '-';
                            $cluster = isset($clusterMap[$blok]) ? 'Cluster '.$clusterMap[$blok] : '-';
                            @endphp
                            <th>Status</th>
                            <th>Status Huni</th>
                            <th>Tgl Masuk</th>
                            <th>Tgl Keluar</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($penghuni as $p)
                            <tr>
                                <td class="nowrap">{{ $loop->iteration }}</td>
                                <td class="nowrap"><strong>{{ $p->nama }}</strong></td>
                                <td class="nowrap">{{ $p->no_ktp }}</td>
                                <td class="nowrap">{{ $p->email }}</td>
                                <td class="nowrap">{{ $p->telepon }}</td>
                                <td>{{ $p->alamat }}</td>
                                <td class="nowrap">{{ $cluster }}</td>
                                <td class="nowrap">{{ $blok }}</td>
                                <td class="nowrap">{{ $p->rumah->no_rumah ?? '-' }}</td>
                                <td class="nowrap">
                                    @if($p->status_huni == 'Kontrak' && $p->tanggal_keluar && now()->gt($p->tanggal_keluar))
                                        <span class="badge-pill-custom badge-red"><i class="fas fa-times-circle" style="font-size:10px"></i> Tidak Aktif</span>
                                    @else
                                        <span class="badge-pill-custom badge-green"><i class="fas fa-check-circle" style="font-size:10px"></i> Aktif</span>
                                    @endif
                                </td>
                                <td class="nowrap"><span class="badge-pill-custom badge-yellow">{{ $p->status_huni }}</span></td>
                                <td class="nowrap">{{ \Carbon\Carbon::parse($p->tanggal_masuk)->format('d-m-Y') }}</td>
                                <td class="nowrap">{{ $p->tanggal_keluar ?? '-' }}</td>
                                <td class="nowrap">
                                    <div class="btn-group-action">
                                        <a href="{{ route('penghuni.edit', $p->id) }}" class="btn-action warn">
                                            <i class="fas fa-edit" style="font-size:11px"></i> Edit
                                        </a>
                                        <a href="{{ route('penghuni.delete', $p->id) }}" class="btn-action danger"
                                            onclick="return confirm('Yakin hapus?')">
                                            <i class="fas fa-trash" style="font-size:11px"></i> Hapus
                                        </a>
                                    </div>
                                </td>
                            </tr>
                       @empty
                            <tr>
                                <td colspan="14" style="text-align:center; padding:32px; color:#aaa;">
                                    <i class="fas fa-inbox" style="font-size:28px; display:block; margin-bottom:8px; opacity:0.4;"></i>
                                    Belum ada data penghuni
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- DATA RUMAH --}}
    <div class="premium-card">
        <div class="premium-card-header">
            <div class="header-left">
                <div class="header-icon green"><i class="fas fa-house-user"></i></div>
                <h6>Data Rumah</h6>
            </div>
        </div>
        <div class="premium-card-body" style="padding:0;">
            <div class="dt-scroll-outer" id="wrap-rumah">
                <table class="premium-table" id="tableRumah">
                    <thead>
                        <tr>
                            {{-- Header --}}
                            <th>#</th>
                            <th>Cluster</th>
                            <th>Blok</th>
                            <th>No Rumah</th>
                            <th>Status</th>
                            <th>Luas Tanah</th>
                            <th>Harga</th>
                            <th>Keterangan</th>
                            <th>Aksi</th>

                            {{-- Body --}}
                            @php
                            $clusterMap = [
                                'A'=>'Gardenia','B'=>'Gardenia','C'=>'Gardenia',
                                'D'=>'Gardenia','E'=>'Gardenia','F'=>'Gardenia','G'=>'Gardenia',
                                'H'=>'Edelweis','I'=>'Edelweis',
                                'J'=>'J','K'=>'K','L'=>'L',
                            ];
                            $blokR = $r->blok;
                            $clusterR = isset($clusterMap[$blokR]) ? 'Cluster '.$clusterMap[$blokR] : '-';
                            @endphp
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rumahList as $r)
                            <tr>
                                <td class="nowrap">{{ $loop->iteration }}</td>
                                <td class="nowrap">{{ $clusterR }}</td>
                                <td class="nowrap"><strong>{{ $r->blok }}</strong></td>
                                <td class="nowrap">{{ $r->no_rumah }}</td>
                                <td class="nowrap">
                                    @if($r->status == 'Kosong')
                                        <span class="badge-pill-custom badge-green"><i class="fas fa-check-circle" style="font-size:10px"></i> Kosong</span>
                                    @else
                                        <span class="badge-pill-custom badge-red"><i class="fas fa-times-circle" style="font-size:10px"></i> Terisi</span>
                                    @endif
                                </td>
                                <td class="nowrap">{{ $r->luas_tanah ? $r->luas_tanah . ' m²' : '-' }}</td>
                                <td class="nowrap">
                                    @if($r->harga)
                                        <strong>Rp {{ number_format($r->harga, 0, ',', '.') }}</strong>
                                    @else -
                                    @endif
                                </td>
                                <td>{{ $r->keterangan ?? '-' }}</td>
                                <td class="nowrap">
                                    <div class="btn-group-action">
                                        <button class="btn-action info btn-detail"
                                            data-blok="{{ $r->blok }}"
                                            data-nomor="{{ $r->no_rumah }}"
                                            data-status="{{ $r->status }}"
                                            data-nama="{{ $r->penghuni->nama ?? 'Kosong' }}"
                                            data-email="{{ $r->penghuni->email ?? '-' }}"
                                            data-telepon="{{ $r->penghuni->telepon ?? '-' }}">
                                            <i class="fas fa-eye" style="font-size:11px"></i> Detail
                                        </button>
                                        <a href="{{ route('rumah.edit', $r->id) }}" class="btn-action warn">
                                            <i class="fas fa-edit" style="font-size:11px"></i> Edit
                                        </a>
                                        <form action="{{ route('rumah.destroy', $r->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn-action danger" onclick="return confirm('Yakin hapus?')">
                                                <i class="fas fa-trash" style="font-size:11px"></i> Hapus
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                          @empty
    <tr>
        <td colspan="9" style="text-align:center; padding:32px; color:#aaa;">
            <i class="fas fa-inbox" style="font-size:28px; display:block; margin-bottom:8px; opacity:0.4;"></i>
            Belum ada data rumah
        </td>
    </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

{{-- MODAL DETAIL --}}
<div class="modal fade" id="modalDetail">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header-custom">
                <div class="modal-icon"><i class="fas fa-home"></i></div>
                <h5>Detail Rumah &amp; Penghuni</h5>
            </div>
            <div class="modal-detail-body">
                <div class="detail-row">
                    <div class="detail-icon"><i class="fas fa-map-marker-alt"></i></div>
                    <div>
                        <div class="detail-label">Blok</div>
                        <div class="detail-value" id="d_blok">—</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="fas fa-hashtag"></i></div>
                    <div>
                        <div class="detail-label">Nomor Rumah</div>
                        <div class="detail-value" id="d_nomor">—</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="fas fa-info-circle"></i></div>
                    <div>
                        <div class="detail-label">Status</div>
                        <div class="detail-value" id="d_status">—</div>
                    </div>
                </div>
                <div class="detail-section-title"><i class="fas fa-user" style="margin-right:6px;"></i>Data Penghuni</div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="fas fa-user"></i></div>
                    <div>
                        <div class="detail-label">Nama</div>
                        <div class="detail-value" id="d_nama">—</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="fas fa-envelope"></i></div>
                    <div>
                        <div class="detail-label">Email</div>
                        <div class="detail-value" id="d_email">—</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="fas fa-phone"></i></div>
                    <div>
                        <div class="detail-label">No HP</div>
                        <div class="detail-value" id="d_telepon">—</div>
                    </div>
                </div>
                <div style="text-align:right; margin-top:18px;">
                    <button class="btn-action info" data-dismiss="modal">
                        <i class="fas fa-times" style="font-size:11px"></i> Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL TAMBAH RUMAH --}}
<div class="modal fade" id="modalRumah">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('rumah.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header-custom">
                    <div class="modal-icon"><i class="fas fa-plus"></i></div>
                    <h5>Tambah Data Rumah</h5>
                </div>
                <div class="modal-detail-body">
                    <div style="display:grid; gap:12px;">
                        <div>
                            <div class="detail-label" style="margin-bottom:5px;">Blok</div>
                            <select name="blok" id="blok_input" class="form-control" required
                                style="border-radius:9px; border:1.5px solid #e0ede0; font-size:13.5px; padding:9px 12px;"
                                onchange="updateNoRumah()">
                                <option value="">-- Pilih Blok --</option>
                                <option value="A">Cluster Gardenia Blok A (1–24)</option>
                                <option value="B">Cluster Gardenia Blok B (1–20)</option>
                                <option value="C">Cluster Gardenia Blok C (1–24)</option>
                                <option value="D">Cluster Gardenia Blok D (1–20)</option>
                                <option value="E">Cluster Gardenia Blok E (1–20)</option>
                                <option value="F">Cluster Gardenia Blok F (1–21)</option>
                                <option value="G">Cluster Gardenia Blok G (1–32)</option>
                                <option value="H">Cluster Edelweis Blok H (1–37)</option>
                                <option value="I">Cluster Edelweis Blok I (1–31)</option>
                                <option value="J">Blok J (1–17)</option>
                                <option value="K">Blok K (1–16)</option>
                                <option value="L">Blok L (1–10)</option>
                            </select>
                        </div>
                        <div>
                            <div class="detail-label" style="margin-bottom:5px;">No Rumah</div>
                            <select name="no_rumah" id="no_rumah" class="form-control" required
                                style="border-radius:9px; border:1.5px solid #e0ede0; font-size:13.5px; padding:9px 12px;">
                                <option value="">-- Pilih blok dulu --</option>
                            </select>
                        </div>
                        <div>
                            <div class="detail-label" style="margin-bottom:5px;">Status</div>
                            <select name="status" class="form-control" style="border-radius:9px; border:1.5px solid #e0ede0; font-size:13.5px; padding:9px 12px;">
                                <option value="Kosong">Kosong</option>
                                <option value="Terisi">Terisi</option>
                            </select>
                        </div>
                        <div>
                            <div class="detail-label" style="margin-bottom:5px;">Luas Tanah (m²)</div>
                            <input type="number" name="luas_tanah" class="form-control" placeholder="Luas tanah" style="border-radius:9px; border:1.5px solid #e0ede0; font-size:13.5px; padding:9px 12px;">
                        </div>
                        <div>
                            <div class="detail-label" style="margin-bottom:5px;">Harga</div>
                            <input type="number" name="harga" class="form-control" placeholder="Harga jual" style="border-radius:9px; border:1.5px solid #e0ede0; font-size:13.5px; padding:9px 12px;">
                        </div>
                        <div>
                            <div class="detail-label" style="margin-bottom:5px;">Keterangan</div>
                            <textarea name="keterangan" class="form-control" placeholder="Keterangan tambahan" rows="2" style="border-radius:9px; border:1.5px solid #e0ede0; font-size:13.5px; padding:9px 12px; resize:none;"></textarea>
                        </div>
                        <div>
                            <div class="detail-label" style="margin-bottom:5px;">Foto Kavling</div>
                            <input type="file" name="foto" class="form-control" id="fotoInput" accept="image/*" style="border-radius:9px; border:1.5px solid #e0ede0; font-size:13px; padding:8px 12px;">
                            <div class="text-center mt-2">
                                <img id="previewFoto" src="" style="max-height:140px; display:none; border-radius:10px; object-fit:cover;" class="img-fluid">
                            </div>
                        </div>
                    </div>
                    <div style="text-align:right; margin-top:18px; display:flex; gap:8px; justify-content:flex-end;">
                        <button type="button" class="btn-action info" data-dismiss="modal">Batal</button>
                        <button type="submit" class="btn-action" style="background:linear-gradient(135deg,#1a6e3a,#2e9e58); color:white;">
                            <i class="fas fa-save" style="font-size:11px"></i> Simpan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Mapping blok → max nomor
const blokMax = {
    'A':24,'B':20,'C':24,'D':20,'E':20,
    'F':21,'G':32,'H':37,'I':31,'J':17,'K':16,'L':10
};

function updateNoRumah(selectedNo) {
    var blok = document.getElementById('blok_input').value;
    var select = document.getElementById('no_rumah');
    select.innerHTML = '';

    if (!blok) {
        select.innerHTML = '<option value="">-- Pilih blok dulu --</option>';
        return;
    }

    var max = blokMax[blok] || 10;
    var defaultOpt = document.createElement('option');
    defaultOpt.value = '';
    defaultOpt.textContent = '-- Pilih No Rumah --';
    select.appendChild(defaultOpt);

    for (var i = 1; i <= max; i++) {
        var opt = document.createElement('option');
        opt.value = i;
        opt.textContent = i;
        if (selectedNo && parseInt(selectedNo) === i) opt.selected = true;
        select.appendChild(opt);
    }
}

function pilihKavling(blok, no) {
    // Set blok
    document.getElementById('blok_input').value = blok;
    // Generate opsi no rumah sesuai blok, lalu pilih nomor yg diklik
    updateNoRumah(no);
    $('#modalRumah').modal('show');
}

document.getElementById('fotoInput') && document.getElementById('fotoInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(ev) {
        const img = document.getElementById('previewFoto');
        img.src = ev.target.result;
        img.style.display = 'block';
    };
    reader.readAsDataURL(file);
});

document.getElementById('fotoInput') && document.getElementById('fotoInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(ev) {
        const img = document.getElementById('previewFoto');
        img.src = ev.target.result;
        img.style.display = 'block';
    };
    reader.readAsDataURL(file);
});
</script>

@endsection

@section('scripts')
<script>
$(document).ready(function () {
    if ($.fn.DataTable) {

        // Inisialisasi DataTable — TANPA scrollX agar tidak konflik dengan wrapper custom
        var dtPenghuni = $('#tablePenghuni').DataTable({
            pageLength: 10,
            lengthMenu: [5, 10, 25, 50],
            dom: '<"d-flex justify-content-between align-items-center flex-wrap px-3 pt-3"lf>t<"d-flex justify-content-between align-items-center flex-wrap px-3 pb-3"ip>',
            language: {
                search: "Cari:",
                lengthMenu: "Tampilkan _MENU_ data",
                info: "Menampilkan _START_–_END_ dari _TOTAL_ data",
                infoEmpty: "Tidak ada data",
                paginate: { first: "«", last: "»", next: "›", previous: "‹" },
                emptyTable: "Belum ada data penghuni"
            },
            // Setelah DataTable merender, pindahkan wrapper ke dalam dt-scroll-outer
            initComplete: function () {
                var wrapper = $('#tablePenghuni').closest('.dataTables_wrapper');
                $('#wrap-penghuni').append(wrapper);
            }
        });

        var dtRumah = $('#tableRumah').DataTable({
            pageLength: 10,
            lengthMenu: [5, 10, 25, 50],
            dom: '<"d-flex justify-content-between align-items-center flex-wrap px-3 pt-3"lf>t<"d-flex justify-content-between align-items-center flex-wrap px-3 pb-3"ip>',
            language: {
                search: "Cari:",
                lengthMenu: "Tampilkan _MENU_ data",
                info: "Menampilkan _START_–_END_ dari _TOTAL_ data",
                infoEmpty: "Tidak ada data",
                paginate: { first: "«", last: "»", next: "›", previous: "‹" },
                emptyTable: "Belum ada data rumah"
            },
            initComplete: function () {
                var wrapper = $('#tableRumah').closest('.dataTables_wrapper');
                $('#wrap-rumah').append(wrapper);
            }
        });

    }

    $(document).on('click', '.btn-detail', function () {
        var btn = $(this);
        $('#d_blok').text(btn.data('blok'));
        $('#d_nomor').text(btn.data('nomor'));
        $('#d_status').text(btn.data('status'));
        $('#d_nama').text(btn.data('nama'));
        $('#d_email').text(btn.data('email'));
        $('#d_telepon').text(btn.data('telepon'));
        $('#modalDetail').modal('show');
    });
});
</script>
@endsection
