@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