@extends('layout.app')

@section('title', 'DR Data Check')

@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>
    <style>
        .table-loader {
            text-align: center;
            padding: 20px !important;
        }
    </style>
@endsection

@section('main')

    <div class="container-fluid">

        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-3">
            <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">Process Log</li>
                <li class="breadcrumb-item active">DR Data Check</li>
            </ol>
        </nav>


        <div class="row">

            <!-- ================= V1 PANEL ================= -->
            <div class="col-md-6">

                <div class="card shadow-sm border-0">

                    <div class="card-header bg-light">
                        <h6 class="mb-0 fw-bold">bKash V1 Data Check</h6>
                    </div>

                    <div class="card-body">

                        <!-- Summary Cards -->
                        <div class="row g-2 mb-3">

                            <div class="col-md-3">
                                <div class="card text-center border">
                                    <div class="card-body p-2">
                                        <small>Total Result101</small>
                                        <h5 id="total-data1" class="text-primary mb-0">0</h5>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="card text-center border">
                                    <div class="card-body p-2">
                                        <small>Total Result23</small>
                                        <h5 id="total-data2" class="text-success mb-0">0</h5>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="card text-center border">
                                    <div class="card-body p-2">
                                        <small>Daily Match</small>
                                        <div id="match-status">Checking...</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="card text-center border">
                                    <div class="card-body p-2">
                                        <small>Network</small>
                                        <div id="network-status">Checking...</div>
                                    </div>
                                </div>
                            </div>

                        </div>


                        <!-- V1 TABLE -->
                        <div class="table-responsive" style="max-height:400px;overflow-y:auto;">

                            <table class="table table-sm table-bordered table-hover">

                                <thead class="table-light sticky-top">
                                <tr>
                                    <th>Date</th>
                                    <th>Result101</th>
                                    <th>Result23</th>
                                </tr>
                                </thead>

                                <tbody id="v1-table-body"></tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>



            <!-- ================= V2 PANEL ================= -->
            <div class="col-md-6">

                <div class="card shadow-sm border-0">

                    <div class="card-header bg-light">
                        <h6 class="mb-0 fw-bold">bKash V2 Data Check</h6>
                    </div>

                    <div class="card-body">

                        <!-- Summary Cards -->
                        <div class="row g-2 mb-3">

                            <div class="col-md-3">
                                <div class="card text-center border">
                                    <div class="card-body p-2">
                                        <small>Total Result102</small>
                                        <h5 id="total-data3" class="text-primary mb-0">0</h5>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="card text-center border">
                                    <div class="card-body p-2">
                                        <small>Total Result27</small>
                                        <h5 id="total-data4" class="text-success mb-0">0</h5>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="card text-center border">
                                    <div class="card-body p-2">
                                        <small>Daily Match</small>
                                        <div id="match-status-v2">Checking...</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="card text-center border">
                                    <div class="card-body p-2">
                                        <small>Network</small>
                                        <div id="network-status-v2">Checking...</div>
                                    </div>
                                </div>
                            </div>

                        </div>


                        <!-- V2 TABLE -->
                        <div class="table-responsive" style="max-height:400px;overflow-y:auto;">

                            <table class="table table-sm table-bordered table-hover">

                                <thead class="table-light sticky-top">
                                <tr>
                                    <th>Date</th>
                                    <th>Result102</th>
                                    <th>Result27</th>
                                </tr>
                                </thead>

                                <tbody id="table-body"></tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

@endsection

@section('script')
    <script src="{{ asset('assets/js/simple-datatables.js') }}"></script>

    <script>

        /* --------------------------------
           V1 TABLE LOADER
        -------------------------------- */
        function showTableLoaderV1() {
            $('#v1-table-body').html(`
            <tr>
                <td colspan="3" class="table-loader">
                    <div class="spinner-border text-primary" role="status"></div>
                    <div>Loading data...</div>
                </td>
            </tr>
        `);
        }


        /* --------------------------------
           V2 TABLE LOADER
        -------------------------------- */
        function showTableLoaderV2() {
            $('#table-body').html(`
            <tr>
                <td colspan="3" class="table-loader">
                    <div class="spinner-border text-primary" role="status"></div>
                    <div>Loading data...</div>
                </td>
            </tr>
        `);
        }



        /* --------------------------------
           LOAD V1 DATA
        -------------------------------- */
        function loadTableDataV1() {

            showTableLoaderV1();

            $.ajax({
                url: '{{ route('log.DRdDtaCheck.data.v1') }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    _token: '{{ csrf_token() }}'
                },

                success: function (response) {

                    let tbody = $('#v1-table-body');
                    tbody.empty();

                    let total1 = 0;
                    let total2 = 0;
                    let allMatched = true;

                    response.forEach(function (row) {

                        let val1 = parseInt(row.Result101);
                        let val2 = parseInt(row.Result23);

                        total1 += val1;
                        total2 += val2;

                        let warningClass = '';

                        if (val1 !== val2) {
                            warningClass = 'table-danger';
                            allMatched = false;
                        }

                        let tr = `
                        <tr class="${warningClass}">
                            <td>${row.Date}</td>
                            <td>${val1}</td>
                            <td>${val2}</td>
                        </tr>
                    `;

                        tbody.append(tr);
                    });

                    /* Update totals */
                    $('#total-data1').text(total1.toLocaleString());
                    $('#total-data2').text(total2.toLocaleString());

                    /* Update match status */
                    if (allMatched) {
                        $('#match-status')
                            .removeClass()
                            .addClass('text-success fw-bold')
                            .html('✔ All Days Matched');
                    } else {
                        $('#match-status')
                            .removeClass()
                            .addClass('text-danger fw-bold')
                            .html('⚠ Mismatch Found');
                    }

                    /* Network OK */
                    $('#network-status')
                        .removeClass()
                        .addClass('text-success fw-bold')
                        .html('🟢 Connected');
                },

                error: function (xhr) {

                    $('#v1-table-body').html(`
                    <tr>
                        <td colspan="3" class="text-danger text-center">
                            Failed to load data
                        </td>
                    </tr>
                `);

                    $('#network-status')
                        .removeClass()
                        .addClass('text-danger fw-bold')
                        .html('🔴 Disconnected');

                    console.error(xhr.responseText);
                }
            });
        }



        /* --------------------------------
           LOAD V2 DATA
        -------------------------------- */
        function loadTableDataV2() {

            showTableLoaderV2();

            $.ajax({
                url: '{{ route('log.DRdDtaCheck.data.v2') }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    _token: '{{ csrf_token() }}'
                },

                success: function (response) {

                    let tbody = $('#table-body');
                    tbody.empty();

                    let total1 = 0;
                    let total2 = 0;
                    let allMatched = true;

                    response.forEach(function (row) {

                        let val1 = parseInt(row.Result_DB27);
                        let val2 = parseInt(row.Result_UATDB);

                        total1 += val1;
                        total2 += val2;

                        let warningClass = '';

                        if (val1 !== val2) {
                            warningClass = 'table-danger';
                            allMatched = false;
                        }

                        let tr = `
                    <tr class="${warningClass}">
                        <td>${row.Date}</td>
                        <td>${val1}</td>
                        <td>${val2}</td>
                    </tr>
                `;

                        tbody.append(tr);
                    });

                    // Update totals
                    $('#total-data3').text(total1.toLocaleString());
                    $('#total-data4').text(total2.toLocaleString());

                    // Match status
                    if (allMatched) {
                        $('#match-status-v2')
                            .removeClass()
                            .addClass('text-success fw-bold')
                            .html('✔ All Days Matched');
                    } else {
                        $('#match-status-v2')
                            .removeClass()
                            .addClass('text-danger fw-bold')
                            .html('⚠ Mismatch Found');
                    }

                    // Network status
                    $('#network-status-v2')
                        .removeClass()
                        .addClass('text-success fw-bold')
                        .html('🟢 Connected');

                },

                error: function () {

                    $('#network-status-v2')
                        .removeClass()
                        .addClass('text-danger fw-bold')
                        .html('🔴 Disconnected');

                }
            });
        }




        /* --------------------------------
           DOCUMENT READY
        -------------------------------- */
        $(document).ready(function () {

            /* First Load */
            loadTableDataV1();
            loadTableDataV2();

            /* Auto Refresh Every 5 Minutes */
            setInterval(function () {

                loadTableDataV1();
                loadTableDataV2();

            }, 300000);

        });

    </script>

@endsection