nhance-enrollment/app/Views/endorsement_dash.php

<style>

body{
    margin-top:20px;
    background:#FAFAFA;
}
.order-card {
    color: #fff;
}

.bg-c-blue {
    background: linear-gradient(45deg,#4099ff,#73b4ff);
}

.bg-c-green {
    background: linear-gradient(45deg,#2ed8b6,#59e0c5);
}

.bg-c-yellow {
    background: linear-gradient(45deg,#FFB64D,#ffcb80);
}

.bg-c-pink {
    background: linear-gradient(45deg,#FF5370,#ff869a);
}

.bg-c-red {
    background: linear-gradient(45deg,#FF4E50,#F9D423);
}

.bg-c-purple {
    background: linear-gradient(45deg,#9D50BB,#6E48AA);
}

.bg-c-orange {
    background: linear-gradient(45deg,#F2994A,#F2C94C);
}

.bg-c-teal {
    background: linear-gradient(45deg,#1ABC9C,#16A085);
}

.bg-c-cyan {
    background: linear-gradient(45deg,#00C9FF,#92FE9D);
}

.bg-c-lime {
    background: linear-gradient(45deg,#A8E063,#56AB2F);
}

.bg-c-indigo {
    background: linear-gradient(45deg,#3F51B5,#5A55AE);
}

.bg-c-Pelorous {
    background: linear-gradient(45deg, #00d6db, #00a8b5);
}

.bg-c-Pelorous2 {
    background: linear-gradient(45deg, #02a8b5, #017f8b);
}

.bg-c-Pelorous3 {
    background: linear-gradient(45deg, #098895, #046063);
}

.bg-c-Grenadier {
    background: linear-gradient(45deg, #ff9d37, #ff7a10);
}

.bg-c-Grenadier2 {
    background: linear-gradient(45deg, #ff8010, #ff4c00);
}

.bg-c-Grenadier3 {
    background: linear-gradient(45deg, #f06306, #cc4b05);
}

.bg-c-SilverChalice {
    background: linear-gradient(45deg, #a3a8a8, #8f9494);
}

.bg-c-SilverChalice2 {
    background: linear-gradient(45deg, #7e8484, #686e6e);
}

.bg-c-SilverChalice3 {
    background: linear-gradient(45deg, #5c6363, #434949);
}



.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card .card-block {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
}

.order-card i {
    font-size: 26px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.m-b-1{
    margin-top: 0;
    margin-bottom: 5px;
}

.modal-right{
    width: 100% !important;
    justify-content: normal !important;
}

.modal-body {
    max-height: 100vh;
    overflow-y: auto;
    padding-left: 25px !important;
    padding-right: 25px !important;
    padding-top: 10px !important;
    padding-bottom: 35% !important;
}

</style>

<div class="tab-pane active show" id="pending-actions-dash-tab" style="/*padding-left: 35px;*/padding-right: 35px;">

    <div class="row">
        <div class="col-md-4 col-xl-3">
            <div data-toggle="modal" data-target="#right-modal" class="card bg-c-Pelorous order-card" onclick="getPendingActionClientDataForDashboard(this, 'Inception Pending', 'I')">
                <div class="card-block">
                    <h6 class="m-b-20 font-15">Inception Pending</h6>
                    <h2 class="text-right"><i class="mdi mdi-account-multiple-plus f-left"></i><span><?= $pendingActionsData['inception'] ?></span></h2>
                    <p class="m-b-1">&nbsp;<span class="f-right"></span></p>
                    <p class="m-b-1">&nbsp;<span class="f-right"></span></p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div data-toggle="modal" data-target="#right-modal" class="card bg-c-Pelorous2 order-card" onclick="getPendingActionClientDataForDashboard(this, 'Pending Insurer', 'insurer')">
                <div class="card-block">
                    <h6 class="m-b-20 font-15">Pending Insurer</h6>
                    <h2 class="text-right"><i class="mdi mdi-account-box f-left"></i><span><?= $pendingActionsData['uhid'] ?></span></h2>
                    <p class="m-b-1">Exported <span class="f-right"><?= $pendingActionsData['uhid_export_count'] ?></span></p>
                    <p class="m-b-1">Not Exported <span class="f-right"><?= $pendingActionsData['uhid_not_export_count'] ?></span></p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div data-toggle="modal" data-target="#right-modal" class="card bg-c-Pelorous3 order-card" onclick="getPendingActionClientDataForDashboard(this, 'Pending TPA', 'TPA')">
                <div class="card-block">
                    <h6 class="m-b-20 font-15">Pending TPA</h6>
                    <h2 class="text-right"><i class="mdi mdi-signal-variant f-left"></i><span><?= $pendingActionsData['tpa'] ?></span></h2>
                    <p class="m-b-1">Exported <span class="f-right"><?= $pendingActionsData['tpa_export_count'] ?></span></p>
                    <p class="m-b-1">Not Exported <span class="f-right"><?= $pendingActionsData['tpa_not_export_count'] ?></span></p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div data-toggle="modal" data-target="#right-modal" class="card bg-c-Grenadier order-card" onclick="getPendingActionClientDataForDashboard(this, 'Correction Pending', 'C')">
                <div class="card-block">
                    <h6 class="m-b-20 font-15">Correction Pending</h6>
                    <h2 class="text-right"><i class="mdi mdi-account-edit f-left"></i><span><?= $pendingActionsData['correction'] ?></span></h2>
                    <p class="m-b-1">Exported <span class="f-right"><?= $pendingActionsData['correction_export_count'] ?></span></p>
                    <p class="m-b-1">Not Exported <span class="f-right"><?= $pendingActionsData['correction_not_export_count'] ?></span></p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div data-toggle="modal" data-target="#right-modal" class="card bg-c-Grenadier2 order-card" onclick="getPendingActionClientDataForDashboard(this, 'Deletion Pending', 'D')">
                <div class="card-block">
                    <h6 class="m-b-20 font-15">Deletion Pending</h6>
                    <h2 class="text-right"><i class="mdi mdi-account-multiple-minus f-left"></i><span><?= $pendingActionsData['deletion'] ?></span></h2>
                    <p class="m-b-1">Exported <span class="f-right"><?= $pendingActionsData['deletion_export_count'] ?></span></p>
                    <p class="m-b-1">Not Exported <span class="f-right"><?= $pendingActionsData['deletion_not_export_count'] ?></span></p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div data-toggle="modal" data-target="#right-modal" class="card bg-c-Grenadier3 order-card" onclick="getPendingActionClientDataForDashboard(this, 'SI Enhancement Pending', 'SI')">
                <div class="card-block">
                    <h6 class="m-b-20 font-15">SI Enhancment Pending</h6>
                    <h2 class="text-right"><i class="mdi mdi-account-convert f-left"></i><span><?= $pendingActionsData['si_enhancement'] ?></span></h2>
                    <p class="m-b-1">Exported <span class="f-right"><?= $pendingActionsData['si_export_count'] ?></span></p>
                    <p class="m-b-1">Not Exported <span class="f-right"><?= $pendingActionsData['si_not_export_count'] ?></span></p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div data-toggle="modal" data-target="#right-modal" class="card bg-c-SilverChalice order-card" onclick="getPendingActionClientDataForDashboard(this, 'Policy Renewal', 'policy')">
                <div class="card-block">
                    <h6 class="m-b-20 font-15">Policy</h6>
                    <h2 class="text-right"><i class="mdi mdi-autorenew f-left"></i><span><?= $pendingActionsData['PolicyRenewalData'] ?></span></h2>
                    <p class="m-b-1">&nbsp;<span class="f-right"></span></p>
                    <p class="m-b-1">&nbsp;<span class="f-right"></span></p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-SilverChalice2 order-card">
                <div class="card-block">
                    <h6 class="m-b-20 font-15">Ticket</h6>
                    <h2 class="text-right"><i class="mdi mdi-tag f-left"></i><span><?= $pendingActionsData['ticketData'] ?></span></h2>
                    <p class="m-b-1">&nbsp;<span class="f-right"></span></p>
                    <p class="m-b-1">&nbsp;<span class="f-right"></span></p>
                </div>
            </div>
        </div>

        
	</div>

    <!-- Right modal content -->
    <div id="right-modal" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-right">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h4 class="modal-title" id="right-modalLabel">Modal Heading</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>

<script>

function getPendingActionClientDataForDashboard(input, headerName, type)
{   
    console.log('hi')
    $(".modal-body").empty();
    var nodata = '<center>No data available</center>';
    $(".modal-body").html(nodata);

    $("#right-modalLabel").html(headerName);
    $.ajax({
        url: '<?= base_url("util/featch_dashboard_data/") ?>' + type,
        type: "GET",
        dataType: 'json',
        success: function(res) {

            console.log('responce', res)
            console.log('responce', res.data)
            var table;

            var actions = 'inception';


            var link = '<?=base_url()?>';

            if (res.data.length !== 0) {
                table = `<table class="table table-striped table-sm table-centered mb-0"><tbody>`;
                $.each(res.data, function(index, item) {

                    var Params = null;

                    if(type == 'insurer'){

                        Params = {
                            client_id: item.client_id,
                            client_policy_id: item.client_policy_id,
                            client_branch_id: item.branch_id,
                            event: 'inception',
                            insurer_or_tpa: 'insurer',
                            actions: 'export',
                        };

                    }else if(type == 'TPA'){
                        Params = {
                            client_id: item.client_id,
                            client_policy_id: item.client_policy_id,
                            client_branch_id: item.branch_id,
                            event: 'inception',
                            insurer_or_tpa: 'insurer',
                            actions: 'export',
                        };
                    }else if(type == 'I'){
                        Params = {
                            client_id: item.client_id,
                            client_policy_id: item.client_policy_id,
                            client_branch_id: item.branch_id,
                            actions: 'inception'
                        };
                    }else if(type == 'D'){
                        Params = {
                            client_id: item.client_id,
                            client_policy_id: item.client_policy_id,
                            client_branch_id: item.branch_id,
                            event: 'deletion',
                            actions: 'export',
                            insurer_or_tpa: 'tpa',
                        };
                    }else if(type == 'C'){
                        Params = {
                            client_id: item.client_id,
                            client_policy_id: item.client_policy_id,
                            client_branch_id: item.branch_id,
                            event: 'correction',
                            insurer_or_tpa: 'insurer',
                            actions: 'export',
                        };
                    }else if(type == 'SI'){
                        Params = {
                            client_id: item.client_id,
                            client_policy_id: item.client_policy_id,
                            client_branch_id: item.branch_id,
                            event: 'si_enhancement',
                            actions: 'export',
                            insurer_or_tpa: 'tpa',
                        };
                    }

                    console.log(Params);
                    console.log(Params);

                    if(Params){
                        var queryString = generateQueryString(Params);
                        console.log(queryString)
                        var tabId = type !== 'I' ? '#KYC-DOC-tab' : ''; 
                        link += 'employee/upload?' + queryString + tabId;
                    }else{
                        link = '';
                    }
                    console.log(link)

                    table += `<tr><td onclick="linkRedirect('${link}')">${item.client_name} - ${item.branch_name} - ${item.policy_name}</td></tr>`;

                });
                table += "</tbody></table>";
            } else {
                table = '<center>No data available</center>';
            }

            $(".modal-body").html(table);


        },
        error: function(xhr, status, error) {
            console.error(xhr.responseText);
            console.error(status, error);
            $(".modal-body").html(nodata);
        }
    });
}

function generateQueryString(queryParams) 
{
    return Object.keys(queryParams)
        .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(queryParams[key]))
        .join('&');
}

function linkRedirect(link)
{   
    console.log(link);
    console.log(typeof link);

    if(link){
        window.location.href = link;
    }
}

</script>