    <div class="container-fluid" style="padding-bottom: 2rem;">
    <div class="row">
        <div class="col-md-8">
            <div class="card bg-light-transparent" style="margin-bottom: 2rem;">
                <div class="card-header bg-white">
                    <div class="float-left">
                        <h5 class="card-title">Calendar</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card bg-white no-shadow">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-2">
                                    <?php foreach ($zoom_account_list as $type) { ?>
                                        <br><div data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['account']; ?>" class="text-center mt-2 text-white" style="background-color: <?php echo $type['color_code']; ?>;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; border:1px solid #ccc; height:28px;"><?php echo $type['short_name']; ?></div>
                                    <?php } ?> 
                                </div>
                                <div class="col-10">
                                    <div id="calendar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-light-transparent" style="margin-bottom: 2rem;">
                <div class="card-header bg-white">
                    <h5 class="card-title">Zoom Booking Request Summary</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <a class="btn btn-block btn-dark add-shadow" href="<?php echo base_url('hr/serviceform/zoom_booking_form'); ?>" style="padding-top: 1rem; padding-bottom: 1rem;">New Request</a>
                        </div>
                    </div>
                    <br>
                    <div class="card bg-white no-shadow">
                        <div class="card-body">
                            <h6>Total Booking (<?php echo date('Y') ?>)</h6>
                            <br>
                            <div class="row">
                                <table id="table_zoom_booking_summary" class="table table-bordered table-striped table-hover mx-1">
                                    <thead class="text-center">
                                        <th>Zoom Account</th>
                                        <th>Total Booking</th>
                                    </thead>
                                    <tbody class="text-center">
                                        <?php foreach($zoom_booking_year as $type): ?>
                                            <tr>
                                                <td  data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['account']; ?>"><?php echo $type['account']; ?></td>
                                                <td><?php echo $type['total_booking']; ?></td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="card bg-light-transparent">  
            <div class="card-header bg-white">
                <h4>Zoom Booking Request List</h4>
                <a href="<?php echo base_url('hr/serviceform/zoom_booking_form'); ?>" class="btn btn-outline-dark btn-sm" title="Add New Zoom Booking"><i class="fa fa-plus"></i> Add New Booking</a>

                <a href="<?php echo base_url('hr/Serviceform_report/zoom_booking_print')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a>

                <a id="btnShowFilters" type="button" class="btn btn-outline-dark btn-sm collapsed" data-trigger="hover" title="Show Filters Box" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false"><i class="fas fa-filter"></i>Show Filters</a>
            </div>

            <div class="collapse" id="collapseFilter">
                <div class="card-header">
                    <div class="row">
                        <div class="col">
                            <div class="card no-shadow">
                                <div class="card-body">
                                    <?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
                                        <div class="form-group row">
                                            <label for="sv_zoom_booking_filter_dept" class="col-lg-3">
                                                Department
                                            </label>                           
                                            <div class="col-lg-4" >
                                                <select class="custom-select" name="sv_zoom_booking_filter_dept" id="sv_zoom_booking_filter_dept">
                                                    <option value="-1">[All]</option>
                                                    <?php if($department) foreach($department as $row){ ?>
                                                        <option value="<?php echo $row['id']; ?>"><?php echo $row['name'].' ['.$row['branch_name'].']'; ?></option> 
                                                    <?php } ?>
                                                </select>
                                            </div>
                                        </div>
                                    <?php } ?>
                                    <div class="form-group row">
                                        <label for="filterZoom" class="col-lg-3">
                                            Zoom Account
                                        </label>
                                        <div class="col-lg-4">
                                            <select class='custom-select' id="sv_zoom_booking_filter_account" name="sv_zoom_booking_filter_account">
                                                <option value="-1">[All]</option>
                                                <?php if($zoom_account_list) foreach($zoom_account_list as $type){ ?>
                                                    <option value="<?php echo $type['ID'];?>"><?php echo $type['account'];?></option>
                                                <?php } ?>
                                            </select>
                                        </div>                                         
                                    </div>     
                                    <div class="form-group row">
                                        <label for="sv_zoom_booking_filter_status" class="col-lg-3">
                                            Status
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <select class="custom-select" id="sv_zoom_booking_filter_status" name="sv_zoom_booking_filter_status">
                                                <option value="-1">[All]</option>
                                                <option value="Pending">Pending</option>
                                                <option value="In_progress">In Progress</option>
                                                <option value="Verified">Verified</option>
                                                <option value="Completed">Completed</option>
                                                <option value="Rejected">Rejected</option>
                                                <option value="Cancel">Cancel</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="sv_zoom_booking_filter_year" class="col-lg-3">
                                            Year
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <input type="text" name="sv_zoom_booking_filter_year" id="sv_zoom_booking_filter_year" class="form-control datepicker-yyyy">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="sv_zoom_booking_filter_month" class="col-lg-3">
                                            Requested Month
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <input type="text" name="sv_zoom_booking_filter_month" id="sv_zoom_booking_filter_month" class="form-control datepicker-mm">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col d-print-none">
                                            <button class="btn btn-info" id="searchBtn">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-content">
                <div class="tab-pane fade active show" id="tableView" role="tabpanel" aria-labelledby="nav-table-tab">
                    <div class="card-body">
                        <div class="card no-shadow">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id = "filter_table_zoom_booking" class="table table-bordered p-0 m-0" width="100%">
                                        <thead>
                                            <th class="text-center" width="5%">#</th>
                                            <th class="text-center" width="20%">Requestor</th>
                                            <th class="text-center" width="20%">Department</th>
                                            <th class="text-center" width="15%">Zoom Account</th>
                                            <th class="text-center" width="25%">Detail</th>
                                            <th class="text-center" width="10%">Status</th>
                                            <th class="text-center" width="5%">Action</th>
                                        </thead>

                                        <tbody>
                                            <?php if(!empty($zoomBookingList)) { ?> 
                                                <?php foreach($zoomBookingList as $key => $row) { ?>
                                                    <tr>
                                                        <td class="text-center"><?php echo $key+1; ?></td>
                                                        <td>
                                                            <b>Requested By : </b><br><?php echo $row['requester_name'].' ['.$row['requester_email'].']'; ?>
                                                            <br><br>
                                                            <b>Created By : </b><br><?php echo $row['created_name'].' ['.$row['created_email'].']' ?>
                                                        </td>
                                                        <td><?php echo $row['dept_name'].' ['.$row['branchName'].']'; ?></td>
                                                        <td>
                                                            <?php
                                                                if((strtotime(date('Y-m-d H:i:00')) >= strtotime($row['start_date'].' '.$row['start_time'])) && (strtotime(date('Y-m-d H:i:00')) <= strtotime($row['end_date'].' '.$row['end_time'])))
                                                                {
                                                                    $btn_acc_detail_disabled    = '';
                                                                    $btn_acc_detail_color       = 'btn-outline-success';
                                                                    $btn_acc_detail_onclick     = 'onclick="open_modal('."'check_staff_password'".','."'".base64_encode(json_encode($row))."'".')"';
                                                                }else{
                                                                    $btn_acc_detail_disabled    = 'disabled style="cursor: not-allowed;"';
                                                                    $btn_acc_detail_color       = 'btn-outline-secondary';
                                                                    $btn_acc_detail_onclick     = '';
                                                                }

                                                                if(($_SESSION['user']['id'] == $row['requester_id']) || ($_SESSION['user']['id'] == $row['createdBY']))
                                                                { 
                                                                    if(($row['status_app'] == 'Cancel') || ($row['status_app'] == 'Rejected'))
                                                                    {
                                                                        echo '<button type="button" id="view_account_detail_btn_'.$row['ID'].'" class="btn btn-sm '.$btn_acc_detail_color.'" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" 
                                                                            title="View Account Detail" '.$btn_acc_detail_disabled.' '.$btn_acc_detail_onclick.'>
                                                                            <i class="fas fa-lock"></i></button>';
                                                                        echo '&nbsp;';
                                                                    }
                                                                }
                                                                echo $row['account']; 
                                                            ?>
                                                        </td>
                                                        <td>
                                                            <?php 
                                                                echo ($row['meeting_type'] == 0)?'<b>Purpose </b> : Meeting':'<b>Purpose </b> : Webinar'; 
                                                                echo '<br><b>Topic </b> : '.$row['topic']; 
                                                                echo '<br><b>Start Date / Start Time</b> : '.date('d-m-Y', strtotime($row['start_date'])) . ' / ' . $row['start_time']; 
                                                                echo '<br><b>End Date / End Time</b> : '.date('d-m-Y', strtotime($row['end_date'])) . ' / ' . $row['end_time']; 
                                                            ?>
                                                        </td>
                                                        <td class="text-center">
                                                            <?php 
                                                            if(($row['status_app']==null || $row['status_app']=='Pending'))
                                                            {
                                                                $status = 'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>';
                                                                $disabled = '';
                                                            }
                                                            if($row['status_app'] == 'In_progress')
                                                            {
                                                                $status = str_replace('_', ' ', $row['status_app']).' <i class="fa fa-hourglass-start" style="color: grey;"></i>';
                                                                $disabled = 'disabled style="cursor: not-allowed;"';
                                                            }
                                                            if($row['status_app'] == 'Verified')
                                                            {
                                                                $status = $row['status_app'].' <i class="fa fa-check-circle" style="color: green;"></i><p style="font-style: italic; font-size: 13px;">'.$row['status_reason'].'</p>';
                                                                $disabled = '';
                                                            }
                                                            if($row['status_app'] == 'Completed')
                                                            {
                                                                $status = $row['status_app'].' <i class="fa fa-check-circle" style="color: green;"></i>';
                                                                $disabled = 'disabled style="cursor: not-allowed;"';
                                                            }
                                                            if($row['status_app'] == 'Rejected')
                                                            {
                                                                $status = $row['status_app'].' <i class="fa fa-times-circle" style="color: red;"></i>';
                                                                $disabled = 'disabled style="cursor: not-allowed;"';
                                                            }
                                                            if($row['status_app'] == 'Cancel')
                                                            {
                                                                $status = $row['status_app'].' <i class="fa fa-times-circle" style="color: red;"></i>';
                                                                $disabled = 'disabled style="cursor: not-allowed;"';
                                                            }

                                                            echo $status;
                                                            ?>
                                                        </td>

                                                        <td class="text-center"> 
                                                            <div class="btn-group btn-group-sm" role="group">
                                                                <a href="<?php echo base_url('hr/serviceform/zoom_booking_form/'.$row['ID'].'/view') ?>" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="View Detail"><i class="far fa-eye"></i></a>

                                                                <?php if(($_SESSION['user']['id'] == $row['requester_id']) || ($_SESSION['user']['id'] == $row['createdBY'])){ ?>
                                                                    <?php if($disabled == ''){ ?>
                                                                        <a href="<?php echo base_url('hr/serviceform/zoom_booking_form/'.$row['ID']); ?>" target="_blank" class="btn btn-outline-dark" onclick="" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>
                                                                    <?php }else{ ?>
                                                                        <button class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit" <?php echo $disabled; ?>><i class="far fa-edit"></i></button>
                                                                    <?php } ?>
                                                                <?php } ?>

                                                                <a href="<?php echo base_url('hr/serviceform_report/zoom_booking_print/'.$row['ID']); ?>" class="btn btn-outline-dark" target="_blank" date-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>

                                                                <?php if(($_SESSION['user']['id'] == $row['requester_id']) || ($_SESSION['user']['id'] == $row['createdBY'])){ ?>
                                                                    <button id="deleteButton" type="button" class="btn btn-outline-dark" data-id="<?php echo $row['ID']; ?>" onclick="saveZoom('delete_zoom_detail', ['ID'], null, 'sv__zoom_booking', this)" data-trigger="hover" data-tooltip="tooltip" title="Delete" <?php echo $disabled; ?>><i class="far fa-trash-alt"></i></button>
                                                                <?php } ?>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                <?php } ?>
                                            <?php } ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</div>

<!-- modal view detail -->

<div class="modal fade d-print-none" id="zoom_detail_modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="zoom_detail_modal_title"></h5>&emsp;
                <!-- <a href="javascript:window.print()" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a> -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="zoomModalForm" class="form">
                <div class="modal-body">
                    <div id="zoom_detail_modal_content"></div>

                    <div class="row pt-3">
                        <div class="col-12">
                            <div class="btn-group float-right">
                                <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                                <button type="button" id="saveZoomBtn" class="btn btn-primary">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- modal view detail -->

<style type="text/css">
    .tooltipevent
    {
        width:auto;
        height:auto;
        background:rgba(0,0,0,0.75);
        position:absolute;
        color: #fff;
        z-index:10001;
        padding:10px 10px 10px 10px ;  
        line-height: 200%;
    }
</style>


<script>
    $(document).ready(function()
    {
        $('#table_zoom_booking_summary').DataTable().destroy();

        var fc_event= '';
        var resource = <?php echo $resource;?>;

        var fullcalendar = $('#calendar').fullCalendar({ 
            themeSystem: 'bootstrap4',
            header: 
            {
                left: 'prev,next today',
                center: 'title',
                right: 'month,listMonth'
            },
            buttonText: {
                today: 'Today',
                month: 'Calendar',
                listMonth: 'List'
            },

            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: <?php echo $fc_event; ?>,

            eventMouseover: function (data, event, param, resource = <?php echo $resource;?>) {
                var js_res = JSON.parse(JSON.stringify(resource));
                var hover_item = js_res[data.id];
                var title = JSON.stringify(data.title);
                var start_date = moment(hover_item.start_date).format('DD-MM-YYYY');
                var end_date = moment(hover_item.end_date).format('DD-MM-YYYY');
                if(hover_item.meeting_type == 0) var purpose = "Meeting";
                else var purpose = "Webinar"; 

                tooltip = '<div class="tooltipevent"> Zoom Account : '+hover_item.account+' <br/> Purpose : '+purpose+'<br/> Topic : '+hover_item.topic+'<br/> Start Date : '+start_date+'<br/> End Date : '+end_date+'<br/>Start Time : '+hover_item.start_time+' <br/> End Time : '+hover_item.end_time+' <br/> Status : '+(hover_item.status_app).replace('_',' ')+' </div>';

                $("body").append(tooltip);
                $(this).mouseover(function (e) {
                    $(this).css('z-index', 10000);
                    $('.tooltipevent').fadeIn('500');
                    $('.tooltipevent').fadeTo('10', 1.9);
                }).mousemove(function (e) {
                    $('.tooltipevent').css('top', e.pageY + 10);
                    $('.tooltipevent').css('left', e.pageX + 20);
                });
            },

            eventMouseout: function(data, event) {
                $(this).css('z-index', 8);
                $('.tooltipevent').remove();
            },
        });

        fullcalendar.fullCalendar();

        //getData();

        $('#searchBtn').click(function(){
            getData();
        });

        <?php $this->session->unset_userdata('sv_zoom_booking_filter_dept'); ?>
        <?php $this->session->unset_userdata('sv_zoom_booking_filter_account'); ?>
        <?php $this->session->unset_userdata('sv_zoom_booking_filter_year'); ?>
        <?php $this->session->unset_userdata('sv_zoom_booking_filter_month'); ?>
        <?php $this->session->unset_userdata('sv_zoom_booking_filter_status'); ?>
        <?php $this->session->unset_userdata('sv__zoom_booking'); ?>
    });

    function getData()
    {
        var table = $('#filter_table_zoom_booking').DataTable();
        table.clear().draw();
        var frmData = new FormData();

        frmData.append('sv_zoom_booking_filter_dept',$('#sv_zoom_booking_filter_dept').val());
        frmData.append('sv_zoom_booking_filter_account',$('#sv_zoom_booking_filter_account').val());
        frmData.append('sv_zoom_booking_filter_status',$('#sv_zoom_booking_filter_status').val());
        frmData.append('sv_zoom_booking_filter_year',$('#sv_zoom_booking_filter_year').val());
        frmData.append('sv_zoom_booking_filter_month',$('#sv_zoom_booking_filter_month').val());

        $.ajax({
            url:"<?php echo base_url('/hr/api/serviceform/get_zoom_booking_filter'); ?>",
            type:'post',
            dataType:'json',
            data:frmData,
            processData: false,
            contentType: false,
            success:function(data){

                iziToast.success({
                    position: 'bottomRight',
                    message: 'filtering data',
                });

                let zoom_booking = data.table;

                if(zoom_booking != null){
                    $.each(zoom_booking,function(key,content)
                    {
                        var i = key + 1;
                        var btn_view_acc_detail = '';
                        if((moment('<?php echo date('Y-m-d H:i:00'); ?>').format("X") >= moment(content.start_date).format("X")) && (moment('<?php echo date('Y-m-d H:i:00'); ?>').format("X") <= moment(content.end_date).format("X")))
                        {
                            var btn_acc_detail_disabled     = '';
                            var btn_acc_detail_color        = 'btn-outline-success';
                            var btn_acc_detail_onclick      = 'onclick="open_modal('+"'check_staff_password'"+','+"'"+window.btoa(JSON.stringify(content))+"'"+')"';
                        }else{
                            var btn_acc_detail_disabled     = 'disabled style="cursor: not-allowed;"';
                            var btn_acc_detail_color        = 'btn-outline-secondary';
                            var btn_acc_detail_onclick      = '';
                        }

                        if(content.start_date != '0000-00-00'){
                            var start_date = moment(content.start_date).format('DD-MM-YYYY');;
                        }
                        if(content.end_date != '0000-00-00'){
                            var end_date = moment(content.end_date).format('DD-MM-YYYY');;
                        }

                        if(content.status_app == null || content.status_app == 'Pending')
                        {
                            var status      = 'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>';
                            var disabled    = '';
                            btn_view_acc_detail = '<button type="button" id="view_account_detail_btn_'+content.ID+'" class="btn btn-sm '+btn_acc_detail_color+'" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" title="View Account Detail" '+btn_acc_detail_disabled+' '+btn_acc_detail_onclick+'><i class="fas fa-lock"></i></button>&nbsp;';
                        }
                        if(content.status_app == 'In_progress')
                        {
                            var status      = ((content.status_app).replace('_',' '))+' <i class="fa fa-hourglass-start" style="color: grey;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                            btn_view_acc_detail = '<button type="button" id="view_account_detail_btn_'+content.ID+'" class="btn btn-sm '+btn_acc_detail_color+'" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" title="View Account Detail" '+btn_acc_detail_disabled+' '+btn_acc_detail_onclick+'><i class="fas fa-lock"></i></button>&nbsp;';
                        }
                        if(content.status_app == 'Verified')
                        {
                            var status      = content.status_app+' <i class="fa fa-check-circle" style="color: green;"></i><p style="font-style: italic; font-size: 13px;">'+content.status_reason+'</p>';
                            var disabled    = '';
                            btn_view_acc_detail = '<button type="button" id="view_account_detail_btn_'+content.ID+'" class="btn btn-sm '+btn_acc_detail_color+'" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" title="View Account Detail" '+btn_acc_detail_disabled+' '+btn_acc_detail_onclick+'><i class="fas fa-lock"></i></button>&nbsp;';
                        }
                        if(content.status_app == 'Completed')
                        {
                            var status      = content.status_app+' <i class="fa fa-check-circle" style="color: green;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                            btn_view_acc_detail = '<button type="button" id="view_account_detail_btn_'+content.ID+'" class="btn btn-sm '+btn_acc_detail_color+'" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" title="View Account Detail" '+btn_acc_detail_disabled+' '+btn_acc_detail_onclick+'><i class="fas fa-lock"></i></button>&nbsp;';
                        }
                        if(content.status_app == 'Rejected')
                        {
                            var status      = content.status_app+' <i class="fa fa-times-circle" style="color: red;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }
                        if(content.status_app == 'Cancel')
                        {
                            var status      = content.status_app+' <i class="fa fa-times-circle" style="color: red;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }

                        if(disabled == '')
                        {
                            var btn_edit = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform/zoom_booking_form/'+content.ID+'" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>';
                        }else{
                            var btn_edit = '<button class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit" '+disabled+'><i class="far fa-edit"></i></button>';
                        }

                        var btn_view = '<a href="<?php echo base_url();?>hr/serviceform/zoom_booking_form/'+content.ID+'/view" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="View Detail"><i class="far fa-eye"></i></a>';

                        var btn_print = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform_report/zoom_booking_print/'+content.ID+'" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>';

                        var btn_delete = '<button id="deleteButton" type="button" class="btn btn-outline-dark" data-id="'+content.ID+'" onclick="saveZoom('+"'delete_zoom_detail'"+','+"['ID']"+','+null+',this)" data-trigger="hover" data-tooltip="tooltip" title="Delete" '+disabled+'><i class="far fa-trash-alt"></i></button>';

                        if(('<?php echo $_SESSION['user']['id']; ?>' == content.requester_id) || ('<?php echo $_SESSION['user']['id']; ?>' == content.createdBY))
                        {
                            var btn = btn_view+btn_edit+btn_print+btn_delete;
                        }else{
                            var btn = btn_view+btn_print;
                        }

                        var requestor_name  = '<b>Requested By : </b><br>'+content.requester_name+' ['+content.requester_email+']';
                        var creator_name    = '<b>Created By : </b><br>'+content.created_name+' ['+content.created_email+']';
                        var department      = content.dept_name+' ['+content.branchName+']';
                        
                        if(content.meeting_type == 0) var purpose = "Meeting";
                        else var purpose = "Webinar"; 

                        var details         = '<b>Purpose</b> : '+purpose+'<br> <b>Topic</b> : '+content.topic+'<br> <b>Start Date / Start Time</b> : '+start_date+' / '+content.start_time+'<br> <b>End Date / End Time</b> : '+end_date+' / '+content.end_time;

                        // console.log(requestor_name);
                        table.row.add({
                            0   : '<div class="text-center">'+i+'</div>',
                            1   : requestor_name+'<br><br>'+creator_name,
                            2   : department,
                            3   : btn_view_acc_detail+content.account,
                            4   : details,
                            5   : '<div class="text-center">'+status+'</div>',
                            6   : '<div class="text-center"><div class="btn-group btn-group-sm" role="group">'+btn+'</div></div>',
                        }).draw();
                    });
                }
            },
            error:function(){
                iziToast.warning({
                    position: 'bottomRight',
                    message: '500 Internal Server Error.'
                });
            }
        });
    }

    function open_modal(mode, item_detail)
    {
        $('#zoom_detail_modal_title').html('');
        $('#zoom_detail_modal_content').html('');

        var temp_content = '';

        if(mode == 'check_staff_password')
        {
            $('#zoom_detail_modal_title').append('<i class="fas fa-lock"></i> Check Permission SPS|ERP');

            temp_content = 
            '<div class="form-row">\
            <div class="col-12 col-sm-6">\
            <div class="form-group">\
            <label>Username</label>\
            <input type="text" class="form-control" name="username" id="username" required>\
            </div>\
            </div>\
            <div class="col-12 col-sm-6">\
            <div class="form-group">\
            <label>Password</label>\
            <input type="password" class="form-control" name="pwd" id="pwd" required>\
            </div>\
            </div>\
            </div>';

            $('#saveZoomBtn').html('');
            $('#saveZoomBtn').append('Submit');
            $('#saveZoomBtn').attr('onclick','saveZoom('+"'check_staff_password'"+','+"['username', 'pwd']"+','+"'"+item_detail+"'"+')');
            $('#saveZoomBtn').removeAttr('disabled');
            $('#saveZoomBtn').removeClass('d-none');
            $('#saveZoomBtn').css({'cursor':''});
        }else if(mode == 'open_zoom_account_detail')
        {
            if(item_detail != null && item_detail != undefined) item_detail = JSON.parse(window.atob(item_detail));

            $('#zoom_detail_modal_title').append(item_detail.account+' Detail');

            if((moment('<?php echo date('Y-m-d H:i:00'); ?>').format("X") >= moment(item_detail.start_date+' '+item_detail.start_time).format("X")) && (moment('<?php echo date('Y-m-d H:i:00'); ?>').format("X") <= moment(item_detail.end_date+' '+item_detail.end_time).format("X")))
            {
                temp_content = 
                '<div class="form-row">\
                <div class="col-12 col-sm-6">\
                <div class="form-group">\
                <label>Username</label>\
                <input type="text" class="form-control" name="username" id="username" value="'+item_detail.username+'" disabled>\
                </div>\
                </div>\
                <div class="col-12 col-sm-6">\
                <div class="form-group">\
                <label>Password</label>\
                <input type="text" class="form-control" name="password" id="password" value="'+item_detail.password+'" disabled>\
                </div>\
                </div>\
                <div class="col-12 col-sm-3">\
                <div class="form-group">\
                <label>Meeting User</label>\
                <input type="number" class="form-control" name="meeting_user" id="meeting_user" min="1" value="'+item_detail.meeting_user+'" disabled>\
                </div>\
                </div>\
                <div class="col-12 col-sm-3">\
                <div class="form-group">\
                <label>Webinar User</label>\
                <input type="number" class="form-control" name="webinar_user" id="webinar_user" min="1" value="'+item_detail.webinar_user+'" disabled>\
                </div>\
                </div>\
                </div>';
            }else{
                temp_content = 
                '<div class="form-row">\
                <div class="col-12">\
                <h4 class="text-uppercase text-danger">Not allowed to view '+item_detail.account+' detail due to date booked have exceed.</h4>\
                </div>\
                </div>';
            }

            $('#saveZoomBtn').attr({'onclick':'', 'disabled':'disabled'});
            $('#saveZoomBtn').css({'cursor':'not-allowed'});
            $('#saveZoomBtn').addClass('d-none');
        }

        $('#zoom_detail_modal_content').append(temp_content);
        $('#zoom_detail_modal').modal('show');
        $('#zoom_detail_modal_size').css('max-width','60%');
    }

    function saveZoom(mode, modal_input_id, item_detail, table_name, elem) 
    {
        var temp_content    = '';
        var input_key       = {};
        var input_value     = [];
        var flag            = true;
        var url             = '';
        var str             = ''; 

        if((mode.split('_')[0] != 'create') && (mode.split('_')[0] != 'update') && (mode.split('_')[0] != 'delete')) 
        {
            url = '<?php echo base_url('hr/serviceform/get_zoom_detail') ?>';
        }else{
            url = '<?php echo base_url('hr/serviceform/update_zoom_detail') ?>';
        }

        str = (mode.split('_')[0]).toLowerCase().replace(/\b[a-z]/g, function(letter) {
            return letter.toUpperCase();
        });

        if(elem != undefined && elem != null)
        {
            input_key['is_delete'] = 1;
            $.each(modal_input_id, function(key, row){
                input_key[row] = $(elem).data((row.toLowerCase()));
            });
        }else{
            $.each(modal_input_id, function(key, row){
                if($('#'+row).val() != undefined && $('#'+row).val() != '')
                {
                    input_key[row] = $('#'+row).val();
                    flag = true;
                }else{
                    flag = false;
                }
            });
        }

        input_value.push(input_key);

        if(flag == true)
        {
            if(mode != 'check_staff_password')
            {
                validateForm("#saveZoomBtn", str+" zoom detail?", function() {
                    $('#zoom_detail_modal').modal('hide');
                    $.ajax({
                        url:url,
                        data: {
                            mode        : mode,
                            input_value : input_value[0],
                            table_name  : table_name,
                        },
                        type: 'post',
                        dataType: 'json',
                        success: (data) => {
                            if(data.status == "Success") {
                                localStorage.setItem("status", data.status);
                                localStorage.setItem("msg", data.msg);

                                location.reload();
                            }else{
                                localStorage.setItem("status", data.status);
                                localStorage.setItem("msg", data.msg);

                                location.reload();
                            }
                        }
                    });
                });
            }else{
                $.ajax({
                    url:url,
                    data: {
                        mode        : mode,
                        input_value : input_value[0],
                        detail      : JSON.parse(window.atob(item_detail)),
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if(data.status == "Success") {
                            if(data.detail == true)
                            {
                                open_modal('open_zoom_account_detail',item_detail);
                            }else{
                                console.log(JSON.parse(window.atob(item_detail))['ID']);
                                $('#zoom_detail_modal').modal('hide');
                                $('#view_account_detail_btn_'+JSON.parse(window.atob(item_detail))['ID']).attr('disabled','disabled');
                                $('#view_account_detail_btn_'+JSON.parse(window.atob(item_detail))['ID']).attr('onclick','');
                                $('#view_account_detail_btn_'+JSON.parse(window.atob(item_detail))['ID']).css('cursor','not-allowed');
                                $('#view_account_detail_btn_'+JSON.parse(window.atob(item_detail))['ID']).removeClass('btn-outline-success');
                                $('#view_account_detail_btn_'+JSON.parse(window.atob(item_detail))['ID']).addClass('btn-outline-secondary');

                                iziToast.error({
                                    position: 'bottomRight',
                                    message: "Current date have exceed booked date. You're not allowed to view zoom account detail.",
                                });
                            }
                        }else{
                            $('#zoom_detail_modal').modal('hide');
                            alert("Error. Please try again.");
                        }
                    }
                });
            }
        }else{
            alert("Please complete all input.");
        }
    }
</script>
