@extends('layouts.apex')

@section('title', 'Parameter Air')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Parameter Air</h1>
            <p class="page-header-subtitle">Pencatatan parameter kualitas air</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#cekAirModal">
            <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>
            Cek Air Baru
        </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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
            </div>
            <div class="stat-label">Total Cek Air</div>
            <div class="stat-value" id="summaryTotalCek">{{ $summary->total_cek }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon success">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div class="stat-label">Hari Ini</div>
            <div class="stat-value" id="summaryHariIni">{{ $summary->cek_hari_ini }}</div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Riwayat Cek Air</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="cekAirTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>No. Bukti</th>
                            <th>Tanggal</th>
                            <th>Jam</th>
                            <th>Kolam</th>
                            <th>Parameter</th>
                            <th>Nilai</th>
                            <th>Dibuat Oleh</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Cek Air Modal -->
<div id="cekAirModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width: 800px;">
        <div class="modal-content">
            <form id="cekAirForm" action="{{ route('cek-air.store.batch') }}" method="POST">
                @csrf
                <input type="hidden" name="_method" value="POST" id="cekAirMethod">
                <input type="hidden" name="cek_air_id" id="cek_air_id">
                <div class="modal-header">
                    <h5 class="modal-title" id="cekAirModalTitle">Cek Air Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Master Section -->
                    <div class="row" style="margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #dee2e6;">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Nomor Bukti</label>
                                <input type="text" name="no_bukti" id="no_bukti" class="form-control" placeholder="Menunggu generate..." readonly>
                                <small class="form-text text-muted" id="no_bukti_help">Pilih tanggal untuk generate nomor bukti otomatis</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Tanggal Cek Air *</label>
                                <input type="date" name="tanggal_cek_air" id="tanggal_cek_air" class="form-control" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Keterangan</label>
                                <textarea name="keterangan" id="keterangan" class="form-control" rows="1"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Detail Table Section -->
                    <div style="margin-bottom: 1.5rem;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                            <div style="display: flex; align-items: center; gap: 1rem;">
                                <h6 style="margin: 0;">Data Parameter per Kolam</h6>
                                <span class="badge badge-primary" id="rowCount" style="background: #007bff; color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.875rem;">
                                    1 baris
                                </span>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" onclick="addBatchRow()">
                                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle; margin-right: 0.25rem;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                </svg>
                                Tambah Baris
                            </button>
                        </div>

                        <div style="overflow-x: auto;">
                            <table class="table table-bordered" id="batchTable">
                                <thead>
                                    <tr>
                                        <th style="width: 120px;">Jam *</th>
                                        <th style="width: 150px;">Kolam *</th>
                                        <th style="width: 150px;">Parameter *</th>
                                        <th style="width: 200px;">Nilai *</th>
                                        <th style="width: 50px;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="batchTableBody">
                                    <!-- Rows will be added dynamically -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        <span id="submitBtnText">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            Simpan Semua Data
                        </span>
                        <span id="submitBtnLoading" class="d-none">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="width: 1rem; height: 1rem; border-width: 0.15em; margin-right: 0.5rem; display: inline-block;"></span>
                            <span style="display: inline-block;">Menyimpan...</span>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<style>
.swal2-popup-on-top {
    z-index: 99999 !important;
}
.swal2-backdrop-show {
    z-index: 99998 !important;
}
</style>
<script>
// Global variables
let cekAirTable;
let pollingInterval = null;
let lastKnownSequence = null;
let isSubmitting = false;
let globalRowCounter = 0;

// Data from server
const kolamOptions = @json($kolams->map(function($kolam) {
    return ['id' => $kolam->id, 'nama' => $kolam->nama, 'id_int' => (int)$kolam->id];
})->toArray());

const jenisCekOptions = @json($jenisCek->map(function($jenis) {
    return ['id' => $jenis->id, 'jenis' => $jenis->jenis];
})->toArray());

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

// Update summary cards
function updateSummary() {
    $.ajax({
        url: '/cek-air/summary',
        method: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                const summary = response.data;
                $('#summaryTotalCek').text(summary.total_cek);
                $('#summaryHariIni').text(summary.cek_hari_ini);
            }
        },
        error: function(xhr) {
            console.error('Gagal mengupdate summary:', xhr);
        }
    });
}

// Check if jenis requires text input
function isTextInputJenis(jenisId) {
    const jenis = jenisCekOptions.find(j => j.id == jenisId);
    if (!jenis) return false;

    const jenisName = jenis.jenis.toUpperCase();
    return jenisName === 'W. AIR' || jenisName === 'CUACA';
}

// Add batch row
function addBatchRow() {
    globalRowCounter++;
    const rowNumber = globalRowCounter;
    const uniqueId = Date.now() + '_' + rowNumber;

    const row = `
        <tr class="batch-row" data-row-number="${rowNumber}">
            <td>
                <input type="time" name="data_cek_air[${rowNumber}][jam]" id="batch_${uniqueId}_jam" class="form-control" value="{{ date('H:i') }}" required>
            </td>
            <td>
                <select name="data_cek_air[${rowNumber}][kolam_id]" id="batch_${uniqueId}_kolam" class="form-control form-select batch-kolam" required>
                    <option value="">Pilih Kolam</option>
                    ${kolamOptions.map(kolam => `<option value="${kolam.id}">${kolam.nama}</option>`).join('')}
                </select>
            </td>
            <td>
                <select name="data_cek_air[${rowNumber}][jenis_cek_id]" id="batch_${uniqueId}_jenis_cek" class="form-control form-select batch-jenis-cek" required onchange="updateNilaiInputType('${uniqueId}')">
                    <option value="">Pilih Parameter</option>
                    ${jenisCekOptions.map(jenis => `<option value="${jenis.id}">${jenis.jenis}</option>`).join('')}
                </select>
            </td>
            <td>
                <div id="batch_${uniqueId}_nilai_container">
                    <input type="number" name="data_cek_air[${rowNumber}][nilai]" id="batch_${uniqueId}_nilai" class="form-control" placeholder="0.00" step="0.01" required>
                </div>
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger" onclick="removeBatchRow(this)">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </td>
        </tr>
    `;
    $('#batchTableBody').append(row);

    // Initialize Select2 for the new row
    const newRow = $('#batchTableBody tr:last');

    if (newRow.find('.batch-kolam').length) {
        newRow.find('.batch-kolam').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Kolam',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#cekAirModal')
        });
    }

    if (newRow.find('.batch-jenis-cek').length) {
        newRow.find('.batch-jenis-cek').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Parameter',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#cekAirModal')
        });
    }

    updateRowCount();
}

// Update nilai input type based on jenis_cek selection
function updateNilaiInputType(uniqueId) {
    const jenisCekId = $('#batch_' + uniqueId + '_jenis_cek').val();
    const container = $('#batch_' + uniqueId + '_nilai_container');
    const row = $('#batch_' + uniqueId + '_kolam').closest('tr');
    const rowNumber = row.data('row-number');
    const isText = isTextInputJenis(jenisCekId);

    if (isText) {
        container.html('<input type="text" name="data_cek_air[' + rowNumber + '][nilai]" id="batch_' + uniqueId + '_nilai" class="form-control" placeholder="Masukkan nilai..." required>');
    } else {
        container.html('<input type="number" name="data_cek_air[' + rowNumber + '][nilai]" id="batch_' + uniqueId + '_nilai" class="form-control" placeholder="0.00" step="0.01" required>');
    }
}

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

function removeBatchRow(button) {
    const row = $(button).closest('tr');
    const cekAirId = row.data('cek-air-id');

    if (cekAirId && cekAirId !== '') {
        Swal.fire({
            title: 'Hapus Baris Ini?',
            html: 'Apakah Anda yakin ingin menghapus baris ini?<br><small>Baris akan dihapus dari database.</small>',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/cek-air/' + cekAirId,
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if ($('#batchTableBody tr').length > 1) {
                            row.remove();
                            updateRowCount();
                            $('#cekAirTable').DataTable().ajax.reload(null, false);
                            updateSummary();

                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: 'Baris berhasil dihapus!',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        } else {
                            Swal.fire({
                                icon: 'info',
                                title: 'Info',
                                text: 'Minimal harus ada satu baris data'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: xhr.responseJSON?.message || 'Gagal menghapus baris!'
                        });
                    }
                });
            }
        });
    } else {
        if ($('#batchTableBody tr').length > 1) {
            row.remove();
            updateRowCount();
        } else {
            Swal.fire({
                icon: 'info',
                title: 'Info',
                text: 'Minimal harus ada satu baris data'
            });
        }
    }
}

function editCekAir(id) {
    console.log('editCekAir called with id:', id);

    stopRealtimePolling();

    $.ajax({
        url: '/cek-air/' + id,
        method: 'GET',
        success: function(response) {
            console.log('Cek Air data received:', response);
            const cekAir = response.data;

            $.ajax({
                url: '/cek-air/batch/' + cekAir.no_bukti,
                method: 'GET',
                success: function(batchResponse) {
                    console.log('Batch data received:', batchResponse);
                    const batchData = batchResponse.data;

                    $('#cekAirModalTitle').text('Edit Cek Air - ' + cekAir.no_bukti);
                    $('#cekAirMethod').val('PUT');
                    $('#cek_air_id').val(id);
                    $('#cekAirForm').attr('action', '/cek-air/batch/' + cekAir.no_bukti);

                    $('#no_bukti').val(cekAir.no_bukti || '');
                    $('#no_bukti_help').html('✅ No Bukti: <strong>' + cekAir.no_bukti + '</strong> (Read-only)');

                    const tanggalValue = cekAir.tanggal ? cekAir.tanggal.substring(0, 10) : '';
                    // $('#tanggal_cek_air').val(tanggalValue).prop('disabled', true);
                    $('#keterangan').val(cekAir.keterangan || '');

                    $('#batchTableBody').empty();

                    // Reset global counter for edit mode
                    globalRowCounter = 0;

                    if (batchData && batchData.length > 0) {
                        batchData.forEach(function(item, index) {
                            addBatchRowWithData(item, index + 1);
                        });
                    } else {
                        addBatchRowWithData(cekAir, 1);
                    }

                    const modal = new bootstrap.Modal(document.getElementById('cekAirModal'));
                    modal.show();
                    console.log('Modal opened for edit');
                },
                error: function(xhr) {
                    console.error('Error fetching batch data:', xhr);
                    $('#cekAirModalTitle').text('Edit Cek Air');
                    $('#cekAirMethod').val('PUT');
                    $('#cek_air_id').val(id);
                    $('#cekAirForm').attr('action', '/cek-air/' + id);

                    $('#no_bukti').val(cekAir.no_bukti || '');
                    $('#no_bukti_help').html('✅ No Bukti: <strong>' + cekAir.no_bukti + '</strong> (Read-only)');
                    const tanggalValue = cekAir.tanggal ? cekAir.tanggal.substring(0, 10) : '';
                    // $('#tanggal_cek_air').val(tanggalValue).prop('disabled', true);
                    $('#keterangan').val(cekAir.keterangan || '');

                    $('#batchTableBody').empty();

                    // Reset global counter for edit mode
                    globalRowCounter = 0;
                    addBatchRowWithData(cekAir, 1);

                    const modal = new bootstrap.Modal(document.getElementById('cekAirModal'));
                    modal.show();
                }
            });
        },
        error: function(xhr) {
            console.error('Error fetching cek-air:', xhr);
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data cek air!'
            });
        }
    });
}

function addBatchRowWithData(data, rowNumber) {
    const uniqueId = Date.now() + '_' + rowNumber + '_' + Math.random().toString(36).substr(2, 9);
    const isText = isTextInputJenis(data.jenis_cek_id);

    const row = `
        <tr class="batch-row" data-row-number="${rowNumber}" data-cek-air-id="${data.id || ''}">
            <td>
                <input type="hidden" name="data_cek_air[${rowNumber}][id]" value="${data.id || ''}">
                <input type="time" name="data_cek_air[${rowNumber}][jam]" id="batch_${uniqueId}_jam" class="form-control" value="${data.jam || ''}" required>
            </td>
            <td>
                <select name="data_cek_air[${rowNumber}][kolam_id]" id="batch_${uniqueId}_kolam" class="form-control form-select batch-kolam" required>
                    <option value="">Pilih Kolam</option>
                    ${kolamOptions.map(kolam => `<option value="${kolam.id}" ${data.kolam_id == kolam.id ? 'selected' : ''}>${kolam.nama}</option>`).join('')}
                </select>
            </td>
            <td>
                <select name="data_cek_air[${rowNumber}][jenis_cek_id]" id="batch_${uniqueId}_jenis_cek" class="form-control form-select batch-jenis-cek" required onchange="updateNilaiInputType('${uniqueId}')">
                    <option value="">Pilih Parameter</option>
                    ${jenisCekOptions.map(jenis => `<option value="${jenis.id}" ${data.jenis_cek_id == jenis.id ? 'selected' : ''}>${jenis.jenis}</option>`).join('')}
                </select>
            </td>
            <td>
                <div id="batch_${uniqueId}_nilai_container">
                    ${isText
                        ? `<input type="text" name="data_cek_air[${rowNumber}][nilai]" id="batch_${uniqueId}_nilai" class="form-control" placeholder="Masukkan nilai..." required value="${data.nilai || ''}">`
                        : `<input type="number" name="data_cek_air[${rowNumber}][nilai]" id="batch_${uniqueId}_nilai" class="form-control" placeholder="0.00" step="0.01" required value="${data.nilai || ''}">`
                    }
                </div>
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger" onclick="removeBatchRow(this)">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </td>
        </tr>
    `;
    $('#batchTableBody').append(row);

    const newRow = $('#batchTableBody tr:last');

    if (newRow.find('.batch-kolam').length) {
        newRow.find('.batch-kolam').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Kolam',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#cekAirModal')
        });
    }

    if (newRow.find('.batch-jenis-cek').length) {
        newRow.find('.batch-jenis-cek').select2({
            theme: 'bootstrap4',
            placeholder: 'Pilih Parameter',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#cekAirModal')
        });
    }

    updateRowCount();
}

function deleteCekAir(id) {
    console.log('deleteCekAir called with id:', id);

    $.ajax({
        url: '/cek-air/' + id,
        method: 'GET',
        success: function(response) {
            const cekAir = response.data;
            const noBukti = cekAir.no_bukti;

            $.ajax({
                url: '/cek-air/check-no-bukti-usage/' + noBukti + '/' + id,
                method: 'GET',
                success: function(checkResponse) {
                    let confirmText = 'Apakah Anda yakin ingin menghapus data cek air ini?';

                    if (checkResponse.count > 0) {
                        confirmText = `Data ini bagian dari batch ${noBukti} dengan ${checkResponse.count} record lainnya. Hapus hanya record ini atau seluruh batch?`;

                        Swal.fire({
                            title: 'Hapus Data Cek Air?',
                            text: confirmText,
                            icon: 'warning',
                            showCancelButton: true,
                            showDenyButton: true,
                            confirmButtonColor: '#d33',
                            denyButtonColor: '#3085d6',
                            cancelButtonColor: '#6c757d',
                            confirmButtonText: 'Hapus Semua Batch',
                            denyButtonText: 'Hapus Ini Saja',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                deleteAllBatch(noBukti);
                            } else if (result.isDenied) {
                                deleteSingleRecord(id);
                            }
                        });
                    } else {
                        Swal.fire({
                            title: 'Hapus Data Cek Air?',
                            text: confirmText,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Ya, hapus!',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                deleteSingleRecord(id);
                            }
                        });
                    }
                },
                error: function(xhr) {
                    deleteSingleRecord(id);
                }
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data cek air!'
            });
        }
    });
}

function deleteSingleRecord(id) {
    $.ajax({
        url: '/cek-air/' + id,
        method: 'DELETE',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#cekAirTable').DataTable().ajax.reload(null, false);
            updateSummary();
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: 'Data Cek Air berhasil dihapus!',
                timer: 2000,
                showConfirmButton: false
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: xhr.responseJSON?.message || 'Gagal menghapus data!'
            });
        }
    });
}

function deleteAllBatch(noBukti) {
    $.ajax({
        url: '/cek-air/batch/' + noBukti,
        method: 'DELETE',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#cekAirTable').DataTable().ajax.reload(null, false);
            updateSummary();
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: 'Seluruh batch Cek Air berhasil dihapus!',
                timer: 2000,
                showConfirmButton: false
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: xhr.responseJSON?.message || 'Gagal menghapus batch!'
            });
        }
    });
}

function resetCekAirForm() {
    console.log('resetCekAirForm called');

    $('#cekAirForm')[0].reset();
    $('#cekAirModalTitle').text('Cek Air Baru');
    $('#cekAirMethod').val('POST');
    $('#cek_air_id').val('');
    $('#cekAirForm').attr('action', '{{ route("cek-air.store.batch") }}');

    stopRealtimePolling();
    lastKnownSequence = null;
    isSubmitting = false;

    // $('#tanggal_cek_air').prop('disabled', false);
    $('#batchTableBody').empty();

    // Reset global counter
    globalRowCounter = 0;
    addBatchRow();

    $('#no_bukti').val('');
    $('#no_bukti_help').text('Pilih tanggal untuk generate nomor bukti otomatis');

    const today = '{{ date('Y-m-d') }}';
    $('#tanggal_cek_air').val(today);
    console.log('Setting tanggal to:', today);

    console.log('Calling generateNoBuktiPreview...');
    generateNoBuktiPreview(today);

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

function generateNoBuktiPreview(tanggal) {
    console.log('generateNoBuktiPreview called with tanggal:', tanggal);

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

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

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

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

    $('#no_bukti').val('LKA' + tanggalPart + 'XXX');
    $('#no_bukti_help').html('⏳ Loading...');

    $.ajax({
        url: '/cek-air/get-last-sequence/' + tanggal,
        method: 'GET',
        success: function(response) {
            console.log('getLastSequence response:', response);

            if (response.error) {
                $('#no_bukti_help').html('❌ ' + response.error);
                return;
            }

            const nextSequence = response.next_sequence;
            const noBuktiPreview = 'LKA' + tanggalPart + String(nextSequence).padStart(3, '0');

            lastKnownSequence = {
                next_sequence: nextSequence,
                no_bukti: noBuktiPreview,
                timestamp: response.timestamp
            };

            $('#no_bukti').val(noBuktiPreview);
            $('#no_bukti_help').html('✅ No Bukti: <strong>' + noBuktiPreview + '</strong> <small style="color: #6c757d;">(Real-time)</small>');

            startRealtimePolling(tanggal);
        },
        error: function(xhr) {
            console.error('Error getting last sequence:', xhr);
            const errorMsg = xhr.responseJSON?.error || 'Gagal mengambil nomor urut';
            $('#no_bukti_help').html('❌ ' + errorMsg);
        }
    });
}

function startRealtimePolling(tanggal) {
    if (pollingInterval) {
        clearInterval(pollingInterval);
    }

    pollingInterval = setInterval(function() {
        if (!tanggal || isSubmitting) {
            return;
        }

        $.ajax({
            url: '/cek-air/get-last-sequence/' + tanggal,
            method: 'GET',
            success: function(response) {
                if (response.error) {
                    console.log('Polling error:', response.error);
                    return;
                }

                const currentSequence = response.next_sequence;

                const dateParts = tanggal.split('-');
                const dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
                const yy = dateObj.getFullYear().toString().slice(-2);
                const mm = String(dateObj.getMonth() + 1).padStart(2, '0');
                const dd = String(dateObj.getDate()).padStart(2, '0');
                const tanggalPart = yy + mm + dd;
                const noBuktiPreview = 'LKA' + tanggalPart + String(currentSequence).padStart(3, '0');

                if (!lastKnownSequence || currentSequence !== lastKnownSequence.next_sequence) {
                    $('#no_bukti').val(noBuktiPreview);

                    if (lastKnownSequence && currentSequence > lastKnownSequence.next_sequence) {
                        $('#no_bukti_help').html('⚠️ Nomor urut berubah! <strong>' + noBuktiPreview + '</strong> <small style="color: #dc3545;">(Update baru)</small>');
                    } else {
                        $('#no_bukti_help').html('✅ No Bukti: <strong>' + noBuktiPreview + '</strong> <small style="color: #6c757d;">(Real-time)</small>');
                    }

                    lastKnownSequence = {
                        next_sequence: currentSequence,
                        no_bukti: noBuktiPreview,
                        timestamp: response.timestamp
                    };
                }
            },
            error: function(xhr) {
                const errorMsg = xhr.responseJSON?.error || 'Polling error';
                console.log('Polling error:', errorMsg);
            }
        });
    }, 1000);
}

function stopRealtimePolling() {
    if (pollingInterval) {
        clearInterval(pollingInterval);
        pollingInterval = null;
    }
}

$(document).ready(function() {
    console.log('Document ready! Initializing...');

    addBatchRow();
    updateSummary();

    $('#tanggal_cek_air').on('change', function() {
        const tanggal = $(this).val();
        generateNoBuktiPreview(tanggal);
    });

    cekAirTable = $('#cekAirTable').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("cek-air.data") }}',
            type: 'GET',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
                // Ensure search value is properly passed
                if (d.search && d.search.value !== undefined) {
                    console.log('Searching for:', d.search.value);
                }
            },
            error: function(xhr, error, thrown) {
                console.error('DataTable error:', error, thrown);
                console.error('Response:', xhr.responseText);
            }
        },
        columns: [
            { data: 'no_bukti', name: 'no_bukti', searchable: true },
            { data: 'tanggal_format', name: 'tanggal', searchable: false },
            { data: 'jam_format', name: 'jam', searchable: false },
            { data: 'kolam', name: 'kolam', searchable: true },
            { data: 'jenis_cek', name: 'jenis_cek_id', searchable: true },
            { data: 'nilai_format', name: 'nilai', searchable: true },
            { data: 'pembuat', name: 'created_by', searchable: true },
            { data: 'action', orderable: false, searchable: false }
        ],
        order: [[0, '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, Kolam...",
            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"
            }
        }
    });

    $('#cekAirForm').on('submit', function(e) {
        e.preventDefault();
        console.log('Form submit triggered!');

        if (isSubmitting) {
            console.log('Already submitting, skipping...');
            return;
        }

        let hasError = false;
        let kolamIdList = [];
        $('#batchTableBody tr').each(function(rowIdx, row) {
            const jam = $(row).find('[id$="_jam"]').val();
            const kolamId = $(row).find('.batch-kolam').val();
            const jenisCek = $(row).find('.batch-jenis-cek').val();
            const nilai = $(row).find('[id$="_nilai"]').val();

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

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

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

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

        if (hasError) {
            return;
        }

        // Enable disabled fields temporarily
        const disabledFields = $('#cekAirForm').find(':disabled').prop('disabled', false);

        // Create FormData object to properly handle Select2 and all form fields
        const formData = new FormData(this);

        // Restore disabled fields
        disabledFields.prop('disabled', true);

        const url = $(this).attr('action');
        const method = $('#cekAirMethod').val();

        submitFormData(formData, url, method);
    });

    function submitFormData(formData, url, method) {
        console.log('=== SUBMIT FORM DATA CALLED ===');
        console.log('URL:', url);
        console.log('Method:', method);

        // Log FormData contents for debugging
        if (formData instanceof FormData) {
            console.log('FormData entries:');
            for (let pair of formData.entries()) {
                console.log('  ' + pair[0] + ':', pair[1]);
            }
        }

        isSubmitting = true;

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

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

        $.ajax({
            url: url,
            method: method,
            data: formData,
            processData: false,  // Important for FormData
            contentType: false,  // Important for FormData
            beforeSend: function(xhr) {
                // Get CSRF token from FormData
                const csrfToken = formData.get('_token');
                if (csrfToken) {
                    xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
                }
            },
            success: function(response) {
                console.log('=== SUCCESS ===');
                console.log('Response:', response);

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

                isSubmitting = false;

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

                // Refresh no_bukti preview immediately after successful save
                const tanggal = $('#tanggal_cek_air').val();
                if (tanggal) {
                    generateNoBuktiPreview(tanggal);
                }

                const isEdit = method === 'PUT';
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: isEdit
                        ? `Data Cek Air berhasil diperbarui! ${response.records_count ? response.records_count + ' records' : ''}`
                        : `Data Cek Air berhasil disimpan dengan No. Bukti: ${response.no_bukti}!`,
                    timer: 2000,
                    showConfirmButton: false,
                    backdrop: false,
                    customClass: {
                        popup: 'swal2-popup-on-top'
                    }
                }).then(function() {
                    // Only close modal and reset form on actual success, not on no_bukti update
                    const modalEl = document.getElementById('cekAirModal');
                    const modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) {
                        modal.hide();
                    }
                    // Don't reset form here, let the hidden.bs.modal event handle it
                });
            },
            error: function(xhr) {
                console.error('Error:', xhr);
                const errorMsg = xhr.responseJSON?.message || (xhr.responseJSON?.errors ? Object.values(xhr.responseJSON.errors).join(', ') : 'Terjadi kesalahan!');

                if (xhr.responseJSON?.error === 'DUPLICATE_NO_BUKTI') {
                    const nextNoBukti = xhr.responseJSON?.next_no_bukti;

                    Swal.fire({
                        icon: 'warning',
                        title: 'Nomor Bukti Duplikat',
                        html: `${errorMsg}<br><br><strong>No. Bukti Baru: ${nextNoBukti}</strong>`,
                        confirmButtonText: 'Gunakan No. Bukti Baru',
                        showConfirmButton: true,
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    }).then(() => {
                        if (nextNoBukti) {
                            $('#no_bukti').val(nextNoBukti);
                            $('#no_bukti_help').html('✅ No Bukti: <strong>' + nextNoBukti + '</strong> (Siap disimpan)');
                            lastKnownSequence = {
                                next_sequence: xhr.responseJSON?.next_sequence,
                                no_bukti: nextNoBukti,
                                timestamp: new Date().toISOString()
                            };

                            // Show success message that form is ready with new no_bukti
                            Swal.fire({
                                icon: 'success',
                                title: 'No. Bukti Diperbarui',
                                text: 'Silakan periksa kembali data Anda, lalu klik Simpan.',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: errorMsg
                    });
                }

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

                isSubmitting = false;
            }
        });
    }

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

        if (relatedTarget && $(relatedTarget).attr('data-bs-toggle') === 'modal') {
            console.log('Opening modal for new entry - resetting form');
            resetCekAirForm();
        } else {
            console.log('Opening modal for edit');
        }
    });

    $('#cekAirModal').on('hidden.bs.modal', function() {
        stopRealtimePolling();
        // Only reset form if we're not in the middle of editing (isSubmitting is false)
        if (!isSubmitting) {
            resetCekAirForm();
        }
    });
});
</script>
@endpush
@endsection