@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>Status Foto Meteran</h3>
        </div>
    </header>

    <div class="status-container" style="padding: 20px; text-align: center;">
        
        <div style="margin-bottom: 20px;">
            <h4 style="font-weight: bold;">Terima Kasih!</h4>
            <p style="color: #666; font-size: 0.9rem;">
                Foto Anda untuk periode <strong>{{ \Carbon\Carbon::create()->month($reading->month)->translatedFormat('F') }} {{ $reading->year }}</strong> sudah berhasil kami terima.
            </p>
        </div>

        <div class="image-wrapper" style="margin: 20px 0;">
            <img src="{{ asset('storage/meter-images/' . $reading->image_path) }}"
                 alt="Foto Meteran" 
                 style="width: 100%; max-width: 300px; border-radius: 15px; border: 4px solid #f0f0f0; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
        </div>

        <div class="status-badge" style="display: inline-block; padding: 10px 25px; border-radius: 50px; background: {{ $reading->status == 'verified' ? '#d4edda' : '#fff3cd' }}; color: {{ $reading->status == 'verified' ? '#155724' : '#856404' }}; font-weight: bold; border: 1px solid {{ $reading->status == 'verified' ? '#c3e6cb' : '#ffeeba' }};">
            {{ $reading->status == 'verified' ? 'TERVERIFIKASI' : 'MENUNGGU VERIFIKASI' }}
        </div>

        @if($reading->status == 'verified')
            <div style="margin-top: 25px; padding: 15px; background: #e7f3ff; border-radius: 12px;">
                <p style="color: #0056b3; font-size: 0.85rem; margin: 0;">Data sudah disetujui. Silakan cek menu <strong>Tagihan</strong> untuk melihat rincian biaya.</p>
            </div>
        @else
            <div style="margin-top: 25px;">
                <p style="color: #856404; font-size: 0.85rem;">Petugas akan segera memeriksa foto Anda. Mohon tunggu informasi selanjutnya.</p>
            </div>
        @endif
    </div>
</main>
@endsection