@extends('layout.app')

@section('title', 'Pending Data Manage')

@section('style')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        #table-body tr {
            height: 10px;
        }
        .table > :not(caption) > * > * {
            padding: 0.2rem !important;
        }
        #user-datatable thead th {
            position: sticky;
            top: 0;
            background-color: #f8f9fa;
            z-index: 10;
        }
    </style>
@endsection

@section('main')
    <div class="">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item">
                    <a href="#">
                        <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </a>
                </li>
                <li class="breadcrumb-item"><a href="#">Pending Data Manage</a></li>
                <li class="breadcrumb-item active" aria-current="page">Pending Data Manage</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <!-- LEFT SIDE - SEARCH -->
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0">Pending Data Search</h6>
                    </div>

                    <!-- SEARCH SECTION -->
                    <div id="search-section" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label fw-semibold small">Pay Date</label>
                                <input type="date" id="pay_date_sc" class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold small">bKash Trans ID</label>
                                <input type="text" id="bkash_trans_id" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-semibold small">Server</label>
                                <select  class="form-control" id="server">
                                    <option value="LIVE">Live</option>
                                    <option value="UAT">UAT</option>
                                </select>
                            </div>

                            <div class="col-md-4 d-flex align-items-end">
                                <button type="button" class="btn btn-primary w-100" id="search-btn1">
                                    <i class="bi bi-search"></i> Search
                                </button>
                            </div>
                        </div>

                        <div class="col-12 mt-2">
                            <button type="button" class="btn btn-outline-danger btn-sm" id="reset-search">
                                <i class="bi bi-arrow-clockwise"></i> Reset
                            </button>
                        </div>
                        <hr class="mt-3">
                    </div>
                </div>
            </div>
        </div>
        <!-- SHARED TABLE SECTION (FULL WIDTH) -->
        <div class="col-md-12 mt-3">
            <div class="card">
                <div class="card-body">
                    <!-- RESULT INFO SECTION -->
                    <div id="result-info" class="alert alert-info d-none mb-3" role="alert">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>Operation:</strong> <span id="operation-type"></span> |
                                <strong>Status:</strong> <span id="result-status"></span> |
                                <strong>Message:</strong> <span id="result-message"></span> |
                                <strong>Records:</strong> <span id="result-count"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Table Section -->
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Transaction Details</h6>
                    </div>

                    <div class="table-responsive" style="max-height: 500px; overflow-y:auto;">
                        <table class="table table-striped table-bordered table-hover align-middle mb-0" id="pending-data-table">
                            <thead class="table-dark sticky-top">
                            <tr id="dynamic-header-sc">
                                <th>Action</th>
                                <th>SL</th>
                            </tr>
                            </thead>
                            <tbody id="table-body-sc">
                            <tr id="empty-state">
                                <td colspan="100%" class="text-center text-muted py-5">
                                    <i class="bi bi-search" style="font-size: 3rem;"></i>
                                    <p class="mt-2">Use Search or Update form above to load data</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

{{--    <div class="row">
        <!-- LEFT SIDE - SEARCH -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0">Pending Data Search</h6>
                    </div>

                    <!-- SEARCH SECTION -->
                    <div id="search-section" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-5">
                                <label class="form-label fw-semibold small">Bank Transaction ID</label>
                                <input type="text" id="bank_tran_id" class="form-control" placeholder="Enter Bank Transaction ID">
                            </div>
                            <div class="col-md-5">
                                <label class="form-label fw-semibold small">Pay Date</label>
                                <input type="text" id="pay_date" class="form-control" placeholder="DD-MON-YYYY (e.g., 25-JAN-2026)">
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <button type="button" class="btn btn-primary w-100" id="search-btn">
                                    <i class="bi bi-search"></i> Search
                                </button>
                            </div>
                        </div>

                        <div class="col-12 mt-2">
                            <button type="button" class="btn btn-outline-danger btn-sm" id="reset-search">
                                <i class="bi bi-arrow-clockwise"></i> Reset
                            </button>
                        </div>

                        <hr class="mt-3">
                    </div>
                </div>
            </div>
        </div>

        <!-- RIGHT SIDE - UPDATE -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0">Pending Data Update</h6>
                    </div>

                    <!-- UPDATE SECTION -->
                    <div id="update-section" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">Bank Transaction ID</label>
                                <input type="text" id="bank_tran_id_up" class="form-control" placeholder="Enter Bank Transaction ID">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small">Pay Date</label>
                                <input type="text" id="pay_date_up" class="form-control" placeholder="DD-MON-YYYY (e.g., 25-JAN-2026)">
                            </div>
                            <div class="col-md-7">
                                <label class="form-label fw-semibold small">Table Name</label>
                                <input type="text" id="table_up" class="form-control" placeholder="Enter Table Name">
                            </div>
                            <div class="col-md-5">
                                <label class="form-label fw-semibold small">Status</label>
                                <select id="status_up" class="form-select">
                                    <option value="SUCCESS">Success</option>
                                    <option value="UNSUCCESS">UnSuccess</option>
                                </select>
                            </div>
                            <div class="col-md-12">
                                <button type="button" class="btn btn-success w-100" id="search-btn-update">
                                    <i class="bi bi-arrow-repeat"></i> Update Data
                                </button>
                            </div>
                        </div>

                        <div class="col-12 mt-2">
                            <button type="button" class="btn btn-outline-danger btn-sm" id="reset-update">
                                <i class="bi bi-arrow-clockwise"></i> Reset
                            </button>
                        </div>

                        <hr class="mt-3">
                    </div>
                </div>
            </div>
        </div>

        <!-- SHARED TABLE SECTION (FULL WIDTH) -->
        <div class="col-md-12 mt-3">
            <div class="card">
                <div class="card-body">
                    <!-- RESULT INFO SECTION -->
                    <div id="result-info" class="alert alert-info d-none mb-3" role="alert">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>Operation:</strong> <span id="operation-type"></span> |
                                <strong>Status:</strong> <span id="result-status"></span> |
                                <strong>Message:</strong> <span id="result-message"></span> |
                                <strong>Records:</strong> <span id="result-count"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Table Section -->
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Transaction Details</h6>
                    </div>

                    <div class="table-responsive" style="max-height: 500px; overflow-y:auto;">
                        <table class="table table-striped table-bordered table-hover align-middle mb-0" id="pending-data-table">
                            <thead class="table-dark sticky-top">
                            <tr id="dynamic-header">
                                <th>Action</th>
                                <th>SL</th>
                            </tr>
                            </thead>
                            <tbody id="table-body">
                            <tr id="empty-state">
                                <td colspan="100%" class="text-center text-muted py-5">
                                    <i class="bi bi-search" style="font-size: 3rem;"></i>
                                    <p class="mt-2">Use Search or Update form above to load data</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Detail Modal -->
    <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="detailModalLabel">Transaction Details</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3" id="detail-content">
                        <!-- Dynamic content will be loaded here -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>--}}

@endsection

@section('script')
    <script src="{{ asset('assets/js/simple-datatables.js') }}"></script>
    <script>
        var payDate_sc = '';
        var bkash_trans_id_sc = '';
        var server_sc = '';
        $('#search-btn1').on('click', function() {
            const payDate = $('#pay_date_sc').val().trim();
            payDate_sc = $('#pay_date_sc').val().trim();
            bkash_trans_id_sc = $('#bkash_trans_id').val().trim();
            server_sc = $('#server').val().trim();
            // Validation
            if (!payDate) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Information',
                    text: 'Please enter Pay Date',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }
            searchPendingData1( payDate);
        });
        /* ===============================
           SEARCH PENDING DATA
        ================================ */
        function searchPendingData1(payDate) {
            // Show loading state
            $('#table-body-sc').html(`
            <tr>
                <td colspan="100%" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status"></div>
                    <div class="mt-2 fw-semibold">Searching data, please wait...</div>
                </td>
            </tr>
        `);

            $.ajax({
                url: '{{ route("pending-data.search-pendding-data") }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    pay_date: payDate,
                    bkash_trans_id: bkash_trans_id_sc,
                    serverss: server_sc,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log('Search Response:', response);
                    handleResponse1(response, 'SEARCH');
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    handleError(xhr);
                }
            });
        }
        /* ===============================
           HANDLE RESPONSE (SHARED)
        ================================ */
        function handleResponse1(response, operationType) {
            // Show result info
            if (response.code === '200') {
                $('#result-info').removeClass('d-none alert-danger').addClass('alert-success');
                $('#operation-type').text(operationType);
                $('#result-status').text(response.status);
                $('#result-message').text(response.msg);
                $('#result-count').text(response.count);

                renderTable1(response.data);
            } else {
                $('#result-info').removeClass('d-none alert-success').addClass('alert-danger');
                $('#operation-type').text(operationType);
                $('#result-status').text(response.status || 'ERROR');
                $('#result-message').text(response.msg || 'No data found');
                $('#result-count').text('0');

                $('#dynamic-header-sc').html('<th>Action</th><th>SL</th>');
                $('#table-body-sc').html(`
                <tr>
                    <td colspan="100%" class="text-center text-warning py-4">
                        <i class="bi bi-exclamation-triangle" style="font-size: 2rem;"></i>
                        <p class="mt-2">${response.msg || 'No records found'}</p>
                    </td>
                </tr>
            `);
            }
        }
        /* ===============================
           RENDER TABLE (DYNAMIC COLUMNS)
        ================================ */
        function renderTable1(data) {
            $('#table-body-sc').empty();

            if (!data || data.length === 0) {
                $('#dynamic-header-sc').html('<th>Action</th><th>SL</th>');
                $('#table-body-sc').html(`
                <tr>
                    <td colspan="100%" class="text-center text-muted py-4">
                        <i class="bi bi-inbox" style="font-size: 2rem;"></i>
                        <p class="mt-2">No records found</p>
                    </td>
                </tr>
            `);
                return;
            }

            // Store data globally
            currentTableData = data;

            // Get all column names from first row
            const firstRow = data[0];
            currentColumns = Object.keys(firstRow);

            // Build dynamic header - Action first, then SL, then all columns
            let headerHtml = '<th>Action</th><th>SL</th>';
            currentColumns.forEach(col => {
                headerHtml += `<th>${col}</th>`;
            });
            $('#dynamic-header-sc').html(headerHtml);

            // Build table rows - Action button first
            data.forEach((row, index) => {
                let tr = `<tr>
                <td>
                    <button class="btn btn-sm btn-success me-1"
                        onclick='processSuccess(
                            "${row.BKASH_TXN_ID ?? ''}",
                            "${payDate_sc ?? ''}",
                            "${row.BILLER_SHORT_CODE ?? ''}",
                            "${row.TABLE_NAME ?? ''}"
                        )'>
                        Success
                    </button>

                    <button class="btn btn-sm btn-danger me-1"
                        onclick='processUnsuccess(
                            "${row.BKASH_TXN_ID ?? ''}",
                            "${payDate_sc ?? ''}",
                            "${row.BILLER_SHORT_CODE ?? ''}",
                            "${row.TABLE_NAME ?? ''}"
                        )'>
                        Unsuccess
                    </button>
                </td>
                <td>${index + 1}</td>`;

                currentColumns.forEach(col => {
                    let value = row[col] ?? '-';

                    // Format specific columns
                    if (col === 'STATUS') {
                        value = value === 'T'
                            ? '<span class="badge bg-warning">Pending</span>'
                            : '<span class="badge bg-success">Success</span>';
                    } else if (col.includes('AMT') && value !== '-' && !isNaN(value)) {
                        value = `৳${value}`;
                    } else if (typeof value === 'string' && value.length > 50) {
                        // For long text, show truncated with tooltip
                        const truncated = value.substring(0, 50) + '...';
                        value = `<span title="${value.replace(/"/g, '&quot;')}">${truncated}</span>`;
                    }

                    tr += `<td>${value}</td>`;
                });

                tr += `</tr>`;

                $('#table-body-sc').append(tr);
            });
        }
        function processSuccess(bkashTxnId, transactionDate, billerCode, tableName) {
            console.log("SUCCESS:", {
                bkashTxnId,
                transactionDate,
                billerCode,
                tableName
            });

            if (!bkashTxnId || !transactionDate || !tableName ) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Information',
                    text: 'Please enter Bank Transaction ID, Pay Date, Table Name and Status',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            updatePendingData(bkashTxnId, transactionDate, tableName, "SUCCESS");

        }
        function processUnsuccess(bkashTxnId, transactionDate, billerCode, tableName) {
            console.log("SUCCESS:", {
                bkashTxnId,
                transactionDate,
                billerCode,
                tableName
            });

            if (!bkashTxnId || !transactionDate || !tableName ) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Information',
                    text: 'Please enter Bank Transaction ID, Pay Date, Table Name and Status',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            updatePendingData(bkashTxnId, transactionDate, tableName, "UNSUCCESS");
        }
        function updatePendingData(bankTranId, payDate, table, status) {
            $.ajax({
                url: '{{ route("pending-data.update-bank-transaction") }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    bank_tran_id: bankTranId,
                    pay_date: payDate,
                    table: table,
                    status: status,
                    server: server_sc,
                    _token: '{{ csrf_token() }}'
                },

                // 🔄 Show loader before request
                beforeSend: function () {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while updating data',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },

                success: function(response) {
                    console.log('Update Response:', response);

                    if (response.code === '200') {
                        Swal.close(); // 👈 IMPORTANT

                        setTimeout(() => {
                            Swal.fire({
                                icon: 'success',
                                title: 'Updated!',
                                text: response.msg || 'Data updated successfully',
                                confirmButtonColor: '#28a745'
                            }).then(() => {
                                // 🔄 RELOAD TABLE AFTER CLICK OK
                                searchPendingData1(payDate_sc);
                            });
                        }, 200);
                    }
                },

                error: function(xhr, status, error) {
                    console.error('Error:', error);
                },

                // 🛑 Hide loader after request completes (success or error)
                complete: function () {
                    Swal.close();
                }
            });
        }

    </script>

    {{--<script>
        /* ===============================
           GLOBAL STATE
        ================================ */
        let currentTableData = [];
        let currentColumns = [];

        /* ===============================
           SEARCH FUNCTIONALITY (LEFT SIDE)
        ================================ */
        $('#search-btn').on('click', function() {
            const bankTranId = $('#bank_tran_id').val().trim();
            const payDate = $('#pay_date').val().trim();

            // Validation
            if (!bankTranId || !payDate) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Information',
                    text: 'Please enter both Bank Transaction ID and Pay Date',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            searchPendingData(bankTranId, payDate);
        });

        /* ===============================
           UPDATE FUNCTIONALITY (RIGHT SIDE)
        ================================ */
        $('#search-btn-update').on('click', function() {
            const bankTranIdUp = $('#bank_tran_id_up').val().trim();
            const payDateUp = $('#pay_date_up').val().trim();
            const table = $('#table_up').val().trim();
            const status = $('#status_up').val().trim();

            // Validation
            if (!bankTranIdUp || !payDateUp || !table || !status) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Information',
                    text: 'Please enter Bank Transaction ID, Pay Date, Table Name and Status',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            updatePendingData(bankTranIdUp, payDateUp, table, status);
        });

        /* ===============================
           RESET FUNCTIONALITY
        ================================ */
        $('#reset-search').on('click', function() {
            $('#bank_tran_id').val('');
            $('#pay_date').val('');
        });

        $('#reset-update').on('click', function() {
            $('#bank_tran_id_up').val('');
            $('#pay_date_up').val('');
            $('#table_up').val('');
            $('#status_up').val('SUCCESS');
        });

        /* ===============================
           SEARCH PENDING DATA
        ================================ */
        function searchPendingData(bankTranId, payDate) {
            // Show loading state
            $('#table-body').html(`
            <tr>
                <td colspan="100%" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status"></div>
                    <div class="mt-2 fw-semibold">Searching data, please wait...</div>
                </td>
            </tr>
        `);

            $.ajax({
                url: '{{ route("pending-data.search-bank-transaction") }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    bank_tran_id: bankTranId,
                    pay_date: payDate,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log('Search Response:', response);
                    handleResponse(response, 'SEARCH');
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    handleError(xhr);
                }
            });
        }

        /* ===============================
           UPDATE PENDING DATA
        ================================ */
        function updatePendingData(bankTranId, payDate, table, status) {
            // Show loading state
            $('#table-body').html(`
            <tr>
                <td colspan="100%" class="text-center py-5">
                    <div class="spinner-border text-success" role="status"></div>
                    <div class="mt-2 fw-semibold">Updating data, please wait...</div>
                </td>
            </tr>
        `);

            $.ajax({
                url: '{{ route("pending-data.update-bank-transaction") }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    bank_tran_id: bankTranId,
                    pay_date: payDate,
                    table: table,
                    status: status,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log('Update Response:', response);
                    handleResponse(response, 'UPDATE');

                    // Show success notification for update
                    if (response.code === '200') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: response.msg || 'Data updated successfully',
                            confirmButtonColor: '#28a745'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    handleError(xhr);
                }
            });
        }

        /* ===============================
           HANDLE RESPONSE (SHARED)
        ================================ */
        function handleResponse(response, operationType) {
            // Show result info
            if (response.code === '200') {
                $('#result-info').removeClass('d-none alert-danger').addClass('alert-success');
                $('#operation-type').text(operationType);
                $('#result-status').text(response.status);
                $('#result-message').text(response.msg);
                $('#result-count').text(response.count);

                renderTable(response.data);
            } else {
                $('#result-info').removeClass('d-none alert-success').addClass('alert-danger');
                $('#operation-type').text(operationType);
                $('#result-status').text(response.status || 'ERROR');
                $('#result-message').text(response.msg || 'No data found');
                $('#result-count').text('0');

                $('#dynamic-header').html('<th>Action</th><th>SL</th>');
                $('#table-body').html(`
                <tr>
                    <td colspan="100%" class="text-center text-warning py-4">
                        <i class="bi bi-exclamation-triangle" style="font-size: 2rem;"></i>
                        <p class="mt-2">${response.msg || 'No records found'}</p>
                    </td>
                </tr>
            `);
            }
        }

        /* ===============================
           HANDLE ERROR (SHARED)
        ================================ */
        function handleError(xhr) {
            $('#result-info').removeClass('d-none alert-success').addClass('alert-danger');
            $('#operation-type').text('ERROR');
            $('#result-status').text('ERROR');
            $('#result-message').text('Failed to process request');
            $('#result-count').text('0');

            $('#dynamic-header').html('<th>Action</th><th>SL</th>');
            $('#table-body').html(`
            <tr>
                <td colspan="100%" class="text-center text-danger py-4">
                    <i class="bi bi-x-circle" style="font-size: 2rem;"></i>
                    <p class="mt-2">Failed to load data. Please try again.</p>
                </td>
            </tr>
        `);

            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: xhr.responseJSON?.message || 'Failed to process request',
                confirmButtonColor: '#d33'
            });
        }

        /* ===============================
           RENDER TABLE (DYNAMIC COLUMNS)
        ================================ */
        function renderTable(data) {
            $('#table-body').empty();

            if (!data || data.length === 0) {
                $('#dynamic-header').html('<th>Action</th><th>SL</th>');
                $('#table-body').html(`
                <tr>
                    <td colspan="100%" class="text-center text-muted py-4">
                        <i class="bi bi-inbox" style="font-size: 2rem;"></i>
                        <p class="mt-2">No records found</p>
                    </td>
                </tr>
            `);
                return;
            }

            // Store data globally
            currentTableData = data;

            // Get all column names from first row
            const firstRow = data[0];
            currentColumns = Object.keys(firstRow);

            // Build dynamic header - Action first, then SL, then all columns
            let headerHtml = '<th>Action</th><th>SL</th>';
            currentColumns.forEach(col => {
                headerHtml += `<th>${col}</th>`;
            });
            $('#dynamic-header').html(headerHtml);

            // Build table rows - Action button first
            data.forEach((row, index) => {
                let tr = `<tr>
                <td>
                    <button class="btn btn-sm btn-outline-primary" onclick='showDetailModal(${index})'>
                        <i class="bi bi-eye"></i> View
                    </button>
                </td>
                <td>${index + 1}</td>`;

                currentColumns.forEach(col => {
                    let value = row[col] ?? '-';

                    // Format specific columns
                    if (col === 'STATUS') {
                        value = value === 'T'
                            ? '<span class="badge bg-warning">Pending</span>'
                            : '<span class="badge bg-success">Success</span>';
                    } else if (col.includes('AMT') && value !== '-' && !isNaN(value)) {
                        value = `৳${value}`;
                    } else if (typeof value === 'string' && value.length > 50) {
                        // For long text, show truncated with tooltip
                        const truncated = value.substring(0, 50) + '...';
                        value = `<span title="${value.replace(/"/g, '&quot;')}">${truncated}</span>`;
                    }

                    tr += `<td>${value}</td>`;
                });

                tr += `</tr>`;

                $('#table-body').append(tr);
            });
        }

        /* ===============================
           SHOW DETAIL MODAL (DYNAMIC)
        ================================ */
        function showDetailModal(rowIndex) {
            const rowData = currentTableData[rowIndex];
            const content = $('#detail-content');
            content.empty();

            // Create detail view dynamically
            currentColumns.forEach(col => {
                let value = rowData[col] ?? '-';

                // Check if value is JSON string
                if (typeof value === 'string' && (value.startsWith('{') || value.startsWith('['))) {
                    try {
                        value = JSON.stringify(JSON.parse(value), null, 2);
                        content.append(`
                        <div class="col-12">
                            <label class="form-label fw-bold small text-muted">${col}</label>
                            <pre class="bg-light p-3 rounded" style="max-height: 200px; overflow-y: auto;">${value}</pre>
                        </div>
                    `);
                        return;
                    } catch (e) {
                        // Not JSON, treat as normal text
                    }
                }

                // Normal field
                content.append(`
                <div class="col-md-4">
                    <label class="form-label fw-bold small text-muted">${col}</label>
                    <p class="form-control-plaintext">${value}</p>
                </div>
            `);
            });

            $('#detailModal').modal('show');
        }

        /* ===============================
           ENTER KEY TRIGGER
        ================================ */
        $('#bank_tran_id, #pay_date').on('keypress', function(e) {
            if (e.which === 13) { // Enter key
                $('#search-btn').click();
            }
        });

        $('#bank_tran_id_up, #pay_date_up, #table_up').on('keypress', function(e) {
            if (e.which === 13) { // Enter key
                $('#search-btn-update').click();
            }
        });
    </script>--}}
@endsection