@extends('layouts.apex')

@php
// Helper function to format currency with rounding (no decimals)
function formatCurrencyRound($number) {
    if ($number === null || $number === '' || !is_numeric($number)) {
        return 'Rp 0';
    }
    // Round to nearest integer, then format
    $rounded = round($number);
    return 'Rp ' . number_format($rounded, 0, ',', '.');
}

// Helper function to format large numbers in short format (Rb, Jt, M, T)
function formatLargeNumberRp($number) {
    if ($number === null || $number === '' || !is_numeric($number)) {
        return 'Rp 0';
    }

    // Round to nearest integer first
    $num = round(abs($number));
    $sign = $number < 0 ? '-' : '';
    $formatted = '';

    if ($num >= 1000000000000) {
        // Triliun
        $formatted = $sign . 'Rp ' . number_format($num / 1000000000000, 2, ',', '.') . ' T';
    } elseif ($num >= 1000000000) {
        // Miliar
        $formatted = $sign . 'Rp ' . number_format($num / 1000000000, 2, ',', '.') . ' M';
    } elseif ($num >= 1000000) {
        // Juta
        $formatted = $sign . 'Rp ' . number_format($num / 1000000, 2, ',', '.') . ' Jt';
    } elseif ($num >= 1000) {
        // Ribu
        $formatted = $sign . 'Rp ' . number_format($num / 1000, 2, ',', '.') . ' Rb';
    } else {
        $formatted = 'Rp ' . number_format($num, 0, ',', '.');
    }

    return $formatted;
}
@endphp

@section('title', 'Piutang')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Piutang</h1>
            <p class="page-header-subtitle">Pencatatan penerimaan piutang dari customer</p>
        </div>
        <div style="display: flex; gap: 0.5rem;">
            <button type="button" class="btn btn-secondary" onclick="syncFromPanen()">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Sync Panen
            </button>
            <button type="button" class="btn btn-success" onclick="syncAll()">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Sync Semua
            </button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#piutangModal">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Pembayaran Piutang
            </button>
        </div>
    </div>
</div>

<div class="page-body">
    <!-- Summary Cards -->
    <div class="stat-grid">
        <div class="stat-card"style="display:none">
            <div class="stat-icon primary">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                </svg>
            </div>
            <div class="stat-label">Total Transaksi</div>
            <div class="stat-value" id="summaryTotalTrans">{{ $summary->total_transactions ?? 0 }}</div>
        </div>
        <div class="stat-card"style="display:none">
            <div class="stat-icon info">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div class="stat-label">Total Tagihan</div>
            <div class="stat-value" id="summaryTotalTagihan">Rp {{ number_format($summary->total_tagihan ?? 0, 0) }}</div>
        </div>
        <div class="stat-card"style="display:none">
            <div class="stat-icon success">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <div class="stat-label">Total Bayar</div>
            <div class="stat-value" id="summaryTotalBayar">Rp {{ number_format($summary->total_bayar ?? 0, 0) }}</div>
        </div>
        <div class="stat-card"style="width: 250px;height: 250px">
            <div class="stat-icon warning">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div class="stat-label">Sisa Piutang</div>
            <div class="stat-value" id="summarySisa">{{ formatCurrencyRound($summary->total_sisa ?? 0) }}</div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Riwayat Piutang</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="piutangTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>No. Bukti</th>
                            <th>Tanggal</th>
                            <th>Customer</th>
                            <th>Keterangan</th>
                            <th>Total Tagihan</th>
                            <th>Total Bayar</th>
                            <th>Sisa</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Piutang Modal -->
<div id="piutangModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width: 1200px;">
        <div class="modal-content">
            <form id="piutangForm" action="{{ route('piutang.store') }}" method="POST" novalidate>
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="piutangModalTitle">Piutang Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="edit_no_bukti" name="edit_no_bukti" value="">

                    <!-- Master Section -->
                    <div class="row" style="margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #dee2e6;">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Nomor Bukti</label>
                                <input type="text" name="no_bukti" id="no_bukti" class="form-control" placeholder="Menunggu generate..." readonly>
                                <small class="form-text text-muted" id="no_bukti_help">Pilih tanggal untuk generate nomor bukti otomatis</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Tanggal *</label>
                                <input type="date" name="tanggal" id="tanggal" class="form-control" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Customer *</label>
                                <select name="customer" id="customer" class="form-control form-select select2-customer" required>
                                    <option value="">Pilih Customer</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->nama }}" data-nama-bank="{{ $customer->nama_bank ?? '' }}" data-nomor-rekening="{{ $customer->nomor_rekening ?? '' }}" data-atas-nama="{{ $customer->atas_nama ?? '' }}">{{ $customer->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Akun Bank</label>
                                <select name="akun" id="akun" class="form-control form-select select2-akun">
                                    <option value="">Pilih Akun Bank</option>
                                    @foreach($ledgers as $ledger)
                                        <option value="{{ $ledger->id }}">{{ $ledger->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12" id="customerBankInfo" style="display: none;">
                            <div class="alert alert-info" style="padding: 0.5rem 1rem; margin-bottom: 0;">
                                <strong>Info Rekening Customer:</strong>
                                <span id="customerBankDetails"></span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Keterangan</label>
                                <textarea name="keterangan" id="keterangan" class="form-control" rows="1" placeholder="Catatan tambahan..."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Detail Table Section -->
                    <div style="margin-bottom: 1.5rem;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                            <div style="display: flex; align-items: center; gap: 1rem;">
                                <h6 style="margin: 0;">Detail Pembayaran</h6>
                                <span class="badge badge-primary" id="rowCount" style="background: #007bff; color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.875rem;">
                                    0 baris
                                </span>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" id="btnPilihNoBukti" onclick="openPilihNoBuktiModal()" disabled>
                                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle; margin-right: 0.25rem;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                                </svg>
                                Pilih Nomor Bukti
                            </button>
                        </div>

                        <div style="overflow-x: auto;">
                            <table class="table table-bordered" id="piutangTableForm">
                                <thead>
                                    <tr>
                                        <th style="width: 50px;">No</th>
                                        <th style="width: 150px;">Nomor Transaksi</th>
                                        <th style="width: 100px;">Tanggal</th>
                                        <th style="width: 120px;">Tagihan</th>
                                        <th style="width: 120px;">Sudah Dibayar</th>
                                        <th style="width: 120px;">Sisa</th>
                                        <th style="width: 150px;">Jumlah Bayar</th>
                                        <th style="width: 50px;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="piutangTableBody">
                                    <!-- Rows will be added dynamically -->
                                </tbody>
                                <tfoot>
                                    <tr style="background-color: #f8f9fa; font-weight: bold;">
                                        <td colspan="6" style="text-align: right;">Total Bayar:</td>
                                        <td id="grandTotal">Rp 0</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="submitBtn" formnovalidate>
                        <span id="submitBtnText">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            Simpan Data Piutang
                        </span>
                        <span id="submitBtnLoading" class="d-none">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="width: 1rem; height: 1rem; border-width: 0.15em; margin-right: 0.5rem; display: inline-block;"></span>
                            <span style="display: inline-block;">Menyimpan...</span>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Pilih Nomor Bukti -->
<div id="pilihNoBuktiModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width: 1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pilih Nomor Bukti</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Filter Section -->
                <div class="row" style="margin-bottom: 1rem;">
                    <div class="col-md-4">
                        <input type="text" id="searchNoBukti" class="form-control" placeholder="Cari nomor bukti...">
                    </div>
                    <div class="col-md-3">
                        <select id="filterStatus" class="form-control">
                            <option value="">Semua Status</option>
                            <option value="belum_lunas">Belum Lunas</option>
                            <option value="lunas">Sudah Lunas</option>
                        </select>
                    </div>
                    <div class="col-md-5">
                        <div style="display: flex; gap: 0.5rem;">
                            <button type="button" class="btn btn-sm btn-primary" onclick="applyFilter()">
                                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                                </svg>
                                Filter
                            </button>
                            <button type="button" class="btn btn-sm btn-success" onclick="selectAllVisible()">
                                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                Pilih Semua
                            </button>
                            <button type="button" class="btn btn-sm btn-secondary" onclick="clearAllSelection()">
                                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                                Batal Pilih
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Summary -->
                <div class="alert alert-info" style="padding: 0.5rem 1rem; margin-bottom: 1rem;">
                    <strong>Terpilih:</strong> <span id="selectedCount">0</span> nomor bukti |
                    <strong style="display:none">Total Tagihan:</strong> <span style="display:none" id="selectedTotalTagihan">Rp 0</span> |
                    <strong>Total Sisa (yang harus dibayar):</strong> <span id="selectedTotalSisa">Rp 0</span>
                </div>

                <!-- Table -->
                <div style="overflow-x: auto; max-height: 400px; overflow-y: auto;">
                    <table class="table table-striped table-hover table-sm" id="pilihNoBuktiTable">
                        <thead style="position: sticky; top: 0; background: #fff; z-index: 10;">
                            <tr>
                                <th style="width: 50px;">
                                    <input type="checkbox" id="checkAllNoBukti" onchange="toggleCheckAll(this)">
                                </th>
                                <th>No. Bukti</th>
                                <th>Tanggal</th>
                                <th>Tagihan</th>
                                <th>Sudah Dibayar</th>
                                <th>Sisa</th>
                                <th style="display:none">Jml Item</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="pilihNoBuktiTableBody">
                            <tr>
                                <td colspan="8" class="text-center">Pilih customer terlebih dahulu</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" onclick="confirmPilihNoBukti()">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle; margin-right: 0.25rem;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Tambahkan yang Dipilih
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<style>
.swal2-popup-on-top {
    z-index: 99999 !important;
}
.swal2-backdrop-show {
    z-index: 99998 !important;
}
.aktivitas-lunas {
    background-color: rgba(40, 167, 69, 0.2);
}
.sync-buttons {
    display: flex;
    gap: 0.5rem;
}
</style>
<script>
// Global variables
let piutangTable;
let globalRowCounter = 0;
let isSubmitting = false;
let selectedAktivitasIds = []; // IDs of aktivitas selected in the popup
let availableAktivitasData = []; // All available aktivitas data for current customer

// Sync functions
window.syncFromPanen = function() {
    Swal.fire({
        title: 'Sync dari Panen',
        text: 'Sinkronisasi piutang dari data panen. Lanjutkan?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Sync',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Memproses...',
                html: 'Sedang sinkronisasi data dari panen',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: "{{ route('piutang.sync.panen') }}",
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.message || 'Sync dari panen selesai',
                        timer: 3000,
                        showConfirmButton: false
                    });

                    $('#piutangTable').DataTable().ajax.reload(null, false);
                    updateSummaryCards();
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Gagal sync dari panen'
                    });
                }
            });
        }
    });
};

window.syncAll = function() {
    Swal.fire({
        title: 'Sync Semua Data',
        text: 'Sinkronisasi piutang dari panen. Lanjutkan?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Sync Semua',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Memproses...',
                html: 'Sedang sinkronisasi semua data',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: "{{ route('piutang.sync.all') }}",
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    let message = response.message || 'Sync selesai';
                    if (response.panen) {
                        message = `Panen: Dibuat ${response.panen.created}, Diupdate ${response.panen.updated}`;
                    }

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: message,
                        timer: 4000,
                        showConfirmButton: false
                    });

                    $('#piutangTable').DataTable().ajax.reload(null, false);
                    updateSummaryCards();
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Gagal sync semua data'
                    });
                }
            });
        }
    });
};

// Update summary cards
window.updateSummaryCards = function() {
    $.ajax({
        url: '{{ route('piutang.summary') }}',
        method: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                $('#summaryTotalTrans').text(response.data.total_transactions || 0);
                $('#summaryTotalTagihan').text(formatCurrencyRound(response.data.total_tagihan || 0));
                $('#summaryTotalBayar').text(formatCurrencyRound(response.data.total_bayar || 0));
                $('#summarySisa').text(formatCurrencyRound(response.data.total_sisa || 0));
            }
        },
        error: function(xhr) {
            console.error('Failed to update summary:', xhr);
        }
    });
};

// Helper function to format numbers
window.formatNumber = function(number) {
    if (number === null || number === undefined || number === '' || isNaN(number)) {
        return '0';
    }
    return new Intl.NumberFormat('id-ID').format(number);
};

// Helper function to format large numbers in short format (Rb, Jt, M, T)
window.formatLargeNumber = function(number) {
    if (number === null || number === undefined || number === '' || isNaN(number)) {
        return 'Rp 0';
    }

    // Round to nearest integer first
    const num = Math.round(Math.abs(number));
    const sign = number < 0 ? '-' : '';
    let formatted = '';

    if (num >= 1000000000000) {
        // Triliun
        formatted = sign + 'Rp ' + (num / 1000000000000).toFixed(2) + ' T';
    } else if (num >= 1000000000) {
        // Miliar
        formatted = sign + 'Rp ' + (num / 1000000000).toFixed(2) + ' M';
    } else if (num >= 1000000) {
        // Juta
        formatted = sign + 'Rp ' + (num / 1000000).toFixed(2) + ' Jt';
    } else if (num >= 1000) {
        // Ribu
        formatted = sign + 'Rp ' + (num / 1000).toFixed(2) + ' Rb';
    } else {
        formatted = 'Rp ' + new Intl.NumberFormat('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(num);
    }

    return formatted;
};

// Helper function to format currency with rounding (no decimals)
window.formatCurrencyRound = function(number) {
    if (number === null || number === undefined || number === '' || isNaN(number)) {
        return 'Rp 0';
    }
    // Round to nearest integer, then format
    const rounded = Math.round(number);
    return 'Rp ' + new Intl.NumberFormat('id-ID').format(rounded);
};

// Helper function to format currency for input
window.formatCurrencyInput = function(value) {
    if (value === null || value === undefined || value === '' || isNaN(value)) {
        return '';
    }
    const number = parseFloat(value);
    if (number === 0) return '';
    return new Intl.NumberFormat('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 2 }).format(number);
};

// Helper function to parse Indonesian formatted number
window.parseFormattedNumber = function(formattedValue) {
    if (!formattedValue || formattedValue === '') return 0;
    // Remove all dots (thousand separators) and replace comma with dot
    const cleaned = formattedValue.replace(/\./g, '').replace(',', '.');
    return parseFloat(cleaned) || 0;
};

// Helper function to format number while typing
window.formatNumberTyping = function(value) {
    if (!value || value === '') return '';
    // Remove all non-numeric characters except comma
    let cleaned = value.toString().replace(/[^0-9,]/g, '');

    // Split by comma to handle decimal
    let parts = cleaned.split(',');
    let integerPart = parts[0];
    let decimalPart = parts.length > 1 ? parts[1] : '';

    // Format integer part with thousand separators (dots)
    if (integerPart) {
        integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }

    // Combine
    let result = integerPart;
    if (decimalPart) {
        result += ',' + decimalPart;
    }

    return result;
};

// Helper function to format dates
window.formatDate = function(dateString) {
    if (!dateString) return '-';
    const date = new Date(dateString);
    return date.toLocaleDateString('id-ID');
};

// Open modal to select nomor bukti
window.openPilihNoBuktiModal = function() {
    const customer = $('#customer').val();
    if (!customer) {
        Swal.fire({
            icon: 'info',
            title: 'Info',
            text: 'Pilih customer terlebih dahulu'
        });
        return;
    }

    // Load aktivitas data
    loadAktivitasData(customer);

    // Show modal
    const modalEl = document.getElementById('pilihNoBuktiModal');
    const modal = new bootstrap.Modal(modalEl);
    modal.show();
};

// Load aktivitas data for customer
window.loadAktivitasData = function(customer) {
    // Show loading
    $('#pilihNoBuktiTableBody').html('<tr><td colspan="8" class="text-center">Memuat data...</td></tr>');

    $.ajax({
        url: `{{ route('piutang.get-aktivitas-by-customer', ':customer') }}`.replace(':customer', customer),
        method: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                availableAktivitasData = response.data;
                renderAktivitasTable(availableAktivitasData);
            } else {
                $('#pilihNoBuktiTableBody').html('<tr><td colspan="8" class="text-center">Tidak ada data</td></tr>');
            }
        },
        error: function() {
            $('#pilihNoBuktiTableBody').html('<tr><td colspan="8" class="text-center text-danger">Gagal memuat data</td></tr>');
        }
    });
};

// Render aktivitas table with checkboxes
window.renderAktivitasTable = function(data) {
    if (data.length === 0) {
        $('#pilihNoBuktiTableBody').html('<tr><td colspan="8" class="text-center">Tidak ada nomor bukti untuk customer ini</td></tr>');
        return;
    }

    let html = '';
    data.forEach(function(item, index) {
        const isLunas = (item.sisa <= 0 || item.sisa === '0');
        const isChecked = selectedAktivitasIds.includes(item.no_transaksi) ? 'checked' : '';
        const rowClass = isLunas ? 'aktivitas-lunas' : '';

        html += `
            <tr class="${rowClass}" data-no-bukti="${item.no_transaksi}">
                <td>
                    <input type="checkbox" class="aktivitas-checkbox" value="${item.no_transaksi}" ${isChecked} onchange="updateSelectionSummary()">
                </td>
                <td>${item.no_transaksi}</td>
                <td>${formatDate(item.tanggal)}</td>
                <td>Rp ${formatNumber(item.tagihan)}</td>
                <td>Rp ${formatNumber(item.sudah_dibayar || 0)}</td>
                <td>${isLunas ? '<span class="badge badge-success">Lunas</span>' : 'Rp ' + formatNumber(item.sisa)}</td>
                <td style="display:none">${item.total_items || 1}</td>
                <td>${isLunas ? '<span class="badge badge-success">Lunas</span>' : '<span class="badge badge-warning">Belum Lunas</span>'}</td>
            </tr>
        `;
    });

    $('#pilihNoBuktiTableBody').html(html);
    updateSelectionSummary();
};

// Update selection summary
window.updateSelectionSummary = function() {
    const $checked = $('.aktivitas-checkbox:checked');
    const count = $checked.length;
    let totalTagihan = 0;
    let totalSisa = 0;

    $checked.each(function() {
        const noBukti = $(this).val();
        const item = availableAktivitasData.find(d => d.no_transaksi === noBukti);
        if (item) {
            totalTagihan += parseFloat(item.tagihan) || 0;
            totalSisa += parseFloat(item.sisa) || 0;
        }
    });

    $('#selectedCount').text(count);
    $('#selectedTotalTagihan').text('Rp ' + formatNumber(totalTagihan));
    $('#selectedTotalSisa').text('Rp ' + formatNumber(totalSisa));

    // Update check all checkbox
    const totalCheckboxes = $('.aktivitas-checkbox').length;
    const checkedCount = $checked.length;
    $('#checkAllNoBukti').prop('checked', totalCheckboxes > 0 && totalCheckboxes === checkedCount);
};

// Toggle check all
window.toggleCheckAll = function(checkbox) {
    const isChecked = $(checkbox).prop('checked');
    $('.aktivitas-checkbox:visible').prop('checked', isChecked).trigger('change');
};

// Select all visible
window.selectAllVisible = function() {
    $('.aktivitas-checkbox:visible').prop('checked', true).trigger('change');
};

// Clear all selection
window.clearAllSelection = function() {
    $('.aktivitas-checkbox').prop('checked', false).trigger('change');
};

// Apply filter
window.applyFilter = function() {
    const searchText = $('#searchNoBukti').val().toLowerCase();
    const filterStatus = $('#filterStatus').val();

    $('.aktivitas-checkbox').each(function() {
        const $row = $(this).closest('tr');
        const noBukti = $row.find('td:eq(1)').text().toLowerCase();
        const isLunas = $row.find('.badge-success').length > 0;

        let showRow = true;

        // Filter by search text
        if (searchText && !noBukti.includes(searchText)) {
            showRow = false;
        }

        // Filter by status
        if (filterStatus === 'belum_lunas' && isLunas) {
            showRow = false;
        } else if (filterStatus === 'lunas' && !isLunas) {
            showRow = false;
        }

        $row.toggle(showRow);
    });

    // Update check all checkbox state
    updateSelectionSummary();
};

// Confirm and add selected items
window.confirmPilihNoBukti = function() {
    const $checked = $('.aktivitas-checkbox:checked');

    if ($checked.length === 0) {
        Swal.fire({
            icon: 'info',
            title: 'Info',
            text: 'Pilih minimal satu nomor bukti'
        });
        return;
    }

    // Clear existing rows
    $('#piutangTableBody').empty();
    globalRowCounter = 0;
    selectedAktivitasIds = [];

    // Add selected items to main table
    $checked.each(function() {
        const noBukti = $(this).val();
        const item = availableAktivitasData.find(d => d.no_transaksi === noBukti);
        if (item) {
            addPiutangRowFromData(item);
            selectedAktivitasIds.push(item.no_transaksi);
        }
    });

    // Update row count
    updateRowCount();
    updateGrandTotal();

    // Close modal
    const modalEl = document.getElementById('pilihNoBuktiModal');
    const modal = bootstrap.Modal.getInstance(modalEl);
    if (modal) {
        modal.hide();
    }

    Swal.fire({
        icon: 'success',
        title: 'Berhasil',
        text: `${$checked.length} nomor bukti berhasil ditambahkan`,
        timer: 2000,
        showConfirmButton: false
    });
};

// Add row from aktivitas data
window.addPiutangRowFromData = function(item) {
    globalRowCounter++;
    const rowNumber = $('#piutangTableBody tr').length;
    const uniqueId = Date.now() + '_' + globalRowCounter;
    const isLunas = (item.sisa <= 0 || item.sisa === '0');

    const row = `
        <tr class="piutang-row" data-row-number="${rowNumber}" data-no-bukti="${item.no_transaksi}" ${isLunas ? 'style="background-color: rgba(40, 167, 69, 0.2);"' : ''}>
            <td>${rowNumber + 1}</td>
            <td>
                ${item.no_transaksi}
                <input type="hidden" name="items[${rowNumber}][aktivitas_id]" id="piutang_${uniqueId}_aktivitas_id" value="${item.aktivitas_id || ''}">
                <input type="hidden" name="items[${rowNumber}][no_transaksi]" id="piutang_${uniqueId}_no_transaksi" value="${item.no_transaksi}">
                <input type="hidden" name="items[${rowNumber}][tanggal]" id="piutang_${uniqueId}_tanggal" value="${item.tanggal}">
                <input type="hidden" name="items[${rowNumber}][tagihan]" id="piutang_${uniqueId}_tagihan" value="${item.tagihan}">
            </td>
            <td id="piutang_${uniqueId}_tanggal_display">${formatDate(item.tanggal)}</td>
            <td id="piutang_${uniqueId}_tagihan_display">Rp ${formatNumber(item.tagihan)}</td>
            <td id="piutang_${uniqueId}_sudah_dibayar_display">Rp ${formatNumber(item.sudah_dibayar || 0)}</td>
            <td id="piutang_${uniqueId}_sisa_display">${isLunas ? '<span style="font-weight: bold; color: #28a745;">Lunas</span>' : 'Rp ' + formatNumber(item.sisa)}</td>
            <td>
                <input type="text" name="items[${rowNumber}][jumlah_bayar]" id="piutang_${uniqueId}_jumlah_bayar"
                    class="form-control currency-input" placeholder="0" required
                    value="${formatCurrencyInput(isLunas ? 0 : item.sisa)}"
                    data-raw-value="${isLunas ? 0 : item.sisa}">
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger" onclick="removePiutangRow(this)">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </td>
        </tr>
    `;

    $('#piutangTableBody').append(row);

    // Setup dynamic sisa calculation and currency formatting
    const $jumlahBayarInput = $(`#piutang_${uniqueId}_jumlah_bayar`);
    $jumlahBayarInput.data('tagihan', item.tagihan);
    $jumlahBayarInput.data('sudah-dibayar', item.sudah_dibayar || 0);

    // Focus: select all for easy editing, keep formatted value
    $jumlahBayarInput.on('focus', function() {
        $(this).select();
    });

    // Blur: format as Indonesian currency
    $jumlahBayarInput.on('blur', function() {
        let value = parseFormattedNumber($(this).val());
        $(this).data('raw-value', value);
        if (value === 0) {
            $(this).val('');
        } else {
            $(this).val(formatCurrencyInput(value));
        }
        // Trigger calculation
        calculatePiutangRow(uniqueId);
    });

    // Input: format while typing and calculate
    $jumlahBayarInput.on('input', function(e) {
        const $this = $(this);
        const currentValue = $this.val();

        // Format while typing
        const formatted = formatNumberTyping(currentValue);
        $this.val(formatted);

        // Calculate raw value and store
        const rawValue = parseFormattedNumber(formatted);
        $this.data('raw-value', rawValue);

        // Update calculation
        const tagihan = parseFloat($this.data('tagihan')) || 0;
        const sudahDibayar = parseFloat($this.data('sudah-dibayar')) || 0;
        const sisaDinamis = tagihan - sudahDibayar - rawValue;
        const $row = $this.closest('tr');
        const $sisaDisplay = $row.find(`#piutang_${uniqueId}_sisa_display`);

        if (sisaDinamis <= 0) {
            $sisaDisplay.html('<span style="font-weight: bold; color: #28a745;">Lunas</span>');
            $row.css('background-color', 'rgba(40, 167, 69, 0.2)');
        } else {
            $sisaDisplay.text('Rp ' + formatNumber(sisaDinamis));
            $row.css('background-color', '');
        }

        // Update grand total in real-time
        updateGrandTotal();
    });

    // Handle paste event to ensure proper formatting
    $jumlahBayarInput.on('paste', function(e) {
        // Use setTimeout to allow the paste to complete before processing
        setTimeout(() => {
            const $this = $(this);
            const currentValue = $this.val();
            const formatted = formatNumberTyping(currentValue);
            $this.val(formatted);

            const rawValue = parseFormattedNumber(formatted);
            $this.data('raw-value', rawValue);

            // Trigger input event to update calculations
            $this.trigger('input');
        }, 0);
    });

    // Trigger calculation
    calculatePiutangRow(uniqueId);
};

// Calculate row total
window.calculatePiutangRow = function(uniqueId) {
    updateGrandTotal();
};

// Update grand total
window.updateGrandTotal = function() {
    let total = 0;
    $('#piutangTableBody tr').each(function() {
        const $input = $(this).find('[id*="_jumlah_bayar"]');
        // Use data-raw-value if available, otherwise parse the value
        let value = $input.data('raw-value');
        if (value === undefined || value === null) {
            value = parseFormattedNumber($input.val());
        }
        total += value || 0;
    });
    $('#grandTotal').text('Rp ' + formatNumber(total));
};

function updateRowCount() {
    const count = $('#piutangTableBody tr').length;
    const rowCountEl = $('#rowCount');
    rowCountEl.text(count + (count === 1 ? ' baris' : ' baris'));
}

// Re-index all rows to maintain sequential indexing
window.reindexRows = function() {
    $('#piutangTableBody tr').each(function(index) {
        const $row = $(this);
        const newRowNumber = index;
        const noColumn = $row.find('td:first');

        // Update nomor urut
        noColumn.text(newRowNumber + 1);

        // Update data-row-number attribute
        $row.attr('data-row-number', newRowNumber);

        // Store old uniqueId for finding display cells
        const oldUniqueIdInput = $row.find('input[name*="[aktivitas_id]"]');
        let oldUniqueId = '';
        if (oldUniqueIdInput.length > 0) {
            const oldId = oldUniqueIdInput.attr('id');
            if (oldId) {
                const match = oldId.match(/piutang_(.+)_aktivitas_id/);
                if (match) {
                    oldUniqueId = match[1];
                }
            }
        }

        // Generate new uniqueId
        const newUniqueId = Date.now() + '_' + newRowNumber;

        // Update all input names and IDs with new index
        $row.find('input').each(function() {
            const $input = $(this);
            const name = $input.attr('name');
            if (name && name.includes('items[')) {
                const newName = name.replace(/items\[\d+\]/, `items[${newRowNumber}]`);
                $input.attr('name', newName);
            }

            // Update IDs
            const id = $input.attr('id');
            if (id && id.includes('piutang_')) {
                const newId = id.replace(/piutang_.+_(aktivitas_id|no_transaksi|tanggal|tagihan|jumlah_bayar)/ , `piutang_${newUniqueId}_$1`);
                $input.attr('id', newId);
            }
        });

        // Update display cell IDs
        if (oldUniqueId) {
            $row.find('[id*="_display"]').each(function() {
                const $cell = $(this);
                const oldId = $cell.attr('id');
                if (oldId) {
                    const newId = oldId.replace(`piutang_${oldUniqueId}_`, `piutang_${newUniqueId}_`);
                    $cell.attr('id', newId);
                }
            });
        }
    });
};

// Remove piutang row
window.removePiutangRow = function(button) {
    const row = $(button).closest('tr');

    if ($('#piutangTableBody tr').length > 1) {
        row.remove();
        reindexRows();
        updateRowCount();
        updateGrandTotal();
    } else {
        Swal.fire({
            icon: 'info',
            title: 'Info',
            text: 'Minimal harus ada satu baris data'
        });
    }
};

function resetPiutangForm() {
    $('#piutangForm')[0].reset();
    $('#piutangModalTitle').text('Piutang Baru');

    // Reset form action to create mode
    $('#piutangForm').attr('action', '{{ route("piutang.store") }}');
    $('#piutangForm').find('input[name="_method"]').remove();

    // Reset submit button text
    $('#submitBtnText').html(`
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        Simpan Data Piutang
    `);

    // Clear hidden edit_no_bukti
    $('#edit_no_bukti').val('');

    // Clear table body
    $('#piutangTableBody').empty();

    // Reset global counter and flags
    globalRowCounter = 0;
    isSubmitting = false;
    selectedAktivitasIds = [];
    availableAktivitasData = [];

    const today = '{{ date('Y-m-d') }}';
    $('#tanggal').val(today);

    // Generate no_bukti preview
    generateNoBuktiPreview(today);

    // Reset customer select2 value
    if ($('#customer').data('select2')) {
        $('#customer').val(null).trigger('change');
    }

    // Reset akun select2 value
    if ($('#akun').data('select2')) {
        $('#akun').val(null).trigger('change');
    }

    // Disable "Pilih Nomor Bukti" button
    $('#btnPilihNoBukti').prop('disabled', true);

    $('#submitBtn').prop('disabled', false);
    $('#submitBtnText').removeClass('d-none').css('display', 'inline');
    $('#submitBtnLoading').addClass('d-none').css('display', 'none');
}

function generateNoBuktiPreview(tanggal) {
    if (!tanggal) {
        $('#no_bukti').val('');
        $('#no_bukti_help').text('Pilih tanggal untuk generate nomor bukti otomatis');
        return;
    }

    const dateParts = tanggal.split('-');
    const tanggalObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);

    if (isNaN(tanggalObj.getTime())) {
        $('#no_bukti_help').html('❌ Format tanggal tidak valid');
        return;
    }

    const yy = tanggalObj.getFullYear().toString().slice(-2);
    const mm = String(tanggalObj.getMonth() + 1).padStart(2, '0');
    const tanggalPart = yy + mm;

    $('#no_bukti').val('PIU/' + tanggalPart + '/XXXX');
    $('#no_bukti_help').html('⏳ Loading...');

    $.ajax({
        url: '/piutang/get-last-sequence/' + tanggal,
        method: 'GET',
        success: function(response) {
            if (response.error) {
                $('#no_bukti_help').html('❌ ' + response.error);
                return;
            }

            const nextSequence = response.next_sequence;
            const noBuktiPreview = 'PIU/' + tanggalPart + '/' + String(nextSequence).padStart(4, '0');

            $('#no_bukti').val(noBuktiPreview);
            $('#no_bukti_help').html('✅ No Bukti: <strong>' + noBuktiPreview + '</strong> <small style="color: #6c757d;">(Ready)</small>');
        },
        error: function(xhr) {
            const errorMsg = xhr.responseJSON?.error || 'Gagal mengambil nomor urut';
            $('#no_bukti_help').html('❌ ' + errorMsg);
        }
    });
}

// Search and filter event listeners
$('#searchNoBukti').on('keyup', function() {
    applyFilter();
});

$('#filterStatus').on('change', function() {
    applyFilter();
});

$(document).ready(function() {
    // Initialize Select2 for customer dropdown
    if ($('#customer').length) {
        $('#customer').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Customer',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#piutangModal')
        });
    }

    // Initialize Select2 for akun bank dropdown
    if ($('#akun').length) {
        $('#akun').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Akun Bank',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#piutangModal')
        });
    }

    // Load aktivitas when customer changes
    $('#customer').on('change', function() {
        const customer = $(this).val();

        // Get selected option data attributes
        const $selectedOption = $(this).find('option:selected');
        const namaBank = $selectedOption.data('nama-bank') || '';
        const nomorRekening = $selectedOption.data('nomor-rekening') || '';
        const atasNama = $selectedOption.data('atas-nama') || '';

        // Show/hide customer bank info
        if (customer && (namaBank || nomorRekening)) {
            const bankDetails = [];
            if (namaBank) bankDetails.push(`<strong>Bank:</strong> ${namaBank}`);
            if (nomorRekening) bankDetails.push(`<strong>No. Rek:</strong> ${nomorRekening}`);
            if (atasNama) bankDetails.push(`<strong>Atas Nama:</strong> ${atasNama}`);

            $('#customerBankDetails').html(bankDetails.join(' | '));
            $('#customerBankInfo').slideDown();
        } else {
            $('#customerBankInfo').slideUp();
        }

        if (customer) {
            // Enable "Pilih Nomor Bukti" button
            $('#btnPilihNoBukti').prop('disabled', false).removeAttr('disabled');
        } else {
            // Disable "Pilih Nomor Bukti" button
            $('#btnPilihNoBukti').prop('disabled', true);

            // Hide customer bank info when cleared
            $('#customerBankInfo').slideUp();

            // Clear all rows when customer is cleared
            $('#piutangTableBody').empty();
            selectedAktivitasIds = [];
            availableAktivitasData = [];
            updateRowCount();
            updateGrandTotal();
        }
    });

    // Generate initial no_bukti preview
    const today = '{{ date('Y-m-d') }}';
    generateNoBuktiPreview(today);

    // Update preview when tanggal changes
    $('#tanggal').on('change', function() {
        const tanggal = $(this).val();
        generateNoBuktiPreview(tanggal);
    });

    $('#piutangForm').on('submit', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();

        if (isSubmitting) {
            return;
        }

        // Validate master section
        const customer = $('#customer').val();
        if (!customer || customer === '') {
            Swal.fire({
                icon: 'error',
                title: 'Validasi Error',
                text: 'Customer harus dipilih'
            });
            return;
        }

        let hasError = false;
        $('#piutangTableBody tr').each(function(rowIdx, row) {
            const noTransaksi = $(row).find('[id$="_no_transaksi"]').val();

            if (!noTransaksi || noTransaksi === '') {
                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Error',
                    text: 'Nomor transaksi harus diisi di baris ' + (rowIdx + 1)
                });
                hasError = true;
                return false;
            }
        });

        if (hasError) {
            return;
        }

        // Build items array manually
        const items = [];
        $('#piutangTableBody tr').each(function(rowIdx, row) {
            const $row = $(row);

            // Use ID-based selector for reliability
            const $jumlahBayarField = $row.find('input[id*="_jumlah_bayar"]');

            if ($jumlahBayarField.length === 0) {
                return;
            }

            // Use ID selector for hidden inputs
            const aktivitasId = $row.find('[id$="_aktivitas_id"]').val();
            const noTransaksi = $row.find('[id$="_no_transaksi"]').val() || '';
            const tanggal = $row.find('[id$="_tanggal"]').val() || '';
            const tagihan = $row.find('[id$="_tagihan"]').val() || '';

            // Parse formatted number (Indonesian format: 1.000.000,50)
            let jumlahBayar = $jumlahBayarField.data('raw-value');
            if (jumlahBayar === undefined || jumlahBayar === null) {
                // Fallback to parsing the displayed value
                const rawValue = $jumlahBayarField.val() || '0';
                // Remove dots and replace comma with dot
                const cleaned = rawValue.toString().replace(/\./g, '').replace(',', '.');
                jumlahBayar = parseFloat(cleaned) || 0;
            }

            if (noTransaksi && tanggal) {
                const parsedItem = {
                    no_transaksi: noTransaksi,
                    tanggal: tanggal,
                    tagihan: parseFloat(tagihan) || 0,
                    jumlah_bayar: parseFloat(jumlahBayar) || 0
                };
                // Hanya sertakan aktivitas_id jika ada nilainya
                if (aktivitasId && aktivitasId !== '' && aktivitasId !== 'null') {
                    parsedItem.aktivitas_id = parseInt(aktivitasId);
                }
                items.push(parsedItem);
            }
        });

        if (items.length === 0) {
            Swal.fire({
                icon: 'error',
                title: 'Validasi Error',
                text: 'Minimal harus ada satu baris data'
            });
            return;
        }

        const formData = new FormData();

        // Add basic form fields
        formData.append('tanggal', $('#tanggal').val());
        formData.append('customer', $('#customer').val());
        formData.append('akun', $('#akun').val());
        formData.append('keterangan', $('#keterangan').val());
        formData.append('_token', '{{ csrf_token() }}');

        // Check if this is update mode
        const noBukti = $('#edit_no_bukti').val();
        if (noBukti) {
            formData.append('_method', 'PUT');
        }

        // Add items array
        items.forEach((item, index) => {
            // Hanya kirim aktivitas_id jika ada nilainya
            if (item.aktivitas_id !== null && item.aktivitas_id !== undefined) {
                formData.append(`items[${index}][aktivitas_id]`, item.aktivitas_id);
            }
            formData.append(`items[${index}][no_transaksi]`, item.no_transaksi);
            formData.append(`items[${index}][tanggal]`, item.tanggal);
            formData.append(`items[${index}][tagihan]`, item.tagihan);
            formData.append(`items[${index}][jumlah_bayar]`, item.jumlah_bayar);
        });

        // Determine URL based on mode (create vs update)
        let url;
        if (noBukti) {
            url = `/piutang/update?no_bukti=${encodeURIComponent(noBukti)}`;
        } else {
            url = '{{ route("piutang.store") }}';
        }

        const submitBtn = $('#submitBtn');
        const submitBtnText = $('#submitBtnText');
        const submitBtnLoading = $('#submitBtnLoading');

        submitBtn.prop('disabled', true);
        submitBtnText.addClass('d-none').css('display', 'none');
        submitBtnLoading.removeClass('d-none').css('display', 'inline-block');

        isSubmitting = true;

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            beforeSend: function(xhr) {
                const csrfToken = formData.get('_token');
                if (csrfToken) {
                    xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
                }
            },
            success: function(response) {
                submitBtn.prop('disabled', false);
                submitBtnText.removeClass('d-none').css('display', 'inline');
                submitBtnLoading.addClass('d-none').css('display', 'none');
                isSubmitting = false;

                $('#piutangTable').DataTable().ajax.reload(null, false);

                // Update summary cards
                updateSummaryCards();

                // Refresh no_bukti preview
                const tanggal = $('#tanggal').val();
                if (tanggal) {
                    generateNoBuktiPreview(tanggal);
                }

                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: response.message || 'Data Piutang berhasil disimpan!',
                    timer: 2000,
                    showConfirmButton: false
                }).then(function() {
                    const modalEl = document.getElementById('piutangModal');
                    const modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) {
                        modal.hide();
                    }
                });
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false);
                submitBtnText.removeClass('d-none').css('display', 'inline');
                submitBtnLoading.addClass('d-none').css('display', 'none');
                isSubmitting = false;

                const errorMsg = xhr.responseJSON?.message || xhr.responseText || 'Terjadi kesalahan!';

                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: errorMsg
                });
            }
        });
    });

    piutangTable = $('#piutangTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        scrollX: true,
        dom: 'Bfrtip',
        buttons: [
            'copy',
            'csv',
            'excel',
            'pdf',
            'print'
        ],
        ajax: {
            url: '{{ route("piutang.data") }}',
            type: 'GET',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
            },
            error: function(xhr, error, thrown) {
                console.error('DataTable error:', error, thrown);
            }
        },
        columns: [
            { data: 'no_bukti', name: 'no_bukti', searchable: true },
            { data: 'tanggal_format', name: 'tanggal', searchable: false },
            { data: 'customer', name: 'customer', searchable: true },
            { data: 'keterangan', name: 'keterangan', searchable: true },
            { data: 'total_tagihan', name: 'total_tagihan', searchable: false },
            { data: 'total_bayar', name: 'total_bayar', searchable: false },
            { data: 'sisa', name: 'sisa', searchable: false },
            { data: 'action', orderable: false, searchable: false }
        ],
        order: [[0, 'desc']],
        initComplete: function() {
            // Update summary when datatable is initialized
            updateSummaryCards();
        },
        language: {
            sEmptyTable: "Tidak ada data tersedia",
            sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
            sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
            sInfoFiltered: "(difilter dari _MAX_ total data)",
            sInfoPostFix: "",
            sInfoThousands: ",",
            sLengthMenu: "Tampilkan _MENU_ data",
            sLoadingRecords: "Memuat...",
            sProcessing: "Memproses...",
            sSearch: "Cari:",
            sSearchPlaceholder: "Cari berdasarkan No. Bukti, Customer...",
            sZeroRecords: "Tidak ditemukan data yang cocok",
            oPaginate: {
                sFirst: "Pertama",
                sLast: "Terakhir",
                sNext: "Selanjutnya",
                sPrevious: "Sebelumnya"
            },
            oAria: {
                sSortAscending: ": aktifkan untuk mengurutkan kolom secara ascending",
                sSortDescending: ": aktifkan untuk mengurutkan kolom secara descending"
            }
        }
    });

    $('#piutangModal').on('show.bs.modal', function(e) {
        const relatedTarget = e.relatedTarget;

        if (relatedTarget && $(relatedTarget).attr('data-bs-toggle') === 'modal') {
            resetPiutangForm();
        }
    });

    $('#piutangModal').on('hidden.bs.modal', function() {
        if (!isSubmitting) {
            resetPiutangForm();
        }
    });
});

// View piutang detail
function viewPiutang(noBukti) {
    $.ajax({
        url: `/piutang/show?no_bukti=${encodeURIComponent(noBukti)}`,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                const piutang = response.data.piutang;

                let detailHtml = `
                    <div style="padding: 1.5rem;">
                        <h5 style="margin-bottom: 1rem; border-bottom: 2px solid #dee2e6; padding-bottom: 0.5rem;">Detail Piutang: ${piutang.no_bukti}</h5>
                        <div class="row" style="margin-bottom: 1rem;">
                            <div class="col-md-6">
                                <strong>Tanggal:</strong> ${piutang.tanggal ? new Date(piutang.tanggal).toLocaleDateString('id-ID') : '-'}<br>
                                <strong>Customer:</strong> ${piutang.customer || '-'}
                            </div>
                            <div class="col-md-6">
                                <strong>Keterangan:</strong> ${piutang.keterangan || '-'}<br>
                                <strong>Total Tagihan:</strong> Rp ${formatNumber(piutang.total_tagihan || 0)}<br>
                                <strong>Total Bayar:</strong> Rp ${formatNumber(piutang.total_bayar || 0)}
                            </div>
                        </div>
                        <h6 style="margin: 1rem 0 0.5rem 0; border-bottom: 1px solid #dee2e6; padding-bottom: 0.25rem;">Detail Pembayaran:</h6>
                        <table class="table table-sm table-striped" style="font-size: 0.875rem;">
                            <thead>
                                <tr>
                                    <th>No Transaksi</th>
                                    <th>Tanggal</th>
                                    <th>Tagihan</th>
                                    <th>Jumlah Bayar</th>
                                </tr>
                            </thead>
                            <tbody>
                `;

                if (piutang.items && piutang.items.length > 0) {
                    piutang.items.forEach(function(item) {
                        detailHtml += `
                            <tr>
                                <td>${item.no_transaksi || '-'}</td>
                                <td>${item.tanggal ? new Date(item.tanggal).toLocaleDateString('id-ID') : '-'}</td>
                                <td>Rp ${formatNumber(item.tagihan || 0)}</td>
                                <td>Rp ${formatNumber(item.jumlah_bayar || 0)}</td>
                            </tr>
                        `;
                    });
                }

                // Gunakan total_sisa dari response, atau hitung dari total_tagihan - total_bayar
                const sisa = piutang.total_sisa !== undefined ? piutang.total_sisa : (piutang.total_tagihan || 0) - (piutang.total_bayar || 0);

                detailHtml += `
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="3" style="text-align: right;"><strong>Sisa:</strong></td>
                                    <td><strong>Rp ${formatNumber(sisa)}</strong></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                `;

                Swal.fire({
                    title: '',
                    html: detailHtml,
                    width: '800px',
                    showConfirmButton: true,
                    confirmButtonText: 'Tutup'
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'Gagal memuat detail piutang'
                });
            }
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Gagal memuat detail piutang'
            });
        }
    });
}

// Delete piutang
function deletePiutang(noBukti) {
    Swal.fire({
        title: 'Hapus Data Piutang?',
        text: `Anda yakin ingin menghapus data piutang ${noBukti}?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
        html: `
            <p>Anda yakin ingin menghapus data piutang <strong>${noBukti}</strong>?</p>
            <div style="margin-top: 1rem;">
                <label for="alasan_hapus" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Alasan Penghapusan <span style="color: red;">*</span></label>
                <textarea id="alasan_hapus" class="swal2-input" style="width: 100%; min-height: 80px; resize: vertical;" placeholder="Tuliskan alasan penghapusan..."></textarea>
                <small style="color: #6c757d;">Data tidak akan dihapus permanen, hanya diarsipkan.</small>
            </div>
        `,
        preConfirm: () => {
            const alasan = document.getElementById('alasan_hapus').value;
            if (!alasan || alasan.trim() === '') {
                Swal.showValidationMessage('Alasan penghapusan harus diisi');
                return false;
            }
            return { alasan_hapus: alasan };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `/piutang/delete?no_bukti=${encodeURIComponent(noBukti)}`,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    alasan_hapus: result.value.alasan_hapus
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Terhapus!',
                        text: 'Data piutang berhasil dihapus.',
                        timer: 2000,
                        showConfirmButton: false
                    });

                    $('#piutangTable').DataTable().ajax.reload(null, false);
                    updateSummaryCards();
                },
                error: function(xhr) {
                    const errorMsg = xhr.responseJSON?.message || 'Gagal menghapus data piutang';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: errorMsg
                    });
                }
            });
        }
    });
}

// Edit piutang
function editPiutang(noBukti) {
    $.ajax({
        url: `/piutang/show?no_bukti=${encodeURIComponent(noBukti)}`,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                const piutang = response.data.piutang;

                // Set form values
                $('#tanggal').val(piutang.tanggal);
                $('#customer').val(piutang.customer).trigger('change');
                $('#keterangan').val(piutang.keterangan || '');

                // Set akun from ledger_id
                if (piutang.ledger_id) {
                    $('#akun').val(piutang.ledger_id).trigger('change');
                } else {
                    $('#akun').val('').trigger('change');
                }

                // Clear existing rows and reset state
                $('#piutangTableBody').empty();
                globalRowCounter = 0;
                selectedAktivitasIds = [];

                // Add items to form after customer is set
                setTimeout(function() {
                    if (piutang.items && piutang.items.length > 0) {
                        piutang.items.forEach(function(item) {
                            // Create item object compatible with addPiutangRowFromData
                            const itemData = {
                                aktivitas_id: item.aktivitas_id,
                                no_transaksi: item.no_transaksi,
                                tanggal: item.tanggal,
                                tagihan: item.tagihan,
                                sudah_dibayar: item.sudah_dibayar || 0,
                                sisa: item.sisa || (item.tagihan - (item.sudah_dibayar || 0))
                            };
                            addPiutangRowFromData(itemData);
                            selectedAktivitasIds.push(item.no_transaksi);
                        });
                    }

                    // Update form to edit mode
                    $('#piutangForm').attr('action', `/piutang/update?no_bukti=${encodeURIComponent(noBukti)}`);
                    $('#piutangForm').find('input[name="_method"]').remove();
                    $('#piutangForm').append('<input type="hidden" name="_method" value="PUT">');

                    // Set hidden edit_no_bukti for update mode detection
                    $('#edit_no_bukti').val(noBukti);

                    // Change modal title
                    $('#piutangModalTitle').text(`Edit Piutang: ${noBukti}`);

                    // Change submit button text
                    $('#submitBtnText').html(`
                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                        Update Data Piutang
                    `);

                    // Open modal
                    const modalEl = document.getElementById('piutangModal');
                    const modal = new bootstrap.Modal(modalEl);
                    modal.show();
                }, 500); // Wait for customer change to complete
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'Gagal memuat data piutang'
                });
            }
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Gagal memuat data piutang'
            });
        }
    });
}
</script>
@endpush
@endsection