@extends('layouts.apex')

@section('title', 'Keuangan')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Keuangan</h1>
            <p class="page-header-subtitle">Jurnal umum dan pembukuan</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#jurnalModal">
            <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>
            Tambah Jurnal
        </button>
        <button type="button" class="btn btn-success" id="addSingleJurnalBtn" style="display:none">
            <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="M9 13l4 4L19 7"/>
            </svg>
            Jurnal Cepat
        </button>
    </div>
</div>

<div class="page-body">
    <!-- Summary Cards -->
    <div class="stat-grid">
        <div class="stat-card">
            <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 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
            </div>
            <div class="stat-label">Total Debit</div>
            <div class="stat-value" id="summaryTotalDebit">Rp {{ number_format($summary->total_debit, 0) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon danger">
                <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 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
            </div>
            <div class="stat-label">Total Kredit</div>
            <div class="stat-value" id="summaryTotalKredit">Rp {{ number_format($summary->total_kredit, 0) }}</div>
        </div>
        <div class="stat-card">
            <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">Saldo</div>
            <div class="stat-value" id="summarySaldo" style="color: {{ $summary->saldo >= 0 ? 'var(--success)' : 'var(--danger)' }};">Rp {{ number_format($summary->saldo, 0) }}</div>
        </div>
        <div class="stat-card">
            <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="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">Hutang - Piutang</div>
            <div class="stat-value" id="summaryHutangPiutang">Rp {{ number_format($summary->hutang, 0) }} / Rp {{ number_format($summary->piutang, 0) }}</div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Jurnal Umum</h5>
            <div class="d-flex align-items-center gap-3">
                <select id="filterAkun" class="form-select form-select-sm select2-filter" style="width: 250px;">
                    <option value="">Semua Akun</option>
                    @foreach($ledgers as $ledger)
                        <option value="{{ $ledger->id }}">{{ $ledger->no_perk }} - {{ $ledger->nama }}</option>
                    @endforeach
                </select>
                <div class="bulk-actions" id="bulkActions" style="display: none;">
                    <span class="text-muted me-2"><span id="selectedCount">0</span> dipilih</span>
                    <button type="button" class="btn btn-sm btn-danger" id="bulkDeleteBtn">
                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom;">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                        Hapus
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="jurnalTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th style="width: 40px;">
                                <input type="checkbox" id="selectAll" class="form-check-input">
                            </th>
                            <th>No. Bukti</th>
                            <th>Tanggal</th>
                            <th>Akun</th>
                            <th>Keterangan</th>
                            <th>Debit</th>
                            <th>Kredit</th>
                            <th>Dibuat Oleh</th>
                            <th style="width: 120px;">Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Quick Add Form (Hidden by default) -->
<div id="quickAddForm" class="card" style="display: none; margin-bottom: 1.5rem;">
    <div class="card-body">
        <form id="singleJurnalForm" action="{{ route('keuangan.store') }}" method="POST">
            @csrf
            <div class="grid grid-cols-5" style="gap: 1rem;">
                <div class="form-group" style="margin-bottom: 0;">
                    <input type="date" name="tanggal" class="form-control" value="{{ date('Y-m-d') }}" required placeholder="Tanggal">
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <select name="tledger_id" class="form-select select2-akun" required>
                        <option value="">Pilih Akun</option>
                        @foreach($ledgers as $ledger)
                            <option value="{{ $ledger->id }}">{{ $ledger->no_perk }} - {{ $ledger->nama }}</option>
                        @endforeach
                    </select>
                    <input type="hidden" name="akun" id="singleAkunInput">
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <input type="text" name="keterangan" class="form-control" placeholder="Keterangan" required>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <div style="display: flex; gap: 0.5rem;">
                        <input type="text" name="debit" class="form-control currency-input-quick" placeholder="Debit" data-raw="0">
                        <input type="text" name="kredit" class="form-control currency-input-quick" placeholder="Kredit" data-raw="0">
                    </div>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <button type="submit" class="btn btn-success" style="width: 100%;">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Jurnal Modal (Batch Add) -->
<div id="jurnalModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width: 70%;">
        <div class="modal-content">
            <form id="jurnalBatchForm" action="{{ route('keuangan.store.batch') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Jurnal Umum (Massal)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Master Section -->
                    <div style="margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label">Tanggal *</label>
                                    <input type="date" name="tanggal" id="modal_tanggal" class="form-control" value="{{ date('Y-m-d') }}" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label">No. Bukti</label>
                                    <input type="text" name="no_bukti" id="modal_no_bukti" class="form-control" placeholder="Kosongkan untuk generate otomatis">
                                    <small class="text-muted">Biarkan kosong untuk generate otomatis (JRM/YYYYMM/XXXX)</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label">Keterangan Global</label>
                                    <input type="text" name="global_keterangan" id="modal_global_keterangan" class="form-control" placeholder="Copy ke semua baris">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Batch Table -->
                    <div style="margin-bottom: 1rem;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                            <h6 style="margin: 0;">Data Jurnal</h6>
                            <div>
                                <span class="badge" id="modalBatchRowCount" style="background: var(--primary); color: white; margin-right: 0.5rem;">1 baris</span>
                                <button type="button" class="btn btn-sm btn-primary" id="modalAddBatchRowBtn">
                                    <svg width="12" height="12" 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="M12 4v16m8-8H4"/>
                                    </svg>
                                    Tambah Baris
                                </button>
                            </div>
                        </div>

                        <div style="overflow-x: auto;">
                            <table class="table table-bordered table-sm" id="modalBatchTable">
                                <thead>
                                    <tr>
                                        <th style="width: 180px;">Akun *</th>
                                        <th style="width: 300px;">Keterangan *</th>
                                        <th style="width: 120px;">Debit</th>
                                        <th style="width: 120px;">Kredit</th>
                                        <th style="width: 120px;">Module Ref</th>
                                        <th style="width: 50px;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="modalBatchTableBody">
                                    <!-- Rows will be added dynamically -->
                                </tbody>
                                <tfoot>
                                    <tr style="background-color: var(--light); font-weight: bold;">
                                        <td colspan="2" style="text-align: right; padding-right: 1rem;">
                                            <strong>TOTAL:</strong>
                                        </td>
                                        <td style="text-align: center;">
                                            <span id="modalTotalDebit" style="color: var(--success); font-size: 1rem;">Rp 0</span>
                                        </td>
                                        <td style="text-align: center;">
                                            <span id="modalTotalKredit" style="color: var(--danger); font-size: 1rem;">Rp 0</span>
                                        </td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <!-- Balance Indicator -->
                    <div id="balanceIndicator" class="alert" style="display: none; margin-top: 1rem;">
                        <span id="balanceMessage"></span>
                    </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="modalSubmitBtn">
                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.25rem;">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        Simpan Semua
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let selectedRows = [];
let modalBatchRowNumber = 0;

// Helper function untuk format Rupiah
function formatRupiah(number) {
    if (number === null || number === undefined || number === '' || isNaN(number)) {
        return 'Rp 0';
    }
    return 'Rp ' + new Intl.NumberFormat('id-ID', {
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
    }).format(number);
}

// Function untuk update summary cards
function updateSummary() {
    $.ajax({
        url: '/keuangan/summary',
        method: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                const summary = response.data;
                $('#summaryTotalDebit').text('Rp ' + new Intl.NumberFormat('id-ID').format(summary.total_debit));
                $('#summaryTotalKredit').text('Rp ' + new Intl.NumberFormat('id-ID').format(summary.total_kredit));
                $('#summarySaldo').text('Rp ' + new Intl.NumberFormat('id-ID').format(summary.saldo));
                $('#summarySaldo').css('color', summary.saldo >= 0 ? 'var(--success)' : 'var(--danger)');
                $('#summaryHutangPiutang').text('Rp ' + new Intl.NumberFormat('id-ID').format(summary.hutang) + ' / Rp ' + new Intl.NumberFormat('id-ID').format(summary.piutang));
            }
        },
        error: function(xhr) {
            console.error('Gagal mengupdate summary:', xhr);
        }
    });
}

// Modal batch row functions
function addModalBatchRow() {
    modalBatchRowNumber++;
    const uniqueId = Date.now() + '_' + modalBatchRowNumber;

    const row = `
        <tr class="modal-batch-row" data-unique-id="${uniqueId}">
            <td>
                <select name="data_jurnal[${modalBatchRowNumber}][tledger_id]" id="modal_${uniqueId}_tledger_id" class="form-select form-select-sm select2-akun-modal" required>
                    <option value="">Pilih Akun</option>
                    @foreach($ledgers as $ledger)
                        <option value="{{ $ledger->id }}">{{ $ledger->no_perk }} - {{ $ledger->nama }}</option>
                    @endforeach
                </select>
                <input type="hidden" name="data_jurnal[${modalBatchRowNumber}][akun]" id="modal_${uniqueId}_akun">
            </td>
            <td>
                <input type="text" name="data_jurnal[${modalBatchRowNumber}][keterangan]" id="modal_${uniqueId}_keterangan" class="form-control form-control-sm" placeholder="Keterangan" required>
            </td>
            <td>
                <input type="text" name="data_jurnal[${modalBatchRowNumber}][debit]" id="modal_${uniqueId}_debit" class="form-control form-control-sm text-end currency-input-modal" style="color: var(--success);" value="0" data-raw="0">
            </td>
            <td>
                <input type="text" name="data_jurnal[${modalBatchRowNumber}][kredit]" id="modal_${uniqueId}_kredit" class="form-control form-control-sm text-end currency-input-modal" style="color: var(--danger);" value="0" data-raw="0">
            </td>
            <td>
                <input type="text" name="data_jurnal[${modalBatchRowNumber}][module_ref]" id="modal_${uniqueId}_module_ref" class="form-control form-control-sm" placeholder="Module">
                <input type="hidden" name="data_jurnal[${modalBatchRowNumber}][ref_id]" id="modal_${uniqueId}_ref_id" value="">
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger" onclick="removeModalBatchRow('${uniqueId}')">
                    <svg width="12" height="12" 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>
    `;
    $('#modalBatchTableBody').append(row);

    // Initialize select2 for the new row
    $(`#modal_${uniqueId}_tledger_id`).select2({
        dropdownParent: $('#jurnalModal'),
        width: '100%'
    });

    // Update akun hidden input when select2 changes
    $(`#modal_${uniqueId}_tledger_id`).on('change', function() {
        const selectedText = $(this).find('option:selected').text();
        $(`#modal_${uniqueId}_akun`).val(selectedText);
    });

    updateModalBatchRowCount();
    calculateModalBatchTotal();
}

function removeModalBatchRow(uniqueId) {
    const row = $(`tr.modal-batch-row[data-unique-id="${uniqueId}"]`);
    if ($('#modalBatchTableBody tr').length > 1) {
        row.remove();
        updateModalBatchRowCount();
        calculateModalBatchTotal();
    } else {
        Swal.fire({
            icon: 'info',
            title: 'Info',
            text: 'Minimal harus ada satu baris data',
            timer: 1500,
            showConfirmButton: false
        });
    }
}

function updateModalBatchRowCount() {
    const count = $('#modalBatchTableBody tr').length;
    $('#modalBatchRowCount').text(count + (count === 1 ? ' baris' : ' baris'));
}

function calculateModalBatchTotal() {
    let totalDebit = 0;
    let totalKredit = 0;

    $('#modalBatchTableBody tr').each(function() {
        const debit = parseFloat($(this).find('[id$="_debit"]').data('raw')) || 0;
        const kredit = parseFloat($(this).find('[id$="_kredit"]').data('raw')) || 0;
        totalDebit += debit;
        totalKredit += kredit;
    });

    $('#modalTotalDebit').text(formatRupiah(totalDebit));
    $('#modalTotalKredit').text(formatRupiah(totalKredit));

    // Update balance indicator
    const balanceIndicator = $('#balanceIndicator');
    const balanceMessage = $('#balanceMessage');

    if (totalDebit === totalKredit && totalDebit > 0) {
        balanceIndicator.removeClass('alert-warning alert-danger').addClass('alert-success').show();
        balanceMessage.html('✅ Balance - Debit sama dengan Kredit');
    } else if (totalDebit !== totalKredit) {
        const selisih = Math.abs(totalDebit - totalKredit);
        balanceIndicator.removeClass('alert-success alert-warning').addClass('alert-danger').show();
        balanceMessage.html(`⚠️ Tidak Balance - Selisih: ${formatRupiah(selisih)}`);
    } else {
        balanceIndicator.hide();
    }
}

function resetModalBatchForm() {
    $('#modalBatchTableBody').empty();
    modalBatchRowNumber = 0;
    addModalBatchRow();
    $('#modal_tanggal').val('{{ date("Y-m-d") }}');
    $('#modal_no_bukti').val('');
    $('#modal_global_keterangan').val('');
    $('#balanceIndicator').hide();
}

$(document).ready(function() {
    // Initialize first modal batch row
    addModalBatchRow();

    // Initialize Select2 for quick add form
    $('.select2-akun').select2({
        dropdownParent: $('body'),
        placeholder: 'Pilih Akun',
        width: '100%'
    });

    // Select2 change handler for quick add form
    $('.select2-akun').on('change', function() {
        const selectedText = $(this).find('option:selected').text();
        $('#singleAkunInput').val(selectedText);
    });

    // Initialize Select2 for filter akun
    $('.select2-filter').select2({
        dropdownParent: $('body'),
        placeholder: 'Semua Akun',
        width: '250px'
    });

    // Initialize Select2 for first modal row
    $('.select2-akun-modal').each(function() {
        $(this).select2({
            dropdownParent: $('#jurnalModal'),
            width: '100%'
        });

        // Update akun hidden input when select2 changes
        $(this).on('change', function() {
            const uniqueId = $(this).attr('id').replace('modal_', '').replace('_tledger_id', '');
            const selectedText = $(this).find('option:selected').text();
            $(`#modal_${uniqueId}_akun`).val(selectedText);
        });
    });

    const jurnalTable = $('#jurnalTable').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("keuangan.data") }}',
            type: 'GET',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
                d.tledger_id = $('#filterAkun').val();
            },
            error: function(xhr, error, thrown) {
                console.log('DataTables error:', error, thrown, xhr);
                alert('Error loading data: ' + (xhr.responseJSON?.message || 'Unknown error'));
            }
        },
        columns: [
            {
                data: 'id',
                orderable: false,
                render: function(data) {
                    return `<input type="checkbox" class="row-checkbox form-check-input" data-id="${data}">`;
                }
            },
            { data: 'no_bukti', name: 'no_bukti', searchable: true },
            {
                data: 'tanggal',
                render: function(data) {
                    return `<input type="date" class="form-control form-control-sm editable-field" data-field="tanggal" value="${data}">`;
                }
            },
            {
                data: 'akun',
                render: function(data, type, row) {
                    return `<input type="text" class="form-control form-control-sm editable-field" data-field="akun" value="${data}" data-id="${row.id}">`;
                }
            },
            {
                data: 'keterangan',
                render: function(data, type, row) {
                    return `<input type="text" class="form-control form-control-sm editable-field" data-field="keterangan" value="${data}" data-id="${row.id}">`;
                }
            },
            {
                data: 'debit',
                render: function(data, type, row) {
                    const formatted = new Intl.NumberFormat('id-ID').format(data || 0);
                    return `<input type="text" class="form-control form-control-sm editable-field text-success currency-input" data-field="debit" value="${formatted}" data-raw="${data}" data-id="${row.id}">`;
                }
            },
            {
                data: 'kredit',
                render: function(data, type, row) {
                    const formatted = new Intl.NumberFormat('id-ID').format(data || 0);
                    return `<input type="text" class="form-control form-control-sm editable-field text-danger currency-input" data-field="kredit" value="${formatted}" data-raw="${data}" data-id="${row.id}">`;
                }
            },
            { data: 'pembuat' },
            {
                data: 'id',
                orderable: false,
                searchable: false,
                render: function(data) {
                    return `
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-success btn-save-row" data-id="${data}">
                                <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 2px;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                Simpan
                            </button>
                            <button type="button" class="btn btn-danger btn-delete-row" data-id="${data}">
                                <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 2px;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                                Hapus
                            </button>
                        </div>
                    `;
                }
            }
        ],
        order: [[2, 'desc']],
        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, Akun, atau Keterangan...",
            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"
            }
        },
        drawCallback: function() {
            updateBulkActions();
        }
    });

    // Filter akun change handler
    $('#filterAkun').on('change', function() {
        jurnalTable.ajax.reload();
    });

    // Select all checkbox
    $(document).on('change', '#selectAll', function() {
        const isChecked = $(this).prop('checked');
        $('.row-checkbox').prop('checked', isChecked).trigger('change');
    });

    // Row checkbox change
    $(document).on('change', '.row-checkbox', function() {
        const id = $(this).data('id');
        if ($(this).prop('checked')) {
            if (!selectedRows.includes(id)) selectedRows.push(id);
        } else {
            selectedRows = selectedRows.filter(rowId => rowId !== id);
        }
        updateBulkActions();
    });

    // Update bulk actions visibility
    function updateBulkActions() {
        const count = selectedRows.length;
        $('#selectedCount').text(count);
        $('#bulkActions').toggle(count > 0);
        $('#selectAll').prop('checked', $('.row-checkbox:checked').length === $('.row-checkbox').length && $('.row-checkbox').length > 0);
    }

    // Inline edit - save on enter or blur
    $(document).on('blur', '.editable-field', function() {
        const field = $(this).data('field');
        const value = $(this).val();
        const id = $(this).data('id');

        if (id && value !== undefined) {
            autoSave(id, field, value, $(this));
        }
    });

    $(document).on('keydown', '.editable-field', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            $(this).blur();
        }
    });

    // Currency input formatting (table)
    $(document).on('focus', '.currency-input', function() {
        const rawValue = $(this).data('raw');
        $(this).val(rawValue || 0);
        // Store cursor position
        $(this).data('last-value', rawValue || 0);
    });

    $(document).on('input', '.currency-input', function(e) {
        let value = $(this).val().replace(/\./g, '').replace(/,/g, '.');
        value = parseFloat(value) || 0;
        $(this).data('raw', value);

        // Format while typing
        const formatted = new Intl.NumberFormat('id-ID').format(value);
        $(this).val(formatted);
    });

    $(document).on('blur', '.currency-input', function() {
        let value = $(this).val().replace(/\./g, '').replace(/,/g, '.');
        value = parseFloat(value) || 0;
        $(this).data('raw', value);
        $(this).val(new Intl.NumberFormat('id-ID').format(value));
    });

    // Currency input formatting (quick add form)
    $(document).on('focus', '.currency-input-quick', function() {
        const rawValue = $(this).data('raw') || 0;
        $(this).val(rawValue === 0 ? '' : rawValue);
    });

    $(document).on('input', '.currency-input-quick', function(e) {
        let value = $(this).val().replace(/\./g, '').replace(/,/g, '.');
        value = parseFloat(value) || 0;
        $(this).data('raw', value);

        // Format while typing
        const formatted = new Intl.NumberFormat('id-ID').format(value);
        $(this).val(formatted);
    });

    $(document).on('blur', '.currency-input-quick', function() {
        let value = $(this).val().replace(/\./g, '').replace(/,/g, '.');
        value = parseFloat(value) || 0;
        $(this).data('raw', value);
        $(this).val(new Intl.NumberFormat('id-ID').format(value));
    });

    // Currency input formatting (modal batch)
    $(document).on('focus', '.currency-input-modal', function() {
        const rawValue = $(this).data('raw') || 0;
        $(this).val(rawValue === 0 ? '' : rawValue);
    });

    $(document).on('input', '.currency-input-modal', function(e) {
        let value = $(this).val().replace(/\./g, '').replace(/,/g, '.');
        value = parseFloat(value) || 0;
        $(this).data('raw', value);

        // Update total calculation
        calculateModalBatchTotal();

        // Format while typing
        const formatted = new Intl.NumberFormat('id-ID').format(value);
        $(this).val(formatted);
    });

    $(document).on('blur', '.currency-input-modal', function() {
        let value = $(this).val().replace(/\./g, '').replace(/,/g, '.');
        value = parseFloat(value) || 0;
        $(this).data('raw', value);
        $(this).val(new Intl.NumberFormat('id-ID').format(value));
        calculateModalBatchTotal();
    });

    // Auto save function
    function autoSave(id, field, value, element) {
        element.addClass('saving');

        // For currency fields, get raw value
        if (field === 'debit' || field === 'kredit') {
            value = element.data('raw') || 0;
        }

        $.ajax({
            url: `{{ route('keuangan.update', ':id') }}`.replace(':id', id),
            method: 'POST',
            data: {
                _method: 'PUT',
                field: field,
                value: value
            },
            success: function(response) {
                element.removeClass('saving').addClass('saved');
                setTimeout(() => element.removeClass('saved'), 1000);
                jurnalTable.ajax.reload(null, false);
                updateSummary();
            },
            error: function(xhr) {
                element.removeClass('saving').addClass('error');
                showAlert('error', xhr.responseJSON?.message || 'Gagal menyimpan!');
                setTimeout(() => element.removeClass('error'), 2000);
            }
        });
    }

    // Save row button
    $(document).on('click', '.btn-save-row', function() {
        const row = $(this).closest('tr');
        const id = $(this).data('id');
        const data = {};

        row.find('.editable-field').each(function() {
            const field = $(this).data('field');
            // For currency fields, get raw value
            if (field === 'debit' || field === 'kredit') {
                data[field] = $(this).data('raw') || 0;
            } else {
                data[field] = $(this).val();
            }
        });

        // Validate debit/kredit
        if (!data.debit && !data.kredit) {
            showAlert('error', 'Isi Debit atau Kredit!');
            return;
        }

        $.ajax({
            url: `{{ route('keuangan.update', ':id') }}`.replace(':id', id),
            method: 'POST',
            data: {
                _method: 'PUT',
                ...data
            },
            success: function(response) {
                showAlert('success', 'Data berhasil disimpan!');
                jurnalTable.ajax.reload(null, false);
                updateSummary();
            },
            error: function(xhr) {
                showAlert('error', xhr.responseJSON?.message || 'Gagal menyimpan!');
            }
        });
    });

    // Delete row button
    $(document).on('click', '.btn-delete-row', function() {
        if (!confirm('Yakin ingin menghapus data ini?')) return;

        const id = $(this).data('id');
        $.ajax({
            url: `{{ route('keuangan.destroy', ':id') }}`.replace(':id', id),
            method: 'POST',
            data: { _method: 'DELETE' },
            success: function(response) {
                showAlert('success', 'Data berhasil dihapus!');
                jurnalTable.ajax.reload(null, false);
                updateSummary();
            },
            error: function(xhr) {
                showAlert('error', xhr.responseJSON?.message || 'Gagal menghapus!');
            }
        });
    });

    // Bulk delete
    $('#bulkDeleteBtn').on('click', function() {
        if (!confirm(`Yakin ingin menghapus ${selectedRows.length} data?`)) return;

        $.ajax({
            url: '{{ route("keuangan.bulkDelete") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                ids: selectedRows
            },
            success: function(response) {
                showAlert('success', `${selectedRows.length} data berhasil dihapus!`);
                selectedRows = [];
                updateBulkActions();
                jurnalTable.ajax.reload(null, false);
                updateSummary();
            },
            error: function(xhr) {
                showAlert('error', xhr.responseJSON?.message || 'Gagal menghapus!');
            }
        });
    });

    // Quick Add Form
    $('#addSingleJurnalBtn').on('click', function() {
        $('#quickAddForm').slideToggle();
    });

    $('#closeQuickAddBtn').on('click', function() {
        $('#quickAddForm').slideUp();
    });

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

        const debit = parseFloat($('input[name="debit"]').data('raw')) || 0;
        const kredit = parseFloat($('input[name="kredit"]').data('raw')) || 0;

        if (!debit && !kredit) {
            showAlert('error', 'Isi Debit atau Kredit!');
            return false;
        }

        // Create form data with raw values
        const formData = $(this).serializeArray();
        formData.push({ name: 'debit', value: debit });
        formData.push({ name: 'kredit', value: kredit });

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $.param(formData),
            success: function(response) {
                $('#quickAddForm').slideUp();
                $('#singleJurnalForm')[0].reset();
                $('.select2-akun').val(null).trigger('change');
                $('#singleAkunInput').val('');
                $('input[name="tanggal"]').val('{{ date("Y-m-d") }}');
                $('.currency-input-quick').val('0').data('raw', 0);
                jurnalTable.ajax.reload(null, false);
                updateSummary();

                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    html: `Jurnal berhasil disimpan!<br><br><strong>No. Bukti:</strong> <span style="color: #198754; font-size: 1.1em;">${response.no_bukti}</span>`,
                    timer: 3000,
                    showConfirmButton: false
                });
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan!',
                    confirmButtonText: 'OK'
                });
            }
        });
    });

    // Modal Batch Form
    $('#modalAddBatchRowBtn').on('click', function() {
        addModalBatchRow();
    });

    // Copy global keterangan to all rows
    $('#modal_global_keterangan').on('input', function() {
        const value = $(this).val();
        $('#modalBatchTableBody').find('[id$="_keterangan"]').val(value);
    });

    // Reset modal when opened
    $('#jurnalModal').on('show.bs.modal', function() {
        resetModalBatchForm();
    });

    // Modal Batch Form Submit
    $('#jurnalBatchForm').on('submit', function(e) {
        e.preventDefault();

        // Validate all rows
        let hasError = false;
        let rowCount = 0;
        let totalDebit = 0;
        let totalKredit = 0;

        $('#modalBatchTableBody tr').each(function(index) {
            const tledgerId = $(this).find('[id$="_tledger_id"]').val();
            const keterangan = $(this).find('[id$="_keterangan"]').val();
            const debit = parseFloat($(this).find('[id$="_debit"]').data('raw')) || 0;
            const kredit = parseFloat($(this).find('[id$="_kredit"]').data('raw')) || 0;

            if (!tledgerId || tledgerId === '') {
                showAlert('error', 'Akun harus diisi di baris ' + (index + 1));
                hasError = true;
                return false;
            }

            if (!keterangan || keterangan === '') {
                showAlert('error', 'Keterangan harus diisi di baris ' + (index + 1));
                hasError = true;
                return false;
            }

            if (debit === 0 && kredit === 0) {
                showAlert('error', 'Isi Debit atau Kredit di baris ' + (index + 1));
                hasError = true;
                return false;
            }

            rowCount++;
            totalDebit += debit;
            totalKredit += kredit;
        });

        if (hasError) return;

        // Check balance
        if (totalDebit !== totalKredit) {
            Swal.fire({
                icon: 'warning',
                title: 'Tidak Balance!',
                text: `Debit (${formatRupiah(totalDebit)}) harus sama dengan Kredit (${formatRupiah(totalKredit)})`,
                confirmButtonText: 'OK'
            });
            return;
        }

        // Prepare data
        const formData = {
            tanggal: $('#modal_tanggal').val(),
            no_bukti: $('#modal_no_bukti').val() || null,
            data_jurnal: []
        };

        $('#modalBatchTableBody tr').each(function() {
            const row = $(this);
            const tledgerId = row.find('[id$="_tledger_id"]').val();
            const selectedText = row.find(`[id$="_tledger_id"] option:selected`).text();

            formData.data_jurnal.push({
                akun: selectedText,
                tledger_id: parseInt(tledgerId),
                keterangan: row.find('[id$="_keterangan"]').val(),
                debit: parseFloat(row.find('[id$="_debit"]').data('raw')) || 0,
                kredit: parseFloat(row.find('[id$="_kredit"]').data('raw')) || 0,
                module_ref: row.find('[id$="_module_ref"]').val() || null,
                ref_id: row.find('[id$="_ref_id"]').val() || null
            });
        });

        $.ajax({
            url: '{{ route('keuangan.store.batch') }}',
            method: 'POST',
            data: formData,
            success: function(response) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('jurnalModal'));
                modal.hide();
                resetModalBatchForm();
                jurnalTable.ajax.reload(null, false);
                updateSummary();
                showAlert('success', `${rowCount} jurnal berhasil disimpan dengan No. Bukti: ${response.no_bukti}!`);
            },
            error: function(xhr) {
                showAlert('error', xhr.responseJSON?.message || 'Terjadi kesalahan!');
            }
        });
    });
} );

function showAlert(type, message) {
    Swal.fire({
        icon: type === 'success' ? 'success' : 'error',
        title: type === 'success' ? 'Berhasil!' : 'Gagal!',
        text: message,
        timer: type === 'success' ? 3000 : null,
        showConfirmButton: type !== 'success'
    });
}
</script>
@endpush

<style>
.editable-field {
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.editable-field:hover,
.editable-field:focus {
    border-color: #dee2e6;
    background: #fff;
}

.editable-field.saving {
    border-color: #ffc107;
    background: #fff3cd;
}

.editable-field.saved {
    border-color: #198754;
    background: #d1e7dd;
}

.editable-field.error {
    border-color: #dc3545;
    background: #f8d7da;
}

.bulk-actions {
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.select2-akun-modal {
    width: 100% !important;
}
</style>