From 039d18e5e39c16703ed14b73c9927aa77c765f61 Mon Sep 17 00:00:00 2001
From: rahmagustin <e41220949@student.polije.ac.id>
Date: Sat, 24 Jan 2026 23:21:34 +0700
Subject: [PATCH] aduan blm fiks

---
 public/assets/user/css/main.css          |  52 +++++-
 resources/views/user/aduan-tps.blade.php | 224 +++++++++++++----------
 resources/views/user/index.blade.php     |   2 +-
 3 files changed, 176 insertions(+), 102 deletions(-)

diff --git a/public/assets/user/css/main.css b/public/assets/user/css/main.css
index ce37778..bb87f65 100644
--- a/public/assets/user/css/main.css
+++ b/public/assets/user/css/main.css
@@ -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);
diff --git a/resources/views/user/aduan-tps.blade.php b/resources/views/user/aduan-tps.blade.php
index 0d22b3f..22fc65b 100644
--- a/resources/views/user/aduan-tps.blade.php
+++ b/resources/views/user/aduan-tps.blade.php
@@ -1,123 +1,151 @@
 @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">
+<!-- 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 -->
 
-        <div class="container" data-aos="fade">
+<section id="contact" class="contact section">
 
-            <div class="row gy-5 gx-lg-5">
+    <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>
+            {{-- 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="text-muted mb-2">
+                                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">
+                <form action="{{ route('user.aduan.store') }}" method="POST"
+                    class="php-email-form" enctype="multipart/form-data">
+                    @csrf
 
-                <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 -->
+                    {{-- 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="col-md-6 form-group mt-3 mt-md-0">
+                            <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" name="alamat_pelapor" class="form-control"
+                            placeholder="Alamat Pelapor" required>
+                    </div>
+
+                    <div class="form-group mt-3">
+                        <textarea name="isi_aduan" class="form-control"
+                            placeholder="Isi Aduan" required></textarea>
+                    </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>
+                </form>
             </div>
 
         </div>
+    </div>
+</section>
 
-    </section>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const selectTps = document.getElementById('pilih-tps');
+{{-- 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) {
-                selectTps.addEventListener('change', function() {
-                    const option = this.options[this.selectedIndex];
+    if (!selectTps) return;
 
-                    const foto = option.getAttribute('data-foto');
-                    const nama = option.getAttribute('data-nama');
-                    const alamat = option.getAttribute('data-alamat');
+    selectTps.addEventListener('change', function () {
+        if (!this.value) return;
 
-                    // Ganti foto
-                    document.getElementById('foto-tps').src = foto;
+        const option = this.options[this.selectedIndex];
 
-                    // 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>
+        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="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>
 
 @endsection
diff --git a/resources/views/user/index.blade.php b/resources/views/user/index.blade.php
index 53f56df..214885e 100644
--- a/resources/views/user/index.blade.php
+++ b/resources/views/user/index.blade.php
@@ -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>