511 lines
18 KiB
PHP
511 lines
18 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="container">
|
|
|
|
@if($isExpired)
|
|
<div class="alert alert-danger text-center">
|
|
⚠️ Kontrak Anda telah berakhir. Silakan hubungi admin.
|
|
</div>
|
|
@endif
|
|
|
|
<h3 class="mb-4 fw-bold text-primary">Beranda Penghuni</h3>
|
|
|
|
<div class="mt-5">
|
|
|
|
<h4 class="mb-4">📢 Informasi & Pengumuman</h4>
|
|
|
|
@php
|
|
$slider = $informasi->where('is_penting', 1)->values();
|
|
@endphp
|
|
|
|
<div id="carouselExample" class="carousel slide carousel-fade mb-4" data-ride="carousel" data-interval="2000"
|
|
data-pause="false">
|
|
|
|
<div class="carousel-inner rounded shadow">
|
|
|
|
@foreach($slider as $key => $info)
|
|
<div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
|
|
|
|
<img src="{{ asset('informasi/' . $info->gambar) }}" class="d-block w-100"
|
|
style="height:350px; object-fit:cover;">
|
|
|
|
<div class="carousel-caption bg-dark bg-opacity-50 rounded p-3">
|
|
<h4>{{ $info->judul }}</h4>
|
|
</div>
|
|
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="informasi-scroll d-flex">
|
|
|
|
@foreach($informasi as $info)
|
|
<a href="{{ route('user.informasi.detail', $info->id) }}" class="informasi-item">
|
|
|
|
<div class="card shadow-sm h-100">
|
|
|
|
<img src="{{ asset('informasi/' . $info->gambar) }}" class="card-img-top"
|
|
style="height:150px; object-fit:cover;">
|
|
|
|
<div class="card-body">
|
|
|
|
@if($info->is_penting)
|
|
<span class="badge bg-danger">🔥 Penting</span>
|
|
@endif
|
|
|
|
<h6 class="mt-2">{{ $info->judul }}</h6>
|
|
|
|
<small class="text-muted">
|
|
📅 {{ $info->tanggal }} | 👁️ {{ $info->views }}x
|
|
</small>
|
|
|
|
<p class="mt-2">
|
|
{{ Str::limit($info->isi, 60) }}
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
@endforeach
|
|
|
|
</div>
|
|
|
|
@forelse($informasi as $info)
|
|
|
|
@empty
|
|
<div class="alert alert-warning text-center">
|
|
Belum ada informasi
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- 🔔 NOTIF --}}
|
|
@if(session('success'))
|
|
<div class="alert alert-success shadow-sm">{{ session('success') }}</div>
|
|
@endif
|
|
|
|
{{-- ========================= --}}
|
|
{{-- DATA PENGHUNI --}}
|
|
{{-- ========================= --}}
|
|
|
|
{{-- 🔥 FORM INPUT PENGHUNI (JIKA BELUM ADA DATA) --}}
|
|
@if(!isset($penghuni))
|
|
|
|
<div class="card modern-card mb-3 border-danger">
|
|
<div class="card-body">
|
|
|
|
<h5 class="fw-bold text-danger">⚠️ Lengkapi Data Penghuni</h5>
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger">
|
|
@foreach ($errors->all() as $error)
|
|
<div>{{ $error }}</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('user.simpan.penghuni') }}" method="POST">
|
|
@csrf
|
|
|
|
<div class="mb-2">
|
|
<label>Nama</label>
|
|
<input type="text" name="nama" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label>No KTP</label>
|
|
<input type="text" name="no_ktp" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label>No HP</label>
|
|
<input type="text" name="telepon" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label>Alamat</label>
|
|
<input type="text" name="alamat" class="form-control" required>
|
|
</div>
|
|
|
|
{{-- <div class="mb-2">
|
|
<label>Email</label>
|
|
<input type="email" name="email" class="form-control" required>
|
|
</div> --}}
|
|
|
|
<div class="mb-2">
|
|
<label>Status Huni</label>
|
|
<select name="status_huni" id="statusHuni" class="form-control" required>
|
|
<option value="">-- Pilih --</option>
|
|
<option value="Tetap">Tetap</option>
|
|
<option value="Kontrak">Kontrak</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-2 d-none" id="tanggalKeluarField">
|
|
<label>Tanggal Keluar</label>
|
|
<input type="date" name="tanggal_keluar" id="tanggalKeluarInput" class="form-control">
|
|
</div>
|
|
|
|
<button class="btn btn-primary w-100 mt-2">
|
|
💾 Simpan Data
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
@endif
|
|
{{-- @if(isset($penghuni))
|
|
<div class="card modern-card mb-3">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold">👤 Data Anda</h5>
|
|
<p><b>Nama:</b> {{ $penghuni->nama }}</p>
|
|
<p><b>Email:</b> {{ $penghuni->email }}</p>
|
|
|
|
<p><b>Status Huni:</b>
|
|
<span
|
|
class="badge
|
|
{{ $penghuni->status_huni == 'Tetap' ? 'bg-success' : 'bg-warning text-dark' }}">
|
|
{{ $penghuni->status_huni }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@endif --}}
|
|
|
|
{{-- <h4 class="fw-bold">👤 Data Anda</h4> --}}
|
|
{{-- ========================= --}}
|
|
{{-- 🏠 RUMAH SAYA --}}
|
|
{{-- ========================= --}}
|
|
{{-- @if(isset($penghuni) && $penghuni->rumah)
|
|
|
|
<div class="card modern-card mb-3">
|
|
<div class="card-body">
|
|
|
|
<h5 class="fw-bold">🏠 Rumah Saya</h5>
|
|
|
|
<p>
|
|
<b>Blok:</b> {{ $penghuni->rumah->blok }} <br>
|
|
<b>No Rumah:</b> {{ $penghuni->rumah->no_rumah }}
|
|
</p>
|
|
|
|
<p>
|
|
<b>Status:</b>
|
|
<span
|
|
class="badge
|
|
{{ $penghuni->rumah->status == 'Terisi' ? 'bg-success' : 'bg-secondary' }}">
|
|
{{ $penghuni->rumah->status }}
|
|
</span>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
@endif --}}
|
|
|
|
{{-- ========================= --}}
|
|
{{-- DATA IURAN --}}
|
|
{{-- ========================= --}}
|
|
<h4 class="fw-bold">💰 Data Iuran Saya</h4>
|
|
|
|
@forelse($iuran as $i)
|
|
<div class="card modern-card mb-3">
|
|
<div class="card-body">
|
|
|
|
<h5>Iuran {{ $i->bulan }} {{ $i->tahun }}</h5>
|
|
|
|
<p><b>Jumlah:</b> Rp {{ number_format($i->jumlah, 0, ',', '.') }}</p>
|
|
|
|
<p><b>Status:</b>
|
|
<span
|
|
class="badge
|
|
{{ $i->status == 'lunas' ? 'bg-success' : 'bg-warning text-dark' }}">
|
|
{{ ucfirst($i->status) }}
|
|
</span>
|
|
</p>
|
|
|
|
{{-- PROGRESS --}}
|
|
<div class="timeline">
|
|
<div class="timeline-step {{ $i->bukti_pembayaran ? 'active' : '' }}">📤</div>
|
|
<div class="timeline-step {{ $i->status == 'lunas' ? 'active' : '' }}">✔</div>
|
|
<div class="timeline-line"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 🔥 TOMBOL HAPUS DI SINI --}}
|
|
<div class="mt-3">
|
|
@if($i->status == 'lunas')
|
|
<form action="{{ route('user.iuran.delete', $i->id) }}" method="POST"
|
|
onsubmit="return confirm('Yakin ingin menghapus data ini?')">
|
|
@csrf
|
|
@method('DELETE')
|
|
|
|
<button class="btn btn-danger btn-sm">
|
|
🗑️ Hapus
|
|
</button>
|
|
</form>
|
|
@else
|
|
<button class="btn btn-secondary btn-sm" disabled>
|
|
❌ Tidak bisa dihapus
|
|
</button>
|
|
@endif
|
|
</div>
|
|
@empty
|
|
<div class="alert alert-warning">Belum ada data iuran</div>
|
|
@endforelse
|
|
|
|
{{-- ========================= --}}
|
|
{{-- STATUS PENGADUAN --}}
|
|
{{-- ========================= --}}
|
|
<h4 class="mt-4 fw-bold">📢 Status Pengaduan Saya</h4>
|
|
|
|
{{-- @php
|
|
$pengaduan = \App\Models\Layanan::where('penghuni_id', $penghuni->id ?? 0)->latest()->get();
|
|
@endphp --}}
|
|
|
|
@forelse($pengaduan as $p)
|
|
<div class="card modern-card mb-3">
|
|
<div class="card-body">
|
|
|
|
{{-- 🔥 TOMBOL HAPUS PENGADUAN --}}
|
|
@if($p->status == 'selesai')
|
|
<form action="{{ route('user.layanan.delete', $p->id) }}" method="POST">
|
|
|
|
@csrf
|
|
@method('DELETE')
|
|
|
|
<button class="btn btn-danger btn-sm">
|
|
🗑️ Hapus Pengaduan
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<h5>#P-{{ str_pad($p->id, 3, '0', STR_PAD_LEFT) }}</h5>
|
|
|
|
<span
|
|
class="badge
|
|
{{ $p->status == 'selesai' ? 'bg-success' : ($p->status == 'diproses' ? 'bg-warning text-dark' : 'bg-secondary') }}">
|
|
{{ ucfirst($p->status) }}
|
|
</span>
|
|
</div>
|
|
|
|
<p class="text-muted">
|
|
{{ \Illuminate\Support\Str::limit($p->deskripsi, 80) }}
|
|
</p>
|
|
|
|
{{-- TIMELINE --}}
|
|
<div class="timeline">
|
|
<div class="timeline-step active">📩</div>
|
|
<div class="timeline-step {{ $p->status != 'diajukan' ? 'active' : '' }}">⚙️</div>
|
|
<div class="timeline-step {{ $p->status == 'selesai' ? 'active' : '' }}">✅</div>
|
|
<div class="timeline-line"></div>
|
|
</div>
|
|
|
|
<small class="text-muted">
|
|
{{ \Carbon\Carbon::parse($p->tanggal_pengaduan)->translatedFormat('d M Y H:i') }}
|
|
</small>
|
|
|
|
@if($p->tanggapan_admin)
|
|
<div class="alert alert-success mt-2">
|
|
<b>Tanggapan:</b> {{ $p->tanggapan_admin }}
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="alert alert-info">Belum ada pengaduan</div>
|
|
@endforelse
|
|
|
|
</div>
|
|
@endsection
|
|
|
|
{{-- 🔥 STYLE + SCRIPT DIGABUNG --}}
|
|
@section('scripts')
|
|
<style>
|
|
/* 🔥 CARD MODERN */
|
|
.modern-card {
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.modern-card:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
/* 🔥 TIMELINE */
|
|
.timeline {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.timeline-step {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: #e5e7eb;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.timeline-step.active {
|
|
background: linear-gradient(135deg, #4f46e5, #6366f1);
|
|
color: white;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.timeline-line {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 10%;
|
|
right: 10%;
|
|
height: 5px;
|
|
background: #e5e7eb;
|
|
z-index: 1;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* ANIMASI */
|
|
.modern-card {
|
|
animation: fadeUp 0.4s ease;
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.informasi-card {
|
|
border-radius: 15px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.informasi-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.posisi-badge {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
.informasi-card {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.informasi-full {
|
|
border-radius: 20px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.informasi-full:hover {
|
|
transform: scale(1.01);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.informasi-full {
|
|
border-radius: 20px;
|
|
transition: 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.informasi-full:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.informasi-full {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.informasi-scroll {
|
|
overflow-x: auto;
|
|
gap: 20px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.informasi-item {
|
|
min-width: 300px;
|
|
max-width: 300px;
|
|
flex: 0 0 auto;
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
.informasi-scroll::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
|
|
.informasi-scroll::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
const statusHuni = document.getElementById('statusHuni');
|
|
const tanggalKeluarField = document.getElementById('tanggalKeluarField');
|
|
const tanggalKeluarInput = document.getElementById('tanggalKeluarInput');
|
|
|
|
if (statusHuni) {
|
|
statusHuni.addEventListener('change', function () {
|
|
if (this.value === 'Kontrak') {
|
|
tanggalKeluarField.classList.remove('d-none');
|
|
tanggalKeluarInput.required = true;
|
|
} else {
|
|
tanggalKeluarField.classList.add('d-none');
|
|
tanggalKeluarInput.required = false;
|
|
tanggalKeluarInput.value = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
window.onload = function () {
|
|
let popup = new bootstrap.Modal(document.getElementById('popupInfo'));
|
|
popup.show();
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$('#carouselExample').carousel({
|
|
interval: 2000,
|
|
pause: false,
|
|
wrap: true
|
|
});
|
|
});
|
|
|
|
const container = document.querySelector('.informasi-scroll');
|
|
|
|
setInterval(() => {
|
|
container.scrollBy({
|
|
left: 320,
|
|
behavior: 'smooth'
|
|
});
|
|
}, 3000);
|
|
</script>
|
|
@endsection |