@extends('layout.layout')

@php
    $title = 'Manajemen Meteran';
    $subTitle = 'Daftar Input Warga';
    $script = '<script src="' . asset('assets/js/data-table.js') . '"></script>';
@endphp

@section('content')

    <div class="grid grid-cols-12">
        <div class="col-span-12">
            <div class="card border-0 overflow-hidden shadow-sm rounded-2xl">
                <div class="card-header flex flex-wrap justify-between items-center px-6 py-4 bg-white dark:bg-neutral-800 border-b border-neutral-100 dark:border-neutral-700">
    <div>
        <h6 class="card-title mb-0 text-lg font-bold">Data Master Meteran</h6>
        <p class="text-xs text-neutral-400">Kelola dan verifikasi laporan meteran air warga</p>
    </div>
    
    {{-- TOGGLE & SETTING --}}
    <div class="flex items-center gap-3">
        
        {{-- TOGGLE PORTAL --}}
        <div class="flex items-center gap-4 bg-neutral-50 dark:bg-neutral-900 p-2.5 px-5 rounded-2xl border border-neutral-100 dark:border-neutral-700 shadow-sm">
            <div class="flex flex-col items-end">
                <span class="text-[10px] uppercase tracking-[0.05em] font-black {{ $isOpen ? 'text-blue-600' : 'text-neutral-400' }}">
                    Portal Warga: {{ $isOpen ? 'Terbuka' : 'Terkunci' }}
                </span>
                <span class="text-[9px] text-neutral-400 font-medium">Periode {{ now()->translatedFormat('F Y') }}</span>
            </div>

            <form action="{{ route('settings.toggle') }}" method="POST" id="toggleForm">
                @csrf
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="is_open" class="sr-only peer" {{ $isOpen ? 'checked' : '' }} onchange="this.form.submit()">
                    <div class="w-11 h-6 bg-neutral-200 peer-focus:outline-none rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 shadow-inner"></div>
                </label>
            </form>
        </div>

        {{-- TOMBOL SETTING HARGA --}}
        @if(Auth::user()->role === 'admin')
        <button onclick="openModalHarga('{{ \App\Models\AppSetting::get('harga_per_m3', 4000) }}', '{{ \App\Models\AppSetting::get('biaya_admin', 2000) }}')" 
                class="flex items-center gap-2 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 px-4 py-2.5 rounded-xl border border-amber-200 dark:border-amber-800 hover:bg-amber-100 dark:hover:bg-amber-900/30 transition text-sm font-semibold shadow-sm">
            <iconify-icon icon="mdi:cog" class="text-lg"></iconify-icon>
            <span>Harga Air</span>
        </button>
        @endif

    </div>
</div>
                <div class="card-body p-6 bg-white dark:bg-neutral-800">
                    <div class="overflow-x-auto">
                        <table id="selection-table" class="w-full border border-neutral-200 dark:border-neutral-600 rounded-lg border-separate">
                            <thead>
                                <tr class="bg-neutral-50/50 dark:bg-neutral-700/50">
                                    <th scope="col" class="text-neutral-800 dark:text-white px-4 py-3 text-left w-16 font-bold">No.</th>
                                    <th scope="col" class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">Pelanggan</th>
                                    <th scope="col" class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">No. Meteran</th>
                                    <th scope="col" class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">Periode</th>
                                    <th scope="col" class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">Angka Meter</th>
                                    <th scope="col" class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">Status</th>
                                    <th scope="col" class="text-neutral-800 dark:text-white px-4 py-3 text-center font-semibold">Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse($data as $index => $reading)
                                <tr class="hover:bg-neutral-50/50 dark:hover:bg-neutral-700/30 transition-colors">
                                    <td class="px-4 py-3 text-sm font-medium text-neutral-500">
                                        {{ $data->firstItem() + $index }}
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="flex items-center">
                                            <div class="w-9 h-9 rounded-lg bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center me-3 font-bold text-xs border border-blue-100 dark:border-blue-800">
                                                {{ substr($reading->user->name ?? 'U', 0, 2) }}
                                            </div>
                                            <div class="flex flex-col">
                                                <h6 class="text-sm mb-0 font-bold text-neutral-800 dark:text-neutral-100">
                                                    {{ $reading->user->name ?? 'User Tidak Dikenal' }}
                                                </h6>
                                                <span class="text-[10px] text-neutral-400 tracking-wider">ID: #{{ $reading->user_id }}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 text-sm font-mono font-semibold text-neutral-800 dark:text-neutral-200">
                                        {{ $reading->user->meteran->nomor_seri ?? '-' }}
                                    </td>
                                    <td class="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 font-medium">
                                        {{ \Carbon\Carbon::create()->month((int)$reading->month)->translatedFormat('F') }} {{ $reading->year }}
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="flex items-center gap-1">
                                            <span class="font-mono text-sm font-bold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 px-2 py-0.5 rounded">
                                                {{ $reading->meter_value ? number_format($reading->meter_value, 0, ',', '.') : '---' }}
                                            </span>
                                            <span class="text-[10px] text-neutral-400 font-black">M³</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                    @if($reading->status == 'verified')
                                        <span class="bg-success-100 dark:bg-success-900/30 text-success-600 dark:text-success-400 px-3 py-1 rounded-full font-medium text-xs border border-success-200">
                                            Verified
                                        </span>
                                    @elseif($reading->status == 'pending')
                                        <span class="bg-warning-100 dark:bg-warning-900/30 text-warning-600 dark:text-warning-400 px-3 py-1 rounded-full font-medium text-xs border border-warning-200">
                                            Pending
                                        </span>
                                    @else
                                        <span class="bg-danger-100 dark:bg-danger-900/30 text-danger-600 dark:text-danger-400 px-3 py-1 rounded-full font-medium text-xs border border-danger-200">
                                            Rejected
                                        </span>
                                    @endif
                                    </td>
                                    <td class="px-4 py-3 text-center">
    @php
        $invoiceLunas = \App\Models\Invoice::where('meter_reading_id', $reading->id)
                          ->where('status', 'paid')
                          ->exists();
    @endphp

    @if(!$invoiceLunas)
        <a href="{{ route('pencatatan.show', $reading->id) }}" 
           class="w-8 h-8 bg-blue-600 text-white rounded-lg inline-flex items-center justify-center hover:bg-blue-700 transition-all shadow-md shadow-blue-100 dark:shadow-none"
           title="Detail & Verifikasi">
            <iconify-icon icon="solar:pen-2-bold" class="text-base"></iconify-icon>
        </a>
    @else
        <span class="text-xs text-neutral-400">🔒</span>
    @endif
</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center py-20">
                                        <div class="flex flex-col items-center opacity-20 dark:opacity-40">
                                            <iconify-icon icon="solar:document-add-bold" class="text-6xl mb-2"></iconify-icon>
                                            <p class="text-sm font-bold uppercase tracking-widest">Belum Ada Laporan Masuk</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- PAGINATION --}}
                    <div class="mt-6 flex justify-between items-center">
                        <p class="text-xs text-neutral-400 font-medium">
                            Menampilkan {{ $data->firstItem() }} sampai {{ $data->lastItem() }} dari {{ $data->total() }} data
                        </p>
                        <div>
                            {{ $data->links() }}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection