@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