aduan blm fiks
This commit is contained in:
parent
98e112dec2
commit
039d18e5e3
|
|
@ -2069,7 +2069,7 @@ .contact .php-email-form .form-group {
|
|||
}
|
||||
|
||||
.contact .php-email-form input[type=text],
|
||||
.contact .php-email-form input[type=email],
|
||||
.contact .php-email-form input[type=tel],
|
||||
.contact .php-email-form textarea {
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
|
|
@ -2079,13 +2079,13 @@ .contact .php-email-form textarea {
|
|||
}
|
||||
|
||||
.contact .php-email-form input[type=text]:focus,
|
||||
.contact .php-email-form input[type=email]:focus,
|
||||
.contact .php-email-form input[type=tel]:focus,
|
||||
.contact .php-email-form textarea:focus {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.contact .php-email-form input[type=text],
|
||||
.contact .php-email-form input[type=email] {
|
||||
.contact .php-email-form input[type=tel] {
|
||||
height: 48px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
|
@ -2095,6 +2095,52 @@ .contact .php-email-form textarea {
|
|||
height: 290px;
|
||||
}
|
||||
|
||||
/* ===== FILE INPUT (BUKTI FOTO) ===== */
|
||||
.contact .php-email-form input[type=file] {
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
height: 48px;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: color-mix(in srgb, var(--background-color), transparent 50%);
|
||||
border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
|
||||
}
|
||||
|
||||
/* focus sama seperti input lain */
|
||||
.contact .php-email-form input[type=file]:focus {
|
||||
border-color: var(--accent-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* styling tombol file (Choose File) */
|
||||
.contact .php-email-form input[type=file]::file-selector-button {
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
margin-right: 10px;
|
||||
|
||||
background-color: var(--accent-color);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* hover tombol */
|
||||
.contact .php-email-form input[type=file]::file-selector-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* fallback browser lama */
|
||||
.contact .php-email-form input[type=file]::-webkit-file-upload-button {
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
background-color: var(--accent-color);
|
||||
color: #fff;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.contact .php-email-form button[type=submit] {
|
||||
background: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
@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><a href="{{ url('/') }}">Beranda</a></li>
|
||||
<li class="current">Aduan TPS</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div><!-- End Page Title -->
|
||||
</div>
|
||||
<!-- End Page Title -->
|
||||
|
||||
<section id="contact" class="contact section">
|
||||
|
||||
<div class="container" data-aos="fade">
|
||||
|
||||
<div class="row gy-5 gx-lg-5">
|
||||
|
||||
{{-- KOLOM KIRI --}}
|
||||
<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 class="mb-3 d-none" id="foto-wrapper">
|
||||
<img id="foto-tps" class="img-fluid w-100"
|
||||
style="object-fit:cover; max-height:220px;">
|
||||
</div>
|
||||
|
||||
{{-- INFO TPS --}}
|
||||
|
|
@ -37,86 +37,114 @@ class="img-fluid w-100" style="object-fit:cover; max-height:220px;" alt="Foto TP
|
|||
@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>
|
||||
<select id="pilih-tps" class="form-select">
|
||||
<option value="">-- Pilih TPS --</option>
|
||||
@foreach ($listTps as $item)
|
||||
<option value="{{ $item->id_tps }}" data-nama="{{ $item->nama_tps }}"
|
||||
<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') }}">
|
||||
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>
|
||||
|
||||
|
||||
{{-- KOLOM KANAN --}}
|
||||
<div class="col-lg-8">
|
||||
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
|
||||
<form action="{{ route('user.aduan.store') }}" method="POST"
|
||||
class="php-email-form" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
{{-- PENTING --}}
|
||||
<input type="hidden" name="lokasi_tps_id" id="lokasi_tps_id"
|
||||
value="{{ $tps ? $tps->id_tps : '' }}">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 form-group">
|
||||
<input type="text" name="name" class="form-control" id="name"
|
||||
placeholder="Your Name" required="">
|
||||
<input type="text" name="nama_pelapor" class="form-control"
|
||||
placeholder="Nama Pelapor" 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="">
|
||||
<input type="tel" name="no_pelapor" class="form-control"
|
||||
placeholder="No. Telp Pelapor" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mt-3">
|
||||
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
|
||||
required="">
|
||||
<input type="text" name="alamat_pelapor" class="form-control"
|
||||
placeholder="Alamat Pelapor" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group mt-3">
|
||||
<textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
|
||||
<textarea name="isi_aduan" class="form-control"
|
||||
placeholder="Isi Aduan" 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>
|
||||
|
||||
{{-- FILE INPUT (SUDAH SERAGAM) --}}
|
||||
<div class="form-group mt-3">
|
||||
<input type="file" name="bukti_foto"
|
||||
class="form-control file-input"
|
||||
accept="image/*">
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button type="submit">Kirim Aduan</button>
|
||||
</div>
|
||||
<div class="text-center"><button type="submit">Send Message</button></div>
|
||||
</form>
|
||||
</div><!-- End Contact Form -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- SCRIPT TPS --}}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const selectTps = document.getElementById('pilih-tps');
|
||||
const infoTps = document.getElementById('info-tps');
|
||||
const fotoWrapper = document.getElementById('foto-wrapper');
|
||||
const fotoTps = document.getElementById('foto-tps');
|
||||
const inputLokasi = document.getElementById('lokasi_tps_id');
|
||||
|
||||
if (!selectTps) return;
|
||||
|
||||
if (selectTps) {
|
||||
selectTps.addEventListener('change', function () {
|
||||
if (!this.value) return;
|
||||
|
||||
const option = this.options[this.selectedIndex];
|
||||
|
||||
const foto = option.getAttribute('data-foto');
|
||||
const nama = option.getAttribute('data-nama');
|
||||
const alamat = option.getAttribute('data-alamat');
|
||||
inputLokasi.value = this.value;
|
||||
|
||||
// Ganti foto
|
||||
document.getElementById('foto-tps').src = foto;
|
||||
fotoTps.src = option.dataset.foto;
|
||||
fotoWrapper.classList.remove('d-none');
|
||||
|
||||
// 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>
|
||||
`);
|
||||
infoTps.innerHTML = `
|
||||
<p class="mb-1"><strong>${option.dataset.nama}</strong></p>
|
||||
<p class="text-muted mb-2">${option.dataset.alamat}</p>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="ganti-tps">
|
||||
Ganti TPS
|
||||
</button>
|
||||
`;
|
||||
|
||||
document.getElementById('ganti-tps').onclick = () => {
|
||||
inputLokasi.value = '';
|
||||
fotoWrapper.classList.add('d-none');
|
||||
infoTps.innerHTML = '<p class="text-muted mb-2">Silakan pilih TPS yang akan diadukan</p>';
|
||||
infoTps.appendChild(selectTps);
|
||||
selectTps.value = '';
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -452,7 +452,7 @@ function markerIcon(color) {
|
|||
|
||||
<p class="small text-muted my-2">atau</p> --}}
|
||||
|
||||
<a href="{{ route('user.aduan-tps', $tpsPertama->id ?? 1) }}" class="btn btn-danger w-100">
|
||||
<a href="{{ route('user.aduan', $tpsPertama->id ?? 1) }}" class="btn btn-danger w-100">
|
||||
<i class="bi bi-megaphone-fill me-1"></i> Laporkan Aduan
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue