614 lines
16 KiB
PHP
614 lines
16 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
|
|
{{-- Google Fonts --}}
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<div class="pengaduan-wrapper">
|
|
|
|
<div class="pengaduan-card">
|
|
|
|
{{-- HEADER --}}
|
|
<div class="pengaduan-header">
|
|
<div class="header-icon">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="header-title">Formulir Pengaduan Online</h5>
|
|
<p class="header-subtitle">Sampaikan keluhan Anda kepada kami</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pengaduan-body">
|
|
|
|
{{-- ERROR --}}
|
|
@if ($errors->any())
|
|
<div class="alert-error">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
@foreach ($errors->all() as $error)
|
|
<div>{{ $error }}</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('user.layanan.store') }}"
|
|
method="POST"
|
|
enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<div class="form-grid">
|
|
|
|
{{-- KIRI = PREVIEW --}}
|
|
<div class="preview-column">
|
|
<div class="preview-box" id="preview-box">
|
|
<div class="preview-placeholder" id="preview-placeholder">
|
|
<div class="preview-icon-wrap">
|
|
<i class="fas fa-image"></i>
|
|
</div>
|
|
<p class="preview-label">Preview gambar</p>
|
|
<p class="preview-sub">akan tampil di sini</p>
|
|
</div>
|
|
<img id="preview"
|
|
class="preview-img d-none"
|
|
src=""
|
|
alt="Preview Gambar"/>
|
|
</div>
|
|
|
|
{{-- TIPS CARD --}}
|
|
<div class="tips-card">
|
|
<p class="tips-title"><i class="fas fa-lightbulb me-2"></i>Tips Pengaduan</p>
|
|
<ul class="tips-list">
|
|
<li>Deskripsikan masalah secara jelas</li>
|
|
<li>Sertakan lokasi kejadian</li>
|
|
<li>Lampirkan foto sebagai bukti</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- KANAN = FORM --}}
|
|
<div class="form-column">
|
|
|
|
{{-- KATEGORI --}}
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
<i class="fas fa-tag me-1 label-icon"></i>
|
|
Kategori Pengaduan
|
|
</label>
|
|
<div class="select-wrapper">
|
|
<select name="kategori_masalah" class="form-field" required>
|
|
<option value="">Pilih Kategori</option>
|
|
<option value="kebersihan">🧹 Kebersihan</option>
|
|
<option value="keamanan">🚨 Keamanan</option>
|
|
<option value="fasilitas">🏠 Fasilitas</option>
|
|
</select>
|
|
<i class="fas fa-chevron-down select-arrow"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- DESKRIPSI --}}
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
<i class="fas fa-align-left me-1 label-icon"></i>
|
|
Deskripsi Masalah
|
|
</label>
|
|
<textarea name="deskripsi"
|
|
class="form-field textarea-field"
|
|
rows="6"
|
|
id="deskripsiField"
|
|
placeholder="Jelaskan masalah secara detail..."
|
|
required></textarea>
|
|
<div class="char-counter">
|
|
<span id="charCount">0</span> karakter
|
|
</div>
|
|
</div>
|
|
|
|
{{-- UPLOAD --}}
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
<i class="fas fa-cloud-upload-alt me-1 label-icon"></i>
|
|
Upload Gambar
|
|
<span class="optional-badge">Opsional</span>
|
|
</label>
|
|
<div class="upload-box" id="upload-box">
|
|
<input type="file"
|
|
name="foto"
|
|
id="fotoInput"
|
|
class="upload-input"
|
|
accept="image/*"
|
|
onchange="previewImage(event)">
|
|
<div class="upload-content" id="upload-content">
|
|
<div class="upload-icon-circle">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
</div>
|
|
<p class="upload-main-text">Klik atau drag gambar ke sini</p>
|
|
<p class="upload-sub-text">PNG, JPG, JPEG hingga 2MB</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- BUTTON --}}
|
|
<div class="btn-row">
|
|
<button type="reset" class="btn-reset" onclick="resetForm()">
|
|
<i class="fas fa-undo me-1"></i>Reset
|
|
</button>
|
|
<button type="submit" class="btn-submit">
|
|
<i class="fas fa-paper-plane me-2"></i>
|
|
Kirim Pengaduan
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- ========== STYLE ========== --}}
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
.pengaduan-wrapper {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
padding: 2rem 1.5rem;
|
|
min-height: 100vh;
|
|
background: #f0f4f8;
|
|
}
|
|
|
|
/* ---- CARD ---- */
|
|
.pengaduan-card {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
background: #ffffff;
|
|
border-radius: 20px;
|
|
border: 1px solid #e5e7eb;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ---- HEADER ---- */
|
|
.pengaduan-header {
|
|
background: linear-gradient(135deg, #064e3b 0%, #0a6b52 60%, #0d7a5f 100%);
|
|
padding: 1.5rem 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pengaduan-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
right: -40px; top: -40px;
|
|
width: 180px; height: 180px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.06);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pengaduan-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 80px; bottom: -50px;
|
|
width: 120px; height: 120px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.04);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.header-icon {
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 14px;
|
|
background: rgba(255,255,255,0.18);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
border: 1.5px solid rgba(255,255,255,0.25);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.header-title {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.header-subtitle {
|
|
margin: 2px 0 0;
|
|
font-size: 0.82rem;
|
|
color: rgba(255,255,255,0.65);
|
|
font-weight: 500;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ---- BODY ---- */
|
|
.pengaduan-body {
|
|
padding: 2rem;
|
|
}
|
|
|
|
/* ---- ALERT ---- */
|
|
.alert-error {
|
|
background: #fff1f2;
|
|
border: 1.5px solid #fda4af;
|
|
border-radius: 12px;
|
|
padding: 14px 18px;
|
|
color: #be123c;
|
|
font-size: 0.875rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* ---- GRID ---- */
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.4fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.form-grid { grid-template-columns: 1fr; }
|
|
.pengaduan-body { padding: 1.25rem; }
|
|
}
|
|
|
|
/* ---- PREVIEW COLUMN ---- */
|
|
.preview-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.preview-box {
|
|
background: #f9fafb;
|
|
border: 2px dashed #d1d5db;
|
|
border-radius: 16px;
|
|
min-height: 230px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
transition: border-color 0.3s;
|
|
position: relative;
|
|
}
|
|
|
|
.preview-box.has-image {
|
|
border-style: solid;
|
|
border-color: #064e3b;
|
|
}
|
|
|
|
.preview-placeholder {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.preview-icon-wrap {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: #f0fdf4;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 12px;
|
|
font-size: 22px;
|
|
color: #064e3b;
|
|
border: 1px solid #d1fae5;
|
|
}
|
|
|
|
.preview-label {
|
|
font-weight: 600;
|
|
color: #374151;
|
|
font-size: 0.875rem;
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.preview-sub {
|
|
color: #9ca3af;
|
|
font-size: 0.8rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.preview-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 260px;
|
|
object-fit: cover;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
/* ---- TIPS CARD ---- */
|
|
.tips-card {
|
|
background: #f9fafb;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
padding: 14px 18px;
|
|
}
|
|
|
|
.tips-title {
|
|
font-weight: 700;
|
|
color: #064e3b;
|
|
font-size: 0.82rem;
|
|
margin: 0 0 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tips-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.tips-list li {
|
|
font-size: 0.82rem;
|
|
color: #374151;
|
|
margin-bottom: 6px;
|
|
position: relative;
|
|
padding-left: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tips-list li::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
color: #064e3b;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ---- FORM COLUMN ---- */
|
|
.form-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
/* ---- FIELD GROUP ---- */
|
|
.field-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.field-label {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.label-icon {
|
|
color: #064e3b;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.optional-badge {
|
|
margin-left: auto;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
background: #f3f4f6;
|
|
border-radius: 20px;
|
|
padding: 2px 10px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
/* ---- FORM FIELDS ---- */
|
|
.form-field {
|
|
width: 100%;
|
|
border: 1.5px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
padding: 11px 14px;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 0.875rem;
|
|
color: #1f2937;
|
|
background: #fafafa;
|
|
transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
|
|
outline: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.form-field:focus {
|
|
border-color: #064e3b;
|
|
background: #fff;
|
|
box-shadow: 0 0 0 3px rgba(6,78,59,0.1);
|
|
}
|
|
|
|
.form-field::placeholder { color: #9ca3af; }
|
|
|
|
.textarea-field { resize: vertical; min-height: 130px; }
|
|
|
|
/* ---- SELECT WRAPPER ---- */
|
|
.select-wrapper { position: relative; }
|
|
|
|
.select-wrapper .form-field {
|
|
padding-right: 36px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.select-arrow {
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #064e3b;
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ---- CHAR COUNTER ---- */
|
|
.char-counter {
|
|
font-size: 0.75rem;
|
|
color: #9ca3af;
|
|
text-align: right;
|
|
}
|
|
|
|
/* ---- UPLOAD BOX ---- */
|
|
.upload-box {
|
|
position: relative;
|
|
border: 2px dashed #d1d5db;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.upload-box:hover {
|
|
border-color: #064e3b;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.upload-input {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
}
|
|
|
|
.upload-icon-circle {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: #f0fdf4;
|
|
border: 1px solid #d1fae5;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 10px;
|
|
font-size: 20px;
|
|
color: #064e3b;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.upload-box:hover .upload-icon-circle {
|
|
background: #dcfce7;
|
|
}
|
|
|
|
.upload-main-text {
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
color: #374151;
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.upload-sub-text {
|
|
font-size: 0.75rem;
|
|
color: #9ca3af;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ---- BUTTONS ---- */
|
|
.btn-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 0.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.btn-reset {
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
border: 1.5px solid #e5e7eb;
|
|
background: #fff;
|
|
color: #6b7280;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-reset:hover {
|
|
border-color: #d1d5db;
|
|
background: #f9fafb;
|
|
color: #374151;
|
|
}
|
|
|
|
.btn-submit {
|
|
padding: 10px 24px;
|
|
border-radius: 10px;
|
|
border: none;
|
|
background: linear-gradient(135deg, #064e3b, #0d6e4f);
|
|
color: #fff;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 4px 14px rgba(6,78,59,0.3);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.btn-submit:hover {
|
|
opacity: 0.9;
|
|
box-shadow: 0 6px 20px rgba(6,78,59,0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-submit:active { transform: translateY(0); }
|
|
</style>
|
|
|
|
{{-- ========== JS ========== --}}
|
|
<script>
|
|
function previewImage(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function () {
|
|
const img = document.getElementById('preview');
|
|
const placeholder = document.getElementById('preview-placeholder');
|
|
const box = document.getElementById('preview-box');
|
|
|
|
img.src = reader.result;
|
|
img.classList.remove('d-none');
|
|
placeholder.style.display = 'none';
|
|
box.classList.add('has-image');
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
function resetForm() {
|
|
const img = document.getElementById('preview');
|
|
const placeholder = document.getElementById('preview-placeholder');
|
|
const box = document.getElementById('preview-box');
|
|
|
|
img.src = '';
|
|
img.classList.add('d-none');
|
|
placeholder.style.display = 'block';
|
|
box.classList.remove('has-image');
|
|
document.getElementById('charCount').textContent = '0';
|
|
}
|
|
|
|
document.getElementById('deskripsiField')?.addEventListener('input', function () {
|
|
document.getElementById('charCount').textContent = this.value.length;
|
|
});
|
|
</script>
|
|
|
|
@endsection
|