@extends('layouts.master-without-nav')

@section('title', 'Portal Tagihan Internet')
@section('page-title', 'Portal Tagihan Internet')

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

        .portal-header {
            border-radius: 16px;
            background: linear-gradient(135deg, #2563eb, #4f46e5);
            color: #fff;
            padding: 1.25rem 1.5rem;
            box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
        }

        .badge-soft {
            background-color: rgba(255, 255, 255, 0.15);
            color: #e0f2fe;
            border-radius: 999px;
            padding: .2rem .6rem;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        @media (max-width: 767.98px) {
            .portal-header {
                padding: 1rem 1.1rem;
            }
        }
    </style>

    {{-- HEADER PORTAL --}}
    <div class="portal-header mb-3">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <div class="badge-soft mb-2">
                    Portal Tagihan Pelanggan
                </div>
                <h4 class="mb-0">
                    {{ $pelanggan->nama ?? 'Pelanggan' }}
                </h4>
                <div class="small mt-1">
                    Kode Pelanggan:
                    <span class="text-mono fw-semibold">
                        {{ $pelanggan->kode_pelanggan ?? '-' }}
                    </span>
                    <br>
                    <span class="opacity-75">
                        Paket:
                        {{ $pelanggan->paketInternet->nama ?? 'Belum ada paket' }}
                    </span>
                </div>
            </div>
            <div class="text-end d-none d-md-block">
                <div class="small opacity-80 mb-1">
                    Alamat:
                </div>
                <div class="small">
                    {{ $pelanggan->alamat ?? '-' }}<br>
                    {{ $pelanggan->desa_nama ?? '' }},
                    {{ $pelanggan->kecamatan_nama ?? '' }}
                </div>
            </div>
        </div>
    </div>

    {{-- RINGKASAN KEUANGAN --}}
    <div class="row g-2 mb-3">
        <div class="col-6 col-md-3">
            <div class="card card-soft h-100">
                <div class="card-body py-2">
                    <div class="small text-muted">Total Tagihan</div>
                    <div class="h5 mb-0 text-mono">
                        Rp {{ number_format($totalTagihan, 0, ',', '.') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card card-soft h-100">
                <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-6 col-md-3">
            @php $isLunas = $totalSisa <= 0; @endphp
            <div class="card card-soft h-100">
                <div class="card-body py-2">
                    <div class="small text-muted">Sisa Tagihan</div>
                    <div class="h5 mb-1 text-mono {{ $isLunas ? 'text-success' : 'text-danger' }}">
                        Rp {{ number_format($totalSisa, 0, ',', '.') }}
                    </div>
                    <span class="badge {{ $isLunas ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }}">
                        {{ $isLunas ? 'Lunas' : 'Masih ada tunggakan' }}
                    </span>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card card-soft h-100">
                <div class="card-body py-2">
                    <div class="small text-muted">Bulan Menunggak</div>
                    <div class="h5 mb-0">
                        {{ number_format($jumlahTunggakan, 0) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- FILTER TAHUN --}}
    <form method="get" class="row g-2 mb-2">
        <div class="col-auto">
            <label class="form-label mb-0 small">Tahun</label>
            <select name="tahun" class="form-select form-select-sm">
                <option value="">Semua</option>
                @foreach ($tahunOptions as $th)
                    <option value="{{ $th }}" @selected($tahun == $th)>{{ $th }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-auto d-flex align-items-end">
            <button class="btn btn-sm btn-outline-primary me-2">
                Terapkan
            </button>
            <a href="{{ route('portal.riwayat', $pelanggan->portal_token) }}" class="btn btn-sm btn-outline-secondary">
                Reset
            </a>
        </div>
    </form>

    {{-- TABEL RIWAYAT TAGIHAN & PEMBAYARAN --}}
    <div class="card card-soft">
        <div class="card-body">
            <h6 class="mb-2">Riwayat Tagihan & Pembayaran</h6>
            <div class="small text-muted mb-2">
                Informasi ini bersifat ringkasan. Untuk konfirmasi lebih lanjut silakan hubungi admin.
            </div>

            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                    <thead>
                        <tr>
                            <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>Tgl Jatuh Tempo</th>
                            <th>Tgl Bayar Terakhir</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $row)
                            @php
                                $sisa = $row->sisa;
                                $isLunas = $sisa <= 0 || $row->status === 'lunas';
                                $badge =
                                    [
                                        'terbit' => 'bg-info',
                                        'lunas' => 'bg-success',
                                        'draft' => 'bg-secondary',
                                        'batal' => 'bg-danger',
                                    ][$row->status] ?? 'bg-light';
                            @endphp
                            <tr>
                                <td>{{ $row->periode_label }}</td>
                                <td>{{ $row->paket }}</td>
                                <td class="text-end text-mono">
                                    Rp {{ number_format($row->tagihan, 0, ',', '.') }}
                                </td>
                                <td class="text-end text-mono text-success">
                                    Rp {{ number_format($row->terbayar, 0, ',', '.') }}
                                </td>
                                <td class="text-end text-mono {{ $isLunas ? 'text-success' : 'text-danger' }}">
                                    Rp {{ number_format($sisa, 0, ',', '.') }}
                                </td>
                                <td>
                                    <span class="badge {{ $badge }}">
                                        {{ strtoupper($row->status) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark">
                                        {{ $row->jatuh_tempo?->format('d-m-Y') ?? '-' }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark">
                                        {{ $row->tanggal_bayar_terakhir?->format('d-m-Y') ?? '-' }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted">
                                    Belum ada data tagihan untuk ditampilkan.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="small text-muted mt-3">
                <i class="bx bx-info-circle"></i>
                Data ini hanya untuk informasi. Jika ada perbedaan data dengan bukti pembayaran
                yang Anda miliki, silakan konfirmasi ke admin layanan internet.
            </div>
        </div>
    </div>
@endsection

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