@extends('layouts.app', [
    'title' => 'Halaman Laporan'
])

@section('content')

<!-- Menu Rekapitulasi -->
<div class="my-6">
    <div class="w-full">
        <!-- Card Container -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 overflow-hidden">
            <!-- Header Card -->
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                <h6 class="m-0 font-bold text-gray-700">Menu Rekapitulasi</h6>
            </div>
            
            <!-- Button Container -->
            <div class="p-6 flex flex-wrap gap-3">
                <!-- Tombol Buka Modal Rekap Pendapatan Tahunan -->
                <button type="button" 
                    onclick="openModal('modalRekapPendapatan')"
                    class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm rounded-lg shadow-sm transition-all duration-200">
                    <i class="fas fa-file-excel mr-2"></i> Rekapitulasi Pendapatan Tahunan
                </button>

                <!-- Tombol Buka Modal Rekap Data Pelanggan -->
                <button type="button" 
                    onclick="openModal('modalRekapBulanan')"
                    class="inline-flex items-center px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold text-sm rounded-lg shadow-sm transition-all duration-200">
                    <i class="fas fa-file-excel mr-2"></i> Rekapitulasi Data Pelanggan Bulanan
                </button>
            </div>
        </div>
    </div>
</div>

@if(auth()->user()->role === 'admin' || auth()->user()->id === 1)
{{-- ==================== TABEL 1: LOG DATA TAGIHAN ==================== --}}
<div class="my-2">
    <div class="w-full">
        <div class="bg-white rounded-lg shadow-md mb-6 overflow-hidden">
            <div class="px-6 py-4 bg-green-600 border-b border-green-700">
                <h6 class="m-0 font-bold text-white">Rekap Log Aktivitas Data Tagihan</h6>
            </div>
            <div class="p-6">
                {{-- FORM FILTER PENCARIAN --}}
                <form action="{{ request()->url() }}" method="GET" class="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <div class="flex flex-wrap items-end -mx-2">
                        <div class="w-full md:w-3/12 px-2 mb-4 md:mb-0">
                            <label class="block font-bold text-gray-600 text-sm mb-1">Dari Tanggal</label>
                            <input type="date" name="start_date" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="{{ request('start_date') }}">
                        </div>
                        <div class="w-full md:w-3/12 px-2 mb-4 md:mb-0">
                            <label class="block font-bold text-gray-600 text-sm mb-1">Sampai Tanggal</label>
                            <input type="date" name="end_date" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="{{ request('end_date') }}">
                        </div>
                        <div class="w-full md:w-2/12 px-2">
                            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded transition">
                                <i class="fas fa-search mr-1"></i> Cari Log
                            </button>
                            @if(request()->has('start_date'))
                                <a href="{{ request()->url() }}" class="block text-center bg-gray-500 hover:bg-gray-600 text-white text-xs font-semibold py-1 px-2 rounded mt-1 transition">Reset</a>
                            @endif
                        </div>
                    </div>
                </form>

                <div class="overflow-x-auto max-h-100 overflow-y-auto border border-gray-200 rounded">
                    <table class="w-full border-collapse text-left text-sm text-gray-600">
                        <thead class="sticky top-0 bg-gray-100 z-10 text-gray-700 uppercase text-xs border-b border-gray-200">
                            <tr>
                                <th class="py-3 px-4" style="width: 13%">Waktu</th>
                                <th class="py-3 px-4" style="width: 20%">Operator (User)</th>
                                <th class="py-3 px-4" style="width: 40%">Aktivitas</th>
                                <th class="py-3 px-4" style="width: 15%">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse($invoiceLogs as $index => $log)
                                @php
                                    $desc = strtolower($log->description ?? '');
                                @endphp
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 px-4">{{ $log->created_at->translatedFormat('d F Y H:i') }} WITA</td>
                                    <td class="py-3 px-4"><strong>{{ $log->causer->name ?? 'Sistem' }}</strong></td>
                                    <td class="py-3 px-4">{{ $log->description }}</td>
                                    <td class="py-3 px-4">
                                        @if(str_contains($desc, 'mengirim notifikasi') || str_contains($desc, 'pesan') || str_contains($desc, 'lunas'))
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded">Pembayaran Lunas</span>
                                        @elseif(str_contains($desc, 'menambahkan') || str_contains($desc, 'baru'))
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-yellow-100 text-yellow-800 rounded">Pembayaran Pending</span>
                                        @elseif(str_contains($desc, 'menghapus') || str_contains($desc, 'hapus'))
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-red-100 text-red-800 rounded">Hapus Data Tagihan</span>
                                        @elseif(str_contains($desc, 'status'))
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded">Mutasi</span>
                                        @else
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-gray-100 text-gray-800 rounded">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-4 text-gray-500">Belum ada log aktivitas tagihan yang tercatat.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ==================== TABEL 2: LOG JATUH TEMPO ==================== --}}
<div class="my-2">
    <div class="w-full">
        <div class="bg-white rounded-lg shadow-md mb-6 overflow-hidden">
            <div class="px-6 py-4 bg-cyan-600 border-b border-cyan-700">
                <h6 class="m-0 font-bold text-white">Rekap Log Aktivitas Jatuh Tempo</h6>
            </div>
            <div class="p-6">
                <form action="{{ request()->url() }}" method="GET" class="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <div class="flex flex-wrap items-end -mx-2">
                        <div class="w-full md:w-3/12 px-2 mb-4 md:mb-0">
                            <label class="block font-bold text-gray-600 text-sm mb-1">Dari Tanggal</label>
                            <input type="date" name="start_date" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="{{ request('start_date') }}">
                        </div>
                        <div class="w-full md:w-3/12 px-2 mb-4 md:mb-0">
                            <label class="block font-bold text-gray-600 text-sm mb-1">Sampai Tanggal</label>
                            <input type="date" name="end_date" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="{{ request('end_date') }}">
                        </div>
                        <div class="w-full md:w-2/12 px-2">
                            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded transition">
                                <i class="fas fa-search mr-1"></i> Cari Log
                            </button>
                            @if(request()->has('start_date'))
                                <a href="{{ request()->url() }}" class="block text-center bg-gray-500 hover:bg-gray-600 text-white text-xs font-semibold py-1 px-2 rounded mt-1 transition">Reset</a>
                            @endif
                        </div>
                    </div>
                </form>

                <div class="overflow-x-auto max-h-100 overflow-y-auto border border-gray-200 rounded">
                    <table class="w-full border-collapse text-left text-sm text-gray-600">
                        <thead class="sticky top-0 bg-gray-100 z-10 text-gray-700 uppercase text-xs border-b border-gray-200">
                            <tr>
                                <th class="py-3 px-4" style="width: 15%">Waktu</th>
                                <th class="py-3 px-4" style="width: 20%">Operator (User)</th>
                                <th class="py-3 px-4" style="width: 50%">Aktivitas</th>
                                <th class="py-3 px-4" style="width: 15%">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse($dueLogs as $index => $log)
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 px-4">{{ $log->created_at->translatedFormat('d F Y H:i') }} WITA</td>
                                    <td class="py-3 px-4"><strong>{{ $log->causer->name ?? 'Sistem' }}</strong></td>
                                    <td class="py-3 px-4">{{ $log->description }}</td>
                                    <td class="py-3 px-4 text-center">
                                        @if(str_contains(strtolower($log->description), 'whatsapp') || str_contains(strtolower($log->description), 'wa') || str_contains(strtolower($log->description), 'pesan') || str_contains(strtolower($log->description), 'fonnte') || str_contains(strtolower($log->description), 'notifikasi'))
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded">Notifikasi Berhasil Terkirim</span>
                                        @else
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-yellow-200 text-gray-900 rounded">Aktivitas Lain</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-4 text-gray-500">Belum ada riwayat aktivitas jatuh tempo yang tercatat.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ==================== TABEL 3: LOG DATA PELANGGAN ==================== --}}
<div class="my-2">
    <div class="w-full">
        <div class="bg-white rounded-lg shadow-md mb-6 overflow-hidden">
            <div class="px-6 py-4 bg-yellow-500 border-b border-yellow-600">
                <h6 class="m-0 font-bold text-white">Rekap Log Aktivitas Data Pelanggan</h6>
            </div>
            <div class="p-6">
                <form action="{{ request()->url() }}" method="GET" class="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-200">
                    @if(request()->has('invoice_start_date'))
                        <input type="hidden" name="invoice_start_date" value="{{ request('invoice_start_date') }}">
                        <input type="hidden" name="invoice_end_date" value="{{ request('invoice_end_date') }}">
                    @endif

                    <div class="flex flex-wrap items-end -mx-2">
                        <div class="w-full md:w-3/12 px-2 mb-4 md:mb-0">
                            <label class="block font-bold text-gray-600 text-sm mb-1">Dari Tanggal</label>
                            <input type="date" name="customer_start_date" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="{{ request('customer_start_date') }}">
                        </div>
                        <div class="w-full md:w-3/12 px-2 mb-4 md:mb-0">
                            <label class="block font-bold text-gray-600 text-sm mb-1">Sampai Tanggal</label>
                            <input type="date" name="customer_end_date" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="{{ request('customer_end_date') }}">
                        </div>
                        <div class="w-full md:w-2/12 px-2">
                            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded transition">
                                <i class="fas fa-search mr-1"></i> Cari Log
                            </button>
                            @if(request()->has('customer_start_date'))
                                <a href="{{ request()->fullUrlWithQuery(['customer_start_date' => null, 'customer_end_date' => null]) }}" class="block text-center bg-gray-500 hover:bg-gray-600 text-white text-xs font-semibold py-1 px-2 rounded mt-1 transition">Reset</a>
                            @endif
                        </div>
                    </div>
                </form>

                <div class="overflow-x-auto max-h-100 overflow-y-auto border border-gray-200 rounded">
                    <table class="w-full border-collapse text-left text-sm text-gray-600">
                        <thead class="sticky top-0 bg-gray-100 z-10 text-gray-700 uppercase text-xs border-b border-gray-200">
                            <tr>
                                <th class="py-3 px-4" style="width: 13%">Waktu</th>
                                <th class="py-3 px-4" style="width: 20%">Operator (User)</th>
                                <th class="py-3 px-4" style="width: 40%">Aktivitas</th>
                                <th class="py-3 px-4" style="width: 15%">Keterangan</th>
                            </tr>
                        </thead>
                       <tbody class="divide-y divide-gray-200">
                            @forelse($customerLogs as $index => $log)
                                @php
                                    $desc  = strtolower($log->description ?? '');
                                    $event = $log->event ?? '';
                                @endphp
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 px-4">{{ $log->created_at->translatedFormat('d F Y H:i') }} WITA</td>
                                    <td class="py-3 px-4"><strong>{{ $log->causer->name ?? 'Sistem' }}</strong></td>
                                    
                                    {{-- Menggunakan {!! !!} agar tag HTML warna hijau muda bisa tampil --}}
                                    <td class="py-3 px-4 whitespace-pre-line">{!! $log->description !!}</td>
                                    
                                    <td class="py-3 px-4">
                                        @php
                                            $desc  = strtolower($log->description ?? '');
                                            $event = strtolower($log->event ?? '');
                                        @endphp

                                        {{-- Gunakan IF-ELSEIF agar hanya satu badge status utama yang muncul per baris --}}
                                        @if($event == 'deleted' || str_contains($desc, 'menghapus') || str_contains($desc, 'hapus'))
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-red-100 text-red-800 rounded">Hapus Data Pelanggan</span>
                                            
                                        @elseif($event == 'updated' || str_contains($desc, 'memperbarui') || str_contains($desc, 'update'))
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-yellow-200 text-gray-900 rounded">Update Data Pelanggan</span>
                                            
                                        @elseif($event == 'created' || str_contains($desc, 'menambahkan') || str_contains($desc, 'baru'))
                                            <span class="inline-block px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded">Tambah Data Pelanggan</span>
                                            
                                        @endif

                                        {{-- Notifikasi tambahan jika ada --}}
                                        @if(str_contains($desc, 'mengirim notifikasi') || str_contains($desc, 'pesan'))
                                            <div class="mt-1">
                                                <span class="inline-block px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded">Notifikasi Berhasil Terkirim</span>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-4 text-gray-500">Belum ada log aktivitas pelanggan yang tercatat.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ==================== TABEL 4: LOG SISTEM (AUTENTIKASI) ==================== --}}
<div class="my-2">
    <div class="w-full">
        <div class="bg-white rounded-lg shadow-md mb-6 overflow-hidden">
            <div class="px-6 py-4 bg-gray-900 text-white border-b border-gray-800">
                <h6 class="m-0 font-bold">Rekap Log Sistem</h6>
            </div>
            <div class="p-6">
                <form action="{{ request()->url() }}" method="GET" class="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-200">
                    @if(request()->has('customer_start_date'))
                        <input type="hidden" name="customer_start_date" value="{{ request('customer_start_date') }}">
                        <input type="hidden" name="customer_end_date" value="{{ request('customer_end_date') }}">
                    @endif
                    @if(request()->has('invoice_start_date'))
                        <input type="hidden" name="invoice_start_date" value="{{ request('invoice_start_date') }}">
                        <input type="hidden" name="invoice_end_date" value="{{ request('invoice_end_date') }}">
                    @endif

                    <div class="flex flex-wrap items-end -mx-2">
                        <div class="w-full md:w-3/12 px-2 mb-4 md:mb-0">
                            <label class="block font-bold text-gray-600 text-sm mb-1">Dari Tanggal</label>
                            <input type="date" name="system_start_date" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="{{ request('system_start_date') }}">
                        </div>
                        <div class="w-full md:w-3/12 px-2 mb-4 md:mb-0">
                            <label class="block font-bold text-gray-600 text-sm mb-1">Sampai Tanggal</label>
                            <input type="date" name="system_end_date" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="{{ request('system_end_date') }}">
                        </div>
                        <div class="w-full md:w-2/12 px-2">
                            <button type="submit" class="w-full bg-gray-900 hover:bg-black text-white text-sm font-semibold py-2 px-4 rounded transition">
                                <i class="fas fa-shield-alt mr-1"></i> Cari Log
                            </button>
                            @if(request()->has('system_start_date'))
                                <a href="{{ request()->fullUrlWithQuery(['system_start_date' => null, 'system_end_date' => null]) }}" class="block text-center bg-gray-500 hover:bg-gray-600 text-white text-xs font-semibold py-1 px-2 rounded mt-1 transition">Reset</a>
                            @endif
                        </div>
                    </div>
                </form>

                <div class="overflow-x-auto max-h-100 overflow-y-auto border border-gray-200 rounded">
                    <table class="w-full border-collapse text-left text-sm text-gray-600">
                        <thead class="sticky top-0 bg-gray-100 z-10 text-gray-700 uppercase text-xs border-b border-gray-200">
                            <tr>
                                <th class="py-3 px-4" style="width: 15%">Waktu</th>
                                <th class="py-3 px-4" style="width: 20%">Operator (User)</th>
                                <th class="py-3 px-4" style="width: 50%">Detail Aktivitas Sistem</th>
                                <th class="py-3 px-4" style="width: 15%">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse($systemLogs as $index => $log)
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 px-4">{{ $log->created_at->translatedFormat('d F Y H:i') }} WITA</td>
                                    
                                    <td class="py-3 px-4">
                                        @if($log->causer)
                                            <strong>{{ $log->causer->name }}</strong>
                                        @else
                                            <span class="text-red-600 font-bold">
                                                <i class="fas fa-exclamation-triangle"></i> Anonim ({{ $log->properties['ip_address'] ?? '-' }})
                                            </span>
                                        @endif
                                    </td>
                                    
                                    <td class="py-3 px-4 whitespace-pre-line">{{ trim($log->description) }}
                                        @if(isset($log->properties['lokasi']) && !str_contains($log->properties['lokasi'], 'Lokal'))
                                            <div class="mt-2">
                                                <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($log->properties['lokasi']) }}" 
                                                   target="_blank" 
                                                   class="inline-flex items-center px-2.5 py-1 text-xs font-semibold border border-red-600 text-red-600 hover:bg-red-50 rounded transition">
                                                    <i class="fas fa-map-marker-alt mr-1"></i> Lihat di Google Maps
                                                </a>
                                            </div>
                                        @endif
                                    </td>
                                    
                                    <td class="py-3 px-4">
                                        @if(str_contains(strtolower($log->description), 'gagal'))
                                            <span class="block text-center px-2 py-1 text-xs font-semibold bg-red-100 text-red-800 rounded">Gagal Login</span>
                                        @elseif($log->causer)
                                            <span class="block text-center px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded">Login Sukses</span>
                                        @else
                                            <span class="block text-center px-2 py-1 text-xs font-semibold bg-gray-200 text-gray-800 rounded">Akses Publik</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-4 text-gray-500">Belum ada aktivitas login atau riwayat sistem yang tercatat.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@push('modal')
@include('reports.transactions.modal.rekap_pendapatan')
@include('reports.transactions.modal.rekap_datapelanggan')
@endpush

@push('js')
@include('reports.transactions.script')
@endpush