@extends('layout.public')
@php
    $activeEnv = session('env', 'uat'); // default UAT
@endphp
@section('title')
    {{ strtoupper($activeEnv) }} Error Process Dashboard
@endsection

@section('style')
    <style>
        .log-console {
            background: #000;
            color: #0f0;
            padding: 15px;
            height: 250px;
            overflow-y: auto;
            font-size: 13px;
            font-family: "Courier New", monospace;
            border-radius: 8px;
            border: 1px solid #333;
        }
        .card-box {
            border: 1px solid #ddd;
            padding: 12px;
            border-radius: 8px;
            background: #ffffff;
            height: 100%;
        }
        .log-header {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 8px;
        }
    </style>
@endsection

@section('main')
    <main>
        <div class="row mt-3">
            <div class="col-12 col-xl-6">
                <div class="card notification-card border-0 shadow">
                    <div
                        class="p-2 border-bottom d-flex align-items-center justify-content-between">
                        <h6 class="">Oracle Logs</h6>
                        <a class="fw-normal d-inline-flex align-items-center" href="#">
                            <svg class="icon icon-xxs me-2" fill="currentColor"
                                 viewBox="0 0 20 20"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                                <path fill-rule="evenodd"
                                      d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                                      clip-rule="evenodd"></path>
                            </svg>
                            View all
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="list-group-oracle list-group-flush list-group-timeline">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-6">
                <div class="card notification-card border-0 shadow">
                    <div
                        class="p-2 border-bottom d-flex align-items-center justify-content-between">
                        <h6 class="">Biller Process Logs</h6>
                        <a class="fw-normal d-inline-flex align-items-center" href="#">
                            <svg class="icon icon-xxs me-2" fill="currentColor"
                                 viewBox="0 0 20 20"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                                <path fill-rule="evenodd"
                                      d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                                      clip-rule="evenodd"></path>
                            </svg>
                            View all
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="list-group-java list-group-flush list-group-timeline">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <script>

        navProcessLog();

        function navProcessLog() {
            $(document).ready(function () {
                const errorContainerOracle = $(".list-group-oracle");
                const errorContainerJava = $(".list-group-java");

                // ❗ Add Skeleton Loaders
                function addSkeleton(container, count, type) {
                    container.empty();
                    for (let i = 0; i < count; i++) {
                        const skeleton = `
                    <div class="list-group-item border-0">
                        <div class="row ps-lg-1">
                            <div class="col-auto">
                                <div class="icon-shape icon-xs rounded placeholder-shimmer ${type === 'oracle' ? 'bg-warning' : 'bg-primary'}"></div>
                            </div>
                            <div class="col ms-n2 mb-1">
                                <h5 class="fs-6 fw-bold mb-1"><span class="placeholder-shimmer" style="width: 60%;"></span></h5>
                                <p class="mb-1"><span class="placeholder-shimmer" style="width: 100%; height: 0.8em;"></span></p>
                                <div class="d-flex align-items-center">
                                    <span class="small placeholder-shimmer" style="width: 30%; height: 0.8em;"></span>
                                </div>
                            </div>
                        </div>
                    </div>`;
                        container.append(skeleton);
                    }
                }


                addSkeleton(errorContainerOracle, 5, 'oracle'); // 5 skeleton items for Oracle
                addSkeleton(errorContainerJava, 5, 'java');     // 5 skeleton items for Java

                // ❗ Fetch real data
                $.ajax({
                    url: 'getUATErroLogDataDasboard',
                    method: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        errorContainerOracle.empty();
                        errorContainerJava.empty();

                        // Handle ORADBERRORs
                        if (response.ORADBERROR && response.ORADBERROR.data.length > 0) {
                            response.ORADBERROR.data.forEach(item => {
                                const html = `
                        <div class="list-group-item border-0">
                            <div class="row ps-lg-1">
                                <div class="col-auto">
                                    <div class="icon-shape icon-xs icon-shape-warning rounded">
                                        <svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                                    </div>
                                </div>
                                <div class="col ms-n2 mb-1">
                                    <h5 class="fs-6 fw-bold mb-1">DB Error - ${item.PROCEDURE_TABLE}</h5>
                                    <p class="mb-1">${item.ERROR_MESSAGE}</p>
                                    <div class="d-flex align-items-center">
                                        <svg class="icon icon-xxs text-gray-400 me-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                        </svg>
                                        <span class="small">${moment(item.ERROR_TIMESTAMP, "DD-MM-YYYY HH:mm:ss").fromNow()}</span>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                                errorContainerOracle.append(html);
                            });
                        }

                        // Handle JAVAPROCESSERRORs
                        if (response.JAVAPROCESSERROR && response.JAVAPROCESSERROR.data.length > 0) {
                            response.JAVAPROCESSERROR.data.forEach(item => {
                                const html = `
                        <div class="list-group-item border-0">
                            <div class="row ps-lg-1">
                                <div class="col-auto">
                                    <div class="icon-shape icon-xs icon-shape-primary rounded">
                                        <svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
                                    </div>
                                </div>
                                <div class="col ms-n2 mb-1">
                                    <h3 class="fs-6 fw-bold mb-1">Java Error - ${item.type}</h3>
                                    <small class="mb-1">${item.msg}</small>
                                    <div class="d-flex align-items-center">
                                        <svg class="icon icon-xxs text-gray-400 me-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                        </svg>
                                        <span class="small">${moment(item.create_date, "YYYY-MM-DD HH:mm:ss").fromNow()}</span>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                                errorContainerJava.append(html);
                            });
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Failed to fetch error log data:", error);
                    }
                });
            });
        }
    </script>
@endsection