<div class="modal fade" id="group_get_session_detail_open" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog w-100" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="group_session_name">Group User Session Detail</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="single_user_module" class="table">
                    <thead>

                        <tr>
                            <th>Play&nbsp;Time</th>
                            <th>Status</th>
                            <th>Submodule</th>                            
                            <th>Module</th>
                            
                        </tr>

                    </thead>
                    <tbody id="table_body_group">


                    </tbody>

                </table>

            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-sm btn-secondary group_get_session_detail_close" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $(".group_get_session_detail").click(function () {
            var universal_unique_id = $(this).val();
            $('#spinner_' + universal_unique_id).css('display', 'inline');
            var user_type = $('#type_group_' + universal_unique_id).html();
            $.ajax({
                url: '<?= base_url('get_session_detail') ?>',
                data: {
                    universal_unique_id: universal_unique_id
                },
                type: "POST",
                success: function (data) {
                    var response = JSON.parse(data);
                    $('#spinner_' + universal_unique_id).css('display', 'none');
                    let customModuleList = getCustomModuleListByAudience(user_type);
                    $("#table_body_group tr").remove();
                    for (var i = 0; i < customModuleList.length; i++) {
                        for (var j = 0; j < parseInt(response['single_array'][(customModuleList[i] - 1)]); j++) {
                            if (j === 0) {
                                let markup = '<tr><td><p class="text-center" id="group_time_' + (customModuleList[i]) + '_' + (j + 1) + '"' + '>00:00:00</p></td>\n\
                                          <td><p class="text-center" id="group_module_' + (customModuleList[i]) + '_' + (j + 1) + '"' + '><span class="badge badge-danger"><i class="fa fa-times" aria-hidden="true"></i></span></p></td>\n\
                                          <td><p class="text-center">Submodule-' + (j + 1) + '</p></td>\n\
                                          <td><p class="text-center">Module-' + (customModuleList[i]) + '</p></td></tr>';
                                $('#table_body_group').append(markup);
                            } else {
                                let markup = '<tr><td><p class="text-center" id="group_time_' + (customModuleList[i]) + '_' + (j + 1) + '"' + '>00:00:00</p></td>\n\
                                          <td><p class="text-center" id="group_module_' + (customModuleList[i]) + '_' + (j + 1) + '"' + '><span class="badge badge-danger"><i class="fa fa-times" aria-hidden="true"></i></span></p></td>\n\
                                          <td><p class="text-center">Submodule-' + (j + 1) + '</p></td>';
                                $('#table_body_group').append(markup);
                            }


                        }
                    }


                    for (var i = 0; i < response['data'].length; i++) {
                        var spanClass = '';
                        var badgeClass = '';
                        if (response['data'][i]['status'] == 1) {
                            spanClass = 'fa-check';
                            badgeClass = 'badge-success';
                        } else {
                            spanClass = 'fa-clock-o';
                            badgeClass = 'badge-warning';
                        }
                        $('#group_time_' + response['data'][i]['moduleNo'] + '_' + response['data'][i]['subModuleNo']).html(response['data'][i]['time']);

                        $('#group_module_' + response['data'][i]['moduleNo'] + '_' + response['data'][i]['subModuleNo']).html('<span class="badge '+badgeClass+' "><i class="fa '+spanClass+'" aria-hidden="true"></i></span>')
                    }
                    $("#group_get_session_detail_open").modal("show");

                },
                error: function (data) {
                    $('#spinner_' + universal_unique_id).css('display', 'none');


                }
            });


        });
        $(".group_get_session_detail_close").on("click", function () {
            $("#get_session_detail_open").modal("hide");
        });
        function getCustomModuleListByAudience(audienceType) {
            let tempModule = [];
            switch (audienceType) {
                case 'देखभालकर्ता':
                    tempModule.push(1, 2, 3, 4, 5, 6);
                    break;
                case 'आशा':
                    tempModule.push(6, 7, 8);
                    break;
                case 'ए एन एम':
                    tempModule.push(6, 7, 9);
                    break;
                case 'फार्मेसिस्ट':
                    tempModule.push(10, 11);
                    break;
                case 'क्लिनिकल प्रदाता':
                    tempModule.push(12);
                    break;
                default :
                    tempModule.push(1, 2, 3, 4, 5);
            }
            return tempModule;
        }
    });
</script>