155 lines
8.7 KiB
PHP
155 lines
8.7 KiB
PHP
@extends('layout.layout')
|
|
|
|
@php
|
|
$title = 'Detail & Catat Meteran';
|
|
$subTitle = 'Pencatatan Meteran';
|
|
|
|
$wargaBaseUrl = rtrim(config('app.warga_url', 'http://127.0.0.1:8000'), '/');
|
|
$imageUrl = $wargaBaseUrl . '/storage/meter-images/' . $reading->image_path;
|
|
@endphp
|
|
|
|
@section('content')
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
{{-- KOLOM KIRI (INFO PELANGGAN) --}}
|
|
<div class="col-span-12 lg:col-span-4">
|
|
<div class="card border-0 rounded-2xl bg-white dark:bg-neutral-700 h-full">
|
|
<div class="card-body p-6">
|
|
<h6 class="text-xl mb-4 font-semibold">Informasi Pencatatan</h6>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-center gap-1 mb-3">
|
|
<span class="w-[30%] text-base font-semibold text-neutral-600">Pelanggan</span>
|
|
<span class="w-[70%] text-secondary-light font-medium">: {{ $reading->user->name ?? 'N/A' }}</span>
|
|
</li>
|
|
<li class="flex items-center gap-1 mb-3">
|
|
<span class="w-[35%] text-base font-semibold text-neutral-600 dark:text-neutral-200">ID Meteran</span>
|
|
<span class="w-[65%] text-secondary-light font-medium">:
|
|
@if($reading->user && $reading->user->meteran)
|
|
<span class="text-primary-600 font-medium">{{ $reading->user->meteran->nomor_seri }}</span>
|
|
@else
|
|
<span class="text-warning-600">Belum dipasang</span>
|
|
@endif
|
|
</span>
|
|
</li>
|
|
<li class="flex items-center gap-1 mb-3">
|
|
<span class="w-[30%] text-base font-semibold text-neutral-600">Periode</span>
|
|
<span class="w-[70%] text-secondary-light font-medium">: {{ \Carbon\Carbon::create()->month($reading->month)->translatedFormat('F') }} {{ $reading->year }}</span>
|
|
</li>
|
|
<li class="flex items-center gap-1 mb-3">
|
|
<span class="w-[30%] text-base font-semibold text-neutral-600">Status</span>
|
|
<span class="w-[70%] font-bold {{ $reading->status == 'rejected' ? 'text-danger-600' : ($reading->status == 'verified' ? 'text-success-600' : 'text-warning-600') }}">
|
|
: {{ strtoupper($reading->status ?? 'PENDING') }}
|
|
</span>
|
|
</li>
|
|
<li class="flex items-center gap-1 mb-3">
|
|
<span class="w-[35%] text-base font-semibold text-neutral-600 dark:text-neutral-200">Tgl Upload</span>
|
|
<span class="w-[65%] text-secondary-light font-medium">: {{ $reading->created_at->translatedFormat('d M Y, H:i') }}</span>
|
|
</li>
|
|
|
|
{{-- TAMBAHAN: INFORMASI ANGKA BULAN LALU UNTUK ADMIN --}}
|
|
<hr class="my-3 border-neutral-200">
|
|
<li class="flex items-center gap-1 mb-3">
|
|
<span class="w-[40%] text-base font-semibold text-neutral-600">Meter Bulan Lalu</span>
|
|
<span class="w-[60%] font-bold text-blue-600">
|
|
: {{ $angka_lalu }} M³
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- KOLOM KANAN (FORM VERIFIKASI) --}}
|
|
<div class="col-span-12 lg:col-span-8">
|
|
<div class="card h-full border-0">
|
|
<div class="card-body p-6">
|
|
<h6 class="text-xl mb-4 font-semibold">Foto Meteran & Verifikasi</h6>
|
|
|
|
{{-- TAMPILAN GAMBAR DARI SERVER WARGA --}}
|
|
<div class="mb-6 text-center">
|
|
<img src="{{ $imageUrl }}"
|
|
class="mx-auto w-full max-h-[400px] object-contain rounded-lg border-2 border-neutral-100 shadow-sm"
|
|
onerror="this.onerror=null; this.src='https://placehold.co/600x400?text=Foto+Tidak+Ditemukan+di+Server+Warga';">
|
|
<p class="text-xs text-neutral-400 mt-2">Source: {{ $imageUrl }}</p>
|
|
</div>
|
|
|
|
<form id="catatMeterForm" action="{{ route('pencatatan.update', $reading->id) }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="grid grid-cols-1 gap-5">
|
|
{{-- STATUS TINDAKAN --}}
|
|
<div>
|
|
<label class="block font-semibold text-sm mb-2">Tindakan Admin <span class="text-danger-600">*</span></label>
|
|
<select name="status" id="status_action" class="form-control rounded-lg w-full" required onchange="handleStatusChange(this.value)">
|
|
<option value="verified" {{ $reading->status == 'verified' ? 'selected' : '' }}>Setujui (Verified)</option>
|
|
<option value="rejected" {{ $reading->status == 'rejected' ? 'selected' : '' }}>Tolak Foto (Rejected)</option>
|
|
</select>
|
|
</div>
|
|
|
|
{{-- INPUT ANGKA METERAN --}}
|
|
<div id="meter_value_wrapper">
|
|
<label class="block font-semibold text-sm mb-2">Angka Meteran Bulan Ini</label>
|
|
<input type="number" step="0.01" class="form-control rounded-lg" name="meter_value" id="meter_value_input"
|
|
value="{{ old('meter_value', $reading->meter_value ?? '') }}" placeholder="Masukkan angka yang ada di foto...">
|
|
</div>
|
|
|
|
{{-- PILIHAN ALASAN PENOLAKAN --}}
|
|
<div id="quick_reject_wrapper" class="hidden">
|
|
<label class="block font-semibold text-sm mb-2">Alasan Penolakan Cepat</label>
|
|
<select id="quick_note_select" class="form-control rounded-lg w-full mb-2" onchange="document.getElementById('admin_note').value = this.value">
|
|
<option value="">-- Pilih Alasan --</option>
|
|
<option value="Foto buram/gelap, angka tidak terbaca jelas.">Foto Buram</option>
|
|
<option value="Foto yang dikirim bukan foto meteran air.">Bukan Foto Meteran</option>
|
|
<option value="Angka meteran tidak masuk akal.">Angka Tidak Logis</option>
|
|
</select>
|
|
</div>
|
|
|
|
{{-- CATATAN TAMBAHAN --}}
|
|
<div>
|
|
<label class="block font-semibold text-sm mb-2">Catatan untuk Warga</label>
|
|
<textarea name="admin_note" id="admin_note" class="form-control rounded-lg" rows="3"
|
|
placeholder="Tulis pesan...">{{ old('admin_note', $reading->admin_note ?? '') }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 mt-8">
|
|
<a href="{{ route('pencatatan.index') }}" class="bg-neutral-100 text-neutral-600 px-6 py-2.5 rounded-lg font-medium">Batal</a>
|
|
<button type="submit" class="bg-blue-600 text-white px-8 py-2.5 rounded-lg font-bold shadow-lg shadow-blue-200 hover:bg-blue-700 transition-all">
|
|
Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function handleStatusChange(val) {
|
|
const mvWrapper = document.getElementById('meter_value_wrapper');
|
|
const mvInput = document.getElementById('meter_value_input');
|
|
const qr = document.getElementById('quick_reject_wrapper');
|
|
const an = document.getElementById('admin_note');
|
|
|
|
if (val === 'rejected') {
|
|
qr.classList.remove('hidden');
|
|
mvWrapper.classList.add('opacity-50');
|
|
mvInput.setAttribute('disabled', 'disabled');
|
|
mvInput.value = '';
|
|
an.setAttribute('required', 'required');
|
|
an.placeholder = "Tulis alasan penolakan di sini...";
|
|
} else {
|
|
qr.classList.add('hidden');
|
|
mvWrapper.classList.remove('opacity-50');
|
|
mvInput.removeAttribute('disabled');
|
|
mvInput.setAttribute('required', 'required');
|
|
an.removeAttribute('required');
|
|
an.placeholder = "Tambahkan pesan untuk warga (opsional)...";
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
handleStatusChange(document.getElementById('status_action').value);
|
|
});
|
|
</script>
|
|
@endsection |