@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>Baki Debet - NPL</h5>
                            <span>Rekapitulasi Baki Debet per Saldo Pokok Pinjaman (Kolektibilitas 1-5)</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">Baki Debet - NPL</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Rekapitulasi Baki Debet - NPL</h3>
                    </div>
                    <div class="card-body">
                        <!-- Filter Section -->
                        <form method="GET" action="{{ route('rekap.bakidebet-npl') }}" class="mb-4">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="tanggal"><i class="ik ik-calendar"></i> Tanggal Data <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">Format: YYYY-MM-DD</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' ? 'selected' : '' }}>Semua Kantor</option>
                                            @php
                                                $userRole = Session::get('user_role');
                                                if ($userRole === 'admin' || strpos($userRole, 'ao_') === 0) {
                                                    // Jika admin, tampilkan semua kantor
                                                    // Jika AO, tampilkan hanya kantor mereka
                                                    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 class="col-md-4">
                                    @if(isset($tgldata))
                                        <div class="alert alert-info mt-2">
                                            <i class="ik ik-info"></i> 
                                            tgldata: <strong>{{ $tgldata }}</strong>
                                            @if($kantor !== 'all')
                                                | Kantor: <strong>{{ $kantor }}</strong>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </form>

                        <!-- Tampilkan error jika ada -->
                        @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

                        <!-- Tabel Rekap Baki Debet NPL -->
                        @if(isset($data) && count($data) > 0)
                            <div class="alert alert-info mb-3">
                                <i class="ik ik-info"></i> Total NPL (Bruto): 
                                <strong>{{ number_format($totalNPLRatio, 2) }} %</strong>
                            </div>
                            <div class="alert alert-info mb-3">
                                <i class="ik ik-info"></i> Total Baki Debet: 
                                <strong>Rp {{ number_format($totalBakiNominal, 2) }}</strong>
                            </div>
                            
                            
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-hover" id="bakidebetTable">
                                    <thead class="thead-light">
                                        <tr>
                                            <th rowspan="2" style="vertical-align: middle; width: 10%;">Range Saldo Pokok</th>
                                            <th colspan="2" class="text-center">Kol 1</th>
                                            <th colspan="2" class="text-center">Kol 2</th>
                                            <th colspan="2" class="text-center">Kol 3</th>
                                            <th colspan="2" class="text-center">Kol 4</th>
                                            <th colspan="2" class="text-center">Kol 5</th>
                                            <th colspan="2" class="text-center">Total</th>
                                            <th colspan="2" class="text-center">NPL (Kol 3,4,5)</th>
                                            <th rowspan="2" style="vertical-align: middle; width: 12%;">NPL %</th>
                                            <th rowspan="2" style="vertical-align: middle; width: 12%;">NPL Pasca-Rec.</th>
                                        </tr>
                                        <tr>
                                            <th>Debitur</th>
                                            <th>Baki Debet</th>
                                            <th>Debitur</th>
                                            <th>Baki Debet</th>
                                            <th>Debitur</th>
                                            <th>Baki Debet</th>
                                            <th>Debitur</th>
                                            <th>Baki Debet</th>
                                            <th>Debitur</th>
                                            <th>Baki Debet</th>
                                            <th>Debitur</th>
                                            <th>Baki Debet</th>
                                            <th>Debitur</th>
                                            <th>Baki Debet</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($data as $row)
                                            <tr>
                                                <td><strong>{{ $row['range'] }}</strong></td>
                                                <!-- Kol 1 -->
                                                <td>{{ number_format($row['kol']['1']['debitur'], 0) }}</td>
                                                <td>{{ number_format($row['kol']['1']['baki_debet'], 2) }}</td>
                                                <!-- Kol 2 -->
                                                <td>{{ number_format($row['kol']['2']['debitur'], 0) }}</td>
                                                <td>{{ number_format($row['kol']['2']['baki_debet'], 2) }}</td>
                                                <!-- Kol 3 -->
                                                <td>{{ number_format($row['kol']['3']['debitur'], 0) }}</td>
                                                <td>{{ number_format($row['kol']['3']['baki_debet'], 2) }}</td>
                                                <!-- Kol 4 -->
                                                <td>{{ number_format($row['kol']['4']['debitur'], 0) }}</td>
                                                <td>{{ number_format($row['kol']['4']['baki_debet'], 2) }}</td>
                                                <!-- Kol 5 -->
                                                <td>{{ number_format($row['kol']['5']['debitur'], 0) }}</td>
                                                <td>{{ number_format($row['kol']['5']['baki_debet'], 2) }}</td>
                                                <!-- Total -->
                                                <td><strong>{{ number_format($row['jum_deb'], 0) }}</strong></td>
                                                <td><strong>{{ number_format($row['total_bd'], 2) }}</strong></td>
                                                <!-- NPL (Kol 3,4,5) -->
                                                <td><strong>{{ number_format($row['jum_deb_npl'], 0) }}</strong></td>
                                                <td><strong>{{ number_format($row['total_bd_npl'], 2) }}</strong></td>
                                                <!-- Persentase NPL -->
                                                <td class="text-center">
                                                    <strong class="badge badge-warning">{{ number_format($row['npl_persen'], 2) }}%</strong>
                                                </td>
                                                <!-- Sukses NPL -->
                                                <td class="text-right">
                                                    <strong class="badge badge-success">{{ number_format($row['sukses_npl'], 2) }}%</strong>
                                                </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 Pasca-Rec. = NPL Pasca Recovery, proyeksi atau simulasi tingkat NPL per range, jika seluruh tagihan (Kol 3,4,5)  pada setiap range terkait berhasil dilunasi (recovery).<br>
                                - NPL % = Persentase (Baki Debet Kol 3,4,5) / Total Baki Debet pada range tersebut
                            </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 Baki Debet NPL.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Styling untuk tabel responsive */
    #bakidebetTable {
        font-size: 13px;
    }
    
    #bakidebetTable th, #bakidebetTable td {
        vertical-align: middle;
        padding: 8px 5px;
    }
    
    #bakidebetTable thead th {
        background-color: #f1f3f5;
        font-weight: 600;
        white-space: nowrap;
    }
    
    #bakidebetTable tbody tr:hover {
        background-color: #f9f9f9;
    }
    
    #bakidebetTable .text-center {
        text-align: center;
    }
    
    #bakidebetTable .text-right {
        text-align: right;
    }
    
    .badge-warning {
        background-color: #ffc107;
        color: #333;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
    
    .text-success {
        color: #28a745;
    }
    
    /* Responsive pada layar kecil */
    @media (max-width: 992px) {
        #bakidebetTable {
            font-size: 12px;
        }
        #bakidebetTable th, #bakidebetTable td {
            padding: 5px 3px;
        }
    }
    
    @media (max-width: 768px) {
        #bakidebetTable {
            font-size: 11px;
        }
        #bakidebetTable th, #bakidebetTable td {
            padding: 4px 2px;
        }
        .card {
            margin-bottom: 15px;
        }
    }
    
    .text-sm {
        font-size: 12px;
    }
</style>
@endsection