@extends('layouts.app')

@push('styles')
    <!-- DataTables (Bootstrap 4 theme) -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
@endpush

@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-alert-triangle bg-red"></i>
                        <div class="d-inline">
                            <h5>Penurunan Kualitas Pinjaman</h5>
                            <span>Daftar Pinjaman yang Turun Kolektibilitas menjadi Kol 3, 4, 5 (NPL)</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">Penagihan</li>
                            <li class="breadcrumb-item active" aria-current="page">Penurunan Kualitas</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Daftar Penurunan Kualitas Pinjaman</h3>
                    </div>
                    <div class="card-body">
                        <!-- Filter Section -->
                        <form method="GET" action="{{ route('penurunan.index') }}" 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>

                                @if(!$lockedKantor)
                                    <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 Cabang</option>
                                                @foreach($kantorOptions as $k)
                                                    <option value="{{ $k }}" {{ $kantor === $k ? 'selected' : '' }}>
                                                        Kantor {{ $k }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                @else
                                    {{-- Role AO: kantor terkunci, tidak ada filter cabang --}}
                                    <input type="hidden" name="kantor" value="{{ $kantor }}">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label>Kantor/Cabang</label>
                                            <input type="text" class="form-control" value="Kantor {{ $lockedKantor }}" disabled>
                                        </div>
                                    </div>
                                @endif

                                <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($tanggal) && $tanggal)
                                        <div class="alert alert-info mt-2">
                                            <i class="ik ik-info"></i>
                                            Tanggal Data: <strong>{{ $tanggal }}</strong>
                                            @if($kantor !== 'all')
                                                | Kantor: <strong>{{ $kantor }}</strong>
                                            @else
                                                | Kantor: <strong>Semua Cabang</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 Daftar Penurunan Kualitas -->
                        @if(isset($data) && count($data) > 0)
                            <div class="alert alert-warning mb-3">
                                <i class="ik ik-alert-circle"></i> Total Pinjaman Turun Kualitas:
                                <strong>{{ number_format($totalDebitur, 0) }} debitur</strong>
                            </div>
                            <div class="alert alert-info mb-3">
                                <i class="ik ik-info"></i> Total Baki Debet Terdampak:
                                <strong>Rp {{ number_format($totalBakiDebet, 2) }}</strong>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-hover" id="penurunanTable">
                                    <thead class="thead-light">
                                        <tr>
                                            <th style="width: 3%;">No</th>
                                            <th>Kantor</th>
                                            <th>No Rekening</th>
                                            <th>Nama Debitur</th>
                                            <th>Nama AO</th>
                                            <th class="text-center">Kol. Lalu</th>
                                            <th class="text-center">Kol. Sekarang</th>
                                            <th class="text-right">Baki Debet</th>
                                            <th>Tgl Jatuh Tempo</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($data as $i => $row)
                                            <tr>
                                                <td>{{ $i + 1 }}</td>
                                                <td>{{ $row->kantor }}</td>
                                                <td>{{ $row->norekening }}</td>
                                                <td>{{ $row->namadebitur }}</td>
                                                <td>{{ $row->nama_ao }}</td>
                                                <td class="text-center">
                                                    <span class="badge badge-secondary">{{ $row->kolek_lalu }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge badge-danger">{{ $row->kolek }}</span>
                                                </td>
                                                <td class="text-right" data-order="{{ $row->bakidebet }}">{{ number_format($row->bakidebet, 2) }}</td>
                                                <td>{{ $row->tgljthtempo }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <p class="text-muted text-sm mt-3">
                                <i class="ik ik-info"></i>
                                <strong>Keterangan:</strong><br>
                                - Daftar ini menampilkan pinjaman yang kolektibilitas sebelumnya (Kol. Lalu) berada di 1, 2, 3, atau 4,
                                  kemudian pada tanggal data terpilih turun menjadi Kol. 3, 4, atau 5.<br>
                                - Data diambil dari tabel nominatif kredit (nomi_kredit) pada tanggal data yang dipilih.
                            </p>
                        @elseif(isset($tanggal) && $tanggal)
                            <div class="alert alert-warning">
                                <i class="ik ik-alert-circle"></i> Tidak ada pinjaman yang mengalami penurunan kualitas untuk tanggal dan kantor tersebut.
                            </div>
                        @else
                            <div class="alert alert-info">
                                <i class="ik ik-info"></i> Silakan pilih tanggal data untuk menampilkan daftar penurunan kualitas pinjaman.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

    #penurunanTable th, #penurunanTable td {
        vertical-align: middle;
        padding: 8px 5px;
    }

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

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

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

    .badge-secondary {
        background-color: #6c757d;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
    }

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

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

    .text-sm {
        font-size: 12px;
    }

    /* DataTables menyesuaikan tema */
    #penurunanTable_wrapper .dataTables_length,
    #penurunanTable_wrapper .dataTables_filter,
    #penurunanTable_wrapper .dataTables_info,
    #penurunanTable_wrapper .dataTables_paginate {
        margin-bottom: 10px;
    }
</style>
@endsection

@push('scripts')
    <!-- DataTables (Bootstrap 4 theme) -->
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>

    <script>
        $(document).ready(function () {
            if ($('#penurunanTable').length) {
                $('#penurunanTable').DataTable({
                    pageLength: 10,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    order: [], // urutan default mengikuti data dari server (kolek desc, nama debitur)
                    columnDefs: [
                        { targets: 0, orderable: false } // kolom "No" tidak perlu sortable
                    ],
                    language: {
                        search: "Cari:",
                        lengthMenu: "Tampilkan _MENU_ baris",
                        info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                        infoEmpty: "Tidak ada data",
                        infoFiltered: "(disaring dari _MAX_ total data)",
                        zeroRecords: "Data tidak ditemukan",
                        paginate: {
                            first: "Pertama",
                            last: "Terakhir",
                            next: "Selanjutnya",
                            previous: "Sebelumnya"
                        }
                    }
                });
            }
        });
    </script>
@endpush