74 lines
4.2 KiB
PHP
74 lines
4.2 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<main class="main-content">
|
|
<header class="header mobile-header">
|
|
<div class="user-greeting">
|
|
<a href="{{ route('home') }}"><i class="fas fa-arrow-left"></i></a>
|
|
<h3>Foto Meteran</h3>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="p-4">
|
|
{{-- Area Notifikasi --}}
|
|
@if(session('success'))
|
|
<div class="alert alert-success" style="background: #d4edda; color: #155724; padding: 15px; border-radius: 12px; margin-bottom: 15px; border: 1px solid #c3e6cb;">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
@if(session('error'))
|
|
<div class="alert alert-danger" style="background: #f8d7da; color: #721c24; padding: 15px; border-radius: 12px; margin-bottom: 15px; border: 1px solid #f5c6cb;">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
{{-- BOX PESAN REJECT (Hanya Muncul Jika Ditolak Admin) --}}
|
|
@if(isset($oldReading) && $oldReading->status == 'rejected')
|
|
<div style="background: #fff5f5; border: 1px solid #feb2b2; padding: 15px; border-radius: 15px; margin-bottom: 20px;">
|
|
<h5 style="color: #c53030; font-weight: bold; margin-bottom: 5px;"><i class="fas fa-times-circle"></i> Foto Ditolak Petugas</h5>
|
|
<p style="color: #742a2a; font-size: 0.9rem; margin-bottom: 0;">Catatan: "{{ $oldReading->admin_note }}"</p>
|
|
<p style="color: #742a2a; font-size: 0.8rem; margin-top: 5px; font-style: italic;">* Silakan kirim ulang foto yang lebih jelas.</p>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="upload-container" style="background: white; padding: 25px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
|
|
<h4 style="font-weight: bold; margin-bottom: 8px;">Upload Foto Bulan {{ \Carbon\Carbon::now()->translatedFormat('F Y') }}</h4>
|
|
<p style="color: #666; font-size: 0.85rem; margin-bottom: 25px;">Pastikan angka pada meteran terlihat jelas.</p>
|
|
|
|
<form action="{{ route('meter.store') }}" method="POST" enctype="multipart/form-data" class="upload-form" id="meterForm">
|
|
@csrf
|
|
<div id="dropzone" style="border: 2px dashed #007bff; border-radius: 15px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: #f8fbff; margin-bottom: 20px;" onclick="document.getElementById('meter_image').click()">
|
|
<img id="image-preview" src="#" alt="Pratinjau Gambar" style="display:none; width: 100%; border-radius: 12px; margin-bottom: 15px; max-height: 280px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.1);"/>
|
|
<div id="upload-placeholder">
|
|
<i class="fas fa-camera" style="font-size: 3.5rem; color: #007bff; margin-bottom: 15px; display: block;"></i>
|
|
<span style="font-weight: 600; color: #007bff;">Ketuk untuk Ambil Foto</span>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="file" id="meter_image" name="meter_image" accept="image/*" capture="environment" style="display: none;">
|
|
|
|
<button type="submit" class="btn-primary-upload" style="width: 100%; background: #007bff; color: white; border: none; padding: 18px; border-radius: 15px; font-weight: bold; font-size: 1.1rem; cursor: pointer;">
|
|
Kirim Laporan Foto
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
document.getElementById('meter_image').onchange = function (evt) {
|
|
const [file] = evt.target.files;
|
|
if (file) {
|
|
const preview = document.getElementById('image-preview');
|
|
const placeholder = document.getElementById('upload-placeholder');
|
|
const dropzone = document.getElementById('dropzone');
|
|
preview.src = URL.createObjectURL(file);
|
|
preview.style.display = 'block';
|
|
placeholder.querySelector('span').innerText = "Ganti Foto Terpilih";
|
|
placeholder.querySelector('i').style.fontSize = "1.8rem";
|
|
dropzone.style.borderColor = "#28a745";
|
|
dropzone.style.background = "#f8fff9";
|
|
}
|
|
};
|
|
</script>
|
|
@endsection |