@extends('layout.layout')

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

@section('content')
    <div class="grid grid-cols-12">
        <div class="col-span-12">
            
            @if(session('success'))
                <div class="mb-4 bg-emerald-50 border border-emerald-100 text-emerald-600 px-4 py-3 rounded-2xl relative shadow-sm font-medium">
                    {{ session('success') }}
                </div>
            @endif

            <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 Tagihan Pelanggan</h6>
                        <p class="text-xs text-neutral-400">Monitoring pembayaran tagihan dari database lokal</p>
                    </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. TAGIHAN</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">PERIODE</th>
                                    <th scope="col" class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">PEMAKAIAN</th>
                                    <th scope="col" class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">TOTAL</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-left font-semibold">ACTION</th>
                                </tr>
                            </thead>
                            
                            <tbody>
                                @forelse($data as $invoice)
                                <tr class="hover:bg-neutral-50/50 dark:hover:bg-neutral-700/30 transition-colors">
                                    <td class="px-4 py-3">
                                        <span class="text-xs font-mono font-bold text-neutral-500 tracking-tight">
                                            {{ $invoice->invoice_number }}
                                        </span>
                                    </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($invoice->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">
                                                    {{ $invoice->user->name ?? 'User Tidak Dikenal' }}
                                                </h6>
                                                <span class="text-[10px] text-neutral-400">ID: #{{ $invoice->user_id }}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400 font-medium">
                                        {{ \Carbon\Carbon::create()->month((int)($invoice->meterReading->month ?? 1))->translatedFormat('F') }} {{ $invoice->meterReading->year ?? '' }}
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
                                         {{ $invoice->pemakaian ?? 0 }} M³
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="text-sm font-bold text-neutral-800 dark:text-neutral-100">
                                            Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                    @if($invoice->status == 'unpaid')
                                        <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">
                                            Belum Bayar
                                        </span>
                                    @else
                                        <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">
                                            Lunas
                                        </span>
                                    @endif
                                  </td>
                                      <td class="px-4 py-3 text-center">
                                        <a href="{{ route('tagihan.show', $invoice->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">
                                            <iconify-icon icon="solar:eye-bold" class="text-base"></iconify-icon>
                                        </a>
                                    </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:bill-list-bold" class="text-6xl mb-2"></iconify-icon>
                                            <p class="text-sm font-bold uppercase tracking-widest">Belum Ada Tagihan</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination Eloquent (Kembali Normal) --}}
                    <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