@extends('layout.app')

@section('title')
     Biller Process Log
@endsection

@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="#">Process Log</a></li>
                <li class="breadcrumb-item active" aria-current="page">Biller Process</li>
            </ol>
        </nav>
    </div>

    <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">{{ strtoupper(session('selectedEnv')) }} 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>
        /* ===============================
           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;
        });

        /* ===============================
           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());
            });
            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.api.data") }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    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);
                    // First load only
                    if (apiColumns.length === 0 && 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 filters
            $('#filter-conversation_id').val('');
            $('#filter-org_code').val('');
            $('#filter-start_datetime').val('');
            $('#filter-end_datetime').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 () {
            loadTableData();
        });
    </script>
@endsection