124 lines
5.3 KiB
PHP
124 lines
5.3 KiB
PHP
@extends('user.template')
|
|
|
|
@section('content')
|
|
<!-- Page Title -->
|
|
<div class="page-title">
|
|
<div class="container d-lg-flex justify-content-between align-items-center">
|
|
<h1 class="mb-2 mb-lg-0">Aduan TPS</h1>
|
|
<nav class="breadcrumbs">
|
|
<ol>
|
|
<li><a href="index.html">Beranda</a></li>
|
|
<li class="current">Aduan TPS</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div><!-- End Page Title -->
|
|
|
|
<section id="contact" class="contact section">
|
|
|
|
<div class="container" data-aos="fade">
|
|
|
|
<div class="row gy-5 gx-lg-5">
|
|
|
|
<div class="col-lg-4">
|
|
<div class="info">
|
|
|
|
<h3 class="mb-3">TPS yang Diadukan</h3>
|
|
|
|
{{-- FOTO TPS --}}
|
|
<div class="mb-3">
|
|
<img id="foto-tps"
|
|
src="{{ $tps && $tps->foto_tps ? asset('storage/' . $tps->foto_tps) : asset('assets/user/img/no-image.png') }}"
|
|
class="img-fluid w-100" style="object-fit:cover; max-height:220px;" alt="Foto TPS">
|
|
</div>
|
|
|
|
{{-- INFO TPS --}}
|
|
<div id="info-tps">
|
|
@if ($tps)
|
|
<p class="mb-1"><strong>{{ $tps->nama_tps }}</strong></p>
|
|
<p class="mb-1 text-muted">{{ $tps->alamat_tps }}</p>
|
|
<input type="hidden" name="lokasi_tps_id" value="{{ $tps->id_tps }}">
|
|
@else
|
|
<p class="text-muted mb-2">
|
|
Silakan pilih TPS yang akan diadukan
|
|
</p>
|
|
|
|
<select name="lokasi_tps_id" id="pilih-tps" class="form-select" required>
|
|
<option value="">-- Pilih TPS --</option>
|
|
@foreach ($listTps as $item)
|
|
<option value="{{ $item->id_tps }}" data-nama="{{ $item->nama_tps }}"
|
|
data-alamat="{{ $item->alamat_tps }}"
|
|
data-foto="{{ $item->foto_tps ? asset('storage/' . $item->foto_tps) : asset('assets/user/img/no-image.png') }}">
|
|
{{ $item->nama_tps }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-8">
|
|
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
|
|
<div class="row">
|
|
<div class="col-md-6 form-group">
|
|
<input type="text" name="name" class="form-control" id="name"
|
|
placeholder="Your Name" required="">
|
|
</div>
|
|
<div class="col-md-6 form-group mt-3 mt-md-0">
|
|
<input type="email" class="form-control" name="email" id="email"
|
|
placeholder="Your Email" required="">
|
|
</div>
|
|
</div>
|
|
<div class="form-group mt-3">
|
|
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
|
|
required="">
|
|
</div>
|
|
<div class="form-group mt-3">
|
|
<textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
|
|
</div>
|
|
<div class="my-3">
|
|
<div class="loading">Loading</div>
|
|
<div class="error-message"></div>
|
|
<div class="sent-message">Your message has been sent. Thank you!</div>
|
|
</div>
|
|
<div class="text-center"><button type="submit">Send Message</button></div>
|
|
</form>
|
|
</div><!-- End Contact Form -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const selectTps = document.getElementById('pilih-tps');
|
|
|
|
if (selectTps) {
|
|
selectTps.addEventListener('change', function() {
|
|
const option = this.options[this.selectedIndex];
|
|
|
|
const foto = option.getAttribute('data-foto');
|
|
const nama = option.getAttribute('data-nama');
|
|
const alamat = option.getAttribute('data-alamat');
|
|
|
|
// Ganti foto
|
|
document.getElementById('foto-tps').src = foto;
|
|
|
|
// Ganti info teks
|
|
document.getElementById('info-tps').insertAdjacentHTML('beforeend', `
|
|
<p class="mt-3 mb-1"><strong>${nama}</strong></p>
|
|
<p class="text-muted">${alamat}</p>
|
|
`);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
@endsection
|