@extends('layouts.app')

@section('content')
<div class="main-content">
    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-bar-chart-2 bg-red"></i>
                        <div class="d-inline">
                            <h5>Range Penagihan - NPL</h5>
                            <span>Rekapitulasi NPL per Range Saldo Pokok, dilengkapi Jumlah Aktivitas Penagihan Kumulatif</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ url('/') }}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Range Penagihan</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Rekapitulasi NPL &amp; Aktivitas Penagihan per Range</h3>
                    </div>
                    <div class="card-body">
                        <!-- Filter Section -->
                        <form method="GET" action="{{ route('rangepenagihan-rekap') }}" class="mb-4">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="tanggal"><i class="ik ik-calendar"></i> Tanggal Data (Snapshot NPL) <span class="text-danger">*</span></label>
                                        <input type="date" name="tanggal" id="tanggal" class="form-control"
                                               value="{{ old('tanggal', $tanggal ?? '') }}" required>
                                        <small class="text-muted">Posisi baki debet &amp; kolek per tanggal ini. Aktivitas penagihan dihitung kumulatif sejak awal data s/d tanggal ini.</small>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="kantor"><i class="ik ik-building"></i> Kantor/Cabang</label>
                                        <select name="kantor" id="kantor" class="form-control">
                                            <option value="all" {{ ($kantor ?? 'all') === 'all' ? 'selected' : '' }}>Semua Kantor</option>
                                            @php
                                                $userRole = Session::get('user_role');
                                                if ($userRole === 'admin' || strpos($userRole, 'ao_') === 0) {
                                                    if ($userRole === 'admin') {
                                                        $kantorOptions = ['101', '201'];
                                                    } else {
                                                        $kodeKantor = substr($userRole, 3);
                                                        $kantorOptions = preg_match('/^\d{3}$/', $kodeKantor) ? [$kodeKantor] : [];
                                                    }
                                                } else {
                                                    $kantorOptions = [];
                                                }
                                            @endphp
                                            @foreach($kantorOptions as $k)
                                                <option value="{{ $k }}" {{ ($kantor ?? '') === $k ? 'selected' : '' }}>
                                                    Kantor {{ $k }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <div>
                                            <button type="submit" class="btn btn-primary btn-block">
                                                <i class="ik ik-filter"></i> Generate
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if(isset($tanggal) && $tanggal)
                                <div class="alert alert-info mt-2 mb-0">
                                    <i class="ik ik-info"></i>
                                    Snapshot: <strong>{{ $tanggal }}</strong>
                                    | Aktivitas penagihan dihitung <strong>kumulatif</strong> sejak awal data s/d <strong>{{ $tanggal }}</strong>
                                    @if(($kantor ?? 'all') !== 'all')
                                        | Kantor: <strong>{{ $kantor }}</strong>
                                    @endif
                                </div>
                            @endif
                        </form>

                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show">
                                <i class="ik ik-alert-triangle"></i> {{ session('error') }}
                                <button type="button" class="close" data-dismiss="alert">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        @if(isset($data) && count($data) > 0)
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <div class="alert alert-info mb-0">
                                        <i class="ik ik-info"></i> Total NPL (Bruto):
                                        <strong>{{ number_format($totalNPLRatio, 2) }} %</strong>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="alert alert-info mb-0">
                                        <i class="ik ik-info"></i> Total Baki Debet:
                                        <strong>Rp {{ number_format($totalBakiNominal, 2) }}</strong>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="alert alert-success mb-0">
                                        <i class="ik ik-check-circle"></i> Total Aktivitas Penagihan (Kumulatif):
                                        <strong>{{ number_format($totalAktivitas, 0) }}</strong>
                                        @if(!empty($rangeTeraktif))
                                            <br><small>Range paling banyak ditagih: <strong>{{ $rangeTeraktif }}</strong></small>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-hover" id="rangePenagihanTable">
                                    <thead class="thead-light">
                                        <tr>
                                            <th rowspan="2" style="vertical-align: middle; width: 16%;">Range Saldo Pokok</th>
                                            <th colspan="4" class="text-center">NPL (Kol 3,4,5)</th>
                                            <th colspan="3" class="text-center bg-light-success">Aktivitas Penagihan (Kumulatif)</th>
                                        </tr>
                                        <tr>
                                            <th>Rek. Debitur</th>
                                            <th>Baki Debet</th>
                                            <th>NPL %</th>
                                            <th>NPL Pasca-Rec.</th>
                                            <th>Rek. Pernah Ditagih</th>
                                            <th>Jml Aktivitas</th>
                                            <th>% Tercover</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($data as $row)
                                            <tr>
                                                <td class="text-left"><strong>{{ $row['range'] }}</strong></td>
                                                <!-- NPL (Kol 3,4,5) -->
                                                <td>{{ number_format($row['jum_deb_npl'], 0) }}</td>
                                                <td>{{ number_format($row['total_bd_npl'], 2) }}</td>
                                                <td>
                                                    <strong class="badge badge-warning">{{ number_format($row['npl_persen'], 2) }}%</strong>
                                                </td>
                                                <td>
                                                    <strong class="badge badge-success">{{ number_format($row['sukses_npl'], 2) }}%</strong>
                                                </td>
                                                <!-- Aktivitas Penagihan -->
                                                <td>{{ number_format($row['jml_ditagih'], 0) }}</td>
                                                <td>
                                                    <strong class="{{ !empty($rangeTeraktif) && $rangeTeraktif === $row['range'] ? 'badge badge-primary' : '' }}">
                                                        {{ number_format($row['jml_aktivitas'], 0) }}
                                                    </strong>
                                                </td>
                                                <td>{{ number_format($row['persen_tercover'], 2) }}%</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <p class="text-muted text-sm mt-3">
                                <i class="ik ik-info"></i>
                                <strong>Keterangan:</strong><br>
                                - NPL % = Persentase (Baki Debet Kol 3,4,5) / Total Baki Debet (Kol 1-5) pada range tersebut, per tanggal snapshot dipilih.<br>
                                - NPL Pasca-Rec. = NPL Pasca Recovery, proyeksi tingkat NPL portofolio jika seluruh tagihan (Kol 3,4,5) pada range terkait berhasil ditagih (recovery).<br>
                                - Rek. Pernah Ditagih = jumlah rekening unik pada range tersebut yang memiliki minimal satu aktivitas penagihan, dihitung kumulatif sejak awal data ada s/d tanggal snapshot dipilih.<br>
                                - Jml Aktivitas = total aktivitas penagihan kumulatif pada range tersebut (satu rekening bisa ditagih berkali-kali sepanjang waktu).<br>
                                - % Tercover = Rek. Pernah Ditagih dibagi Total Debitur pada range tersebut (seluruh kolek), menunjukkan seberapa merata penagihan pernah dikerjakan di range itu.
                            </p>
                        @elseif(isset($data))
                            <div class="alert alert-warning">
                                <i class="ik ik-alert-circle"></i> Tidak ada data untuk tanggal dan kantor tersebut.
                            </div>
                        @else
                            <div class="alert alert-info">
                                <i class="ik ik-info"></i> Silakan pilih tanggal data untuk menampilkan rekap Range Penagihan.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    #rangePenagihanTable {
        font-size: 13px;
    }

    #rangePenagihanTable th, #rangePenagihanTable td {
        vertical-align: middle;
        padding: 8px 6px;
        text-align: center;
    }

    #rangePenagihanTable thead th {
        background-color: #f1f3f5;
        font-weight: 600;
        white-space: nowrap;
    }

    #rangePenagihanTable tbody tr:hover {
        background-color: #f9f9f9;
    }

    #rangePenagihanTable td.text-left {
        text-align: left;
    }

    .bg-light-success {
        background-color: #e6f7ec !important;
    }

    .badge-warning {
        background-color: #ffc107;
        color: #333;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
    }

    .badge-success {
        background-color: #28a745;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
    }

    .badge-primary {
        background-color: #007bff;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
    }

    @media (max-width: 992px) {
        #rangePenagihanTable {
            font-size: 12px;
        }
        #rangePenagihanTable th, #rangePenagihanTable td {
            padding: 5px 3px;
        }
    }

    @media (max-width: 768px) {
        #rangePenagihanTable {
            font-size: 11px;
        }
        #rangePenagihanTable th, #rangePenagihanTable td {
            padding: 4px 2px;
        }
        .card {
            margin-bottom: 15px;
        }
    }

    .text-sm {
        font-size: 12px;
    }
</style>
@endsection