@extends('layouts.app')

@section('content')
    <div class="container-fluid">

        <h1 class="h3 mb-4 text-gray-800">Kelola Data Perumahan</h1>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        @endif

        {{-- ===================== --}}
        {{-- KAVLING VISUAL --}}
        {{-- ===================== --}}
        <div class="card shadow mb-4">
            <div class="card-header">
                <h6 class="font-weight-bold text-success">Pilih Kavling</h6>
            </div>
            <div class="card-body">

                <div class="kavling-grid">
                    @for($i = 1; $i <= 30; $i++)
                        @php
                            $dataRumah = $rumahList->where('no_rumah', $i)->first();
                        @endphp

                        <div class="kavling {{ !$dataRumah || $dataRumah->status == 'Kosong' ? 'kosong' : 'terisi' }}"
                            onclick="pilihKavling('{{ $dataRumah && $dataRumah->status == 'Terisi' ? '' : $i }}')">
                            {{ $i }}
                        </div>
                    @endfor
                </div>

                <small class="text-muted">
                    🟢 Kosong | 🔴 Terisi
                </small>

            </div>
        </div>

        {{-- ===================== --}}
        {{-- DATA PENGHUNI --}}
        {{-- ===================== --}}
        <div class="card shadow mb-4">
            <div class="card-header d-flex justify-content-between">
                <h6 class="font-weight-bold text-primary">Data Penghuni</h6>
                {{-- <a href="{{ route('penghuni.create') }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-plus"></i> Tambah Penghuni
                </a> --}}
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="tablePenghuni">
                        <thead class="thead-dark">
                            <tr>
                                <th>ID</th>
                                <th>Nama</th>
                                <th>No KTP</th>
                                <th>Email</th>
                                <th>No HP</th>
                                <th>Alamat</th>
                                <th>Blok</th>
                                <th>No Rumah</th>
                                <th>Status</th>
                                <th>Status Huni</th>
                                <th>Tanggal Masuk</th>
                                <th>Tanggal Keluar</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($penghuni as $p)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $p->nama }}</td>
                                    <td>{{ $p->no_ktp }}</td>
                                    <td>{{ $p->email }}</td>
                                    <td>{{ $p->telepon }}</td>
                                    <td>{{ $p->alamat }}</td>
                                    <td>{{ $p->rumah->blok ?? '-' }}</td>
                                    <td>{{ $p->rumah->no_rumah ?? '-' }}</td>

                                    <td>
                                        @if($p->status_huni == 'Kontrak' && $p->tanggal_keluar && now()->gt($p->tanggal_keluar))
                                            <span class="badge bg-danger">Tidak Aktif</span>
                                        @else
                                            <span class="badge bg-success">Aktif</span>
                                        @endif
                                    </td>

                                    <td>{{ $p->status_huni }}</td>
                                    <td>{{ \Carbon\Carbon::parse($p->tanggal_masuk)->format('d-m-Y') }}</td>
                                    <td>{{ $p->tanggal_keluar }}</td>

                                    <td>
                                        <a href="{{ route('penghuni.edit', $p->id) }}" class="btn btn-warning btn-sm">Edit</a>
                                        <a href="{{ route('penghuni.delete', $p->id) }}" class="btn btn-danger btn-sm"
                                            onclick="return confirm('Yakin hapus?')">Hapus</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="13" class="text-center">Belum ada data</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- ===================== --}}
        {{-- DATA RUMAH --}}
        {{-- ===================== --}}
        <div class="card shadow mb-4">
            <div class="card-header d-flex justify-content-between">
                <h6 class="font-weight-bold text-success">Data Rumah</h6>

                <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#modalRumah">
                    <i class="fas fa-plus"></i> Tambah Rumah
                </button>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="tableRumah">
                        <thead class="thead-dark">
                            <tr>
                                <th>ID</th>
                                <th>Blok</th>
                                <th>No Rumah</th>
                                <th>Status</th>
                                <th>Luas Tanah</th>
                                <th>Harga</th>
                                <th>Keterangan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($rumahList as $r)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $r->blok }}</td>
                                    <td>{{ $r->no_rumah }}</td>

                                    <td>
                                        @if($r->status == 'Kosong')
                                            <span class="badge badge-success">Kosong</span>
                                        @else
                                            <span class="badge badge-danger">Terisi</span>
                                        @endif
                                    </td>

                                    <td>{{ $r->luas_tanah ? $r->luas_tanah . ' m²' : '-' }}</td>

                                    <td>
                                        @if($r->harga)
                                            Rp {{ number_format($r->harga, 0, ',', '.') }}
                                        @else
                                            -
                                        @endif
                                    </td>

                                    <td>{{ $r->keterangan ?? '-' }}</td>
                                    <td>

                                        <button class="btn btn-info btn-sm 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 ?? '-' }}">
                                            Detail
                                        </button>

                                        {{-- EDIT --}}
                                        <a href="{{ route('rumah.edit', $r->id) }}" class="btn btn-warning btn-sm">
                                            Edit
                                        </a>

                                        {{-- HAPUS --}}
                                        <form action="{{ route('rumah.destroy', $r->id) }}" method="POST"
                                            style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-danger btn-sm" onclick="return confirm('Yakin hapus?')">
                                                Hapus
                                            </button>
                                        </form>

                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">Belum ada data rumah</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <div class="modal fade" id="modalDetail">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5>Detail Rumah & Penghuni</h5>
                </div>

                <div class="modal-body">
                    <p><b>Blok:</b> <span id="d_blok"></span></p>
                    <p><b>No Rumah:</b> <span id="d_nomor"></span></p>
                    <p><b>Status:</b> <span id="d_status"></span></p>

                    <hr>

                    <h6>Data Penghuni</h6>
                    <p><b>Nama:</b> <span id="d_nama"></span></p>
                    <p><b>Email:</b> <span id="d_email"></span></p>
                    <p><b>No HP:</b> <span id="d_telepon"></span></p>
                </div>

            </div>
        </div>
    </div>
@endsection

{{-- MODAL --}}
<div class="modal fade" id="modalRumah">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('rumah.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="modal-body">

                    <input type="text" name="blok" class="form-control mb-2" placeholder="Blok" required>

                    <input type="text" name="no_rumah" id="no_rumah" class="form-control mb-2" placeholder="No Rumah"
                        required>

                    <select name="status" class="form-control mb-2">
                        <option value="Kosong">Kosong</option>
                        <option value="Terisi">Terisi</option>
                    </select>

                    <input type="number" name="luas_tanah" class="form-control mb-2" placeholder="Luas Tanah">

                    <input type="number" name="harga" class="form-control mb-2" placeholder="Harga">

                    <textarea name="keterangan" class="form-control mb-2" placeholder="Keterangan"></textarea>

                    {{-- 🔥 TAMBAHAN FOTO --}}
                    <div class="form-group mt-2">
                        <label>Foto Kavling</label>
                        <input type="file" name="foto" class="form-control" id="fotoInput" accept="image/*">
                    </div>

                    {{-- 🔥 PREVIEW FOTO --}}
                    <div class="text-center mt-2">
                        <img id="previewFoto" src="" style="max-height:150px; display:none;" class="img-fluid rounded">
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

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

    .kavling {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 45px;
        border-radius: 8px;
        font-weight: bold;
        color: white;
        cursor: pointer;
        transition: 0.2s;
    }

    .kosong {
        background: #28a745;
    }

    .terisi {
        background: #dc3545;
        cursor: not-allowed;
    }

    .kosong:hover {
        background: #218838;
        transform: scale(1.05);
    }
</style>

<style>
    .btn-detail {
        position: relative;
        z-index: 9999;
    }

    table {
        position: relative;
        z-index: 1;
    }

    button {
        position: relative;
        z-index: 9999;
    }
</style>

<style>
    .table-responsive {
        overflow: visible !important;
    }

    table {
        position: relative;
        z-index: 1;
    }

    td,
    th {
        position: relative;
        z-index: 2;
    }

    button,
    .btn {
        position: relative !important;
        z-index: 9999 !important;
    }

    /* 🔥 PAKSA TOMBOL PALING ATAS */
    button,
    .btn {
        position: relative !important;
        z-index: 99999 !important;
    }

    /* 🔥 TABLE JANGAN NUTUP */
    table {
        position: relative;
        z-index: 1;
    }
</style>

<script>
    function pilihKavling(no) {
        if (!no) {
            alert('Kavling sudah terisi!');
            return;
        }

        document.getElementById('no_rumah').value = no;
        $('#modalRumah').modal('show');
    }
</script>

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

            // CEK dulu sebelum pakai DataTable
            if ($.fn.DataTable) {
                $('#tablePenghuni').DataTable();
                $('#tableRumah').DataTable();
            }

            $(document).on('click', '.btn-detail', function () {

                console.log("DETAIL CLICK OK");

                let 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