@extends('layouts.master')

@section('title', 'Dashboard Internet')
@section('page-title', 'Dashboard Layanan Internet')

@section('css')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/dashboard.css') }}">
@endsection

@section('content')
    <div class="dashboard-page">
        {{-- HEADER --}}
        <div class="card soft-header mb-3">
            <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h4 class="mb-1">Dashboard Layanan Internet</h4>
                    <small class="text-muted">
                        Ringkasan pelanggan, tagihan, pembayaran, dan laba rugi bulan berjalan.
                    </small>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('pelanggan.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-user"></i> Data Pelanggan
                    </a>
                    <a href="{{ route('tagihan.index') }}" class="btn btn-primary">
                        <i class="bx bx-receipt"></i> Lihat Tagihan
                    </a>
                </div>
            </div>
        </div>

        {{-- ROW 1: KPI --}}
        <div class="row g-3 mb-3">
            <div class="col-6 col-xl-3">
                <div class="card kpi-card kpi-indigo">
                    <div class="card-body">
                        <div class="small text-white-50">Pelanggan Aktif</div>
                        <div class="d-flex align-items-end justify-content-between mt-1">
                            <div class="kpi-number">
                                {{ number_format($kpi['pelanggan_aktif'] ?? 0) }}
                            </div>
                            <div class="mini-badge bg-white text-primary">
                                Total {{ number_format($kpi['pelanggan_total'] ?? 0) }}
                            </div>
                        </div>
                        <i class="bx bx-user-circle icon-bg"></i>
                    </div>
                </div>
            </div>

            <div class="col-6 col-xl-3">
                <div class="card kpi-card kpi-teal">
                    <div class="card-body">
                        <div class="small text-white-50">Tagihan Bulan Ini</div>
                        <div class="d-flex align-items-end justify-content-between mt-1">
                            <div class="kpi-number">
                                Rp {{ number_format($kpi['tagihan_bulan_ini'] ?? 0, 0, ',', '.') }}
                            </div>
                            <div class="mini-badge bg-white text-success">
                                {{ number_format($kpi['jumlah_tagihan_bulan_ini'] ?? 0) }} tagihan
                            </div>
                        </div>
                        <i class="bx bx-file icon-bg"></i>
                    </div>
                </div>
            </div>

            <div class="col-6 col-xl-3">
                <div class="card kpi-card kpi-orange">
                    <div class="card-body">
                        <div class="small text-white-50">Terbayar Periode Bulan Ini</div>
                        <div class="d-flex align-items-end justify-content-between mt-1">
                            <div class="kpi-number">
                                Rp {{ number_format($kpi['pembayaran_bulan_ini'] ?? 0, 0, ',', '.') }}
                            </div>
                            <div class="mini-badge bg-white text-warning">
                                {{ number_format($kpi['persen_terbayar_bulan_ini'] ?? 0) }}%
                            </div>
                        </div>
                        <i class="bx bx-credit-card icon-bg"></i>
                    </div>
                </div>
            </div>

            <div class="col-6 col-xl-3">
                <div class="card kpi-card kpi-rose">
                    <div class="card-body">
                        <div class="small text-white-50">Tunggakan Aktif</div>
                        <div class="d-flex align-items-end justify-content-between mt-1">
                            <div class="kpi-number">
                                Rp {{ number_format($kpi['tunggakan_aktif'] ?? 0, 0, ',', '.') }}
                            </div>
                            <div class="mini-badge bg-white text-danger">
                                {{ number_format($kpi['jumlah_pelanggan_menunggak'] ?? 0) }} p
                            </div>
                        </div>
                        <i class="bx bx-error-circle icon-bg"></i>
                    </div>
                </div>
            </div>
        </div>

        {{-- ROW 2: Chart + Laba Rugi --}}
        <div class="row g-3 mb-3">
            <div class="col-xl-8">
                <div class="card soft-card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <div class="section-title mb-1">Tren Tagihan vs Pembayaran</div>
                                <div class="section-divider"></div>
                            </div>
                            <span class="mini-badge bg-light text-muted">
                                Periode yang memiliki tagihan
                            </span>
                        </div>
                        <div style="height: 320px;">
                            <canvas id="chartTagihanPembayaran"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card soft-card h-100">
                    <div class="card-body">
                        <div class="section-title mb-1">Ringkasan Laba Rugi Bulan Ini</div>
                        <div class="section-divider"></div>

                        <div class="mb-2 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Pendapatan (Pembayaran Masuk)</span>
                            <span class="fw-semibold text-mono">
                                Rp {{ number_format($labaRugi['pendapatan_bulan_ini'] ?? 0, 0, ',', '.') }}
                            </span>
                        </div>

                        <div class="mb-2 d-flex justify-content-between align-items-center">
                            <span class="text-muted">Pengeluaran</span>
                            <span class="fw-semibold text-mono">
                                Rp {{ number_format($labaRugi['pengeluaran_bulan_ini'] ?? 0, 0, ',', '.') }}
                            </span>
                        </div>

                        @php
                            $lr = $labaRugi['laba_rugi_bulan_ini'] ?? 0;
                            $isPlus = $lr >= 0;
                        @endphp
                        <div class="mb-3 d-flex justify-content-between align-items-center">
                            <span class="text-muted fw-semibold">Laba / (Rugi)</span>
                            <span class="fw-bold text-mono {{ $isPlus ? 'text-success' : 'text-danger' }}">
                                Rp {{ number_format($lr, 0, ',', '.') }}
                            </span>
                        </div>

                        <div class="small text-muted">
                            <i class="bx bx-info-circle"></i>
                            Laba rugi dihitung dari total pembayaran yang sudah masuk dikurangi total pengeluaran bulan
                            berjalan.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ROW 3: Tagihan Jatuh Tempo & Tunggakan --}}
        <div class="row g-3">
            <div class="col-12 col-xl-6">
                <div class="card soft-card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <div>
                                <div class="section-title mb-1">Tagihan Jatuh Tempo (&plusmn;7 hari)</div>
                                <div class="section-divider"></div>
                            </div>
                            <span class="mini-badge bg-warning text-dark">
                                {{ number_format($jatuhTempo->count() ?? 0) }} tagihan
                            </span>
                        </div>

                        @if ($jatuhTempo->count())
                            <div class="table-responsive">
                                <table class="table table-sm align-middle mb-0 compact-table">
                                    <thead>
                                        <tr>
                                            <th>Pelanggan</th>
                                            <th>Periode</th>
                                            <th class="text-end">Sisa</th>
                                            <th>Jatuh Tempo</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($jatuhTempo as $t)
                                            <tr>
                                                <td>
                                                    {{ $t->pelanggan->nama ?? '-' }}<br>
                                                    <small class="text-muted">
                                                        {{ $t->pelanggan->kode_pelanggan ?? '' }}
                                                    </small>
                                                </td>
                                                <td>{{ $t->periode?->format('M Y') }}</td>
                                                <td class="text-end text-mono">
                                                    Rp {{ number_format($t->sisa_tagihan ?? 0, 0, ',', '.') }}
                                                </td>
                                                <td>
                                                    <span class="badge bg-light text-dark">
                                                        {{ $t->jatuh_tempo?->format('d-m-Y') ?? '-' }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-muted small">
                                Belum ada tagihan yang jatuh tempo dalam rentang yang dipantau.
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-12 col-xl-6">
                <div class="card soft-card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <div>
                                <div class="section-title mb-1">Pelanggan dengan Tunggakan Terbesar</div>
                                <div class="section-divider"></div>
                            </div>
                            <span class="mini-badge bg-danger text-white">
                                Top {{ number_format($tunggakanTop->count() ?? 0) }}
                            </span>
                        </div>

                        @if ($tunggakanTop->count())
                            <div class="table-responsive">
                                <table class="table table-sm align-middle mb-0 compact-table">
                                    <thead>
                                        <tr>
                                            <th>Pelanggan</th>
                                            <th class="text-end">Tunggakan</th>
                                            <th class="text-center">Bulan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($tunggakanTop as $row)
                                            <tr>
                                                <td>
                                                    {{ $row->pelanggan->nama ?? '-' }}<br>
                                                    <small class="text-muted">
                                                        {{ $row->pelanggan->kode_pelanggan ?? '' }}
                                                    </small>
                                                </td>
                                                <td class="text-end text-mono">
                                                    Rp {{ number_format($row->total_tunggakan ?? 0, 0, ',', '.') }}
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge bg-light text-dark">
                                                        {{ number_format($row->jumlah_bulan ?? 0) }} bln
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-muted small">
                                Tidak ada data tunggakan yang signifikan.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script>
        (function() {
            const el = document.getElementById('chartTagihanPembayaran');
            if (!el || typeof Chart === 'undefined') return;

            const rows = @json($chartMonthly ?? []);

            const labels = rows.map(r => r.label || r.bulan_label || '');
            const tagihan = rows.map(r => r.tagihan ?? 0);
            const pembayaran = rows.map(r => r.pembayaran ?? 0);

            new Chart(el, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                            label: 'Tagihan',
                            data: tagihan,
                            borderWidth: 1
                        },
                        {
                            label: 'Pembayaran',
                            data: pembayaran,
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: {
                        duration: 900,
                        easing: 'easeOutCubic'
                    },
                    transitions: {
                        active: {
                            animation: {
                                duration: 220
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return 'Rp ' + new Intl.NumberFormat('id-ID').format(value / 1000);
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom'
                        },
                        tooltip: {
                            animation: {
                                duration: 160
                            },
                            callbacks: {
                                label: function(ctx) {
                                    const v = ctx.parsed.y || 0;
                                    return ctx.dataset.label + ': Rp ' +
                                        new Intl.NumberFormat('id-ID').format(v);
                                }
                            }
                        }
                    }
                }
            });
        })();
    </script>
@endsection