@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">
                            @if($isFilterApplied && $selectedDate && $totalCount > 0)
                            <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>
                            @endif
                        </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 <span class="text-danger">*</span></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 (Wajib dipilih)</small>
                                    </div>
                                </div>
                                
                                <!-- 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="low_quality" {{ request('kolek_filter', 'low_quality') == '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>
                                            <option value="all" {{ request('kolek_filter') == 'all' ? 'selected' : '' }}>
                                                Semua Kredit Menunggak
                                            </option>
                                        </select>
                                    </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" id="btnTampilkanData">
                                                <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" id="btnReset">
                                                <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 & Periode Data -->
                        <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($isFilterApplied && $selectedDate)
                                        @if(request('kolek_filter', 'low_quality') == 'all')
                                            📊 Menampilkan <strong>Semua Kredit Menunggak</strong>
                                        @elseif(request('kolek_filter', 'low_quality') == '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
                                    @else
                                        📊 Silakan pilih tanggal untuk melihat data
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="alert alert-success mb-0">
                                    <i class="ik ik-calendar"></i> 
                                    <strong>Periode Data Tersedia:</strong><br>
                                    @if(isset($availableDates) && count($availableDates) > 0)
                                        📅 {{ date('d-m-Y', strtotime(end($availableDates))) }} 
                                        s/d {{ date('d-m-Y', strtotime($availableDates[0])) }}
                                        <br>
                                        <small class="text-muted">Total {{ count($availableDates) }} periode data</small>
                                    @else
                                        <span class="text-muted">Tidak ada data</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        
                        <!-- Info Tambahan Total Data (hanya jika filter diterapkan) -->
                        @if($isFilterApplied && $selectedDate)
                        <div class="row mb-2">
                            <div class="col-md-12">
                                <div class="alert alert-success alert-sm" style="padding: 8px 12px; background: #e8f5e9;">
                                    <i class="ik ik-check-circle"></i> 
                                    <strong>Total Data ditemukan:</strong> {{ number_format($totalCount) }} records
                                    @if(request('kolek_filter') == 'npl')
                                        <span class="text-danger">⚠️ Data kredit bermasalah - prioritas penagihan!</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endif
                        
                        <!-- 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>
                                @if($isFilterApplied && $selectedDate)
                                    Menampilkan data tanggal: {{ $formattedDate }}
                                @else
                                    Silakan pilih tanggal terlebih dahulu
                                @endif
                            </strong>
                            <br>
                            <small>
                                @if($isFilterApplied && $selectedDate)
                                    @if(isset($availableDates) && count($availableDates) > 0)
                                        * Periode data tersedia: 
                                        {{ date('d-m-Y', strtotime(end($availableDates))) }} 
                                        s/d {{ date('d-m-Y', strtotime($availableDates[0])) }}
                                    @endif
                                @else
                                    * Pilih tanggal pada form di atas, lalu klik "Tampilkan Data"
                                @endif
                            </small>
                        </div>
                        
                        <!-- Search Section - Hanya tampil jika filter diterapkan -->
                        @if($isFilterApplied && $selectedDate)
                        <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 Pencarian
                                                </a>
                                            @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 }}">
                            <input type="hidden" name="kolek_filter" value="{{ $kolekFilter }}">
                        </form>
                        @endif
                        
                        <!-- Sorting hint - hanya tampil jika filter diterapkan dan ada data -->
                        @if($isFilterApplied && $selectedDate && $totalCount > 0)
                        <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>
                        @endif

                        <!-- 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">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">No. Rekening</span>
                                            @endif
                                        </th>
                                        <th class="sortable">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Nama Debitur</span>
                                            @endif
                                        </th>
                                        <th class="sortable text-center">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Kolek</span>
                                            @endif
                                        </th>
                                        <th class="sortable text-center">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Tgl.Mulai</span>
                                            @endif
                                        </th>
                                        <th class="sortable text-center">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Tgl.JthTempo</span>
                                            @endif
                                        </th>
                                        <th class="sortable text-center">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Kualitas</span>
                                            @endif
                                        </th>
                                        <th class="sortable text-right">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Baki Debet</span>
                                            @endif
                                        </th>
                                        <th class="sortable">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Kota/Kab</span>
                                            @endif
                                        </th>
                                        <th class="sortable text-center">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Jml Tagih Pokok</span>
                                            @endif
                                        </th>
                                        <th class="sortable text-right">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Nominal Tagih Pokok</span>
                                            @endif
                                        </th>
                                        <th class="sortable text-center">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Jml Tagih Bunga</span>
                                            @endif
                                        </th>
                                        <th class="sortable text-right">
                                            @if($isFilterApplied && $selectedDate)
                                            <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>
                                            @else
                                                <span class="sort-link disabled">Nominal Tagih Bunga</span>
                                            @endif
                                        </th>
                                        <th class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                    @if(!$isFilterApplied || !$selectedDate)
                                        <tr id="emptyRow">
                                            <td colspan="13" class="text-center text-muted" style="padding: 60px 20px;">
                                                <i class="ik ik-calendar" style="font-size: 64px; opacity: 0.3; display: block; margin-bottom: 15px;"></i>
                                                <strong style="font-size: 18px;">Silakan pilih tanggal terlebih dahulu</strong><br>
                                                <small>Pilih tanggal pada form filter di atas, lalu klik tombol "Tampilkan Data"</small>
                                                <br><br>
                                                <small class="text-muted">📅 Periode data tersedia: 
                                                    @if(isset($availableDates) && count($availableDates) > 0)
                                                        {{ date('d-m-Y', strtotime(end($availableDates))) }} 
                                                        s/d {{ date('d-m-Y', strtotime($availableDates[0])) }}
                                                    @else
                                                        Tidak ada data
                                                    @endif
                                                </small>
                                            </td>
                                        </tr>
                                    @elseif(count($nominatif) > 0)
                                        @foreach ($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>
                                        @endforeach
                                    @else
                                        <tr id="emptyRow">
                                            <td colspan="13" class="text-center text-muted" style="padding: 50px 20px;">
                                                <i class="ik ik-alert-circle" style="font-size: 48px; opacity: 0.3; display: block; margin-bottom: 10px;"></i>
                                                Tidak ada data untuk tanggal <strong>{{ $formattedDate }}</strong> 
                                                dengan filter yang dipilih
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination - Hanya tampil jika ada data -->
                        @if($isFilterApplied && $selectedDate && count($nominatif) > 0)
                        <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>
                        @endif
                    </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">
                        <!-- Tab Informasi Umum -->
                        <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">
                                        <tbody>
                                            <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>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-bordered table-striped">
                                        <tbody>
                                            <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>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tab Informasi Kredit -->
                        <div class="tab-pane fade" id="infoKredit" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-bordered table-striped">
                                        <tbody>
                                            <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>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-bordered table-striped">
                                        <tbody>
                                            <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>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tab Informasi Agunan -->
                        <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>
                        
                        <!-- Tab Riwayat Penagihan - DIPERBAIKI -->
                        <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 dengan Upload Gambar (HANYA SATU KALI) -->
<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-image"></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" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <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>
                        <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="foto_penagihan">Foto Penagihan <span class="text-danger">*</span></label>
                                <div class="custom-file">
                                    <input type="file" name="foto_penagihan" id="foto_penagihan" class="custom-file-input" accept="image/jpeg,image/png,image/jpg" required>
                                    <label class="custom-file-label" for="foto_penagihan">Pilih file foto...</label>
                                </div>
                                <small class="text-muted">Format: JPEG, PNG, JPG (Max 5MB)</small>
                                <div id="fotoPreview" style="display: none; margin-top: 10px;">
                                    <img id="previewImage" src="#" alt="Preview Foto" style="max-width: 100%; max-height: 200px; border-radius: 8px; border: 1px solid #ddd;">
                                </div>
                            </div>
                            <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 class="alert alert-info mt-2">
                                <i class="ik ik-info"></i> 
                                <strong>Informasi Lokasi:</strong><br>
                                <small>📍 Lokasi akan otomatis terekam dari metadata foto jika diambil dengan smartphone dan GPS aktif.</small>
                            </div>
                        </div>
                    </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; }
    .sort-link.disabled { color: #6c757d; cursor: default; pointer-events: none; }
    @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; }
    .modal-xl { max-width: 1200px; }
    #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');
    
    let isLoading = false;
    
    function showLoading() { if (!isLoading) { isLoading = true; $('#loadingOverlay').fadeIn(200); } }
    function hideLoading() { isLoading = false; $('#loadingOverlay').fadeOut(200); }
    
    $('[data-toggle="tooltip"]').tooltip();
    
    function hasDateFilter() { return $('#filter_date').val() !== ''; }
    
    $('#perPage').on('change', function() {
        if (hasDateFilter()) { showLoading(); $('#filterForm').submit(); }
        else {
            var previousValue = '{{ request('per_page', 10) }}';
            Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Silakan pilih tanggal terlebih dahulu sebelum mengubah jumlah baris per halaman!', confirmButtonColor: '#3085d6' }).then(() => { $('#perPage').val(previousValue); });
            return false;
        }
    });
    
    $('#filterForm').on('submit', function(e) {
        var selectedDate = $('#filter_date').val();
        if (!selectedDate) {
            e.preventDefault(); e.stopPropagation();
            Swal.fire({ icon: 'warning', title: 'Tanggal Wajib Dipilih', text: 'Silakan pilih tanggal terlebih dahulu sebelum menampilkan data!', confirmButtonColor: '#3085d6' });
            return false;
        }
        showLoading();
        return true;
    });
    
    $('#searchForm').on('submit', function(e) {
        if (!hasDateFilter()) { e.preventDefault(); Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Silakan pilih tanggal terlebih dahulu!', confirmButtonColor: '#3085d6' }); return false; }
        showLoading();
        return true;
    });
    
    $(document).on('click', '.pagination a, .sort-link:not(.disabled)', function(e) {
        if (!hasDateFilter()) { e.preventDefault(); e.stopPropagation(); Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Silakan pilih tanggal terlebih dahulu!', confirmButtonColor: '#3085d6', timer: 2000 }); return false; }
        showLoading();
        return true;
    });
    
    $('#exportBtn').on('click', function(e) {
        if (!hasDateFilter()) { e.preventDefault(); Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Silakan pilih tanggal terlebih dahulu sebelum export!', confirmButtonColor: '#3085d6' }); return false; }
        showLoading();
        return true;
    });
    
    $('#btnReset').on('click', function(e) { e.preventDefault(); window.location.href = '{{ route("daftartagih.index") }}'; });
    $(window).on('load', function() { setTimeout(function() { hideLoading(); }, 500); });
    
    // MODAL DETAIL
    $(document).on('click', '.btn-detail', function() {
        var idkredit = $(this).data('idkredit');
        $('#detailLoading').show();
        $('#detailContent').hide();
        $('#modalDetail').modal('show');
        
        $.ajax({
            url: '{{ route("daftartagih.detail") }}',
            method: 'GET',
            data: { idkredit: idkredit },
            success: function(response) {
                $('#detailLoading').hide();
                $('#detailContent').show();
                if (response.success) {
                    var data = response.data;
                    $('#detail_idkredit').text(data.idkredit || '-');
                    $('#detail_norekening').text(data.norekening || '-');
                    $('#detail_nama').text(data.namadebitur || '-');
                    $('#detail_alamat').text(data.alamat || '-');
                    $('#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 || '-');
                    $('#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_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 || '-');
                    
                    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><td>' + (r.waktutagih || '-') + '</td><td>' + (r.tgl_janji || '-') + '</td><td class="text-right">' + formatRupiah(r.nominal_tagih) + '</td><td>' + (r.sanksi_debitur || '-') + '</td><td>' + (r.lokasi_penagihan || '-') + '</td><td>' + (r.keterangan_tagih || '-') + '</td></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>');
                }
            },
            error: function() {
                $('#detailLoading').hide();
                $('#detailContent').html('<div class="alert alert-danger">Terjadi kesalahan. Silakan coba lagi.</div>');
                $('#detailContent').show();
            }
        });
    });
    
    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
    $(document).on('click', '.btn-tagihan', function() {
        var idkredit = $(this).data('idkredit');
        var norekening = $(this).data('norekening');
        var nama = $(this).data('nama');
        var kolek = $(this).data('kolek');
        
        $('#idkredit_modal').val(idkredit);
        $('#norekening_modal').val(norekening);
        $('#nama_debitur_modal').val(nama);
        
        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>');
        
        $('#tgl_janji').val('');
        $('#nominal_dibayar').val('');
        $('#sanksi').val('');
        $('#keterangan').val('');
        $('#sanksi_lainnya_group').hide();
        $('#sanksi_lainnya').val('');
        $('#foto_penagihan').val('');
        $('#fotoPreview').hide();
        $('#previewImage').attr('src', '#');
        $('.custom-file-label').html('Pilih file foto...');
        
        var today = new Date().toISOString().split('T')[0];
        $('#tgl_janji').attr('min', today);
        $('#btnSimpan').prop('disabled', true);
        $('#modalTagihan').modal('show');
    });
    
    $('#foto_penagihan').on('change', function(e) {
        var file = e.target.files[0];
        var previewDiv = $('#fotoPreview');
        var previewImg = $('#previewImage');
        var fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').html(fileName);
        if (file) {
            var validTypes = ['image/jpeg', 'image/png', 'image/jpg'];
            if (!validTypes.includes(file.type)) { Swal.fire({ icon: 'error', title: 'Format Tidak Valid', text: 'Hanya file JPEG, PNG, JPG yang diperbolehkan!' }); $(this).val(''); $(this).next('.custom-file-label').html('Pilih file foto...'); previewDiv.hide(); $('#btnSimpan').prop('disabled', true); return false; }
            if (file.size > 5 * 1024 * 1024) { Swal.fire({ icon: 'error', title: 'Ukuran Terlalu Besar', text: 'Ukuran file maksimal 5MB!' }); $(this).val(''); $(this).next('.custom-file-label').html('Pilih file foto...'); previewDiv.hide(); $('#btnSimpan').prop('disabled', true); return false; }
            var reader = new FileReader();
            reader.onload = function(e) { previewImg.attr('src', e.target.result); previewDiv.show(); };
            reader.readAsDataURL(file);
            Swal.fire({ icon: 'info', title: 'Informasi Lokasi', html: '<i class="ik ik-map-pin"></i> Lokasi akan otomatis terekam dari <strong>metadata foto</strong><br><small>Pastikan: Foto diambil dengan SMARTPHONE & GPS AKTIF</small>', timer: 4000, showConfirmButton: true, confirmButtonText: 'Mengerti' });
            $('#btnSimpan').prop('disabled', false);
        } else { previewDiv.hide(); $('#btnSimpan').prop('disabled', true); }
    });
    
    $('#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!' }); $(this).val(''); } });
    
    $('#sanksi').on('change', function() { if ($(this).val() === 'Lainnya') { $('#sanksi_lainnya_group').show(); } else { $('#sanksi_lainnya_group').hide(); $('#sanksi_lainnya').val(''); } });
    
    $('#formPenagihan').on('submit', function(e) {
        var tglJanji = $('#tgl_janji').val();
        var today = new Date().toISOString().split('T')[0];
        var foto = $('#foto_penagihan').val();
        if (!tglJanji) { e.preventDefault(); Swal.fire({ icon: 'error', title: 'Validasi Gagal', text: 'Tanggal janji bayar wajib diisi!' }); $('#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!' }); $('#tgl_janji').focus(); return false; }
        if (!foto) { e.preventDefault(); Swal.fire({ icon: 'error', title: 'Foto Wajib Diupload', text: 'Silakan pilih foto penagihan terlebih dahulu!' }); return false; }
        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!' }); $('#sanksi_lainnya').focus(); return false; } $('#sanksi').val(sanksiLainnya); }
        e.preventDefault();
        Swal.fire({ title: 'Konfirmasi Simpan', html: 'Apakah data penagihan sudah benar dan foto sudah sesuai?<br><small class="text-muted">📍 Lokasi akan diambil dari metadata foto (EXIF)</small>', icon: 'question', showCancelButton: true, confirmButtonColor: '#28a745', cancelButtonColor: '#d33', confirmButtonText: 'Ya, Simpan!', cancelButtonText: 'Batal' }).then((result) => { if (result.isConfirmed) { showLoading(); $('#formPenagihan')[0].submit(); } });
        return false;
    });
    
    $('#modalTagihan').on('hidden.bs.modal', function() {
        $('#foto_penagihan').val(''); $('#fotoPreview').hide(); $('#previewImage').attr('src', '#'); $('.custom-file-label').html('Pilih file foto...'); $('#sanksi_lainnya_group').hide(); $('#sanksi_lainnya').val(''); $('#tgl_janji').val(''); $('#nominal_dibayar').val(''); $('#sanksi').val(''); $('#keterangan').val(''); $('#btnSimpan').prop('disabled', true);
    });
    
    @if(session('success')) Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', timer: 4000, 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