@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-inbox bg-blue"></i>
                        <div class="d-inline">
                            <h5>Daftar Tagih Nominatif Kredit</h5>
                            <span>Menampilkan daftar tagih nasabah kredit</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">Daftar Tagih</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Data Nominatif Kredit</h3>
                        <div class="card-header-right">
                            <a href="{{ route('daftartagih.export', request()->query()) }}" class="btn btn-success btn-sm" id="exportBtn">
                                <i class="ik ik-download"></i> Export ke CSV
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Filter Section dengan Datepicker -->
                        <form method="GET" action="{{ route('daftartagih.index') }}" id="filterForm" class="mb-3">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="filter_date"><i class="ik ik-calendar"></i> Pilih Tanggal</label>
                                        <input type="date" 
                                            name="filter_date" 
                                            id="filter_date" 
                                            class="form-control" 
                                            value="{{ $dateForInput ?? '' }}"
                                            min="{{ $minDate }}"
                                            max="{{ $maxDate }}">
                                        <small class="text-muted">Format: YYYY-MM-DD</small>
                                    </div>
                                </div>
                                
                                <!-- TAMBAHKAN FILTER KOLEKTIBILITAS -->
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="kolek_filter"><i class="ik ik-bar-chart"></i> Filter Kolektibilitas</label>
                                        <select name="kolek_filter" id="kolek_filter" class="form-control">
                                            <option value="all" {{ request('kolek_filter', 'all') == 'all' ? 'selected' : '' }}>
                                                Semua Kredit Menunggak
                                            </option>
                                            <option value="low_quality" {{ request('kolek_filter') == 'low_quality' ? 'selected' : '' }}>
                                                ✓ Kredit Kualitas Rendah (Kolek 1 & 2)
                                            </option>
                                            <option value="npl" {{ request('kolek_filter') == 'npl' ? 'selected' : '' }}>
                                                ⚠️ Kredit NPL (Kolek 3, 4, 5)
                                            </option>
                                        </select>
                                        <small class="text-muted">
                                            @if(request('kolek_filter', 'all') == 'all')
                                                Menampilkan Semua Kredit Yang Menunggak
                                            @elseif(request('kolek_filter') == 'low_quality')
                                                Menampilkan kredit dengan kolek 1 dan 2
                                            @elseif(request('kolek_filter') == 'npl')
                                                Menampilkan kredit bermasalah (kolek 3,4,5)
                                            @endif
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="perPage"><i class="ik ik-list"></i> Baris per halaman</label>
                                        <select name="per_page" id="perPage" class="form-control">
                                            <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10</option>
                                            <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                                            <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                            <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                                        </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> Tampilkan Data
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <div>
                                            <a href="{{ route('daftartagih.index') }}" class="btn btn-secondary btn-block">
                                                <i class="ik ik-refresh-cw"></i> Reset
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <input type="hidden" name="sort_by" value="{{ $sortBy }}">
                            <input type="hidden" name="sort_direction" value="{{ $sortDirection }}">
                        </form>







                        <!-- Info Statistik Kolektibilitas -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="alert alert-info mb-0">
                                    <i class="ik ik-info"></i> 
                                    <strong>Informasi Filter:</strong><br>
                                    @if(request('kolek_filter', 'all') == 'all')
                                        📊 Menampilkan <strong>Kredit Menunggak</strong> Semua Kol
                                    @elseif(request('kolek_filter') == 'low_quality')
                                        📊 Menampilkan <strong>Kredit Kualitas Rendah</strong> (Kolek 1 dan 2)
                                    @elseif(request('kolek_filter') == 'npl')
                                        ⚠️ Menampilkan <strong>Kredit NPL</strong> (Kolek 3, 4, 5) - Perlu penanganan khusus
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="alert alert-success mb-0">
                                    <i class="ik ik-check-circle"></i> 
                                    <strong>Total Data:</strong> {{ number_format($totalCount) }} records
                                    @if(request('kolek_filter') == 'npl')
                                        <br><small class="text-danger">⚠️ Data ini adalah kredit bermasalah yang memerlukan prioritas penagihan!</small>
                                    @endif
                                </div>
                            </div>
                        </div>










                        
                        <!-- Error Alert jika tanggal tidak valid -->
                        @if($dateError)
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="ik ik-alert-triangle"></i> 
                                {{ $dateError }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        
                        <!-- Info Tanggal yang ditampilkan -->
                        <div class="alert alert-info mb-3">
                            <i class="ik ik-info"></i> 
                            <strong>Menampilkan data tanggal: {{ $formattedDate }}</strong>
                            <br>
                            <small>
                                * Pilih tanggal yang tersedia di database. 
                                @if(isset($availableDates) && count($availableDates) > 0)
                                    Rentang tanggal: 
                                    {{ date('d-m-Y', strtotime(end($availableDates))) }} 
                                    s/d {{ date('d-m-Y', strtotime($availableDates[0])) }}
                                @endif
                            </small>
                        </div>
                        
                        <!-- Search Section - Server Side -->
                        <form method="GET" action="{{ route('daftartagih.index') }}" id="searchForm" class="mb-3">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="searchInput">
                                            <i class="ik ik-search"></i> Cari Data (Nama / No Rekening)
                                        </label>
                                        <div class="input-group">
                                            <input type="text" name="search" id="searchInput" class="form-control" 
                                                   placeholder="Cari nama atau no rekening..." 
                                                   value="{{ $searchKeyword }}">
                                            <div class="input-group-append">
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="ik ik-search"></i> Cari
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <div>
                                            @if($searchKeyword)
                                                <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['search' => ''])) }}" class="btn btn-outline-secondary btn-block">
                                                    <i class="ik ik-x"></i> Reset
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <div class="alert alert-success alert-sm" style="padding: 8px 12px; margin-bottom: 0;">
                                            <i class="ik ik-check-circle"></i> 
                                            @if($searchKeyword)
                                                Menampilkan hasil pencarian: <strong>"{{ $searchKeyword }}"</strong> 
                                                ({{ number_format($totalCount) }} data ditemukan)
                                            @else
                                                Total data: <strong>{{ number_format($totalCount) }}</strong> records
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Pertahankan filter lain -->
                            <input type="hidden" name="filter_date" value="{{ $selectedDate }}">
                            <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
                            <input type="hidden" name="sort_by" value="{{ $sortBy }}">
                            <input type="hidden" name="sort_direction" value="{{ $sortDirection }}">
                        </form>
                        
                        <div class="row mb-2">
                            <div class="col-md-12 text-right">
                                <small class="text-muted">
                                    <i class="ik ik-arrow-up"></i> Klik kolom untuk sorting
                                </small>
                            </div>
                        </div>

                        <!-- Table Responsive -->
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="dataTable">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="sortable">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'norekening', 'sort_direction' => ($sortBy == 'norekening' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                No. Rekening
                                                @if($sortBy == 'norekening')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'namadebitur', 'sort_direction' => ($sortBy == 'namadebitur' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Nama Debitur
                                                @if($sortBy == 'namadebitur')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable text-center">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'kolek', 'sort_direction' => ($sortBy == 'kolek' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Kolek
                                                @if($sortBy == 'kolek')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable text-center">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'tglmulai', 'sort_direction' => ($sortBy == 'tglmulai' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Tgl.Mulai
                                                @if($sortBy == 'tglmulai')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable text-center">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'tgljthtempo', 'sort_direction' => ($sortBy == 'tgljthtempo' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Tgl.JthTempo
                                                @if($sortBy == 'tgljthtempo')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable text-center">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'kualitas', 'sort_direction' => ($sortBy == 'kualitas' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Kualitas
                                                @if($sortBy == 'kualitas')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable text-right">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'bakidebet', 'sort_direction' => ($sortBy == 'bakidebet' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Baki Debet
                                                @if($sortBy == 'bakidebet')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'kotakab', 'sort_direction' => ($sortBy == 'kotakab' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Kota/Kab
                                                @if($sortBy == 'kotakab')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable text-center">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'jmltagihan_pokok', 'sort_direction' => ($sortBy == 'jmltagihan_pokok' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Jml Tagih Pokok
                                                @if($sortBy == 'jmltagihan_pokok')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable text-right">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'nominaltagihan_pokok', 'sort_direction' => ($sortBy == 'nominaltagihan_pokok' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Nominal Tagih Pokok
                                                @if($sortBy == 'nominaltagihan_pokok')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable text-center">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'jmltagihan_bunga', 'sort_direction' => ($sortBy == 'jmltagihan_bunga' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Jml Tagih Bunga
                                                @if($sortBy == 'jmltagihan_bunga')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="sortable text-right">
                                            <a href="{{ route('daftartagih.index', array_merge(request()->query(), ['sort_by' => 'nominaltagihan_bunga', 'sort_direction' => ($sortBy == 'nominaltagihan_bunga' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                Nominal Tagih Bunga
                                                @if($sortBy == 'nominaltagihan_bunga')
                                                    <i class="ik ik-arrow-{{ $sortDirection == 'asc' ? 'up' : 'down' }}"></i>
                                                @else
                                                    <i class="ik ik-move"></i>
                                                @endif
                                            </a>
                                        </th>
                                        <th class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                    @forelse ($nominatif as $index => $item)
                                    <tr class="data-row" data-id="{{ $index }}">
                                        <td>{{ $item->norekening }}</td>
                                        <td>{{ $item->namadebitur }}</td>
                                        <td class="text-center">
                                            @php
                                                $badgeClass = '';
                                                switch($item->kolek) {
                                                    case '1': $badgeClass = 'badge-success'; break;
                                                    case '2': $badgeClass = 'badge-warning'; break;
                                                    case '3': $badgeClass = 'badge-danger'; break;
                                                    case '4': $badgeClass = 'badge-danger'; break;
                                                    case '5': $badgeClass = 'badge-dark'; break;
                                                    default: $badgeClass = 'badge-secondary';
                                                }
                                            @endphp
                                            <span class="badge {{ $badgeClass }}">{{ $item->kolek }}</span>
                                        </td>
                                        <td>{{ $item->tglmulai }}</td>
                                        <td>{{ $item->tgljthtempo }}</td>
                                        <td>{{ $item->kualitas }}</td>
                                        <td class="text-right">{{ number_format($item->bakidebet, 0, ',', '.') }}</td>
                                        <td>{{ $item->kotakab }}</td>
                                        <td class="text-center">{{ number_format($item->jmltagihan_pokok, 0, ',', '.') }}</td>
                                        <td class="text-right">{{ number_format($item->nominaltagihan_pokok, 0, ',', '.') }}</td>
                                        <td class="text-center">{{ number_format($item->jmltagihan_bunga, 0, ',', '.') }}</td>
                                        <td class="text-right">{{ number_format($item->nominaltagihan_bunga, 0, ',', '.') }}</td>
                                        <td class="text-center">
                                            <div class="btn-group" role="group">
                                                <button type="button" 
                                                        class="btn btn-sm btn-info btn-detail" 
                                                        data-idkredit="{{ $item->idkredit }}"
                                                        
                                                        data-toggle="tooltip" 
                                                        title="Lihat Detail Nasabah">
                                                    <i class="ik ik-eye"></i> Detail
                                                </button>
                                                <button type="button" 
                                                        class="btn btn-sm btn-primary btn-tagihan" 
                                                        data-idkredit="{{ $item->idkredit }}"
                                                        data-norekening="{{ $item->norekening }}"
                                                        data-nama="{{ $item->namadebitur }}"
                                                        data-kolek="{{ $item->kolek }}"
                                                        data-toggle="tooltip" 
                                                        title="Entry Penagihan">
                                                    <i class="ik ik-edit"></i> Entry Tagihan
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr id="emptyRow">
                                        <td colspan="13" class="text-center text-muted">
                                            <i class="ik ik-alert-circle"></i> Tidak ada data untuk tanggal yang dipilih
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        <div class="row mt-3">
                            <div class="col-md-6 col-sm-12">
                                <div class="text-muted">
                                    Menampilkan {{ $nominatif->firstItem() ?? 0 }} sampai {{ $nominatif->lastItem() ?? 0 }} 
                                    dari total {{ number_format($nominatif->total()) }} data
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="d-flex justify-content-end">
                                    {{ $nominatif->appends(request()->query())->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Data Nasabah -->
<div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modalDetailLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="modalDetailLabel">
                    <i class="ik ik-file-text"></i> Detail Informasi Nasabah
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="detailLoading" style="text-align: center; padding: 50px;">
                    <i class="ik ik-refresh-cw" style="font-size: 40px; animation: spin 1s linear infinite; display: inline-block;"></i>
                    <br><br>Memuat data detail...
                </div>
                <div id="detailContent" style="display: none;">
                    <ul class="nav nav-tabs" id="detailTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="info-umum-tab" data-toggle="tab" href="#infoUmum" role="tab">
                                <i class="ik ik-user"></i> Informasi Umum
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="info-kredit-tab" data-toggle="tab" href="#infoKredit" role="tab">
                                <i class="ik ik-credit-card"></i> Informasi Kredit
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="info-agunan-tab" data-toggle="tab" href="#infoAgunan" role="tab">
                                <i class="ik ik-home"></i> Informasi Agunan
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="riwayat-tagihan-tab" data-toggle="tab" href="#riwayatTagihan" role="tab">
                                <i class="ik ik-clock"></i> Riwayat Penagihan
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content mt-3" id="detailTabContent">
                        <div class="tab-pane fade show active" id="infoUmum" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-bordered table-striped">
                                        <tr>
                                            <th width="40%">No. Rekening</th>
                                            <td id="detail_norekening">-</td>
                                        </tr>
                                         <tr>
                                            <th>Id Kredit</th>
                                            <td id="detail_idkredit">-</td>
                                        </tr>
                                        <tr>
                                            <th>Nama Debitur</th>
                                            <td id="detail_nama">-</td>
                                        </tr>
                                        <tr>
                                            <th>Alamat</th>
                                            <td id="detail_alamat">-</td>
                                        </tr>
                                        <tr>
                                            <th>Kantor Cabang</th>
                                            <td id="detail_kacab">-</td>
                                        </tr>
                                        <tr>
                                            <th>Kelurahan/Desa</th>
                                            <td id="detail_kelurahan">-</td>
                                        </tr>
                                        <tr>
                                            <th>Kecamatan</th>
                                            <td id="detail_kecamatan">-</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-bordered table-striped">
                                        <tr>
                                            <th width="40%">Kota/Kabupaten</th>
                                            <td id="detail_kotakab">-</td>
                                        </tr>
                                        <tr>
                                            <th>Pekerjaan</th>
                                            <td id="detail_pekerjaan">-</td>
                                        </tr>
                                        <tr>
                                            <th>Jen.Kelamin</th>
                                            <td id="detail_jenis_kelamin">-</td>
                                        </tr>
                                        <tr>
                                            <th>No. Identitas</th>
                                            <td id="detail_no_identitas">-</td>
                                        </tr>
                                        <tr>
                                            <th>No. HP</th>
                                            <td id="detail_hp">-</td>
                                        </tr>
                                        <tr>
                                            <th>Sts. Data Pinjaman</th>
                                            <td id="detail_stsdata">-</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="infoKredit" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-bordered table-striped">
                                        <tr>
                                            <th width="40%">Plafon Kredit</th>
                                            <td id="detail_plafon">-</td>
                                        </tr>
                                        <tr>
                                            <th>Baki Debet</th>
                                            <td id="detail_bakidebet">-</td>
                                        </tr>
                                        <tr>
                                            <th>Suku Bunga</th>
                                            <td id="detail_sukubunga">-</td>
                                        </tr>
                                        <tr>
                                            <th>Tanggal Mulai</th>
                                            <td id="detail_tglmulai">-</td>
                                        </tr>
                                        <tr>
                                            <th>Tanggal Jatuh Tempo</th>
                                            <td id="detail_tgljthtempo">-</td>
                                        </tr>
                                        <tr>
                                            <th>SKIM Kredit</th>
                                            <td id="detail_kelompoknasabah">-</td>
                                        </tr>
                                        <tr>
                                            <th>Kolektibilitas</th>
                                            <td id="detail_kolek">-</td>
                                        </tr>
                                        <tr>
                                            <th>Kolektibilitas Bulan Lalu</th>
                                            <td id="detail_koleklalu">-</td>
                                        </tr>
                                         <tr>
                                            <th>Kualitas</th>
                                            <td id="detail_kualitas">-</td>
                                        </tr>
                                        
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-bordered table-striped">
                                        
                                         
                                       
                                        <tr>
                                            <th  width="40%">Nominal Angsuran Pokok</th>
                                            <td id="detail_angsuran_pokok">-</td>
                                        </tr>

                                        <tr>
                                            <th>Nominal Angsuran Bunga</th>
                                            <td id="detail_angsuran_bunga">-</td>
                                        </tr>

                                        <tr>
                                            <th>Tanggal Tertua Tagihan Pokok</th>
                                            <td id="detail_tgltagihan_pokok">-</td>
                                        </tr>


                                        <tr>
                                            <th>Jumlah Tagihan Pokok</th>
                                            <td id="detail_jmltagihan_pokok">-</td>
                                        </tr>
                                    

                                
                                        <tr>
                                            <th>Nominal Tagihan Pokok</th>
                                            <td id="detail_nominaltagihan_pokok">-</td>
                                        </tr>

                                        <tr>
                                            <th>Tanggal Tertua Tagihan Bunga</th>
                                            <td id="detail_tgltagihan_bunga">-</td>
                                        </tr>


                                        <tr>
                                            <th>Jumlah Tagihan Bunga</th>
                                            <td id="detail_jmltagihan_bunga">-</td>
                                        </tr>
                                        <tr>
                                            <th>Nominal Tagihan Bunga</th>
                                            <td id="detail_nominaltagihan_bunga">-</td>
                                        </tr>
                                     
                                        <tr>
                                            <th>Nama AO</th>
                                            <td id="detail_nama_ao">-</td>
                                        </tr>
                                        
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="infoAgunan" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Jenis Agunan</th>
                                            <th>Deskripsi</th>
                                            <th>Nilai Agunan</th>
                                            <th>Status Sertifikat</th>
                                        </tr>
                                    </thead>
                                    <tbody id="detail_agunan_tbody">
                                        <tr>
                                            <td colspan="4" class="text-center">Tidak ada data agunan</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="riwayatTagihan" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Tanggal Tagihan</th>
                                            <th>Tanggal Janji</th>
                                            <th>Nominal Dibayar</th>
                                            <th>Sanksi</th>
                                            <th>Lokasi</th>
                                            <th>Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody id="riwayat_tagihan_tbody">
                                        <tr>
                                            <td colspan="6" class="text-center">Belum ada riwayat penagihan</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="ik ik-x"></i> Tutup
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Entry Tagihan -->
<div class="modal fade" id="modalTagihan" tabindex="-1" role="dialog" aria-labelledby="modalTagihanLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalTagihanLabel">
                    <i class="ik ik-file-text"></i> Entry Data Penagihan
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('daftartagih.penagihan.store') }}" id="formPenagihan">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <!-- Kolom Kiri -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="norekening_modal">Nomor Rekening <span class="text-danger">*</span></label>
                                <input type="text" id="norekening_modal" name="norekening" class="form-control" readonly>
                                <input type="hidden" name="idkredit" id="idkredit_modal">
                            </div>
                            
                            <div class="form-group">
                                <label for="nama_debitur_modal">Nama Debitur</label>
                                <input type="text" id="nama_debitur_modal" class="form-control" readonly>
                            </div>
                            
                            <div class="form-group">
                                <label for="kolek_modal">Kolektibilitas Saat Ini</label>
                                <div id="kolek_modal"></div>
                            </div>
                            
                            <div class="form-group">
                                <label for="tgl_janji">Tanggal Janji Bayar <span class="text-danger">*</span></label>
                                <input type="date" name="tgl_janji" id="tgl_janji" class="form-control" required>
                                <small class="text-muted">Minimal tanggal hari ini atau setelahnya</small>
                            </div>
                            
                            <div class="form-group">
                                <label for="nominal_dibayar">Nominal yang Dibayarkan Debitur</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Rp</span>
                                    </div>
                                    <input type="number" name="nominal_dibayar" id="nominal_dibayar" class="form-control" step="1000" min="0" placeholder="0">
                                </div>
                                <small class="text-muted">Kosongkan jika belum ada pembayaran</small>
                            </div>
                        </div>
                        
                        <!-- Kolom Kanan -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="sanksi">Sanksi Debitur</label>
                                <select name="sanksi" id="sanksi" class="form-control">
                                    <option value="">-- Pilih Sanksi --</option>
                                    <option value="Surat Peringatan 1">Surat Peringatan 1</option>
                                    <option value="Surat Peringatan 2">Surat Peringatan 2</option>
                                    <option value="Surat Peringatan 3">Surat Peringatan 3</option>
                                    <option value="Denda 1%">Denda 1%</option>
                                    <option value="Denda 2%">Denda 2%</option>
                                    <option value="Denda 5%">Denda 5%</option>
                                    <option value="Blacklist">Blacklist</option>
                                    <option value="Proses Hukum">Proses Hukum</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                            </div>
                            
                            <div class="form-group" id="sanksi_lainnya_group" style="display: none;">
                                <label for="sanksi_lainnya">Sanksi Lainnya</label>
                                <input type="text" name="sanksi_lainnya" id="sanksi_lainnya" class="form-control" placeholder="Tulis sanksi lainnya">
                            </div>
                            
                            <div class="form-group">
                                <label for="lokasi">Lokasi Penagihan <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" name="lokasi" id="lokasi" class="form-control" placeholder="Klik tombol Get Location" readonly>
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-primary" id="getLocationBtn" title="Dapatkan lokasi saat ini">
                                            <i class="ik ik-map-pin"></i> Get Location
                                        </button>
                                    </div>
                                </div>
                                <small class="text-muted">Wajib diisi! Klik tombol "Get Location" untuk mendapatkan lokasi otomatis berdasarkan GPS</small>
                            </div>
                            
                            <!-- Field koordinat (hidden) -->
                            <input type="hidden" name="latitude" id="latitude">
                            <input type="hidden" name="longitude" id="longitude">
                            
                            <div class="form-group">
                                <label for="keterangan">Keterangan Tagihan</label>
                                <textarea name="keterangan" id="keterangan" class="form-control" rows="3" placeholder="Catatan penting tentang penagihan..."></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info mt-2">
                        <i class="ik ik-info"></i> 
                        <strong>Informasi:</strong> Data yang sudah disimpan tidak dapat diubah. Pastikan data sudah benar sebelum menyimpan.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="ik ik-x"></i> Batal
                    </button>
                    <button type="submit" class="btn btn-primary" id="btnSimpan" disabled>
                        <i class="ik ik-save"></i> Simpan Penagihan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Toast Notification -->
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 9999; bottom: 20px; right: 20px;">
    <div id="toastMessage" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true" data-delay="3000" style="display: none; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 300px;">
        <div class="toast-header">
            <strong class="mr-auto" id="toastTitle">Notifikasi</strong>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body" id="toastMessageBody">
            Pesan notifikasi
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; justify-content: center; align-items: center;">
    <div style="background: white; padding: 20px; border-radius: 10px; text-align: center;">
        <i class="ik ik-refresh-cw" style="font-size: 40px; animation: spin 1s linear infinite; display: inline-block;"></i>
        <br><br>Memuat data...
    </div>
</div>

<style>
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .badge {
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
    }
    .badge-success { background-color: #28a745; color: white; }
    .badge-warning { background-color: #ffc107; color: #212529; }
    .badge-danger { background-color: #dc3545; color: white; }
    .badge-dark { background-color: #343a40; color: white; }
    .badge-secondary { background-color: #6c757d; color: white; }
    
    .table td { vertical-align: middle; padding: 10px; }
    .text-right { text-align: right; }
    .text-center { text-align: center; }
    
    .sortable { position: relative; white-space: nowrap; }
    .sort-link { color: #333; text-decoration: none; display: inline-block; padding: 5px 0; }
    .sort-link:hover { color: #007bff; text-decoration: none; }
    .sort-link i { margin-left: 5px; font-size: 12px; opacity: 0.6; }
    .sort-link:hover i { opacity: 1; }
    
    @media (max-width: 768px) {
        .table td, .table th { font-size: 12px; padding: 8px; }
        .badge { font-size: 10px; padding: 3px 8px; }
        .sort-link { font-size: 12px; }
        .btn-group .btn { font-size: 11px; padding: 4px 8px; }
    }
    
    .card-header-right { float: right; }
    .table-hover tbody tr:hover { background-color: rgba(0, 123, 255, 0.05); }
    
    input[type="date"] {
        cursor: pointer;
    }
    
    .position-fixed {
        position: fixed !important;
    }
    .bottom-0 {
        bottom: 0 !important;
    }
    .right-0 {
        right: 0 !important;
    }
    .toast {
        background: white;
    }
    
    #getLocationBtn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .input-group .form-control:not(:first-child) {
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }
    
    /* Animasi loading pada tombol */
    #getLocationBtn .ik-refresh-cw {
        animation: spin 1s linear infinite;
        display: inline-block;
    }
    
    /* Style untuk field error */
    .is-invalid {
        border-color: #dc3545 !important;
    }
    
    .invalid-feedback-lokasi {
        width: 100%;
        margin-top: 0.25rem;
        font-size: 80%;
        color: #dc3545;
    }
    
    /* Required field indicator */
    .text-danger {
        color: #dc3545 !important;
    }
    
    /* Disabled button style */
    #btnSimpan:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    /* Nav tabs style */
    .nav-tabs .nav-link {
        color: #495057;
    }
    .nav-tabs .nav-link.active {
        color: #007bff;
        font-weight: 600;
    }
    
    /* Table in modal */
    .modal-xl {
        max-width: 1200px;
    }





    /* Style untuk filter kolektibilitas */
    #kolek_filter {
        background-color: #f8f9fa;
        font-weight: 500;
    }

    #kolek_filter option[value="low_quality"] {
        color: #28a745;
        font-weight: 500;
    }

    #kolek_filter option[value="npl"] {
        color: #dc3545;
        font-weight: 500;
    }








</style>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    console.log('Document ready di daftar tagih');
    
    // Initialize tooltips
    $('[data-toggle="tooltip"]').tooltip();
    
    // Loading indicator
    function showLoading() {
        $('#loadingOverlay').fadeIn(200);
    }
    
    function hideLoading() {
        $('#loadingOverlay').fadeOut(200);
    }
    
    // Auto submit filter saat tanggal berubah
    $('#filter_date').on('change', function() {
        showLoading();
        $('#filterForm').submit();
    });
    
    // Per page change
    $('#perPage').on('change', function() {
        showLoading();
        $('#filterForm').submit();
    });
    
    // Loading saat submit form
    $('#filterForm, #searchForm').on('submit', function() {
        showLoading();
    });
    
    // Loading untuk pagination dan sorting
    $(document).on('click', '.pagination a, .sort-link', function() {
        showLoading();
    });
    
    // Loading untuk export
    $('#exportBtn').on('click', function() {
        showLoading();
    });
    
    // Sembunyikan loading saat halaman selesai
    $(window).on('load', function() {
        hideLoading();
    });
    
    // Validasi tanggal client-side
    $('#filterForm').on('submit', function(e) {
        var selectedDate = $('#filter_date').val();
        if (!selectedDate) {
            e.preventDefault();
            alert('Silakan pilih tanggal terlebih dahulu');
        }
    });
    
    // ========== MODAL DETAIL ==========
    // Saat tombol detail diklik
    $(document).on('click', '.btn-detail', function() {
        var idkredit = $(this).data('idkredit');
        var norekening = $(this).data('norekening');
        
        console.log('Detail clicked for ID Kredit:', idkredit);
        
        // Reset tampilan
        $('#detailLoading').show();
        $('#detailContent').hide();
        
        // Reset semua field
        $('#detail_idkredit,#detail_norekening, #detail_nama, #detail_alamat, #detail_kacab, #detail_kelurahan, #detail_kecamatan, #detail_kotakab, #detail_pekerjaan, #detail_jenis_kelamin, #detail_no_identitas, #detail_hp, #detail_stsdata').text('-');
        $('#detail_plafon, #detail_bakidebet, #detail_sukubunga, #detail_tglmulai, #detail_tgljthtempo, #detail_kelompoknasabah, #detail_kolek,#detail_koleklalu, #detail_kualitas, #detail_angsuran_pokok, #detail_angsuran_bunga, #detail_tgltagihan_pokok, #detail_jmltagihan_pokok, #detail_nominaltagihan_pokok, #detail_tgltagihan_bunga, #detail_jmltagihan_bunga, #detail_nominaltagihan_bunga, #detail_nama_ao').text('-');
        $('#detail_agunan_tbody').html('<tr><td colspan="4" class="text-center">Memuat data agunan...</td></tr>');
        $('#riwayat_tagihan_tbody').html('<tr><td colspan="6" class="text-center">Memuat riwayat penagihan...</td></tr>');
        
        // Tampilkan modal
        $('#modalDetail').modal('show');
        
        // Ajax request untuk mendapatkan detail data
        $.ajax({
            url: '{{ route("daftartagih.detail") }}',
            method: 'GET',
            data: {
                idkredit: idkredit,
                norekening: norekening
            },
            success: function(response) {
                console.log('Detail data:', response);
                $('#detailLoading').hide();
                $('#detailContent').show();
                
                if (response.success) {
                    var data = response.data;
                    
                    // Isi Informasi Umum
                    $('#detail_idkredit').text(data.idkredit || '-');
                    $('#detail_norekening').text(data.norekening || '-');
                    $('#detail_nama').text(data.namadebitur || '-');
                    $('#detail_alamat').text(data.alamat || '-');
                    // $('#detail_kacab').text(data.rtrw ? (data.rtrw || '-') : '-');
                    $('#detail_kacab').text(data.kantor || '-');
                    $('#detail_kelurahan').text(data.kelurahan || '-');
                    $('#detail_kecamatan').text(data.kecamatan || '-');
                    $('#detail_kotakab').text(data.kotakab || '-');
                    $('#detail_pekerjaan').text(data.pekerjaan || '-');
                    $('#detail_jenis_kelamin').text(data.jenis_kelamin || '-');
                    $('#detail_no_identitas').text(data.no_identitas || '-');
                    $('#detail_hp').text(data.notelp || '-');
                    $('#detail_stsdata').text(data.stsdata || '-');
                    
                    // Isi Informasi Kredit
                    $('#detail_plafon').text(formatRupiah(data.plafond));
                    $('#detail_bakidebet').text(formatRupiah(data.bakidebet));
                    $('#detail_sukubunga').text(data.sukubunga ? data.sukubunga + '%' : '-');
                    $('#detail_tglmulai').text(data.tglmulai || '-');
                    $('#detail_tgljthtempo').text(data.tgljthtempo || '-');
                    // $('#detail_tenor').text(data.tenor ? data.tenor + ' bulan' : '-');
                    $('#detail_kelompoknasabah').text(data.kelompoknasabah || '-');
                    $('#detail_kolek').text(data.kolek || '-');
                     $('#detail_koleklalu').text(data.kolek_lalu || '-');
                    $('#detail_kualitas').text(data.kualitas || '-');
                    $('#detail_angsuran_pokok').text(formatNumber(data.angsuran_pokok));
                    $('#detail_angsuran_bunga').text(formatNumber(data.angsuran_bunga));
                    $('#detail_tgltagihan_pokok').text(data.tgltagihan_pokok || '-');
                    $('#detail_jmltagihan_pokok').text(formatNumber(data.jmltagihan_pokok));
                    $('#detail_nominaltagihan_pokok').text(formatRupiah(data.nominaltagihan_pokok));
                    $('#detail_tgltagihan_bunga').text(data.tgltagihan_bunga || '-');
                    $('#detail_jmltagihan_bunga').text(formatNumber(data.jmltagihan_bunga));
                    $('#detail_nominaltagihan_bunga').text(formatRupiah(data.nominaltagihan_bunga));
                     $('detail_nama_ao').text(data.nama_ao || '-');
                    // Isi Informasi Agunan
                    if (data.agunan && data.agunan.length > 0) {
                        var agunanHtml = '';
                        $.each(data.agunan, function(index, agun) {
                            agunanHtml += `
                                <tr>
                                    <td>${agun.jenis_agunan || '-'}</td>
                                    <td>${agun.deskripsi || '-'}</td>
                                    <td class="text-right">${formatRupiah(agun.nilai_agunan)}</td>
                                    <td>${agun.status_sertifikat || '-'}</td>
                                </tr>
                            `;
                        });
                        $('#detail_agunan_tbody').html(agunanHtml);
                    } else {
                        $('#detail_agunan_tbody').html('<tr><td colspan="4" class="text-center">Tidak ada data agunan</td></tr>');
                    }
                    
                    // Isi Riwayat Penagihan

                    var riwayat = response.riwayat;
                
                                    if (riwayat && riwayat.length > 0) {
                                        var html = '';
                                        for (var i = 0; i < riwayat.length; i++) {
                                            var r = riwayat[i];
                                            html += '<tr>';
                                            html += '<td>' + (r.waktutagih || '-') + '</td>';
                                            html += '<td>' + (r.tgl_janji || '-') + '</td>';
                                            html += '<td class="text-right">' + formatRupiah(r.nominal_tagih) + '</td>';
                                            html += '<td>' + (r.sanksi_debitur || '-') + '</td>';
                                            html += '<td>' + (r.lokasi_penagihan || '-') + '</td>';
                                            html += '<td>' + (r.keterangan_tagih || '-') + '</td>';
                                            html += '</tr>';
                                        }
                                        $('#riwayat_tagihan_tbody').html(html);
                                    } else {
                                        $('#riwayat_tagihan_tbody').html('<tr><td colspan="6" class="text-center">Belum ada riwayat penagihan</td></tr>');
                                    }
                                    
                                } else {
                                    $('#detailContent').html('<div class="alert alert-danger">' + (response.message || 'Gagal memuat data') + '</div>');
                                    $('#detailContent').show();
                                }
                            },
                            error: function(xhr) {
                                console.error('Error:', xhr);
                                $('#detailLoading').hide();
                                $('#detailContent').html('<div class="alert alert-danger">Terjadi kesalahan. Silakan coba lagi.</div>');
                                $('#detailContent').show();
                            }
                        });
                    });








    //                 if (data.riwayat_tagihan && data.riwayat_tagihan.length > 0) {
    //                     var riwayatHtml = '';
    //                     $.each(data.riwayat_tagihan, function(index, riwayat) {
    //                         riwayatHtml += `
    //                             <tr>
    //                                 <td>${riwayat.created_at || '-'}</td>
    //                                 <td>${riwayat.tgl_janji || '-'}</td>
    //                                 <td class="text-right">${formatRupiah(riwayat.nominal_dibayar)}</td>
    //                                 <td>${riwayat.sanksi || '-'}</td>
    //                                 <td>${riwayat.lokasi || '-'}</td>
    //                                 <td>${riwayat.keterangan || '-'}</td>
    //                             </tr>
    //                         `;
    //                     });
    //                     $('#riwayat_tagihan_tbody').html(riwayatHtml);
    //                 } else {
    //                     $('#riwayat_tagihan_tbody').html('<tr><td colspan="6" class="text-center">Belum ada riwayat penagihan</td></tr>');
    //                 }
    //             } else {
    //                 $('#detailContent').html('<div class="alert alert-danger">' + (response.message || 'Gagal memuat data detail') + '</div>');
    //             }
    //         },
    //         error: function(xhr) {
    //             console.error('Error:', xhr);
    //             $('#detailLoading').hide();
    //             $('#detailContent').show();
    //             $('#detailContent').html('<div class="alert alert-danger">Terjadi kesalahan saat memuat data detail. Silakan coba lagi.</div>');
    //         }
    //     });
    // });
    
    // Fungsi format Rupiah
    function formatRupiah(value) {
        if (!value || value == 0) return 'Rp 0';
        return 'Rp ' + new Intl.NumberFormat('id-ID').format(value);
    }
    
    function formatNumber(value) {
        if (!value || value == 0) return '0';
        return new Intl.NumberFormat('id-ID').format(value);
    }
    
    // ========== MODAL TAGIHAN ==========
    // Saat tombol tagihan diklik
    $(document).on('click', '.btn-tagihan', function() {
        // Ambil data dari tombol
        var idkredit = $(this).data('idkredit');
        var norekening = $(this).data('norekening');
        var nama = $(this).data('nama');
        var kolek = $(this).data('kolek');
        
        console.log('Data dari tombol:', {idkredit, norekening, nama, kolek});
        
        // Isi data ke modal
        $('#idkredit_modal').val(idkredit);
        $('#norekening_modal').val(norekening);
        $('#nama_debitur_modal').val(nama);
        
        // Set badge warna untuk kolektibilitas
        var badgeClass = '';
        switch(parseInt(kolek)) {
            case 1: badgeClass = 'badge-success'; break;
            case 2: badgeClass = 'badge-warning'; break;
            case 3: badgeClass = 'badge-danger'; break;
            case 4: badgeClass = 'badge-danger'; break;
            case 5: badgeClass = 'badge-dark'; break;
            default: badgeClass = 'badge-secondary';
        }
        $('#kolek_modal').html('<span class="badge ' + badgeClass + '">' + kolek + '</span>');
        
        // Reset form
        $('#tgl_janji').val('');
        $('#nominal_dibayar').val('');
        $('#sanksi').val('');
        $('#lokasi').val('').removeClass('is-invalid');
        $('#keterangan').val('');
        $('#sanksi_lainnya_group').hide();
        $('#sanksi_lainnya').val('');
        $('#latitude').val('');
        $('#longitude').val('');
        $('.invalid-feedback-lokasi').remove();
        
        // Set minimal tanggal = hari ini
        var today = new Date().toISOString().split('T')[0];
        $('#tgl_janji').attr('min', today);
        
        // Disable tombol simpan sampai lokasi terisi
        $('#btnSimpan').prop('disabled', true);
        
        // Pastikan modal terbuka
        $('#modalTagihan').modal('show');
    });
    
    // ========== GET LOCATION ==========
    $('#getLocationBtn').on('click', function() {
        var btn = $(this);
        var originalHtml = btn.html();
        
        // Cek apakah browser mendukung geolocation
        if (!navigator.geolocation) {
            Swal.fire({
                icon: 'error',
                title: 'Browser Tidak Mendukung',
                text: 'Browser Anda tidak mendukung Geolocation. Silakan gunakan browser modern seperti Chrome, Firefox, atau Edge.',
                confirmButtonColor: '#3085d6'
            });
            $('#lokasi').prop('readonly', true);
            return;
        }
        
        // Tampilkan loading
        btn.html('<i class="ik ik-refresh-cw"></i> Mendapatkan lokasi...').prop('disabled', true);
        
        // Ambil lokasi
        navigator.geolocation.getCurrentPosition(
            function(position) {
                // Sukses mendapatkan lokasi
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                
                console.log('Koordinat:', lat, lng);
                
                // Simpan koordinat ke hidden field
                $('#latitude').val(lat);
                $('#longitude').val(lng);
                
                // Reverse geocoding untuk mendapatkan alamat
                var geocodeUrl = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`;
                
                $.ajax({
                    url: geocodeUrl,
                    method: 'GET',
                    success: function(data) {
                        var address = '';
                        if (data && data.display_name) {
                            address = data.display_name;
                        } else {
                            address = `Latitude: ${lat}, Longitude: ${lng}`;
                        }
                        $('#lokasi').val(address).prop('readonly', true);
                        btn.html(originalHtml).prop('disabled', false);
                        
                        // Hapus style error jika ada
                        $('#lokasi').removeClass('is-invalid');
                        $('.invalid-feedback-lokasi').remove();
                        
                        // ENABLE tombol simpan
                        $('#btnSimpan').prop('disabled', false);
                        
                        // Tampilkan notifikasi sukses
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'Lokasi berhasil didapatkan. Silakan simpan data penagihan.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    },
                    error: function() {
                        // Jika reverse geocoding gagal, tetap gunakan koordinat
                        $('#lokasi').val(`Latitude: ${lat}, Longitude: ${lng}`).prop('readonly', true);
                        btn.html(originalHtml).prop('disabled', false);
                        $('#lokasi').removeClass('is-invalid');
                        $('.invalid-feedback-lokasi').remove();
                        
                        // ENABLE tombol simpan
                        $('#btnSimpan').prop('disabled', false);
                        
                        Swal.fire({
                            icon: 'warning',
                            title: 'Lokasi Didapatkan',
                            text: 'Lokasi berhasil didapatkan, namun alamat tidak lengkap. Data koordinat tetap tersimpan.',
                            timer: 3000,
                            showConfirmButton: false
                        });
                    }
                });
            },
            function(error) {
                // Error mendapatkan lokasi
                var errorMessage = '';
                var errorTitle = '';
                
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        errorTitle = 'Izin Lokasi Ditolak';
                        errorMessage = 'Izin lokasi ditolak. Silakan:\n1. Klik ikon gembok di address bar\n2. Izinkan akses lokasi\n3. Refresh halaman dan coba lagi';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        errorTitle = 'Lokasi Tidak Tersedia';
                        errorMessage = 'Informasi lokasi tidak tersedia. Pastikan GPS/WiFi menyala dan coba lagi.';
                        break;
                    case error.TIMEOUT:
                        errorTitle = 'Waktu Habis';
                        errorMessage = 'Waktu permintaan lokasi habis. Silakan coba lagi di tempat dengan sinyal lebih baik.';
                        break;
                    default:
                        errorTitle = 'Error';
                        errorMessage = 'Terjadi kesalahan saat mendapatkan lokasi. Silakan coba lagi.';
                        break;
                }
                
                Swal.fire({
                    icon: 'error',
                    title: errorTitle,
                    text: errorMessage,
                    confirmButtonColor: '#3085d6'
                });
                
                // Reset button
                btn.html(originalHtml).prop('disabled', false);
                
                // FIELD LOKASI TETAP READONLY
                $('#lokasi').prop('readonly', true);
                
                // Tampilkan error pada field lokasi
                $('#lokasi').addClass('is-invalid');
                if ($('.invalid-feedback-lokasi').length === 0) {
                    $('#lokasi').after('<div class="invalid-feedback-lokasi text-danger">' + errorMessage.split('\n')[0] + ' Silakan refresh halaman dan coba lagi.</div>');
                }
                
                // Tetap disable tombol simpan karena lokasi belum terisi
                $('#btnSimpan').prop('disabled', true);
            },
            {
                enableHighAccuracy: true,
                timeout: 15000,
                maximumAge: 0
            }
        );
    });
    
    // Validasi tanggal janji
    $('#tgl_janji').on('change', function() {
        var selectedDate = $(this).val();
        var today = new Date().toISOString().split('T')[0];
        
        if (selectedDate < today) {
            Swal.fire({
                icon: 'error',
                title: 'Tanggal Tidak Valid',
                text: 'Tanggal janji bayar tidak boleh kurang dari hari ini!',
                confirmButtonColor: '#3085d6'
            });
            $(this).val('');
        }
    });
    
    // Tampilkan input sanksi lainnya jika memilih "Lainnya"
    $('#sanksi').on('change', function() {
        if ($(this).val() === 'Lainnya') {
            $('#sanksi_lainnya_group').show();
        } else {
            $('#sanksi_lainnya_group').hide();
            $('#sanksi_lainnya').val('');
        }
    });
    
    // Validasi form sebelum submit
    $('#formPenagihan').on('submit', function(e) {
        var tglJanji = $('#tgl_janji').val();
        var today = new Date().toISOString().split('T')[0];
        var lokasi = $('#lokasi').val();
        var latitude = $('#latitude').val();
        var longitude = $('#longitude').val();
        
        // Validasi tanggal janji
        if (!tglJanji) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Validasi Gagal',
                text: 'Tanggal janji bayar wajib diisi!',
                confirmButtonColor: '#3085d6'
            });
            $('#tgl_janji').focus();
            return false;
        }
        
        if (tglJanji < today) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Validasi Gagal',
                text: 'Tanggal janji bayar tidak boleh kurang dari hari ini!',
                confirmButtonColor: '#3085d6'
            });
            $('#tgl_janji').focus();
            return false;
        }
        
        // Validasi lokasi wajib diisi
        if (!lokasi || lokasi.trim() === '') {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Lokasi Wajib Diisi',
                text: 'Lokasi penagihan WAJIB diisi! Klik tombol "Get Location" untuk mendapatkan lokasi otomatis.',
                confirmButtonColor: '#3085d6'
            });
            $('#lokasi').addClass('is-invalid');
            if ($('.invalid-feedback-lokasi').length === 0) {
                $('#lokasi').after('<div class="invalid-feedback-lokasi text-danger">Lokasi wajib diisi! Klik tombol "Get Location".</div>');
            }
            return false;
        }
        
        // Validasi koordinat
        if (!latitude || !longitude) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Koordinat Tidak Valid',
                text: 'Koordinat lokasi tidak valid! Silakan klik tombol "Get Location" kembali.',
                confirmButtonColor: '#3085d6'
            });
            return false;
        }
        
        // Jika sanksi = Lainnya, ambil nilai dari input sanksi_lainnya
        if ($('#sanksi').val() === 'Lainnya') {
            var sanksiLainnya = $('#sanksi_lainnya').val();
            if (!sanksiLainnya || sanksiLainnya.trim() === '') {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Gagal',
                    text: 'Silakan isi sanksi lainnya!',
                    confirmButtonColor: '#3085d6'
                });
                $('#sanksi_lainnya').focus();
                return false;
            }
            $('#sanksi').val(sanksiLainnya);
        }
        
        // Konfirmasi sebelum submit
        e.preventDefault();
        
        Swal.fire({
            title: 'Konfirmasi Simpan',
            text: 'Apakah data penagihan sudah benar dan lengkap?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Simpan!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                showLoading();
                $('#formPenagihan')[0].submit();
            }
        });
        
        return false;
    });
    
    // Reset form saat modal ditutup
    $('#modalTagihan').on('hidden.bs.modal', function() {
        $('#lokasi').val('').prop('readonly', true).removeClass('is-invalid');
        $('.invalid-feedback-lokasi').remove();
        $('#latitude').val('');
        $('#longitude').val('');
        $('#sanksi_lainnya_group').hide();
        $('#sanksi_lainnya').val('');
        $('#tgl_janji').val('');
        $('#nominal_dibayar').val('');
        $('#sanksi').val('');
        $('#keterangan').val('');
        $('#btnSimpan').prop('disabled', true);
    });
    
    // Saat modal dibuka, pastikan field lokasi siap
    $('#modalTagihan').on('shown.bs.modal', function() {
        $('#lokasi').val('').prop('readonly', true).removeClass('is-invalid');
        $('.invalid-feedback-lokasi').remove();
        $('#btnSimpan').prop('disabled', true);
    });
    
    // Tampilkan toast notification jika ada session success
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: '{{ session('success') }}',
            timer: 3000,
            showConfirmButton: false
        });
    @endif
    
    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: '{{ session('error') }}',
            confirmButtonColor: '#3085d6'
        });
    @endif
    
    @if($errors->any())
        Swal.fire({
            icon: 'error',
            title: 'Error Validasi',
            text: '{{ $errors->first() }}',
            confirmButtonColor: '#3085d6'
        });
    @endif
});
</script>
@endpush