162 lines
6.7 KiB
PHP
162 lines
6.7 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="{{ url('/') }}">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">
|
|
|
|
{{-- KOLOM KIRI --}}
|
|
<div class="col-lg-4">
|
|
<div class="info">
|
|
<h3 class="mb-3">TPS yang Diadukan</h3>
|
|
|
|
{{-- 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 --}}
|
|
<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>
|
|
@else
|
|
<p class="mb-2 text-muted">
|
|
Silakan pilih TPS yang akan diadukan
|
|
</p>
|
|
|
|
<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 }}"
|
|
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>
|
|
|
|
{{-- KOLOM KANAN --}}
|
|
<div class="col-lg-8">
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger">
|
|
<ul class="mb-0">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
@if (session('success'))
|
|
<div class="alert alert-success">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('user.aduan.store') }}" method="POST" class="aduan-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="nama_pelapor" class="form-control" placeholder="Nama Pelapor"
|
|
required>
|
|
</div>
|
|
<div class="mt-3 col-md-6 form-group mt-md-0">
|
|
<input type="tel" name="no_pelapor" class="form-control" placeholder="No. Telp Pelapor"
|
|
required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 form-group">
|
|
<input type="text" name="alamat_pelapor" class="form-control" placeholder="Alamat Pelapor"
|
|
required>
|
|
</div>
|
|
|
|
<div class="mt-3 form-group">
|
|
<textarea name="isi_aduan" class="form-control" placeholder="Isi Aduan" required></textarea>
|
|
</div>
|
|
|
|
{{-- FILE INPUT (SUDAH SERAGAM) --}}
|
|
<div class="mt-3 form-group">
|
|
<input type="file" name="bukti_foto" class="form-control file-input" accept="image/*">
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
<button type="submit" class="px-4 btn btn-success">Kirim Aduan</button>
|
|
</div>
|
|
</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;
|
|
|
|
selectTps.addEventListener('change', function() {
|
|
if (!this.value) return;
|
|
|
|
const option = this.options[this.selectedIndex];
|
|
|
|
inputLokasi.value = this.value;
|
|
|
|
fotoTps.src = option.dataset.foto;
|
|
fotoWrapper.classList.remove('d-none');
|
|
|
|
infoTps.innerHTML = `
|
|
<p class="mb-1"><strong>${option.dataset.nama}</strong></p>
|
|
<p class="mb-2 text-muted">${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="mb-2 text-muted">Silakan pilih TPS yang akan diadukan</p>';
|
|
infoTps.appendChild(selectTps);
|
|
selectTps.value = '';
|
|
};
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@endsection
|