@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 NPL</h5>
                            <span>Menampilkan daftar tagih nasabah kredit 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 active" aria-current="page">Daftar Tagih Kredit NPL</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('daftartagihnpl.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('daftartagihnpl.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 (contoh: 2026-04-15)</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-3">
                                    <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-4">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <div>
                                            <a href="{{ route('daftartagihnpl.index') }}" class="btn btn-secondary btn-block">
                                                <i class="ik ik-refresh-cw"></i> Reset ke Tanggal Terbaru
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <input type="hidden" name="sort_by" value="{{ $sortBy }}">
                            <input type="hidden" name="sort_direction" value="{{ $sortDirection }}">
                        </form>
                        
                        <!-- 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>
                                <!-- * Data dalam database menggunakan format <strong>YYYYMMDD</strong> (contoh: 20260415)
                                <br> -->
                                * 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('daftartagihnpl.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('daftartagihnpl.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('daftartagihnpl.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('daftartagihnpl.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('daftartagihnpl.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('daftartagihnpl.index', array_merge(request()->query(), ['sort_by' => 'tglmulai', 'sort_direction' => ($sortBy == 'tglmulai' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                tglmulai
                                                @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('daftartagihnpl.index', array_merge(request()->query(), ['sort_by' => 'tgljthtempo', 'sort_direction' => ($sortBy == 'tgljthtempo' && $sortDirection == 'asc') ? 'desc' : 'asc'])) }}" class="sort-link">
                                                tgljthtempo
                                                @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('daftartagihnpl.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('daftartagihnpl.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('daftartagihnpl.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('daftartagihnpl.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('daftartagihnpl.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('daftartagihnpl.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('daftartagihnpl.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">
                                            <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="modal" 
                                                    data-target="#modalTagihan">
                                                <i class="ik ik-edit"></i> Entry Tagihan
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr id="emptyRow">
                                        <td colspan="11" 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 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('daftartagihnpl.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; }
    }
    
    .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;
    }
</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');
    
    // 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 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