@extends('layout.app')

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

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

<div class="mb">
    <div id="column-checkboxes" class="d-flex flex-wrap gap-2">
        @php
        $allColumns =["id","type", "conversation_id","org_code","start_time","end_time","db_req_data",
        "req_url","req_data","res_code","res_data","db_res_proces","create_date"
        ];
        @endphp
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="row d-none" id="filter-section">
            <div class="row">
                <div class="col-md-4">
                    <label><strong>Choose Columns to Display</strong></label>
                    <div class="border rounded p-2" style="max-height: 150px; overflow-y: auto;">
                        @foreach ($allColumns as $col)
                        @if ($col === 'ID')
                        <input type="hidden" class="column-checkbox" value="ID" checked>
                        @else
                        <div class="form-check">
                            <input class="form-check-input column-checkbox" type="checkbox" value="{{ $col }}"
                                id="col-{{ $loop->index }}" checked>
                            <label class="form-check-label" for="col-{{ $loop->index }}">
                                {{ $col }}
                            </label>
                        </div>
                        @endif
                        @endforeach
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-3">
                            <label><strong>TYPE</strong></label>
                            <select id="filter-TYPE" class="form-select">
                                <option value="">All</option>
                                <option value="CheckBillCV">CheckBillCV</option>
                                <option value="BillPaymentCV">BillPaymentCV</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label><strong>CreateDate</strong></label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <svg class="icon icon-xs text-gray-600" fill="currentColor" viewBox="0 0 20 20"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd"
                                            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                </span>
                                <input class="form-control" name="filter-CreateDate" id="filter-CreateDate" type="text"
                                    placeholder="dd/mm/yyyy" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label><strong>CONVERSATIONID</strong></label>
                            <input type="text" id="filter-CONVERSATIONID" class="form-control"
                                placeholder="Enter CONVERSATIONID">
                        </div>
                        <div class="col-md-3">
                            <label><strong>Org Code</strong></label>
                            <input type="text" id="filter-org-code" class="form-control" placeholder="Enter Org Code">
                        </div>
                        <div class="col-md-2 d-flex align-items-end mt-2">
                            <button class="btn btn-primary" onclick="loadTableData()">Apply Filter</button>
                        </div>
                    </div>
                </div>
            </div>
            <hr style="margin-top: 25px">
        </div>
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6>Biller Process Log List  (100.148)</h6>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-warning btn-sm" id="toggle-filter">
                    <span id="filter-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-funnel" viewBox="0 0 16 16">
                            <path
                                d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .39.812L10 8.118V13.5a.5.5 0 0 1-.777.416l-2-1.333A.5.5 0 0 1 7 12.167V8.118L1.61 1.812A.5.5 0 0 1 1.5 1.5z" />
                        </svg>
                    </span>
                    <span id="close-icon" class="d-none">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-x-lg" viewBox="0 0 16 16">
                            <path
                                d="M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z" />
                        </svg>
                    </span>
                    <span id="filter-btn-text"> Filter</span>
                </button>

            </div>
        </div>
        <div class="table-responsive mt-2" style="max-height: 400px; overflow-y: auto;">
            <table class="table table-bordered" id="user-datatable">
                <thead class="thead-light">
                    <tr id="dynamic-header">
                        <th>SL</th>
                        <!-- Dynamic headers will be injected here -->
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="table-body">
                    <!-- Data will be injected here -->
                </tbody>
            </table>
        </div>
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div id="total-records" style="font-size: small">Total Records: 0</div>
            <div class="btn-group" id="pagination-controls"></div>
            <div id="current-page" style="font-size: 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>
    $('#filter-CreateDate').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });

        const toggleBtn = document.getElementById('toggle-filter');
        const filterSection = document.getElementById('filter-section');
        const filterIcon = document.getElementById('filter-icon');
        const closeIcon = document.getElementById('close-icon');
        const btnText = document.getElementById('filter-btn-text');

        toggleBtn.addEventListener('click', function () {
            const isHidden = filterSection.classList.contains('d-none');

            filterSection.classList.toggle('d-none');
            filterIcon.classList.toggle('d-none');
            closeIcon.classList.toggle('d-none');
            btnText.textContent = isHidden ? ' Close' : ' Filter';
        });

        let currentPage = 1;
        const pageSize = 10;

        function getFilters() {
            return {
                access_type: $('#filter-TYPE').val(),
                start_time: $('#filter-CreateDate').val(),
                conversation_id: $('#filter-CONVERSATIONID').val(),
                org_code: $('#filter-org-code').val(),
            };
        }

        function getSelectedColumns() {
            const selected = [];

            $('.column-checkbox:checked').each(function () {
                selected.push($(this).val());
            });
            return selected;
        }

        let currentTableRowsData = [];

        function loadTableData() {
            const selectedColumns = getSelectedColumns();
            const filters = getFilters();
            const offset = (currentPage - 1) * pageSize;

            $.ajax({
                url: '{{ route('lv-biller-process-log-req') }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    columns: selectedColumns,
                    filters: filters,
                    offset: offset,
                    limit: pageSize,
                    _token: '{{ csrf_token() }}'
                },
                success: function (data) {
                    $('#table-body').empty();

                    const rows = data.data || [];
                    const total = data.total || 0;
                    const totalPages = Math.ceil(total / pageSize);

                    // Store the raw row data for easy access later
                    currentTableRowsData = rows;

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

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

                    if (rows.length === 0 && currentPage > 1) {
                        currentPage--;
                        loadTableData();
                        return;
                    }

                    // Define all columns that should show a "View Details" button
                    const largeDataColumns = [
                        'db_req_data',
                        'req_data',
                        'res_data',
                        'db_res_proces'
                    ];

                    $.each(rows, function (index, rowData) {
                        let row = `<tr><td>${offset + index + 1}</td>`;
                        selectedColumns.forEach(col => {
                            let cellValue = rowData[col] ?? '';
                            // Check if the current column is one of the large data columns
                            if (largeDataColumns.includes(col)) {
                                // For request_payload specifically, we can still show the status badge
                                // but keep the 'View Details' for the data.
                                if (col === 'request_payload') {
                                    let status = '';
                                    try {
                                        const json = JSON.parse(cellValue);
                                        status = json?.status ?? '';
                                    } catch (e) {
                                        console.warn(`Not valid JSON in ${col} for row ${offset + index + 1}`);
                                    }

                                    if (status) {
                                        let badgeClass = 'secondary';
                                        if (status === 'SUCCESS') badgeClass = 'success';
                                        else if (status === 'FAILED') badgeClass = 'danger';
                                        else if (status === 'PENDING') badgeClass = 'warning';
                                        else if (status) badgeClass = 'info';
                                        cellValue = `<span class="badge bg-${badgeClass}">${status}</span> `; // Add a space
                                    } else {
                                        cellValue = ''; // No status badge if no status
                                    }
                                } else {
                                    cellValue = ''; // Clear cellValue for other large columns, will be replaced by button
                                }

                                if (rowData[col] && rowData[col].length > 0) {
                                    cellValue += `<button class="btn btn-sm btn-outline-primary"
                                                    onclick='showPayloadModal(${index}, "${col}")'>
                                                View Details
                                            </button>`;
                                } else {
                                    // If no data, display "No data" instead of a button
                                    cellValue = `<span class="text-muted">No data</span>`;
                                }

                            }
                            else {
                                // No change needed for small data, it's just `cellValue` as is.
                            }

                            row += `<td>${cellValue}</td>`;
                        });

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

                    // === 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 (xhr) {
                    console.error('Error:', xhr.responseText);
                }
            });
        }

        function showPayloadModal(rowIndex, columnName) {
            const rowData = currentTableRowsData[rowIndex];
            let dataToDisplay = '';
            let modalTitle = `Details for ${columnName}`; // More generic title

            if (!rowData) {
                console.error('Row data not found for index:', rowIndex);
                return;
            }

            dataToDisplay = rowData[columnName] ?? '';

            // If it's request_payload, and it's JSON with a 'data' field (which contains SOAP),
            // we can specifically display the 'data' field. Otherwise, display the whole thing.
            if (columnName === 'request_payload' || columnName === 'r.request_payload') {
                try {
                    const parsed = JSON.parse(dataToDisplay);
                    // If the JSON has a 'data' field, and it's a non-empty string, assume it's the SOAP.
                    // You can adjust this logic based on your exact payload structure.
                    if (parsed && typeof parsed.data === 'string' && parsed.data.trim().startsWith('<')) { // Basic check for XML
                        dataToDisplay = parsed.data;
                        modalTitle = `SOAP Data for ${columnName}`;
                    } else if (parsed) {
                        dataToDisplay = parsed; // Pass the parsed JSON object to showJsonModal
                        modalTitle = `JSON Payload for ${columnName}`;
                    }
                } catch (e) {
                    // Not JSON, or parsing failed, so dataToDisplay remains the original string.
                    // The showJsonModal will handle it as plain text.
                    modalTitle = `Plain Text Details for ${columnName}`;
                }
            }

            // Now, call your existing showJsonModal
            showJsonModal(dataToDisplay, modalTitle);
        }

        function showJsonModal(data, title) {
            const $modal = $('#jsonModal');
            const $modalLabel = $('#jsonModalLabel');
            const $jsonContent = $('#jsonContent');

            $modalLabel.text(title);

            try {
                let formattedData;
                if (typeof data === 'string') {
                    // Attempt to parse as JSON. If successful, pretty print.
                    formattedData = JSON.stringify(JSON.parse(data), null, 2);
                } else { // It's already an object (e.g., from JSON.parse in showPayloadModal)
                    formattedData = JSON.stringify(data, null, 2);
                }
                $jsonContent.text(formattedData);
            } catch (e) {
                // If parsing fails (e.g., it's raw SOAP XML string, or already a string that's not JSON),
                // display as plain text.
                $jsonContent.text(data);
            }

            $modal.modal('show');
        }

        $('#prev-page').on('click', function () {
            if (currentPage > 1) {
                currentPage--;
                loadTableData();
            }
        });
        $('#next-page').on('click', function () {
            currentPage++;
            loadTableData();
        });
        $('.column-checkbox').on('change', loadTableData);
        $('#filter-TYPE, #filter-CreateDate, #filter-org-code, #filter-CONVERSATIONID').on('change', function () {
            currentPage = 1;
            loadTableData();
        });

        loadTableData();
</script>
@endsection