@extends('layout.app')

@section('title', 'CDSLBK Tables ')

@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="#">CDSLBK DB</a></li>
                <li class="breadcrumb-item active" aria-current="page">CDSLBK Tables</li>
            </ol>
        </nav>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-12 mb-3">
                    <label for="parent_id" class="form-label">Table Name</label>
                    <div class="d-flex gap-2 align-items-start">
                        <div class="flex-grow-1">
                            <select class="form-select" id="parent_id" name="parent_id" aria-label="Select table">
                                <option value="">Select a table...</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                        <button type="button" class="btn btn-primary" id="load-btn" title="Load data" style="white-space: nowrap;">
                            <i class="bi bi-arrow-clockwise"></i> Load
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="filter-btn" title="Apply filters" style="white-space: nowrap;">
                            <i class="bi bi-funnel-fill"></i> Filter
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Fix Select2 styling to match Bootstrap form-select */
        .select2-container--default .select2-selection--single {
            height: 38px !important;
            border: 1px solid #ced4da !important;
            border-radius: 0.375rem !important;
            padding: 0.375rem 0.75rem !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px !important;
            padding-left: 0 !important;
            color: #495057 !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
            right: 5px !important;
        }

        /* Ensure buttons don't wrap text */
        #load-btn, #filter-btn {
            min-width: fit-content;
        }

        /* Make select2 container full width */
        .select2-container {
            width: 100% !important;
        }
    </style>

    <div class="card">
        <div class="card-body">

            <!-- FILTER SECTION -->
            <div id="filter-section" class="mb-4">

                <div class="row g-3 align-items-end">

                    <!-- Column Selector Dropdown with Select All -->
                    <div class="col-md-4">

                        <div class="row">
                            <div class="col-md-8">
                                <label class="fw-bold d-block   mb-3">Choose Columns</label>
                                <div class="dropdown position-relative">
                                    <button class="btn btn-outline-secondary w-100 dropdown-toggle" type="button"
                                            id="columnDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                        Select Columns
                                    </button>
                                    <div class="dropdown-menu p-3" style="max-height: 300px; overflow-y:auto; z-index:1055;">
                                        <div class="mb-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="select-all-columns" checked>
                                                <label class="form-check-label fw-bold" for="select-all-columns">Select All</label>
                                            </div>
                                        </div>
                                        <hr class="my-1">
                                        <div class="column-checkboxes">
                                            <!-- Dynamic checkboxes inserted here via JS -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Rows per page</label>
                                <select id="page-size" class="form-select">
                                    <option value="10" selected>10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- Filters -->
                    <div class="col-md-8">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">Conversation ID</label>
                                <input type="text" id="filter-conversation_id" class="form-control  dynamic-filter" data-column="conversation_id">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">Org Code</label>
                                <input type="text" id="filter-org_code" class="form-control dynamic-filter" data-column="org_code">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small">Start Date</label>
                                <input type="date" id="filter-start_datetime" class="form-control dynamic-filter" data-column="start_datetime">
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="col-12 d-flex gap-2 mt-2">
                        <button type="button" class="btn btn-primary btn-sm" id="apply-filters">
                            <i class="bi bi-funnel-fill"></i> Apply Filter
                        </button>
                        <button type="button" class="btn btn-outline-danger btn-sm" id="reset-filters">
                            <i class="bi bi-arrow-clockwise"></i> Reset
                        </button>
                    </div>

                </div>

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

            <!-- Table Section -->
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="mb-0">SOAP API Process Log</h6>
            </div>

            <div class="table-responsive" style="max-height: 400px; overflow-y:auto;">
                <table class="table table-striped table-bordered table-hover align-middle mb-0" id="user-datatable">
                    <thead class="table-light sticky-top">
                    <tr id="dynamic-header">
                        <th>SL</th>
                    </tr>
                    </thead>
                    <tbody id="table-body">
                    <tr id="table-loader" style="display:none;">
                        <td colspan="100%" class="text-center py-5">
                            <div class="spinner-border text-primary" role="status"></div>
                            <div class="mt-2 fw-semibold">Loading data, please wait...</div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- Table Footer / Pagination -->
            <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap gap-2">
                <div id="total-records" class="small">Total Records: 0</div>
                <div class="btn-group" id="pagination-controls"></div>
                <div id="current-page" class="small">Page 1 of 1</div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="jsonModal" tabindex="-1" aria-labelledby="jsonModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="jsonModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <pre id="jsonContent" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
                </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>
        let selectedTableName = ''; // Store selected table name globally
        let tableNew = false;
        url = "{{ url('cdsldb/tables/list') }}";
        $.ajax({
            url: url,
            type: "GET",
            success: function (data) {
                if (data) {
                    var roles = data;
                    var selectElement = $('#parent_id');
                    selectElement.empty();
                    selectElement.append('<option value="" selected>Select Table</option>');
                    roles.forEach(function(role) {
                        selectElement.append('<option value="' + role.id + '" data-name="' + role.name + '">' + role.name + '</option>');
                    });
                    selectElement.select2();

                    // Store table name when selection changes
                    selectElement.on('change', function() {
                        selectedTableName = $(this).find('option:selected').data('name') || '';
                    });
                } else {
                    console.error('Failed to load roles');
                }
            },
            error: function (err) {
                console.error('Error loading roles', err);
            }
        });

        // Load button click handler
        $('#load-btn').on('click', function() {
            if (!selectedTableName) {
                alert('Please select a table first');
                return;
            }

            // **FIX: Reset apiColumns when loading a new table**
            apiColumns = [];
            tableNew = true;

            // Reset to first page when loading new table
            currentPage = 1;
            loadTableData();
        });

        // Filter button click handler (optional)
        $('#filter-btn').on('click', function() {
            if (!selectedTableName) {
                alert('Please select a table first');
                return;
            }

            // You can add filter modal or filter panel toggle here
            currentPage = 1;
            loadTableData();
        });
    </script>
    <script>
        /* ===============================
           GLOBAL STATE
        ================================ */
        let currentPage = 1;
        let pageSize = 10;
        let apiColumns = [];
        let currentTableRowsData = [];

        /* ===============================
           PAGE SIZE
        ================================ */
        $('#page-size').on('change', function () {
            pageSize = parseInt($(this).val());
            currentPage = 1;
            loadTableData();
        });

        /* ===============================
           COLUMN SELECT
        ================================ */
        function renderColumnSelect(columns) {
            const container = $('.column-checkboxes'); // dropdown div for checkboxes
            container.empty();

            columns.forEach(col => {
                container.append(`
        <div class="form-check">
            <input class="form-check-input column-checkbox" type="checkbox" value="${col}" id="col-${col}" checked>
            <label class="form-check-label" for="col-${col}">${col}</label>
        </div>
    `);
            });

            // Bind change events for dynamically generated checkboxes
            $('.column-checkbox').off('change').on('change', function() {
                const allChecked = $('.column-checkbox').length === $('.column-checkbox:checked').length;
                $('#select-all-columns').prop('checked', allChecked);
                currentPage = 1;
                loadTableData();
            });
        }

        function getSelectedColumns() {
            let cols = [];
            $('.column-checkbox:checked').each(function() {
                cols.push($(this).val());
            });

            // **FIX: Return empty array only on initial load of new table**
            if(tableNew){
                tableNew = false; // Reset the flag after first use
                return [];
            } else {
                return cols;
            }
        }

        // Handle individual column checkbox change
        $('.column-checkbox').on('change', function() {
            const allChecked = $('.column-checkbox').length === $('.column-checkbox:checked').length;
            $('#select-all-columns').prop('checked', allChecked);
            currentPage = 1;
            loadTableData();
        });

        // Handle Select All / Deselect All
        $('#select-all-columns').on('change', function() {
            const checked = $(this).is(':checked');
            $('.column-checkbox').prop('checked', checked);
            currentPage = 1;
            loadTableData();
        });

        /* ===============================
           FILTERS
        ================================ */
        function renderFilters(columns) {
            const container = $('#dynamic-filters');
            container.empty();

            columns.forEach(col => {

                // Skip large payload fields
                if (['request_payload','response_payload','callback_req_body','callback_res_body'].includes(col)) {
                    return;
                }

                let inputType = 'text';
                if (col.toLowerCase().includes('date')) {
                    inputType = 'date';
                }

                container.append(`
        <div class="col-md-3">
            <label class="fw-semibold small">${col}</label>
            <input type="${inputType}"
                   class="form-control form-control-sm dynamic-filter"
                   data-column="${col}">
        </div>
    `);
            });
        }

        function getFilters() {
            const filters = {};
            $('.dynamic-filter').each(function () {
                const val = $(this).val();
                const col = $(this).data('column');
                if (val) filters[col] = val;
            });
            return filters;
        }

        /* ===============================
           LOAD TABLE DATA
        ================================ */
        function loadTableData() {

            const offset = (currentPage - 1) * pageSize;

            $('#table-body').html(`
                    <tr>
                        <td colspan="100%" class="text-center py-4">
                            <div class="spinner-border text-primary"></div>
                        </td>
                    </tr>
                `);

            $.ajax({
                url: '{{ route("log.biller.process.data") }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    table_name: selectedTableName, // Pass the selected table name
                    columns: getSelectedColumns(),
                    filters: getFilters(),
                    offset: offset,
                    limit: pageSize,
                    _token: '{{ csrf_token() }}'
                },
                success: function (data) {
                    const total = data.total || 0;
                    const totalPages = Math.ceil(total / pageSize);

                    // **FIX: Always update columns when they are returned from API**
                    if (data.columns) {
                        apiColumns = data.columns;
                        renderColumnSelect(apiColumns);
                        renderFilters(apiColumns);
                    }

                    renderTable(data, offset);

                    // === Update page indicator ===
                    $('#current-page').text(`Page ${currentPage} of ${totalPages}`);

                    // === Build pagination ===
                    const $pagination = $('#pagination-controls');
                    $pagination.empty();

                    if (totalPages <= 1) return;

                    const createPageBtn = (page, text = page, disabled = false, active = false) => {
                        const btn = $(`<button class="btn ${active ? 'btn-primary' : 'btn-outline-secondary'}">${text}</button>`);
                        if (!disabled) {
                            btn.click(() => {
                                currentPage = page;
                                loadTableData();
                            });
                        } else {
                            btn.prop('disabled', true);
                        }
                        return btn;
                    };

                    // Prev
                    $pagination.append(createPageBtn(currentPage - 1, 'Prev', currentPage === 1));

                    // Numbered pages (max 5 visible)
                    const maxVisible = 5;
                    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
                    let end = Math.min(totalPages, start + maxVisible - 1);
                    if (end - start < maxVisible - 1) {
                        start = Math.max(1, end - maxVisible + 1);
                    }

                    if (start > 1) {
                        $pagination.append(createPageBtn(1));
                        if (start > 2) $pagination.append($('<span class="pagination-ellipsis">...</span>'));
                    }

                    for (let i = start; i <= end; i++) {
                        $pagination.append(createPageBtn(i, i, false, i === currentPage));
                    }

                    if (end < totalPages) {
                        if (end < totalPages - 1) $pagination.append($('<span class="pagination-ellipsis">...</span>'));
                        $pagination.append(createPageBtn(totalPages));
                    }

                    // Next
                    $pagination.append(createPageBtn(currentPage + 1, 'Next', currentPage === totalPages));
                },
                error: function () {
                    $('#table-body').html(`
            <tr>
                <td colspan="100%" class="text-center text-danger">
                    Failed to load data
                </td>
            </tr>
        `);
                }
            });
        }

        /* ===============================
           TABLE RENDER
        ================================ */
        function renderTable(data, offset) {

            const rows = data.data || [];
            const total = data.total || 0;
            const selectedColumns = getSelectedColumns();
            currentTableRowsData = rows;

            let header = '<th>SL</th>';
            selectedColumns.forEach(col => header += `<th>${col}</th>`);

            $('#dynamic-header').html(header);
            $('#table-body').empty();

            if (rows.length === 0) {
                $('#table-body').html(`
        <tr>
            <td colspan="100%" class="text-center text-muted">
                No data found
            </td>
        </tr>
    `);
                return;
            }

            rows.forEach((row, index) => {
                let tr = `<tr><td>${offset + index + 1}</td>`;
                selectedColumns.forEach(col => {
                    let val = row[col] ?? '';
                    if (typeof val === 'string' && val.length > 120) {
                        val = `<button class="btn btn-sm btn-outline-primary"
                           onclick='showPayloadModal(${index}, "${col}")'>
                       View
                   </button>`;
                    }
                    tr += `<td>${val}</td>`;
                });
                tr += `<td>-</td></tr>`;
                $('#table-body').append(tr);
            });

            $('#total-records').text(`Total Records: ${total}`);
        }

        /* ===============================
           APPLY / RESET
        ================================ */
        $('#apply-filters').on('click', function() {
            currentPage = 1;
            loadTableData();
        });

        $('#reset-filters').on('click', function() {
            // Reset dynamic filters
            $('.dynamic-filter').val('');

            // Reset columns
            $('.column-checkbox, #select-all-columns').prop('checked', true);

            // Reset page size
            $('#page-size').val(10);
            pageSize = 10;
            currentPage = 1;

            loadTableData();
        });

        /* ===============================
           MODAL
        ================================ */
        function showPayloadModal(rowIndex, columnName) {
            const row = currentTableRowsData[rowIndex];
            let content = row[columnName] ?? '';

            try {
                content = JSON.stringify(JSON.parse(content), null, 2);
            } catch (e) {}

            $('#jsonModalLabel').text(columnName);
            $('#jsonContent').text(content);
            $('#jsonModal').modal('show');
        }

        /* ===============================
           INIT
        ================================ */
        $(document).ready(function () {
            // **REMOVED: Don't auto-load on page ready**
            // loadTableData();
        });
    </script>
@endsection