@extends('layouts.master')

@section('title', 'Laporan Rekap Tagihan Wilayah Bulanan')
@section('page-title', 'Laporan Rekap Tagihan Kecamatan/Desa per Bulan')

@section('content')
    <style>
        .card-soft {
            border-radius: 14px;
            border: 0;
            box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
        }

        .text-mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                "Liberation Mono", "Courier New", monospace;
        }

        .table-scroll-x {
            overflow-x: auto;
        }

        .table-sticky thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            background: #f9fafb;
        }

        .btn-desa-toggle {
            padding: .15rem .45rem;
            line-height: 1.2;
            border-radius: .45rem;
        }

        .btn-desa-toggle i {
            transition: transform .15s ease;
        }

        .btn-desa-toggle.is-open i {
            transform: rotate(90deg);
        }

        .desa-detail-wrap {
            border: 1px solid #e8edf5;
            border-radius: .6rem;
            background: #fcfdff;
        }
    </style>

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-1">Rekap Tagihan Wilayah Bulanan</h4>
            <small class="text-muted">Periode {{ $periodeLabel }}.</small>
        </div>
        <a href="{{ route('internet.dashboard') }}" class="btn btn-light d-none d-md-inline-flex">
            <i class="bx bx-chevron-left"></i> Kembali ke Dashboard
        </a>
    </div>

    <form method="get" class="row g-2 mb-3">
        <div class="col-md-3">
            <label class="form-label mb-0">Periode</label>
            <input type="month" name="periode" class="form-control" value="{{ $periode }}">
        </div>
        <div class="col-md-3 d-flex align-items-end">
            <button class="btn btn-outline-primary me-2">
                <i class="bx bx-filter-alt"></i> Tampilkan
            </button>
            <a href="{{ route('internet.laporan.rekap-tagihan-wilayah-bulanan') }}" class="btn btn-outline-secondary">
                Reset
            </a>
        </div>
    </form>

    <div class="row g-2 mb-3">
        <div class="col-md-3">
            <div class="card card-soft">
                <div class="card-body py-2">
                    <div class="small text-muted">Total Tagihan</div>
                    <div class="h6 mb-0 text-mono">
                        Rp {{ number_format($grand['total_tagihan'] ?? 0, 0, ',', '.') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-soft">
                <div class="card-body py-2">
                    <div class="small text-muted">Lunas / Terbayar</div>
                    <div class="h6 mb-0 text-mono text-success">
                        Rp {{ number_format($grand['total_terbayar'] ?? 0, 0, ',', '.') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-soft">
                <div class="card-body py-2">
                    <div class="small text-muted">Sisa Tagihan</div>
                    <div class="h6 mb-0 text-mono {{ ($grand['total_sisa'] ?? 0) > 0 ? 'text-danger' : 'text-success' }}">
                        Rp {{ number_format($grand['total_sisa'] ?? 0, 0, ',', '.') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-soft">
                <div class="card-body py-2">
                    <div class="small text-muted">Pelanggan Aktif Ditagih</div>
                    <div class="h6 mb-0 text-mono">
                        {{ number_format($grand['jumlah_pelanggan'] ?? 0, 0, ',', '.') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-soft">
        <div class="card-body">
            <div class="table-scroll-x">
                <table class="table table-sm align-middle mb-0 table-sticky">
                    <thead>
                        <tr>
                            <th style="min-width: 230px;">Kecamatan / Desa</th>
                            <th class="text-end">Pelanggan</th>
                            <th class="text-end">Jml Tagihan</th>
                            <th class="text-end">Total</th>
                            <th class="text-end">Lunas</th>
                            <th class="text-end">Sisa</th>
                            <th class="text-end">Rasio Lunas</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $kecamatan => $kecData)
                            @php
                                $kecTotal = $kecData['total'] ?? [];
                                $kecRasio = (float) ($kecTotal['total_tagihan'] ?? 0) > 0
                                    ? ((float) ($kecTotal['total_terbayar'] ?? 0) / (float) ($kecTotal['total_tagihan'] ?? 0)) * 100
                                    : 0;
                                $kecJumlahTagihan = (int) ($kecTotal['jumlah_tagihan'] ?? 0);
                                $kecJumlahLunas = (int) ($kecTotal['jumlah_lunas'] ?? 0);
                                $kecJumlahSisa = max(0, $kecJumlahTagihan - $kecJumlahLunas);
                            @endphp
                            <tr class="table-secondary">
                                <td>
                                    <strong>{{ $kecamatan }}</strong>
                                </td>
                                <td class="text-end text-mono">{{ number_format($kecTotal['jumlah_pelanggan'] ?? 0, 0, ',', '.') }}</td>
                                <td class="text-end text-mono">{{ number_format($kecTotal['jumlah_tagihan'] ?? 0, 0, ',', '.') }}</td>
                                <td class="text-end text-mono">{{ number_format($kecTotal['total_tagihan'] ?? 0, 0, ',', '.') }}</td>
                                <td class="text-end text-mono text-success">
                                    {{ number_format($kecTotal['total_terbayar'] ?? 0, 0, ',', '.') }}
                                    <span class="text-muted">({{ number_format($kecJumlahLunas, 0, ',', '.') }})</span>
                                </td>
                                <td
                                    class="text-end text-mono {{ ($kecTotal['total_sisa'] ?? 0) > 0 ? 'text-danger' : 'text-success' }}">
                                    {{ number_format($kecTotal['total_sisa'] ?? 0, 0, ',', '.') }}
                                    <span class="text-muted">({{ number_format($kecJumlahSisa, 0, ',', '.') }})</span>
                                </td>
                                <td class="text-end text-mono">{{ number_format($kecRasio, 1, ',', '.') }}%</td>
                            </tr>

                            @foreach ($kecData['desa'] as $desa => $desaData)
                                @php
                                    $desaRasio = (float) ($desaData['total_tagihan'] ?? 0) > 0
                                        ? ((float) ($desaData['total_terbayar'] ?? 0) / (float) ($desaData['total_tagihan'] ?? 0)) * 100
                                        : 0;
                                    $detailId = 'desa-detail-' . substr(md5($kecamatan . '|' . $desa), 0, 12);
                                    $desaJumlahTagihan = (int) ($desaData['jumlah_tagihan'] ?? 0);
                                    $desaJumlahLunas = (int) ($desaData['jumlah_lunas'] ?? 0);
                                    $desaJumlahSisa = max(0, $desaJumlahTagihan - $desaJumlahLunas);
                                @endphp
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-light btn-desa-toggle me-1"
                                            data-target="{{ $detailId }}" title="Lihat detail pelanggan">
                                            <i class="bx bx-chevron-right"></i>
                                        </button>
                                        <span class="text-muted">-</span> {{ $desa }}
                                    </td>
                                    <td class="text-end text-mono">{{ number_format($desaData['jumlah_pelanggan'] ?? 0, 0, ',', '.') }}</td>
                                    <td class="text-end text-mono">{{ number_format($desaData['jumlah_tagihan'] ?? 0, 0, ',', '.') }}</td>
                                    <td class="text-end text-mono">{{ number_format($desaData['total_tagihan'] ?? 0, 0, ',', '.') }}</td>
                                    <td class="text-end text-mono text-success">
                                        {{ number_format($desaData['total_terbayar'] ?? 0, 0, ',', '.') }}
                                        <span class="text-muted">({{ number_format($desaJumlahLunas, 0, ',', '.') }})</span>
                                    </td>
                                    <td
                                        class="text-end text-mono {{ ($desaData['total_sisa'] ?? 0) > 0 ? 'text-danger' : 'text-success' }}">
                                        {{ number_format($desaData['total_sisa'] ?? 0, 0, ',', '.') }}
                                        <span class="text-muted">({{ number_format($desaJumlahSisa, 0, ',', '.') }})</span>
                                    </td>
                                    <td class="text-end text-mono">{{ number_format($desaRasio, 1, ',', '.') }}%</td>
                                </tr>
                                <tr id="{{ $detailId }}" class="d-none">
                                    <td colspan="7">
                                        <div class="p-2 desa-detail-wrap">
                                            <div class="small text-muted mb-2">
                                                Detail pelanggan di {{ $desa }}
                                            </div>
                                            <div class="table-scroll-x">
                                                <table class="table table-sm align-middle mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th style="min-width: 180px;">Pelanggan</th>
                                                            <th class="text-end">Tagihan</th>
                                                            <th class="text-end">Total</th>
                                                            <th class="text-end">Lunas</th>
                                                            <th class="text-end">Sisa</th>
                                                            <th class="text-end">Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @forelse (($desaData['pelanggan'] ?? []) as $pel)
                                                            @php
                                                                $pelSisa = (float) ($pel['total_sisa'] ?? 0);
                                                                $pelLunas = $pelSisa <= 0 && (float) ($pel['total_tagihan'] ?? 0) > 0;
                                                            @endphp
                                                            <tr>
                                                                <td>
                                                                    <div class="fw-semibold">{{ $pel['nama'] ?? '-' }}</div>
                                                                    <small class="text-muted">
                                                                        {{ $pel['kode'] ?? '-' }}
                                                                    </small>
                                                                </td>
                                                                <td class="text-end text-mono">
                                                                    {{ number_format($pel['jumlah_tagihan'] ?? 0, 0, ',', '.') }}
                                                                </td>
                                                                <td class="text-end text-mono">
                                                                    {{ number_format($pel['total_tagihan'] ?? 0, 0, ',', '.') }}
                                                                </td>
                                                                <td class="text-end text-mono text-success">
                                                                    {{ number_format($pel['total_terbayar'] ?? 0, 0, ',', '.') }}
                                                                </td>
                                                                <td
                                                                    class="text-end text-mono {{ $pelSisa > 0 ? 'text-danger' : 'text-success' }}">
                                                                    {{ number_format($pelSisa, 0, ',', '.') }}
                                                                </td>
                                                                <td class="text-end">
                                                                    <span
                                                                        class="badge {{ $pelLunas ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning' }}">
                                                                        {{ $pelLunas ? 'Lunas' : 'Belum Lunas' }}
                                                                    </span>
                                                                </td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="6" class="text-center text-muted">
                                                                    Tidak ada detail pelanggan.
                                                                </td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted">Belum ada data tagihan untuk periode ini.</td>
                            </tr>
                        @endforelse
                    </tbody>
                    @if (count($rows))
                        @php
                            $grandRasio = (float) ($grand['total_tagihan'] ?? 0) > 0
                                ? ((float) ($grand['total_terbayar'] ?? 0) / (float) ($grand['total_tagihan'] ?? 0)) * 100
                                : 0;
                            $grandJumlahTagihan = (int) ($grand['jumlah_tagihan'] ?? 0);
                            $grandJumlahLunas = (int) ($grand['jumlah_lunas'] ?? 0);
                            $grandJumlahSisa = max(0, $grandJumlahTagihan - $grandJumlahLunas);
                        @endphp
                        <tfoot>
                            <tr class="fw-semibold">
                                <td class="text-end">TOTAL</td>
                                <td class="text-end text-mono">{{ number_format($grand['jumlah_pelanggan'] ?? 0, 0, ',', '.') }}</td>
                                <td class="text-end text-mono">{{ number_format($grand['jumlah_tagihan'] ?? 0, 0, ',', '.') }}</td>
                                <td class="text-end text-mono">{{ number_format($grand['total_tagihan'] ?? 0, 0, ',', '.') }}</td>
                                <td class="text-end text-mono text-success">
                                    {{ number_format($grand['total_terbayar'] ?? 0, 0, ',', '.') }}
                                    <span class="text-muted">({{ number_format($grandJumlahLunas, 0, ',', '.') }})</span>
                                </td>
                                <td class="text-end text-mono {{ ($grand['total_sisa'] ?? 0) > 0 ? 'text-danger' : 'text-success' }}">
                                    {{ number_format($grand['total_sisa'] ?? 0, 0, ',', '.') }}
                                    <span class="text-muted">({{ number_format($grandJumlahSisa, 0, ',', '.') }})</span>
                                </td>
                                <td class="text-end text-mono">{{ number_format($grandRasio, 1, ',', '.') }}%</td>
                            </tr>
                        </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('click', function(e) {
            const btn = e.target.closest('.btn-desa-toggle');
            if (!btn) return;

            const targetId = btn.getAttribute('data-target');
            if (!targetId) return;

            const detailRow = document.getElementById(targetId);
            if (!detailRow) return;

            const isHidden = detailRow.classList.contains('d-none');
            detailRow.classList.toggle('d-none', !isHidden);
            btn.classList.toggle('is-open', isHidden);
        });
    </script>
@endsection