@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="row">
                        <div class="card-header col-md-auto">
                            <h5 class="mb-0">List Mutasi Bank</h5>
                        </div>
                        <div class="col">
                            @include('components.alert')
                        </div>
                    </div>

                    <hr class="horizontal dark mt-0">

                    <div class="row px-4 py-3">
                        <div class="col-md-12 mb-3">
                            <button class="btn btn-primary mb-0 me-2"
                                onclick="window.location='{{ url('/trsmts/create') }}'">
                                <i class="fas fa-plus me-1"></i>
                                <span class="font-weight-bold">Tambah</span>
                            </button>
                            
                            @if(isset($user_login) && str_contains($user_login->idroles, 'supadm'))
                            <button class="btn btn-warning mb-0" onclick="openLockTransaksiModal()">
                                <i class="fas fa-lock me-1"></i>
                                <span class="font-weight-bold">Kunci Transaksi</span>
                            </button>
                            @endif
                        </div>

                        @if(isset($filterMessage) && $filterMessage)
                        <div class="col-md-12 mb-3">
                            <div class="alert alert-info text-white mb-0" role="alert">
                                <strong><i class="fas fa-info-circle me-1"></i> Informasi Filter:</strong> {{ $filterMessage }}.
                            </div>
                        </div>
                        @endif

                        <div class="col-md-12 mb-3">
                            <form method="GET" action="{{ url('/trsmts') }}" id="filterForm">
                                @foreach(request()->except(['project_id', 'project_display', 'po_assign_id', 'po_assign_display', 'rekening_id', 'rekening_display',  'kode_mutasi_id', 'kode_mutasi_display', 'date_from', 'date_to', 'description', 'page', 'saldo_mode']) as $key => $val)
                                    <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                                @endforeach
                                
                                

                                <div class="d-flex flex-wrap align-items-end gap-3">
                                    
                                    <div style="flex: 1 1 260px; min-width: 260px;">
                                        <label for="project_display" class="form-label text-sm font-weight-bold">Filter Project</label>
                                        <input type="hidden" id="project_id" name="project_id" value="{{ request('project_id') }}">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="project_display" name="project_display"
                                                value="{{ request('project_display') }}" placeholder="-- Semua Project --" readonly>
                                            <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                                onclick="openSelectProjectModal()">
                                                <i class="fas fa-search"></i>
                                            </span>
                                            <span class="input-group-text bg-danger text-light" style="cursor:pointer"
                                                onclick="clearSettingsProject()">
                                                <i class="fas fa-times"></i>
                                            </span>
                                        </div>
                                    </div>

                                    <div style="flex: 1 1 260px; min-width: 260px;">
                                        <label for="po_assign_display" class="form-label text-sm font-weight-bold">Filter PO</label>
                                        <input type="hidden" id="po_assign_id" name="po_assign_id" value="{{ request('po_assign_id') }}">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="po_assign_display" name="po_assign_display"
                                                value="{{ request('po_assign_display') }}" placeholder="-- Semua PO --" readonly>
                                            <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                                onclick="openSelectPOAssignFilterModal()">
                                                <i class="fas fa-search"></i>
                                            </span>
                                            <span class="input-group-text bg-danger text-light" style="cursor:pointer"
                                                onclick="clearSettingsPOAssign()">
                                                <i class="fas fa-times"></i>
                                            </span>
                                        </div>
                                    </div>

                                    <div style="flex: 1 1 260px; min-width: 260px;">
                                        <label for="rekening_display" class="form-label text-sm font-weight-bold">Filter Rekening</label>
                                        <input type="hidden" id="rekening_id" name="rekening_id" value="{{ request('rekening_id') }}">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="rekening_display" name="rekening_display"
                                                value="{{ request('rekening_display') }}" placeholder="-- Semua Rekening --" readonly>
                                            <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                                onclick="openSelectRekeningModal()">
                                                <i class="fas fa-search"></i>
                                            </span>
                                            <span class="input-group-text bg-danger text-light" style="cursor:pointer"
                                                onclick="clearSettingsRekening()">
                                                <i class="fas fa-times"></i>
                                            </span>
                                        </div>
                                    </div>
                                    

                                    <div style="flex: 1 1 260px; min-width: 260px;">
                                        <label for="kode_mutasi_display" class="form-label text-sm font-weight-bold">Filter Kode Mutasi</label>
                                        <input type="hidden" id="kode_mutasi_id" name="kode_mutasi_id" value="{{ request('kode_mutasi_id') }}">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="kode_mutasi_display" name="kode_mutasi_display"
                                                value="{{ request('kode_mutasi_display') }}" placeholder="-- Pilih Kode Mutasi --" readonly>
                                            <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                                onclick="openSelectKodeMutasiModal()">
                                                <i class="fas fa-search"></i>
                                            </span>
                                            <span class="input-group-text bg-danger text-light" style="cursor:pointer"
                                                onclick="clearSettingsKodeMutasi()">
                                                <i class="fas fa-times"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div style="flex-basis: 100%; height: 0;"></div>
                                    

                                    <div style="flex: 1 1 200px; min-width: 200px;">
                                        <label for="date_from" class="form-label text-sm font-weight-bold">Dari Tanggal</label>
                                        <input type="date" class="form-control" id="date_from" name="date_from"
                                            value="{{ request('date_from') }}">
                                    </div>

                                    <div style="flex: 1 1 200px; min-width: 200px;">
                                        <label for="date_to" class="form-label text-sm font-weight-bold">Sampai Tanggal</label>
                                        <input type="date" class="form-control" id="date_to" name="date_to"
                                            value="{{ request('date_to') }}">
                                    </div>

                                    <div style="flex: 1 1 260px; min-width: 260px;">
                                        <label for="description" class="form-label text-sm font-weight-bold">Filter Description</label>
                                        <input type="text" class="form-control" id="description" name="description"
                                            value="{{ request('description') }}" placeholder="Cari keterangan...">
                                    </div>
                                    <div style="flex: 1 1 260px; min-width: 260px;">
                                        <label class="form-label text-sm font-weight-bold">
                                            Perhitungan Saldo
                                        </label>

                                        <select class="form-select" id="saldoMode" name="saldo_mode">
                                            <option value="global"
                                                {{ request('saldo_mode', 'global') === 'global' ? 'selected' : '' }}>
                                                Global
                                            </option>

                                            <option value="filter"
                                                {{ request('saldo_mode') === 'filter' ? 'selected' : '' }}>
                                                Berdasarkan Filter
                                            </option>
                                        </select>
                                    </div>

                                    

                                    <div style="flex: 0 0 auto;">
                                        <button type="submit" class="btn btn-primary mb-0 me-2">
                                            <i class="fas fa-filter me-1"></i> Filter
                                        </button>
                                        <a href="{{ url('/trsmts') }}" class="btn btn-secondary mb-0">
                                            <i class="fas fa-undo me-1"></i> Reset
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="row px-4 py-2">
                        <div class="col-md-12">
                            <div id="tableControlBar" class="d-flex justify-content-between align-items-center mb-2">
                            </div>
                            <div class="table-responsive" style="overflow-x: auto; position: relative;">
                                <table class="table display" id="list_trsmts">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center" width="110">Action</th>
                                            <th class="text-center">No</th>
                                            <th class="text-center">Tanggal</th>
                                            <th class="text-center">Rekening Sumber</th>
                                            <th class="text-center">Rekening Asal/Tujuan</th>
                                            <th class="text-center">Kode Mutasi</th>
                                            <th class="text-center">No. Bukti</th>
                                            <th class="text-center">PO Number</th>
                                            <th class="text-center">Project</th>
                                            <th class="text-center">Description</th>
                                            <th class="text-center">Tipe</th>
                                            <th class="text-center">Net Amount</th>
                                            <th class="text-center">PPh</th>
                                            <th class="text-center">PPN</th>
                                            <th class="text-center">Saldo Berjalan</th>
                                            <th class="text-center">Saldo Akhir</th>
                            
                                            <th class="text-center">Created At</th>
                                            <th class="text-center">Created By</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @forelse($data as $index => $item)
                                        <tr data-id="{{ $item->id }}" data-date="{{ $item->date }}"  data-rekening-id="{{ $item->rekening_id }}" data-is-credit="{{ $item->is_credit }}" style="background-color: {{ $item->is_credit == 1 ? '#ffe6f0' : '#d4edda' }};">
                                            <td class="text-sm font-weight-normal">
                                                <div class="btn-group">
                                                    <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                        title="View Data"
                                                        onclick="window.location={{ json_encode(url('/trsmts/show/' . encrypt($item->id))) }}">
                                                        <i class="fas fa-eye"></i>
                                                        <span class="font-weight-bold"> View</span>
                                                    </button>

                                                    <button type="button"
                                                        class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        <span class="visually-hidden">Toggle Dropdown</span>
                                                    </button>

                                                    <ul class="dropdown-menu">
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        @php
                                                            $isClosed = $item->project_is_closed ?? $item->project_is_closed_direct;
                                                            $isMonthLocked = false;
                                                            if(isset($lockedMonths) && $item->date) {
                                                                $itemDate = \Carbon\Carbon::parse($item->date);
                                                                $itemMonth = (int)$itemDate->format('n');
                                                                $itemYear = (int)$itemDate->format('Y');
                                                                $isMonthLocked = $lockedMonths->contains(function($lock) use ($itemMonth, $itemYear) {
                                                                    return (int)$lock->bulan === $itemMonth && (int)$lock->tahun === $itemYear;
                                                                });
                                                            }
                                                        @endphp

                                                        @if($isClosed)
                                                            <button type="button" class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                                title="Project sudah diselesaikan"
                                                                onclick="showClosedProjectAlert()">
                                                                <i class="fas fa-edit"></i>
                                                                <span class="font-weight-bold">Edit</span>
                                                            </button>
                                                        @elseif($isMonthLocked)
                                                            <button type="button" class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                                title="Bulan transaksi sudah dikunci"
                                                                onclick="showLockedMonthAlert()">
                                                                <i class="fas fa-edit"></i>
                                                                <span class="font-weight-bold">Edit</span>
                                                            </button>
                                                        @else
                                                                <button type="button" class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                    title="Edit Data"
                                                                    onclick="window.location={{ json_encode(url('/trsmts/edit/' . encrypt($item->id))) }}">
                                                                <i class="fas fa-edit"></i>
                                                                <span class="font-weight-bold">Edit</span>
                                                            </button>
                                                        @endif

                                                        @if(isset($user_login) && str_contains($user_login->idroles, 'supadm'))
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>

                                                        @if($isMonthLocked)
                                                        <button type="button" class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                            title="Bulan transaksi sudah dikunci"
                                                            onclick="showLockedMonthDeleteAlert()">
                                                            <i class="fas fa-trash"></i>
                                                            <span class="font-weight-bold">Hapus</span>
                                                        </button>
                                                        @else
                                                        <button type="button" class="btn btn-sm btn-danger mx-2 mb-0 w-90"
                                                            title="Hapus Data"
                                                            onclick="deleteData('{{ encrypt($item->id) }}', '{{ $item->date_formatted }} - {{ $item->nomor_bukti ?? 'N/A' }}')">
                                                            <i class="fas fa-trash"></i>
                                                            <span class="font-weight-bold">Hapus</span>
                                                        </button>
                                                        @endif

                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                        @endif
                                                    </ul>
                                                </div>
                                            </td>

                                            <td>{{ $data->firstItem() + $index }}</td>
                                            <td class="text-sm font-weight-normal">{{ \Carbon\Carbon::parse($item->date_formatted)->format('j-M-Y h:i A') }}@if($isMonthLocked)
                                                <span class="badge bg-danger ms-1 p-1" title="Transaksi terkunci"><i class="fas fa-lock"></i></span>
                                                @endif</td>
                                            <td class="text-sm font-weight-normal">{{ $item->rekening_display}}</td>
                                            <td class="text-sm font-weight-normal {{ $item->rekening_tujuan_dari_display == ' - ' ? 'text-center' : 'text-start' }}">{{ $item->rekening_tujuan_dari_display}}</td>
                                            <td class="text-sm font-weight-normal {{ $item->kode_mutasi ? 'text-start' : 'text-center' }}">{{ $item->kode_mutasi ?? '-' }}</td>
                                            <td class="text-sm font-weight-normal {{ $item->nomor_bukti ? 'text-start' : 'text-center' }}">{{ $item->nomor_bukti ?? '-' }}</td>
                                            <td class="text-sm font-weight-normal {{ $item->has_po ? 'text-start' : 'text-center' }}">
                                                @if($item->has_po)
                                                    <span title="{{ $item->po_numbers ?? '' }}">
                                                        {{ $item->po_numbers ?? '-' }}
                                                    </span>

                                                    @if(($item->po_count ?? 0) > 1)
                                                        <span class="badge bg-info ms-1">
                                                            {{ $item->po_count }}
                                                        </span>
                                                    @endif
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td class="text-sm font-weight-normal {{ $item->project_display == '-' ? 'text-center' : 'text-start' }}">{{ $item->project_display ?? '-' }}</td>
                                            <td class="text-sm font-weight-normal {{ $item->description_short == '-' ? 'text-center' : 'text-start' }}" title="{{ $item->description ?? '' }}">{{ $item->description_short ?? '-' }}</td>
                                            <td class="text-sm font-weight-normal">
                                                @if($item->is_credit == 1)
                                                <span class="badge bg-danger">Credit</span>
                                                @else
                                                <span class="badge bg-success">Debit</span>
                                                @endif
                                            </td>
                                            <td class="text-sm font-weight-normal text-end amount-cell" data-amount="{{ $item->amount }}">Rp {{ $item->amount_formatted }}
                                            </td>
                                            <td class="pph-cell text-sm font-weight-normal {{ $item->pph_amount_formatted ? 'text-end' : 'text-center' }}" data-pph="{{ $item->pph_amount ?? 0 }}">
                                                @if($item->pph_amount_formatted)
                                                Rp {{ $item->pph_amount_formatted }}
                                                @else
                                                -
                                                @endif
                                            </td>
                                            <td class="ppn-cell text-sm font-weight-normal {{ $item->ppn_amount_formatted ? 'text-end' : 'text-center' }}" data-ppn="{{ $item->ppn_amount ?? 0 }}">
                                                @if($item->ppn_amount_formatted)
                                                Rp {{ $item->ppn_amount_formatted }}
                                                @else
                                                -
                                                @endif
                                            </td>
                                            <td class="text-sm font-weight-normal text-end saldo-berjalan-cell"
                                                data-saldo-berjalan="{{ $item->saldo_berjalan ?? 0 }}">
                                                Rp {{ number_format($item->saldo_berjalan ?? 0, 2, ',', '.') }}
                                            </td>

                                            <td class="text-sm font-weight-normal text-end saldo-akhir-cell"
                                                data-global-saldo="{{ $item->saldo_akhir ?? 0 }}"
                                                data-filter-saldo="{{ $item->saldo_filter ?? 0 }}">

                                                Rp {{ number_format($item->saldo_akhir ?? 0, 2, ',', '.') }}
                                            </td>
                                            <td class="text-sm font-weight-normal">{{ \Carbon\Carbon::parse($item->formatted_created_at)->format('j-M-Y h:i A') }}</td>
                                            <td class="text-sm font-weight-normal {{ $item->user_create ? 'text-start' : 'text-center' }}">{{ $item->user_create ?? '-' }}</td>
                                        </tr>
                                        @empty
<tr>
    @for($i = 1; $i <= 18; $i++)
        @if($i == 9)
            <td class="text-center">Tidak ada data</td>
        @else
            <td></td>
        @endif
    @endfor
</tr>
@endforelse
                            </tbody>
                        </table>
                            </div>

                        <div class="mb-3 mt-3">
                            <small>
                                <span class="badge"
                                    style="background-color: #ffe6f0; color: #333; padding: 5px 10px;">
                                    <i class="fas fa-square me-1"></i>Kredit
                                </span>
                                <span class="badge"
                                    style="background-color: #d4edda; color: #333; padding: 5px 10px;">
                                    <i class="fas fa-square me-1"></i>Debit
                                </span>
                            </small>
                        </div>

                        <div class="d-flex flex-column align-items-center mt-3">
                            <div class="d-flex justify-content-between align-items-center w-100">
                                <div class="mb-2">
                                    Data {{ $data->firstItem() ?? 0 }} - {{ $data->lastItem() ?? 0 }} dari {{
                                    $data->total() }} data.
                                </div>
                                <div>
                                    {{ $data->appends(request()->query())->links('pagination::bootstrap-4') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Include Modals --}}
@include('transc.trsmts.modals')
@endsection

@push('js')
<script>
    $(document).ready(function() {
    // CSRF Token Setup
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).on('show.bs.dropdown', '#list_trsmts .btn-group', function () {
        $(this).closest('td').css('z-index', 999);
    });

    $(document).on('hide.bs.dropdown', '#list_trsmts .btn-group', function () {
        $(this).closest('td').css('z-index', 3);
    });

    // DataTables Init
    const tableId = '#list_trsmts';

    if (!$(tableId).length) return;

    function buildExportUrl(format) {
        const url = new URL(window.location.href);
        url.searchParams.set('export', format);
        return url.toString();
    }

    // Check if table has data rows (not just empty state)
    const hasData = $(tableId + ' tbody tr').length > 0;

    if (hasData) {
        const dt = $(tableId).DataTable({
            paging: false,
            info: false,
            searching: true,
            responsive: true,
            ordering: false,
            language: {
                search: "Cari :",
                lengthMenu: "Tampilkan _MENU_ baris",
                zeroRecords: "Maaf - Data tidak ada",
                info: "Data _START_ - _END_ dari _TOTAL_",
                infoEmpty: "Tidak ada data",
                infoFiltered: "(pencarian dari _MAX_ data)"
            },
            dom: '<"row"<"col-lg-12"Bf>>rt',
            buttons: [
                {
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                    action: function () {
                        window.location.href = buildExportUrl('excel');
                    }
                },
            ],
            drawCallback: function () {
                $('.dataTables_info').remove();
                applySaldoCalculationMode();
                applyStickyColumns();
            },
            initComplete: function () {
                // Remove DataTables default info and search
                $('.dataTables_info').remove();
                
                var searchBarHtml = `
                    <div class="dataTables_filter d-flex justify-content-end">
                        <form method="GET" action="{{ url('/trsmts') }}" class="d-flex">
                            <input type="text" name="search" class="form-control me-2"
                                placeholder="Search..." value="{{ request('search') }}">
                        </form>
                    </div>
                `;
                $('.dataTables_filter').remove();
                $(searchBarHtml).insertAfter('.dt-buttons');
                applyStickyColumns();
                
                // Move the button group and search to the control bar
                const buttonGroup = $('.dt-buttons');
                const searchGroup = $('.dataTables_filter');
                
                // Clear control bar - button on left, search on right
                $('#tableControlBar').empty();
                $('#tableControlBar').prepend(buttonGroup);
                $('#tableControlBar').append(searchGroup);
            }
        });

        applySaldoCalculationMode();
        $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
    } else {
        // If no data, just add the export button manually
        const buttonsHtml = `
            <button class="btn btn-secondary" onclick="window.location.href='${buildExportUrl('excel')}'">
                <i class="fas fa-file-excel me-1 text-lg text-success"></i>
                <span class="font-weight-bold"> Excel</span>
            </button>
        `;
        $('#tableControlBar').prepend(buttonsHtml);
    }
});

/**
 * Apply sticky columns with calculated positions
 */
function applyStickyColumns() {
    const $firstRow = $('#list_trsmts tr:visible').first();
    if (!$firstRow.length) return;

    let cumulativeLeft = 0;
    const offsets = [];

    // Calculate cumulative widths for first 4 columns
    for (let i = 0; i < 4; i++) {
        const $cell = $firstRow.find('th:eq(' + i + '), td:eq(' + i + ')');
        if ($cell.length) {
            offsets[i] = cumulativeLeft;
            cumulativeLeft += $cell.outerWidth();
        }
    }

    // Reset all cells first - ONLY within the table
    $('#list_trsmts').find('th, td').css({
        'position': '',
        'left': '',
        'top': '',
        'z-index': ''
    });

    // Apply sticky to body cells (first 4 columns only)
    for (let i = 0; i < 4; i++) {
        if (offsets[i] === undefined) continue;
        
        const selector = '#list_trsmts tbody td:nth-child(' + (i + 1) + ')';
        
       $(selector).each(function () {
            const $row = $(this).closest('tr');
            const bg = $row.length ? $row.css('background-color') : '';

            $(this).css({
                position: 'sticky',
                left: offsets[i] + 'px',
                zIndex: 3,
                background: bg,
                backgroundClip: 'padding-box'
            });
        });
    }

    // Apply sticky to ALL header cells (vertical sticky)
    $('#list_trsmts thead th').css({
        'position': 'sticky',
        'top': 0,
        'z-index': 4
    });

    // Apply sticky to first 4 header cells (corner - both horizontal and vertical)
    for (let i = 0; i < 4; i++) {
        if (offsets[i] === undefined) continue;
        
        const selector = '#list_trsmts thead th:nth-child(' + (i + 1) + ')';
        
        $(selector).css({
            'left': offsets[i] + 'px',
            'z-index': 5,
            'background': '#dddffa'
        });
    }

    // Ensure table container allows scrolling but doesn't hide content
    $('.table-responsive').css({
        'overflow-x': 'auto',
        'position': 'relative'
    });
}

/**
 * Delete Data with AJAX
 */
function deleteData(id, name) {
    Swal.fire({
        title: 'Konfirmasi',
        text: `Apakah Anda yakin ingin menghapus data "${name}"?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6'
    }).then((result) => {
        if (result.isConfirmed) {
            // Show loading
            Swal.fire({
                title: 'Menghapus...',
                text: 'Mohon tunggu',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });

            // AJAX Delete Request
            $.ajax({
                url: '{{ url("/trsmts") }}/' + id,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonColor: '#028284'
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            title: 'Gagal!',
                            text: response.message,
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    const errorMsg = xhr.responseJSON?.message || 'Terjadi kesalahan saat menghapus data';
                    
                    Swal.fire({
                        title: 'Error!',
                        text: errorMsg,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }
    });
}

// ============================================
// MODAL & FILTER FUNCTIONS
// ============================================
let projectsData = [];
let projectSearchTerm = '';
let isLoadingProjects = false;

$(document).ready(function() {
    loadProjects();

    $(document).on('input', '#searchProject', function() {
        projectSearchTerm = $(this).val().trim().toLowerCase();
        renderProjectTable(projectsData);
    });
});

function loadProjects() {
    isLoadingProjects = true;
    renderProjectTable(projectsData);

    $.ajax({
        url: '{{ url("/trsmts/api/projects") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                projectsData = response.data;
            }
        },
        complete: function() {
            isLoadingProjects = false;
            renderProjectTable(projectsData);
        }
    });
}

function filterProjectData(data) {
    if (!projectSearchTerm) {
        return data;
    }

    return data.filter((item) => {
        const text = [
            item.proyek,
            item.lokasi,
            item.pekerjaan,
            item.pemilik,
            item.no_spk,
            item.no_po,
            item.sales,
            item.pv_cap,
            item.inv_cap
        ]
            .filter(Boolean)
            .join(' ')
            .toLowerCase();

        return text.includes(projectSearchTerm);
    });
}

function renderProjectTable(data) {
    const filteredData = filterProjectData(data);
    let html = '';

    if (isLoadingProjects) {
        html = '<tr><td colspan="11" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>';
    } else if (filteredData.length === 0) {
        html = '<tr><td colspan="11" class="text-center">Tidak ada data</td></tr>';
    } else {
        filteredData.forEach((item, index) => {
            const proyekEscaped = String(item.proyek || '').replace(/'/g, "\\'");
            const noSpkEscaped = String(item.no_spk || '').replace(/'/g, "\\'");
            html += `
                <tr>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" onclick="selectProject(${item.id}, '${proyekEscaped}', '${noSpkEscaped}')">
                            <i class="fas fa-check"></i> Pilih
                        </button>
                    </td>
                    <td class="text-center">${index + 1}</td>
                    <td  class="${item.proyek ? 'text-start' : 'text-center'}">${item.proyek || '-'}</td>
                    <td class="${item.lokasi ? 'text-start' : 'text-center'}">${item.lokasi || '-'}</td>
                    <td class="${item.pekerjaan ? 'text-start' : 'text-center'}">${item.pekerjaan || '-'}</td>
                    <td class="${item.pemilik ? 'text-start' : 'text-center'}">${item.pemilik || '-'}</td>
                    <td class="${item.no_spk ? 'text-start' : 'text-center'}">${item.no_spk || '-'}</td>
                    
                    <td class="${item.sales ? 'text-start' : 'text-center'}">${item.sales || '-'}</td>
                    <td class="${item.pv_cap ? 'text-start' : 'text-center'}">${item.pv_cap || '-'}</td>
                    <td class="${item.inv_cap ? 'text-start' : 'text-center'}">${item.inv_cap || '-'}</td>
                    <td class="${item.forex ? 'text-start' : 'text-center'}">${item.forex || '-'}</td>
                </tr>
            `;
        });
    }
    $('#projectTableBody').html(html);
}

function openSelectProjectModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectProject').modal('show');
        projectSearchTerm = '';
        $('#searchProject').val('');
        renderProjectTable(projectsData);
    }, 300);
}

function selectProject(id, proyek, no_spk) {
    $('#project_id').val(id);
    const display = no_spk ? `${proyek} - ${no_spk}` : proyek;
    $('#project_display').val(display);
    $('#modalSelectProject').modal('hide');
}

function clearSettingsProject() {
    $('#project_id').val('');
    $('#project_display').val('');
}

// ============================================
// PO ASSIGN FILTER FUNCTIONS
// ============================================
let poFilterData = [];
let poFilterSearchTerm = '';
let isLoadingPoFilter = false;
let poFilterCurrentPage   = 1;
let poFilterLastPage      = 1;
let poFilterTotal         = 0;
let poFilterPerPage       = 10;
let poFilterSearchTimer   = null;

$(document).ready(function() {
    $(document).on('input', '#searchPOFilter', function() {
        clearTimeout(poFilterSearchTimer);
        poFilterSearchTerm = $(this).val().trim().toLowerCase();
        poFilterSearchTimer = setTimeout(function() { loadPOFilter(1); }, 400);
    });
});

function loadPOFilter(page) {
    if (!page) page = 1;
    isLoadingPoFilter = true;
    renderPOFilterTable([]);

    $.ajax({
        url: '{{ url("/trsmts/api/po-assign") }}',
        type: 'GET',
        data: { search: poFilterSearchTerm, page: page, per_page: poFilterPerPage },
        success: function(response) {
            if (response.success) {
                poFilterData      = response.data;
                poFilterCurrentPage = response.pagination.current_page;
                poFilterLastPage    = response.pagination.last_page;
                poFilterTotal       = response.pagination.total;
            }
        },
        complete: function() {
            isLoadingPoFilter = false;
            renderPOFilterTable(poFilterData);
            renderPOFilterPagination();
        }
    });
}

function renderPOFilterTable(data) {
    const tbody = $('#poFilterTableBody');
    tbody.empty();

    if (isLoadingPoFilter) {
        tbody.html('<tr><td colspan="5" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
        return;
    }
    if (data.length === 0) {
        tbody.html('<tr><td colspan="5" class="text-center">Tidak ada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        const projectDisplay = item.proyek || '-';
        const supplierDisplay = item.supplier_name || '-';
        const poNumberEscaped = String(item.po_number || '').replace(/'/g, "\\'");
        const desc = item.description || '';

        tbody.append(`
            <tr>
                <td>
                    <button type="button" class="btn btn-primary btn-sm"
                        onclick="selectPOAssignFilter(${item.id}, '${poNumberEscaped}')">
                        <i class="fas fa-check"></i> Pilih
                    </button>
                </td>
                <td class="text-center">${index + 1}</td>
                <td class="fw-semibold text-primary">${item.po_number}</td>
                <td class="small ${desc ? 'text-start' : 'text-center'}">${desc || '-'}</td>
                <td class="small ${projectDisplay ? 'text-start' : 'text-center'}">${projectDisplay}</td>
                <td class="small ${supplierDisplay ? 'text-start' : 'text-center'}">${supplierDisplay}</td>
            </tr>
        `);
    });
}

function renderPOFilterPagination() {
    const paginationEl = $('#poFilterPagination');
    paginationEl.empty();
    if (poFilterLastPage <= 1) return;

    const ul = $('<ul class="pagination pagination-sm mb-0"></ul>');

    ul.append(`<li class="page-item ${poFilterCurrentPage === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${poFilterCurrentPage - 1}" aria-label="Prev">
            <i class="fas fa-chevron-left"></i>
        </a>
    </li>`);

    let startPage = Math.max(1, poFilterCurrentPage - 2);
    let endPage   = Math.min(poFilterLastPage, startPage + 4);
    if (endPage - startPage < 4) startPage = Math.max(1, endPage - 4);

    if (startPage > 1) {
        ul.append(`<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>`);
        if (startPage > 2) ul.append('<li class="page-item disabled"><a class="page-link">&hellip;</a></li>');
    }
    for (let p = startPage; p <= endPage; p++) {
        ul.append(`<li class="page-item ${p === poFilterCurrentPage ? 'active' : ''}">
            <a class="page-link" href="#" data-page="${p}">${p}</a>
        </li>`);
    }
    if (endPage < poFilterLastPage) {
        if (endPage < poFilterLastPage - 1) ul.append('<li class="page-item disabled"><a class="page-link">&hellip;</a></li>');
        ul.append(`<li class="page-item"><a class="page-link" href="#" data-page="${poFilterLastPage}">${poFilterLastPage}</a></li>`);
    }

    ul.append(`<li class="page-item ${poFilterCurrentPage === poFilterLastPage ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${poFilterCurrentPage + 1}" aria-label="Next">
            <i class="fas fa-chevron-right"></i>
        </a>
    </li>`);

    ul.on('click', 'a.page-link[data-page]', function(e) {
        e.preventDefault();
        if ($(this).closest('li').hasClass('disabled') || $(this).closest('li').hasClass('active')) return;
        const pg = parseInt($(this).data('page'));
        if (!isNaN(pg) && pg >= 1 && pg <= poFilterLastPage) loadPOFilter(pg);
    });

    paginationEl.append(ul);
}

function openSelectPOAssignFilterModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        poFilterSearchTerm = '';
        $('#searchPOFilter').val('');
        $('#modalSelectPOAssignFilter').modal('show');
        loadPOFilter(1);
        setTimeout(function() { $('#searchPOFilter').focus(); }, 150);
    }, 300);
}

function selectPOAssignFilter(id, poNumber) {
    $('#po_assign_id').val(id);
    const display = poNumber;
    $('#po_assign_display').val(display);
    $('#modalSelectPOAssignFilter').modal('hide');
}

function clearSettingsPOAssign() {
    $('#po_assign_id').val('');
    $('#po_assign_display').val('');
}

// ============================================
// REKENING FILTER FUNCTIONS
// ============================================
let rekeningData = [];
let rekeningSearchTerm = '';
let isLoadingRekening = false;

let kodeMutasiData = [];
let kodeMutasiSearchTerm = '';
let isLoadingKodeMutasi = false;

$(document).ready(function() {
    loadRekening();
    loadKodeMutasi();

    $(document).on('input', '#searchRekening', function() {
        rekeningSearchTerm = $(this).val().trim().toLowerCase();
        renderRekeningTable(rekeningData);
    });

    $(document).on('input', '#searchKodeMutasi', function() {
        kodeMutasiSearchTerm = $(this).val().trim().toLowerCase();
        renderKodeMutasiTable(kodeMutasiData);
    });
});

function loadRekening() {
    isLoadingRekening = true;
    renderRekeningTable(rekeningData);

    $.ajax({
        url: '{{ url("/trsmts/api/rekening") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                rekeningData = response.data;
            }
        },
        complete: function() {
            isLoadingRekening = false;
            renderRekeningTable(rekeningData);
        }
    });
}

function loadKodeMutasi() {
    isLoadingKodeMutasi = true;
    renderKodeMutasiTable(kodeMutasiData);

    $.ajax({
        url: '{{ route("trsmts.api.kode-mutasi") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                kodeMutasiData = response.data;
            }
        },
        complete: function() {
            isLoadingKodeMutasi = false;
            renderKodeMutasiTable(kodeMutasiData);
        }
    });
}

function filterRekeningData(data) {
    if (!rekeningSearchTerm) {
        return data;
    }

    return data.filter((item) => {
        const text = [
            item.nama_bank,
            item.nomor_akun,
            item.nama_akun
        ]
            .filter(Boolean)
            .join(' ')
            .toLowerCase();

        return text.includes(rekeningSearchTerm);
    });
}

function filterKodeMutasiData(data) {
    if (!kodeMutasiSearchTerm) {
        return data;
    }

    return data.filter((item) => {
        const text = [
            item.kode_mutasi,
            item.is_in == 1 ? 'masuk' : 'keluar'
        ]
            .filter(Boolean)
            .join(' ')
            .toLowerCase();

        return text.includes(kodeMutasiSearchTerm);
    });
}

function renderRekeningTable(data) {
    const filteredData = filterRekeningData(data);
    let html = '';

    if (isLoadingRekening) {
        html = '<tr><td colspan="7" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>';
    } else if (filteredData.length === 0) {
        html = '<tr><td colspan="7" class="text-center">Tidak ada data</td></tr>';
    } else {
        filteredData.forEach((item, index) => {
            const namaBankEscaped = String(item.nama_bank || '').replace(/'/g, "\\'");
            const nomorAkunEscaped = String(item.nomor_akun || '').replace(/'/g, "\\'");
            html += `
                <tr>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" onclick="selectRekening(${item.id}, '${namaBankEscaped}', '${nomorAkunEscaped}')">
                            <i class="fas fa-check"></i> Pilih
                        </button>
                    </td>
                    <td class="text-center">${index + 1}</td>
                    <td>${item.nama_bank || '-'}</td>
                    <td>${item.nomor_akun || '-'}</td>
                    <td>${item.nama_akun || '-'}</td>
                    <td class="text-end">${item.saldo_awal_formatted || '-'}</td>
                    <td class="text-end">${item.saldo_akhir_formatted || '-'}</td>
                </tr>
            `;
        });
    }
    $('#rekeningTableBody').html(html);
}

function renderKodeMutasiTable(data) {
    const filteredData = filterKodeMutasiData(data);
    let html = '';

    if (isLoadingKodeMutasi) {
        html = '<tr><td colspan="4" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>';
    } else if (filteredData.length === 0) {
        html = '<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>';
    } else {
        filteredData.forEach((item, index) => {
            const kodeMutasiEscaped = String(item.kode_mutasi || '').replace(/'/g, "\\'");
            const mutasiType = item.is_in == 1 ? 'Masuk' : 'Keluar';
            html += `
                <tr>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" onclick="selectKodeMutasi(${item.id}, '${kodeMutasiEscaped}')">
                            <i class="fas fa-check"></i> Pilih
                        </button>
                    </td>
                    <td class="text-center">${index + 1}</td>
                    <td>${item.kode_mutasi || '-'}</td>
                    <td>${mutasiType}</td>
                </tr>
            `;
        });
    }
    $('#kodeMutasiTableBody').html(html);
}

function openSelectRekeningModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectRekening').modal('show');
        rekeningSearchTerm = '';
        $('#searchRekening').val('');
        renderRekeningTable(rekeningData);
    }, 300);
}
function openSelectKodeMutasiModal() {
    $('.modal').modal('hide');

    setTimeout(function() {
        $('#modalSelectKodeMutasi').modal('show');

        kodeMutasiSearchTerm = '';
        $('#searchKodeMutasi').val('');

        renderKodeMutasiTable(kodeMutasiData);
    }, 300);
}

function selectRekening(id, namaBank, nomorAkun) {
    $('#rekening_id').val(id);
    const display = `${namaBank} - ${nomorAkun}`;
    $('#rekening_display').val(display);
    $('#modalSelectRekening').modal('hide');
}

function selectKodeMutasi(id, kodeMutasi) {
    $('#kode_mutasi_id').val(id);
    $('#kode_mutasi_display').val(kodeMutasi);
    $('#modalSelectKodeMutasi').modal('hide');
}

function clearSettingsRekening() {
    $('#rekening_id').val('');
    $('#rekening_display').val('');
}

function clearSettingsKodeMutasi() {
    $('#kode_mutasi_id').val('');
    $('#kode_mutasi_display').val('');
}

function applySaldoCalculationMode() {

    const params =
        new URLSearchParams(window.location.search);

    const mode =
        params.get('saldo_mode') === 'filter'
            ? 'filter'
            : 'global';

    $('#list_trsmts tbody tr').each(function() {

        const cell =
            $(this).find('.saldo-akhir-cell');

        const saldo =
            mode === 'filter'
                ? parseFloat(
                    cell.data('filter-saldo')
                ) || 0
                : parseFloat(
                    cell.data('global-saldo')
                ) || 0;

        cell.text(formatRupiah(saldo));
    });
}

function restoreGlobalSaldo() {

    $('#list_trsmts tbody tr').each(function() {

        const saldo =
            parseFloat(
                $(this)
                .find('.saldo-akhir-cell')
                .data('global-saldo')
            ) || 0;

        $(this)
            .find('.saldo-akhir-cell')
            .text(formatRupiah(saldo));
    });
}
// function calculateSaldoBerjalan() {
//     const visibleRows = $('#list_trsmts tbody tr:visible');

//     if (!visibleRows.length) {
//         return;
//     }

//     const rekeningGroups = {};

//     visibleRows.each(function() {
//         const rekeningId = $(this).data('rekening-id');

//         if (!rekeningGroups[rekeningId]) {
//             rekeningGroups[rekeningId] = [];
//         }

//         rekeningGroups[rekeningId].push(this);
//     });

//     Object.values(rekeningGroups).forEach(rows => {

//         rows.sort((a, b) => {
//             const dateDiff =
//                 new Date($(a).data('date')) -
//                 new Date($(b).data('date'));

//             if (dateDiff !== 0) {
//                 return dateDiff;
//             }

//             return $(a).data('id') - $(b).data('id');
//         });

//         let saldoBerjalan = 0;

//         rows.forEach(function(rowEl) {

//             const row = $(rowEl);

//             const amount =
//                 parseFloat(row.find('.amount-cell').data('amount')) || 0;

//             const ppn =
//                 parseFloat(row.find('.ppn-cell').data('ppn')) || 0;

//             const pph =
//                 parseFloat(row.find('.pph-cell').data('pph')) || 0;

//             const total = amount + ppn - pph;

//             const isCredit = row.data('is-credit');

//             if (isCredit == 1) {
//                 saldoBerjalan -= total;
//             } else {
//                 saldoBerjalan += total;
//             }

//             row.find('.saldo-berjalan-cell')
//                 .text(formatRupiah(saldoBerjalan));
//         });
//     });
// }

// function calculateSaldoBasedOnFilter() {
//     const visibleRows = $('#list_trsmts tbody tr:visible');

//     if (!visibleRows.length) {
//         return;
//     }

//     const rekeningGroups = {};

//     visibleRows.each(function() {
//         const rekeningId = $(this).data('rekening-id');
//         // console.log('Rekening ID:', rekeningId);

//         if (!rekeningGroups[rekeningId]) {
//             rekeningGroups[rekeningId] = [];
//         }

//         rekeningGroups[rekeningId].push(this);
//     });

//     Object.values(rekeningGroups).forEach(rows => {

//         rows.sort((a, b) => {
//             const dateDiff =
//         new Date($(a).data('date')) -
//         new Date($(b).data('date'));

//         if (dateDiff !== 0) {
//             return dateDiff;
//         }

//         return $(a).data('id') - $(b).data('id');
//         });

//         const firstRow = $(rows[0]);
//         const firstSaldoCell = firstRow.find('.saldo-akhir-cell');

//         let runningSaldo =
//             parseFloat(firstSaldoCell.data('saldo-akhir')) || 0;

//         const firstOriginal = firstSaldoCell.data('original-saldo');

//         firstSaldoCell.text(
//             firstOriginal ? 'Rp ' + firstOriginal : '-'
//         );

//         rows.forEach(function(rowEl, index) {

//             if (index === 0) {
//                 return;
//             }

//             const row = $(rowEl);

//             const amount =
//                 parseFloat(row.find('.amount-cell').data('amount')) || 0;

//             const ppn =
//                 parseFloat(row.find('.ppn-cell').data('ppn')) || 0;

//             const pph =
//                 parseFloat(row.find('.pph-cell').data('pph')) || 0;

//             const total = amount + ppn - pph;
//             const isCredit = row.data('is-credit');
//             console.log({
//                 rekeningId: row.data('rekening-id'),
//                 runningSaldo,
//                 pph,
//                 ppn,
//                 amount,
//                 isCredit
//             });
            

//             if (isCredit == 1) {
//                 runningSaldo -= total;
//             } else {
//                 runningSaldo += total;
//             }

//             row.find('.saldo-akhir-cell')
//                 .text(formatRupiah(runningSaldo));
//         });
//     });
// }
function calculateSaldoBasedOnFilter() {

    $('#list_trsmts tbody tr').each(function() {

        const saldo =
            parseFloat(
                $(this)
                .find('.saldo-akhir-cell')
                .data('filter-saldo')
            ) || 0;

        $(this)
            .find('.saldo-akhir-cell')
            .text(formatRupiah(saldo));
    });
}

function formatRupiah(value) {
    const number = Number(value) || 0;
    return 'Rp ' + number.toLocaleString('id-ID', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
}

/**
 * Format date
 */
function formatDate(dateString) {
    if (!dateString) return '-';
    const date = new Date(dateString);
    const day = date.getDate();
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const month = months[date.getMonth()];
    const year = date.getFullYear();
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return day + '-' + month + '-' + year + ' ' + hours + ':' + minutes;
}

/**
 * Show alert when trying to edit a closed project
 */
function showClosedProjectAlert() {
    Swal.fire({
        icon: 'warning',
        title: 'Proyek Sudah Diselesaikan',
        text: 'Project sudah diselesaikan. Anda tidak dapat melakukan perubahan apapun pada transaksi ini.',
        confirmButtonColor: '#d33'
    });
}

/**
 * Show alert when trying to edit a locked month transaction
 */
function showLockedMonthAlert() {
    Swal.fire({
        icon: 'warning',
        title: 'Bulan Transaksi Sudah Dikunci',
        text: 'Transaksi pada bulan ini sudah dikunci. Anda tidak dapat mengedit transaksi ini.',
        confirmButtonColor: '#d33'
    });
}

/**
 * Show alert when trying to delete a locked month transaction
 */
function showLockedMonthDeleteAlert() {
    Swal.fire({
        icon: 'warning',
        title: 'Bulan Transaksi Sudah Dikunci',
        text: 'Transaksi pada bulan ini sudah dikunci. Anda tidak dapat menghapus transaksi ini.',
        confirmButtonColor: '#d33'
    });
}

/**
 * Open Lock Transaksi Modal
 */
function openLockTransaksiModal() {
    $('#modalLockTransaksi').modal('show');
    loadLockTransaksi();
}

/**
 * Open Add Lock Transaksi Modal (separate form modal)
 */
function openAddLockTransaksiModal() {
    $('#modalLockTransaksi').modal('hide');
    $('#formAddLock')[0].reset();
    $('#lock_tahun').val(new Date().getFullYear());
    $('#modalAddLockTransaksi').modal('show');
}

// When Add Lock modal is hidden, return to list modal and refresh data
$(document).ready(function() {
    $('#modalAddLockTransaksi').on('hidden.bs.modal', function() {
        $('#modalLockTransaksi').modal('show');
        loadLockTransaksi();
    });
});

/**
 * Load Lock Transaksi Data
 */
function loadLockTransaksi() {
    const tbody = $('#lockTransaksiTableBody');
    tbody.html('<tr><td colspan="7" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
    
    $.ajax({
        url: '{{ url("/trsmts/api/lock-transaksi") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                renderLockTransaksiTable(response.data);
            } else {
                tbody.html('<tr><td colspan="7" class="text-center">Gagal memuat data</td></tr>');
            }
        },
        error: function() {
            tbody.html('<tr><td colspan="7" class="text-center">Gagal memuat data</td></tr>');
        }
    });
}

/**
 * Render Lock Transaksi Table
 */
function renderLockTransaksiTable(data) {
    const tbody = $('#lockTransaksiTableBody');
    tbody.empty();
    
    if (!data || data.length === 0) {
        tbody.html('<tr><td colspan="7" class="text-center">Tidak ada data lock transaksi</td></tr>');
        return;
    }
    
    const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    
    data.forEach(function(item, index) {
        const bulanText = months[item.bulan - 1] || item.bulan;
        const statusBadge = item.is_active == 1 
            ? '<span class="badge bg-success">Aktif</span>' 
            : '<span class="badge bg-secondary">Non-Aktif</span>';
        
        const row = '<tr>'
            + '<td class="text-center">' + (index + 1) + '</td>'
            + '<td class="text-center">' + bulanText + '</td>'
            + '<td class="text-center">' + item.tahun + '</td>'
            + '<td class="text-center">' + statusBadge + '</td>'
            + '<td class="text-center">' + (item.user_create || '-') + '</td>'
            + '<td class="text-center">' + (item.created_at ? formatDate(item.created_at) : '-') + '</td>'
            + '<td class="text-center">'
            + '<div class="btn-group btn-group-sm">'
            + '<button type="button" class="btn btn-sm btn-warning" onclick="toggleLockTransaksi(' + item.id + ', ' + item.is_active + ')" title="Toggle Status">'
            + '<i class="fas fa-power-off"></i>'
            + '</button>'
            + '<button type="button" class="btn btn-sm btn-danger" onclick="deleteLockTransaksi(' + item.id + ')" title="Hapus">'
            + '<i class="fas fa-trash"></i>'
            + '</button>'
            + '</div>'
            + '</td>'
            + '</tr>';
        
        tbody.append(row);
    });
}

/**
 * Toggle Lock Transaksi Status
 */
function toggleLockTransaksi(id, currentStatus) {
    const newStatus = currentStatus == 1 ? 0 : 1;
    const statusTujuan = newStatus == 1 ? 'Aktif' : 'Non-Aktif';
    
    Swal.fire({
        title: 'Konfirmasi',
        text: `Apakah Anda yakin ingin mengubah status kunci transaksi ini menjadi ${statusTujuan}?`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Ya, Ubah',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#028284',
        cancelButtonColor: '#3085d6'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ url("/trsmts/api/lock-transaksi") }}/' + id,
                type: 'PUT',
                data: {
                    is_active: newStatus,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonColor: '#028284',
                            timer: 1500,
                            showConfirmButton: false
                        });
                        loadLockTransaksi();
                    } else {
                        Swal.fire({
                            title: 'Gagal!',
                            text: response.message || 'Gagal mengubah status lock',
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'Terjadi kesalahan';
                    Swal.fire({
                        title: 'Error!',
                        text: msg,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }
    });
}

/**
 * Delete Lock Transaksi
 */
function deleteLockTransaksi(id) {
    Swal.fire({
        title: 'Konfirmasi',
        text: 'Apakah Anda yakin ingin menghapus lock transaksi ini?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ url("/trsmts/api/lock-transaksi") }}/' + id,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonColor: '#028284',
                            timer: 1500,
                            showConfirmButton: false
                        });
                        loadLockTransaksi();
                    } else {
                        Swal.fire({
                            title: 'Gagal!',
                            text: response.message || 'Gagal menghapus lock transaksi',
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'Terjadi kesalahan';
                    Swal.fire({
                        title: 'Error!',
                        text: msg,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }
    });
}
</script>
@endpush