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

@section('content')
@php
    $isAdmin = auth()->check() && (auth()->user()->role === 'admin' || auth()->user()->id === 1);
@endphp

@if($isAdmin)
<!-- Statistik Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <!-- Card Keuntungan (Bulan Ini) -->
    <div class="bg-white border-l-4 border-blue-600 rounded-lg shadow-sm h-full p-6">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-xs font-bold text-blue-600 uppercase tracking-wider mb-1">
                    Keuntungan (Bulan Ini)
                </div>
                <div class="text-xl font-bold text-gray-800">{{ $amount_this_month }}</div>
            </div>
            <div>
                <a href="javascript:void(0)" id="btn-check-summary" class="text-gray-300 hover:text-blue-600 transition-colors text-2xl no-underline">
                    <i class="fas fa-calendar fa-2x"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- Card Keuntungan (Tahun Ini) -->
    <div class="bg-white border-l-4 border-blue-600 rounded-lg shadow-sm h-full p-6">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-xs font-bold text-blue-600 uppercase tracking-wider mb-1">
                    Keuntungan (Tahun Ini)
                </div>
                <div class="text-xl font-bold text-gray-800">{{ $amount_this_year }}</div>
            </div>
            <div>
                <a href="javascript:void(0)" id="btn-check-year-summary" class="text-gray-300 hover:text-blue-600 transition-colors text-2xl no-underline">
                    <i class="fas fa-calendar fa-2x"></i>
                </a>
            </div>
        </div>
    </div>
</div>
@endif

<!-- DATA TABEL -->
<div class="grid grid-cols-1 gap-6">
    <div class="w-full">
        <div class="bg-white shadow-sm rounded-lg mb-6">
            <div class="px-6 py-4 border-b border-gray-400">
                <h6 class="m-0 font-bold text-gray-900">DATA TAGIHAN</h6>
            </div>
            <div class="p-6">
                <!-- Button trigger modal -->
                <button type="button" 
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm px-4 py-2 rounded mb-4 float-left transition-colors flex items-center cursor-pointer" 
                    onclick="document.getElementById('addTransactionModal').classList.remove('hidden'); document.getElementById('addTransactionModal').classList.add('flex'); document.body.classList.add('overflow-hidden');">
                    <i class="fas fa-plus mr-1.5"></i>Tambah Data Pembayaran
                </button>
                
                <div class="overflow-x-auto clear-both">
                    <table class="min-w-full divide-y divide-gray-200 border border-gray-200" id="datatable" width="100%" cellspacing="0">
                        <thead class="bg-gray-50 text-center font-bold text-gray-900">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">#</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">No Pelanggan</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">Nama Pelanggan</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">Jatuh Tempo</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">Pembayaran</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">Keterangan</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="text-center bg-white divide-y divide-gray-200 text-sm">
                            @foreach ($transactions as $transaction)
                            @php
                                $status = strtolower($transaction->payment?->status ?? 'pending');
                                $isLunas = $status === 'lunas';
                                $metode = strtolower(trim($transaction->payment?->metode_pembayaran ?? ''));
                            @endphp
                            <tr class="hover:bg-gray-100 transition text-gray-900">
                                <td class="px-6 py-4 whitespace-nowrap">{{ $loop->iteration }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">{{ $transaction->client->no_pelanggan }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">{{ $transaction->client->name }}</td>
                                
                                <!-- Jatuh Tempo -->
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="font-bold {{ isset($transaction->is_rangkap) && $transaction->is_rangkap ? 'text-gray-900' : '' }}">
                                        {{ $transaction->display_period ?? '' }}
                                    </span>
                                    <br>
                                    <small class="text-gray-400">
                                        Jatuh Tempo: {{ $transaction->client && $transaction->client->tanggal ? \Carbon\Carbon::parse($transaction->client->tanggal)->format('d') : '20' }} {{ $transaction->display_period ?? '' }}
                                    </small>
                                </td>

                                <!-- METODE PEMBAYARAN -->
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($metode === 'transfer')
                                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-1 rounded">Transfer</span>
                                    @elseif($metode === 'tunai')
                                        <span class="bg-cyan-100 text-cyan-800 text-xs font-semibold px-2.5 py-1 rounded">Tunai</span>
                                    @else
                                        <span class="bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-1 rounded">-</span>
                                    @endif
                                </td>

                                <!-- KETERANGAN STATUS -->
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($isLunas)
                                        <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-1 rounded">Lunas</span>
                                    @else
                                        <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-1 rounded">Pending</span>
                                    @endif
                                </td>

                                <!-- AKSI -->
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="inline-flex rounded shadow-sm" role="group">
                                       <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white text-xs px-2.5 py-1.5 rounded-l transition-colors cursor-pointer detail-button focus:outline-none"
                                            data-id="{{ $transaction->id }}" title="Lihat Detail">
                                            <i class="fas fa-fw fa-search"></i>
                                        </button>

                                        @if(!$isLunas)
                                        <form id="form-konfirmasi-{{ $transaction->id }}" action="{{ route('tagihan.konfirmasi', $transaction->id) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="button" class="bg-green-600 hover:bg-green-700 text-white text-xs px-2.5 py-1.5 transition-colors ml-0.5" title="Konfirmasi Lunas & Kirim WA" 
                                                    onclick="confirmKonfirmasiLunas('{{ $transaction->id }}', '{{ $transaction->client->name }}')">
                                                <i class="fab fa-fw fa-whatsapp"></i>
                                            </button>
                                        </form>
                                        @endif

                                        @if(auth()->user()->role === 'admin' || auth()->user()->id === 1)
                                        <form action="{{ route('tagihan.destroy', $transaction->id) }}" method="POST" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="bg-red-600 hover:bg-red-700 text-white text-xs px-2.5 py-1.5 rounded-r transition-colors delete-button ml-0.5" title="Hapus">
                                                <i class="fas fa-fw fa-trash"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@push('js')
@include('transactions.script')
<style>
    /* Efek hover interaktif untuk kedua tombol ikon kalender keuntungan */
    #btn-check-summary:hover, #btn-check-year-summary:hover {
        color: #2563eb !important;
        transition: color 0.2s ease-in-out;
    }
</style>
@endpush

@push('modal')
@include('transactions.modal.create')
@include('transactions.modal.show')
@include('transactions.modal.edit')

<!-- Modal Cek Keuntungan Ringkas (Bulanan) -->
<div id="summaryModal" class="fixed inset-0 z-50 items-center justify-center bg-black/50 hidden px-4">
    <div class="bg-white rounded-lg shadow-xl overflow-hidden w-full max-w-lg">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <h5 class="font-bold text-gray-800 text-base" id="summaryModalLabel">Cek Ringkasan Keuntungan Bulanan</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600 text-xl font-bold cursor-pointer" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <div class="mb-4">
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-2">Pilih Bulan</label>
                        <select id="summary_month" class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
                            <option value="01">Januari</option>
                            <option value="02">Februari</option>
                            <option value="03">Maret</option>
                            <option value="04">April</option>
                            <option value="05">Mei</option>
                            <option value="06">Juni</option>
                            <option value="07">Juli</option>
                            <option value="08">Agustus</option>
                            <option value="09">September</option>
                            <option value="10">Oktober</option>
                            <option value="11">November</option>
                            <option value="12">Desember</option>
                        </select>
                    </div>
                </div>
                <div>
                    <div class="mb-4">
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-2">Pilih Tahun</label>
                        <input type="number" id="summary_year" class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue-500" value="2026">
                    </div>
                </div>
            </div>
            
            <hr class="my-4 border-gray-100">
            
            <div class="text-center my-3 p-4 bg-gray-50 rounded border border-dashed border-gray-300 flex flex-col justify-center min-h-22.5">
                <h5 class="uppercase text-gray-800 font-bold text-sm">Total Keuntungan</h5>
                <h3 class="font-bold text-green-500 mt-2 text-base" id="summary_result_amount"></h3>
            </div>
        </div>
        <div class="flex items-center justify-end px-6 py-3 bg-gray-50 border-t border-gray-100 gap-2">
            <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-semibold text-sm px-4 py-2 rounded transition-colors cursor-pointer" data-dismiss="modal">Tutup</button>
            <button type="button" id="btn-process-summary" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm px-4 py-2 rounded transition-colors cursor-pointer">Cek Keuntungan</button>
        </div>
    </div>
</div>

<!-- Modal Cek Keuntungan Ringkas (Tahunan) -->
<div id="yearSummaryModal" class="fixed inset-0 z-50 items-center justify-center bg-black/50 hidden px-4">
    <div class="bg-white rounded-lg shadow-xl overflow-hidden w-full max-w-lg">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <h5 class="font-bold text-gray-800 text-base" id="yearSummaryModalLabel">Cek Ringkasan Keuntungan Tahunan</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600 text-xl font-bold cursor-pointer" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="p-6">
            <div class="mb-4">
                <label class="block text-xs font-bold text-gray-700 uppercase mb-2">Pilih Tahun</label>
                <input type="number" id="summary_year_only" class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:border-blue-500" value="2026">
            </div>
            
            <hr class="my-4 border-gray-100">
            
            <div class="text-center my-3 p-4 bg-gray-50 rounded border border-dashed border-gray-300 flex flex-col justify-center min-h-22.5">
                <h5 class="uppercase text-gray-800 font-bold text-sm">Total Keuntungan</h5>
                <h3 class="font-bold text-green-500 mt-2 text-base" id="year_summary_result_amount"></h3>
            </div>
        </div>
        <div class="flex items-center justify-end px-6 py-3 bg-gray-50 border-t border-gray-100 gap-2">
            <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-semibold text-sm px-4 py-2 rounded transition-colors cursor-pointer" data-dismiss="modal">Tutup</button>
            <button type="button" id="btn-process-year-summary" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm px-4 py-2 rounded transition-colors cursor-pointer">Cek Keuntungan</button>
        </div>
    </div>
</div>
@endpush

@endsection