@extends('layout.app')
@php
    $activeEnv = session('env', 'uat'); // default UAT
@endphp
@section('title')
    Control Panel-V1
@endsection

@section('style')

@endsection

@section('main')
    <div class="row mt-3">
        <div class="col-12 col-sm-6 col-xl-6" >
            <div class="card border-left-primary shadow">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                            <tr>
                                <th class="text-center" colspan="3">Duplicate Data In Cust Pmnt</th>
                            </tr>
                            <tr>
                                <th>Date</th>
                                <th>BANK_TRAN_ID</th>
                                <th>ORG CODE</th>
                            </tr>
                            </thead>
                            <tbody id="duplicate_main_body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl-6" >
            <div class="card border-left-primary shadow">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                            <tr>
                                <th class="text-center" colspan="3">Duplicate Data Cust Pmnt UNSCSS</th>
                            </tr>
                            <tr>
                                <th>Date</th>
                                <th>BANK_TRAN_ID</th>
                                <th>ORG CODE</th>
                            </tr>
                            </thead>
                            <tbody id="duplicate_unscss_body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl-6" >
            <div class="card border-left-primary shadow">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                            <tr>
                                <th class="text-center" colspan="3">Duplicate Data Cust Pmnt UNSCSS (Intersect)</th>
                            </tr>
                            <tr>
                                <th>Date</th>
                                <th>BANK TRAN ID</th>
                                <th>ORG CODE</th>
                            </tr>
                            </thead>
                            <tbody id="intersect_body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl-6" >
        <div class="card border-left-primary shadow">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead>
                        <tr>
                            <th class="text-center" colspan="3">Panding For Retry</th>
                        </tr>
                        <tr>
                            <th>Date</th>
                            <th>BANK TRAN ID</th>
                            <th>ORG CODE</th>
                        </tr>
                        </thead>
                        <tbody id="retry_body"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="row mt-2">
        <div class="col-12 col-xl-9">
            <div class="row">
                <div class="col-12 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered">
                                    <thead>
                                    <tr>
                                        <th class="col-md-3">Name</th>
                                        <th class="col-md-2">PENDING</th>
                                        <th class="col-md-2">PROCESSING</th>
                                        <th class="col-md-2">ERROR</th>
                                        <th class="col-md-3">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody id="responseTableBody"></tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-3">
            <div class="col-12 px-0 mb-4">
                <div class="card border-0 shadow">
                    <div class="card-header border-bottom d-flex align-items-center justify-content-between">
                        <b style="font-size:13px">Check Bill Cancle</b>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-responsive">
                            <thead>
                            <tr>
                                <th scope="col">Name</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('OVL')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        OVL CHK_BILL
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('OVL2')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        OVL2 CHK_BILL
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('ISP')" class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        ISP CHK_BILL
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('ISP2')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        ISP2 CHK_BILL
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('ISP3')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        ISP3 CHK_BILL
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('EDU')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        EDU CHK_FEE
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('EDU3')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        EDU3 CHK_FEE
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('EDU4')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        EDU4 CHK_FEE
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('EDU2')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        EDU2 CHK_FEE
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('PROYAS')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        PROYAS CHK_BILL
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button href="#" onclick="showAlerts('BURO')"  class="btn btn-outline-primary btn-sm ">
                                        <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
                                        BURO CHK_BILL
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <!-- PST_PAY Table -->
        <div class="col-12 col-xl-6">
            <div class="card">
                <div class="card-body PST_PAY" style="height: 250px; overflow-y: auto;">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered" id="pst_pay_table">
                            <thead>
                            <tr>
                                <th colspan="5">PST_PAY</th>
                            </tr>
                            <tr>
                                <th>Date</th>
                                <th>Status</th>
                                <th>ORG</th>
                                <th>No </th>
                                <th>Time</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- CHK_BILL Table -->
        <div class="col-12 col-xl-6">
            <div class="card">
                <div class="card-body CHK_BILL" style="height: 250px; overflow-y: auto;">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered"  id="chk_bill_table">
                            <thead>
                            <tr>
                                <th colspan="5">CHK_BILL</th>
                            </tr>
                            <tr>
                                <th>Date</th>
                                <th>Status</th>
                                <th>ORG</th>
                                <th>No </th>
                                <th>Time</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- PAY_FEE Table -->
        <div class="col-12 col-xl-6">
            <div class="card">
                <div class="card-body PAY_FEE" style="height: 250px; overflow-y: auto;">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="pay_fee_table">
                            <thead>
                            <tr>
                                <th colspan="5">PAY_FEE</th>
                            </tr>
                            <tr>
                                <th>Date</th>
                                <th>Status</th>
                                <th>ORG</th>
                                <th>No </th>
                                <th>Time</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- CHK_FEE Table -->
        <div class="col-12 col-xl-6">
            <div class="card">
                <div class="card-body CHK_FEE" style="height: 250px; overflow-y: auto;">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="chk_fee_table">
                            <thead>
                            <tr>
                                <th colspan="5">CHK_FEE</th>
                            </tr>
                            <tr>
                                <th>Date</th>
                                <th>Status</th>
                                <th>ORG</th>
                                <th>No </th>
                                <th>Time</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script>
        $(document).ready(function () {

            // ===============================
            // INITIAL LOAD
            // ===============================
            loadAllDashboards();

            // ===============================
            // AUTO REFRESH EVERY 8 SECONDS
            // ===============================
            setInterval(function () {
                loadAllDashboards();
            }, 8000);


            // ===============================
            // MASTER FUNCTION (CALL ALL APIs)
            // ===============================
            function loadAllDashboards() {
                loadPendingDashboard();
                loadDuplicateData();
                loadSummaryDashboard();
            }


            // =========================================================
            // 1. PENDING DASHBOARD
            // =========================================================
            function loadPendingDashboard() {

                $.ajax({
                    url: '/v1/PendingDashboardList',
                    type: 'GET',
                    dataType: 'json',

                    success: function (res) {

                        if (res.code === "200") {

                            const data = res.data;

                            renderTable("#pst_pay_table tbody", data.PST_PAY);
                            renderTable("#chk_bill_table tbody", data.CHK_BILL);
                            renderTable("#pay_fee_table tbody", data.PAY_FEE);
                            renderTable("#chk_fee_table tbody", data.CHK_FEE);

                        } else {
                            console.error("PendingDashboard Error:", res.msg);
                        }
                    },

                    error: function (err) {
                        console.error("AJAX Error:", err);
                    }
                });
            }

            function renderTable(selector, rows) {

                let html = '';

                if (!rows || rows.length === 0) {
                    html = `<tr><td colspan="5" class="text-center">No Data</td></tr>`;
                } else {

                    rows.forEach(row => {
                        html += `
                    <tr>
                        <td>${row.TR_DATE}</td>
                        <td>${formatStatus(row.STATUS)}</td>
                        <td>${row.ORG_CODE}</td>
                        <td>${row.NO_OF_TR}</td>
                        <td>${row.MIN_SUB_TIME} - ${row.MAX_SUB_TIME}</td>
                    </tr>
                `;
                    });
                }

                $(selector).html(html);
            }

            function formatStatus(status) {
                if (status === 'N') {
                    return '<span class="badge bg-danger">Pending</span>';
                } else if (status === 'T') {
                    return '<span class="badge bg-success">Completed</span>';
                } else {
                    return status;
                }
            }


            // =========================================================
            // 2. DUPLICATE CHECK DASHBOARD
            // =========================================================
            function loadDuplicateData() {

                $.ajax({
                    url: '/v1/PaymentDuplicateChecks',
                    type: 'GET',
                    dataType: 'json',

                    success: function (res) {

                        if (res.code === "200") {

                            const data = res.data;

                            renderDuplicate("#duplicate_main_body", data.duplicates_main);
                            renderDuplicate("#duplicate_unscss_body", data.duplicates_unscss);
                            renderDuplicate("#intersect_body", data.intersect_records);
                            renderRetry("#retry_body", data.retry_pending);

                        } else {
                            console.error("Duplicate Error:", res.msg);
                        }
                    },

                    error: function (err) {
                        console.error("AJAX Error:", err);
                    }
                });
            }

            function renderDuplicate(selector, rows) {

                let html = '';

                if (!rows || rows.length === 0) {
                    html = `<tr><td colspan="3" class="text-center">No Data</td></tr>`;
                } else {
                    rows.forEach(row => {
                        html += `
                    <tr>
                        <td>${row.PAY_DATE}</td>
                        <td>${row.BANK_TRAN_ID}</td>
                        <td>${row.ORG_CODE}</td>
                    </tr>
                `;
                    });
                }

                $(selector).html(html);
            }

            function renderRetry(selector, rows) {

                let html = '';

                if (!rows || rows.length === 0) {
                    html = `<tr><td colspan="3" class="text-center">No Data</td></tr>`;
                } else {
                    rows.forEach(row => {
                        html += `
                    <tr>
                        <td>${row.PAY_DATE}</td>
                        <td>${row.BKASH_TRANS_ID}</td>
                        <td>${row.ORG_CODE}</td>
                    </tr>
                `;
                    });
                }

                $(selector).html(html);
            }


            // =========================================================
            // 3. SUMMARY DASHBOARD
            // =========================================================
            function loadSummaryDashboard() {

                $.ajax({
                    url: '/v1/PaymentSummaryDashboard',
                    type: 'GET',
                    dataType: 'json',

                    success: function (res) {

                        if (res.code === "200") {
                            renderSummaryTable(res.data);
                        } else {
                            console.error("Summary Error:", res.msg);
                        }
                    },

                    error: function (err) {
                        console.error("AJAX Error:", err);
                    }
                });
            }

            function renderSummaryTable(rows) {

                let html = '';

                if (!rows || rows.length === 0) {
                    html = `<tr><td colspan="5" class="text-center">No Data</td></tr>`;
                } else {

                    rows.forEach(row => {

                        html += `
                    <tr>
                        <td style="font-size: x-large;font-weight: 600;color: navy;">
                            ${row.Name}
                        </td>

                        <td class="text-center" style="font-size: x-large;font-weight: 900;color: forestgreen;">
                            ${row.PENDING}
                        </td>

                        <td class="text-center" style="font-size: x-large;font-weight: 900;color: tomato;">
                            ${row.PROCESSING}
                        </td>

                        <td class="text-center" style="font-size: x-large;font-weight: 900;color: indianred;">
                            ${row.ERROR}
                        </td>

                        <td>
                            <select class="form-select action-select" data-name="${row.Name}">
                                <option selected>select</option>
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="5">5</option>
                                <option value="10">10</option>
                                <option value="15">15</option>
                                <option value="20">20</option>
                                <option value="25">25</option>
                                <option value="30">30</option>
                                <option value="35">35</option>
                                <option value="40">40</option>
                                <option value="45">45</option>
                                <option value="50">50</option>
                            </select>
                        </td>
                    </tr>
                `;
                    });
                }

                $("#responseTableBody").html(html);
            }


            // =========================================================
            // OPTIONAL: SELECT CHANGE EVENT
            // =========================================================
            $(document).on('change', '.action-select', function () {

                let value = $(this).val();
                let name  = $(this).data('name');

                console.log("Selected:", name, value);

                // You can call another API here
            });

        });
    </script>
@endsection