@extends('layouts.master')

@section('title', 'Detail Tagihan Bulanan Pelanggan')
@section('page-title', 'Detail Tagihan ' . ($pelanggan->nama ?? '-'))

@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;
        }
    </style>

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-1">Detail Tagihan Bulanan</h4>
            <small class="text-muted">
                Nama : <strong>
                    {{ $pelanggan->nama ?? '-' }}
                </strong>
                <br>
                Alamat :
                {{ $pelanggan->desa ?? '-' }} ,
                {{ $pelanggan->kecamatan ?? '-' }}
                {{-- ({{ $pelanggan->kode_pelanggan ?? '-' }}) --}}
                <br>
                Periode: {{ $periodeLabel }}
            </small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('internet.laporan.rekap-tagihan-tahunan', ['tahun' => $tahun]) }}" class="btn btn-light">
                <i class="bx bx-chevron-left"></i> Kembali ke Rekap Tahunan
            </a>
            <a href="{{ route('pelanggan.show', $pelanggan->id ?? 0) ?? '#' }}"
                class="btn btn-outline-secondary d-none d-md-inline-block">
                <i class="bx bx-user"></i> Profil Pelanggan
            </a>
        </div>
    </div>

    {{-- Ringkasan --}}
    <div class="row g-2 mb-3">
        <div class="col-md-4">
            <div class="card card-soft">
                <div class="card-body py-2">
                    <div class="small text-muted">Total Tagihan Bulan Ini</div>
                    <div class="h5 mb-0 text-mono">
                        Rp {{ number_format($totalTagihan, 0, ',', '.') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-soft">
                <div class="card-body py-2">
                    <div class="small text-muted">Total Terbayar</div>
                    <div class="h5 mb-0 text-mono text-success">
                        Rp {{ number_format($totalTerbayar, 0, ',', '.') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            @php $isLunas = $totalSisa <= 0; @endphp
            <div class="card card-soft">
                <div class="card-body py-2">
                    <div class="small text-muted">Sisa Tagihan</div>
                    <div class="h5 mb-0 text-mono {{ $isLunas ? 'text-success' : 'text-danger' }}">
                        Rp {{ number_format($totalSisa, 0, ',', '.') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabel Tagihan --}}
    <div class="card card-soft">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Periode</th>
                            <th>Paket</th>
                            <th class="text-end">Tagihan</th>
                            <th class="text-end">Terbayar</th>
                            <th class="text-end">Sisa</th>
                            <th>Status</th>
                            <th>Tanggal Bayar</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($tagihan as $t)
                            @php
                                $sisa = (float) ($t->sisa_tagihan ?? 0);
                                $isLunas = $t->status === 'lunas' || $sisa <= 0;
                                // Ambil pembayaran terakhir berdasarkan tanggal_bayar
                                $lastPay = $t->pembayaran
                                    ? $t->pembayaran->sortByDesc('tanggal_bayar')->first()
                                    : null;
                            @endphp
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $t->periode?->format('M Y') ?? '-' }}</td>
                                <td>{{ $t->paketInternet->nama ?? '-' }}</td>
                                <td class="text-end text-mono">
                                    Rp {{ number_format($t->total_tagihan ?? 0, 0, ',', '.') }}
                                </td>
                                <td class="text-end text-mono text-success">
                                    Rp {{ number_format($t->total_terbayar ?? 0, 0, ',', '.') }}
                                    <small class="d-block text-muted fw-normal">
                                        {{ $lastPay && $lastPay->tanggal_bayar ? 'Tgl bayar: ' . $lastPay->tanggal_bayar->format('d-m-Y') : 'Tgl bayar: -' }}
                                    </small>
                                </td>
                                <td class="text-end text-mono {{ $isLunas ? 'text-success' : 'text-danger' }}">
                                    Rp {{ number_format($sisa, 0, ',', '.') }}
                                </td>
                                <td>
                                    @php
                                        $badge =
                                            [
                                                'terbit' => 'bg-info',
                                                'lunas' => 'bg-success',
                                                'draft' => 'bg-secondary',
                                                'batal' => 'bg-danger',
                                            ][$t->status] ?? 'bg-light';
                                    @endphp
                                    <span class="badge {{ $badge }}">{{ strtoupper($t->status ?? '-') }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark">
                                        {{ $lastPay && $lastPay->tanggal_bayar ? $lastPay->tanggal_bayar->format('d-m-Y') : '-' }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted">
                                    Tidak ada tagihan untuk periode ini.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('build/js/app.js') }}"></script>
@endsection