@extends('layouts.app')

@php
    $rupiah = fn ($nilai): string => 'Rp ' . number_format((float) $nilai, 0, ',', '.');
    $bulanId = [1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    $tanggal = function (?string $tgl) use ($bulanId): string {
        if (! $tgl) {
            return '-';
        }
        $ts = strtotime($tgl);

        return date('j', $ts) . ' ' . $bulanId[(int) date('n', $ts)] . ' ' . date('Y', $ts);
    };
@endphp

@section('title', 'Tagihan Langganan')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Admin Kabupaten</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Tagihan Langganan</p>
            <h1 class="pkbm-dashboard__title">Tagihan Langganan</h1>
            <p class="pkbm-dashboard__subtitle">Setiap lembaga ditagih <span class="font-semibold text-slate-700">Pokok</span> (diinput manual oleh admin) dan <span class="font-semibold text-slate-700">Maintenance</span> (setahun sekali, terhitung sejak mulai langganan).</p>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--{{ session('status')['type'] ?? 'success' }}">
            <i class="bi {{ (session('status')['type'] ?? 'success') === 'success' ? 'bi-check-circle-fill' : 'bi-exclamation-circle-fill' }}" aria-hidden="true"></i>
            <span>{{ session('status')['message'] }}</span>
        </div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Permintaan belum dapat diproses.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Daftar Tagihan Lembaga</h2>
                <p class="mt-1 text-xs text-slate-500">Input Tagihan Pokok manual, lalu klik label <span class="font-semibold text-slate-700">Belum Lunas</span>/<span class="font-semibold text-slate-700">Lunas</span> untuk mengganti status pokok.</p>
            </div>
            <span class="inline-flex rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">{{ $rows->count() }} Lembaga</span>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[68rem]">
                <thead>
                    <tr>
                        <th scope="col" class="w-12 text-center">No</th>
                        <th scope="col">Lembaga</th>
                        <th scope="col">Fitur Aktif</th>
                        <th scope="col" class="text-right">Tagihan Pokok</th>
                        <th scope="col" class="text-right">Maintenance</th>
                        <th scope="col">Status</th>
                        <th scope="col" class="text-right">Total / Sisa</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rows as $row)
                        @php
                            $sudahTagihan = (bool) $row->id_pembayaran;
                            $maintenance = $sudahTagihan ? $row->biaya_maintenance : $row->maintenance_tahunan;
                            $jatuhTempo = $sudahTagihan && $row->jatuh_tempo ? $row->jatuh_tempo : $row->jatuh_tempo_maintenance;
                            $statusPokok = $row->status_pokok ?? 'belum lunas';
                            $statusMaint = $row->status_maintenance ?? 'belum lunas';
                            $total = $sudahTagihan ? (float) $row->total_tagihan : 0.0;
                            $terbayarLabel = $sudahTagihan
                                ? (($statusPokok === 'lunas' ? (float) $row->biaya_langganan : 0)
                                    + ($statusMaint === 'lunas' ? (float) $row->biaya_maintenance : 0))
                                : 0.0;
                            $terbayar = max((float) ($row->terbayar ?? 0), $terbayarLabel);
                            $sisa = max(0, $total - $terbayar);
                        @endphp
                        <tr data-id-pkbm="{{ $row->id_pkbm }}">
                            <td class="text-center text-slate-500">{{ $loop->iteration }}</td>
                            <th scope="row" class="font-semibold text-slate-800">
                                {{ $row->nama_pkbm }}
                                <span class="mt-0.5 block text-xs font-normal text-slate-400">Mulai Langganan {{ $tanggal($row->created_at) }}</span>
                            </th>
                            <td>
                                <details class="group">
                                    <summary class="list-none cursor-pointer">
                                        <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600">
                                            <i class="bi bi-app-indicator" aria-hidden="true"></i>{{ $row->jumlah_fitur }} fitur
                                            @if ($row->jumlah_fitur > 0)<i class="bi bi-chevron-down text-[10px] transition group-open:rotate-180" aria-hidden="true"></i>@endif
                                        </span>
                                    </summary>
                                    <ul class="mt-2 space-y-1 text-xs text-slate-500">
                                        @forelse ($row->rincian as $grup => $item)
                                            <li class="flex items-center justify-between gap-3">
                                                <span>{{ $grup }}</span>
                                                <span class="font-medium text-slate-600">{{ $item['count'] }} fitur</span>
                                            </li>
                                        @empty
                                            <li>Belum ada fitur aktif.</li>
                                        @endforelse
                                    </ul>
                                </details>
                            </td>
                            <td class="text-right">
                                @if ($sudahTagihan)
                                    <div class="pokok-edit-cell">
                                        <div class="pokok-view flex items-center justify-end gap-1">
                                            <span class="text-sm font-semibold text-slate-700">{{ $rupiah($row->biaya_langganan) }}</span>
                                            <button type="button" class="settings-icon-action pokok-edit-toggle" title="Edit Tagihan Pokok" aria-label="Edit Tagihan Pokok">
                                                <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                        <form method="POST" action="{{ route('fk.pembayaran.pokok', $row->id_pembayaran) }}" class="pokok-form hidden items-center justify-end gap-1">
                                            @csrf
                                            <label class="sr-only" for="pokok-edit-{{ $row->id_pembayaran }}">Tagihan Pokok</label>
                                            <input id="pokok-edit-{{ $row->id_pembayaran }}" type="text" name="pokok" inputmode="numeric" required
                                                   value="{{ number_format((float) $row->biaya_langganan, 0, ',', '.') }}"
                                                   class="input-ribuan sp-form-control w-32 px-2 py-1 text-right text-sm">
                                            <button type="submit" class="sp-btn-primary !px-2 !py-1 text-xs" title="Simpan"><i class="bi bi-check2" aria-hidden="true"></i></button>
                                            <button type="button" class="settings-icon-action pokok-cancel" title="Batal" aria-label="Batal"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
                                        </form>
                                        <form method="POST" action="{{ route('fk.pembayaran.status', [$row->id_pembayaran, 'pokok']) }}" class="mt-1 inline-flex">
                                            @csrf
                                            <button type="submit" title="Klik untuk mengganti status lunas/belum lunas" @class([
                                                'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-semibold transition',
                                                'bg-emerald-50 text-emerald-700 hover:bg-emerald-100' => $statusPokok === 'lunas',
                                                'bg-rose-50 text-rose-600 hover:bg-rose-100' => $statusPokok !== 'lunas',
                                            ])>
                                                <i class="bi {{ $statusPokok === 'lunas' ? 'bi-check-circle-fill' : 'bi-circle' }}" aria-hidden="true"></i>{{ ucfirst($statusPokok) }}
                                            </button>
                                        </form>
                                    </div>
                                @else
                                    <form method="POST" action="{{ route('fk.pembayaran.tagihan') }}" class="flex flex-col items-end gap-1.5">
                                        @csrf
                                        <input type="hidden" name="id_pkbm" value="{{ $row->id_pkbm }}">
                                        <label class="sr-only" for="pokok-{{ $row->id_pkbm }}">Tagihan Pokok</label>
                                        <input id="pokok-{{ $row->id_pkbm }}" type="text" name="pokok" inputmode="numeric" required placeholder="Input nominal pokok"
                                               class="input-ribuan sp-form-control w-40 px-2 py-1.5 text-right text-sm">
                                        <button type="submit" class="sp-btn-primary !px-3 !py-1.5 text-xs"><i class="bi bi-receipt" aria-hidden="true"></i>Buat Tagihan</button>
                                    </form>
                                @endif
                            </td>
                            <td class="text-right">
                                <span class="block text-sm text-slate-700">{{ $rupiah($maintenance) }}</span>
                                <span class="block text-[11px] text-slate-400">JJT {{ $tanggal($jatuhTempo) }}</span>
                                @if ($sudahTagihan)
                                    <form method="POST" action="{{ route('fk.pembayaran.status', [$row->id_pembayaran, 'maintenance']) }}" class="mt-1 inline-flex">
                                        @csrf
                                        <button type="submit" title="Klik untuk mengganti status lunas/belum lunas" @class([
                                            'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-semibold transition',
                                            'bg-emerald-50 text-emerald-700 hover:bg-emerald-100' => $statusMaint === 'lunas',
                                            'bg-rose-50 text-rose-600 hover:bg-rose-100' => $statusMaint !== 'lunas',
                                        ])>
                                            <i class="bi {{ $statusMaint === 'lunas' ? 'bi-check-circle-fill' : 'bi-circle' }}" aria-hidden="true"></i>{{ ucfirst($statusMaint) }}
                                        </button>
                                    </form>
                                @endif
                            </td>
                            <td>
                                @if ($sudahTagihan)
                                    <span @class([
                                        'inline-flex rounded-full px-2.5 py-1 text-xs font-semibold',
                                        'bg-emerald-50 text-emerald-700' => $row->status === 'lunas',
                                        'bg-amber-50 text-amber-700' => $row->status !== 'lunas',
                                    ])>{{ strtoupper($row->status) }}</span>
                                @else
                                    <span class="inline-flex rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-500">Siap Ditagih</span>
                                @endif
                            </td>
                            <td class="text-right text-sm">
                                @if ($sudahTagihan)
                                    <span class="block text-slate-500">Total: {{ $rupiah($total) }}</span>
                                    <span class="font-semibold text-rose-600">Sisa: {{ $rupiah($sisa) }}</span>
                                @else
                                    <span class="text-slate-400">-</span>
                                @endif
                            </td>
                            <td class="text-right">
                                @if (! $sudahTagihan)
                                    <span class="text-xs text-slate-400">&mdash;</span>
                                @elseif ($row->status !== 'lunas')
                                    <button type="button" class="sp-btn-primary !px-3 !py-1.5 text-xs" data-cicil="{{ $row->id_pembayaran }}">
                                        <i class="bi bi-cash-stack" aria-hidden="true"></i>Cicil
                                    </button>
                                @else
                                    <span class="text-xs text-slate-400">Selesai</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="py-12 text-center text-sm text-slate-500">Belum ada data PKBM.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

<dialog id="cicil-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="cicil-title">
    <form id="cicil-form" method="POST">
        @csrf
        <input type="hidden" name="id_pkbm" value="">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-cash-stack"></i></span>
                <div>
                    <h2 id="cicil-title" class="sp-section-title">Input Pembayaran</h2>
                    <p id="cicil-description" class="mt-1 text-xs text-slate-500"></p>
                </div>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup">
                <i class="bi bi-x-lg" aria-hidden="true"></i>
            </button>
        </div>
        <div class="p-5">
            <label class="sp-form-label" for="cicil-jumlah">Nominal Bayar</label>
            <input id="cicil-jumlah" name="jumlah_bayar" type="text" inputmode="numeric" required placeholder="Masukkan nominal"
                   class="input-ribuan sp-form-control px-3 py-2.5 text-center text-sm font-semibold">
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan Cicilan</button>
        </div>
    </form>
</dialog>
@endsection

@push('scripts')
    <script>
        const formatRibuan = (input) => {
            const digits = input.value.replace(/[^0-9]/g, '');
            input.value = digits === '' ? '' : parseInt(digits, 10).toLocaleString('id-ID');
        };
        document.querySelectorAll('.input-ribuan').forEach((input) => {
            input.addEventListener('input', () => formatRibuan(input));
        });

        // Edit inline Tagihan Pokok: tukar mode lihat <-> input.
        document.querySelectorAll('.pokok-edit-toggle').forEach((btn) => {
            btn.addEventListener('click', () => {
                const cell = btn.closest('.pokok-edit-cell');
                const view = cell.querySelector('.pokok-view');
                const form = cell.querySelector('.pokok-form');
                view.classList.add('hidden');
                form.classList.remove('hidden');
                form.classList.add('flex');
                const input = form.querySelector('input[name="pokok"]');
                input.focus();
                input.select();
            });
        });
        document.querySelectorAll('.pokok-cancel').forEach((btn) => {
            btn.addEventListener('click', () => {
                const cell = btn.closest('.pokok-edit-cell');
                const view = cell.querySelector('.pokok-view');
                const form = cell.querySelector('.pokok-form');
                form.classList.add('hidden');
                form.classList.remove('flex');
                view.classList.remove('hidden');
            });
        });

        const cicilDialog = document.querySelector('#cicil-dialog');
        const cicilForm = document.querySelector('#cicil-form');
        const cicilJumlah = document.querySelector('#cicil-jumlah');
        document.querySelectorAll('[data-cicil]').forEach((button) => {
            button.addEventListener('click', () => {
                const row = button.closest('tr');
                cicilForm.action = `{{ url('/fk/pembayaran') }}/${button.dataset.cicil}/cicilan`;
                cicilForm.querySelector('input[name="id_pkbm"]').value = row.dataset.idPkbm ?? '';
                document.querySelector('#cicil-description').textContent = row.querySelector('th').textContent.trim();
                cicilJumlah.value = '';
                cicilDialog.showModal();
            });
        });
        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog').close());
        });
    </script>
@endpush