project-ta/.history/resources/views/user/rumah.blade_20260331154810.php

131 lines
3.8 KiB
PHP

@extends('layouts.app')
@section('content')
<div class="container">
<h3 class="mb-3">Rumah Saya</h3>
{{-- DATA RUMAH --}}
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if($penghuni && $penghuni->rumah)
<div class="alert alert-success">
Rumah Anda:
<b>Blok {{ $penghuni->rumah->blok }} - No {{ $penghuni->rumah->no_rumah }}</b>
</div>
@else
<div class="alert alert-warning">
Anda belum memiliki rumah, silakan pilih kavling
</div>
@endif
{{-- KAVLING --}}
<div class="card">
<div class="card-header">Pilih Kavling</div>
<div class="card-body">
<div class="d-flex flex-wrap gap-2">
@foreach($rumahList as $r)
<button
class="btn m-1 kavling-btn
{{ $r->status == 'Kosong' ? 'btn-success' : 'btn-danger' }}"
data-id="{{ $r->id }}"
data-blok="{{ $r->blok }}"
data-nomor="{{ $r->no_rumah }}"
data-luas="{{ $r->luas_tanah }}"
data-harga="{{ $r->harga }}"
data-foto="{{ asset('foto_rumah/'.$r->foto) }}"
data-status="{{ $r->status }}"
>
{{ $r->no_rumah }}
</button>
@endforeach
</div>
<div class="mt-3">
<span class="badge bg-success">Kosong</span>
<span class="badge bg-danger">Terisi</span>
</div>
</div>
</div>
</div>
@endsection
<div class="modal fade" id="modalAmbil">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST" action="{{ route('user.ambil.rumah') }}">
@csrf
<input type="hidden" name="rumah_id" id="rumah_id">
<div class="modal-header">
<h5>Detail Rumah</h5>
</div>
<div class="modal-body">
<img id="fotoRumah" class="img-fluid mb-3 rounded">
<p><b>Blok:</b> <span id="blok"></span></p>
<p><b>No Rumah:</b> <span id="nomor"></span></p>
<p><b>Luas:</b> <span id="luas"></span> </p>
<p><b>Harga:</b> Rp <span id="harga"></span></p>
</div>
<div class="modal-footer">
<button class="btn btn-success">Ambil Rumah</button>
</div>
</form>
</div>
</div>
</div>
<script>
document.querySelectorAll('.kavling-btn').forEach(btn => {
btn.addEventListener('click', function() {
// ❌ kalau terisi
if (this.dataset.status === 'Terisi') {
alert('Rumah sudah terisi!');
return;
}
// isi data ke modal
document.getElementById('rumah_id').value = this.dataset.id;
document.getElementById('blok').innerText = this.dataset.blok;
document.getElementById('nomor').innerText = this.dataset.nomor;
document.getElementById('luas').innerText = this.dataset.luas;
document.getElementById('harga').innerText = this.dataset.harga;
document.getElementById('fotoRumah').src = this.dataset.foto;
// tampilkan modal
$('#modalAmbil').modal('show');
});
});
</script>
<script>
function pilihRumah(id, blok, noRumah) {
document.getElementById('rumah_id').value = id ?? '';
document.getElementById('blok').value = blok ?? '';
document.getElementById('no_rumah').value = noRumah ?? '';
$('#modalRumah').modal('show');
}
</script>