<script src="<?= getBaseUrl() ?>assets/plugins/jquery/jquery.min.js"></script>
<!-- Content Header (Page header) -->
<?php App\Controllers\BackendController::createService()->showBreadCrumbs( $arrmixBreadCrumbData ) ?>
<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="js-show-alert-message">
            <?php App\Controllers\BackendController::createService()->showAlertMessage( $arrmixFlashData ) ?>
        </div>
        <!-- Small boxes (Stat box) -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Mode: <b>Gateway</b></h3>
                <div class="card-tools">
                    <a href="<?= getBaseUrl() ?>device-settings/com-settings/add-slave-device" class="btn btn-outline-success"> <i class="fas fa-plus-square"></i>&nbsp;&nbsp;Add Slave Device</a>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-striped js-datatable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Slave Id</th>
                            <th>Register Add</th>
                            <th>Function Code</th>
                            <th>Register</th>
                            <th>Slave Read</th>
                            <th>Request Int</th>
                            <th>Data Type</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
                            if( true == isValArr( $arrmixSlaveDevicesList ) ) {
                                $intCounter = 1;
                                foreach( $arrmixSlaveDevicesList as $arrmixSlaveDeviceDetails ) {
                        ?>
                                <tr>
                                    <td><?= $intCounter ?></td>
                                    <td><?= $arrmixSlaveDeviceDetails['slv_id'] ?></td>
                                    <td><?= $arrmixSlaveDeviceDetails['reg_add'] ?></td>
                                    <td><?= $arrmixSlaveDeviceDetails['fun_code']?></td>
                                    <td><?= $arrmixSlaveDeviceDetails['no_of_reg']?></td>
                                    <td><?= $arrmixSlaveDeviceDetails['slv_rd']?></td>
                                    <td><?= $arrmixSlaveDeviceDetails['req_intv']?></td>
                                    <td><?= $arrmixSlaveDeviceDetails['data_type']?></td>
                                    <td class="project-actions">
                                        <a class="btn btn-outline-info btn-sm" href="<?= getBaseUrl() ?>device-settings/com-settings/edit-slave-device?slv_id=<?= $arrmixSlaveDeviceDetails['slv_id']?>">
                                            <i class="fas fa-pencil-alt"></i>
                                        </a>
                                        <a class="btn btn-outline-danger btn-sm" href="javascript:void(0)" id="js-delete-slave-device" data-slave_id="<?= $arrmixSlaveDeviceDetails['slv_id']; ?>" onclick="showDeleteModal(this)">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                        <?php 
                                    $intCounter++;
                                } 
                            } else { 
                        ?>    
                                <tr>
                                    <td colspan="9" class="text-center">No slave devices found</td>
                                </tr>
                        <?php } ?>    
                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.row (main row) -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->

<script>
    $(document).ready(function () {
        
        $( '#js-modal-body-confirm-button' ).on( 'click', function() {
            
            var intSlaveId = $( "#js-modal-body-delete-confirm-hidden-id" ).val();
            
            $.ajax({
                type: "POST",
                url: "<?php echo getBaseUrl(); ?>" + "device-settings/com-settings/delete-slave-device",
                dataType: 'json',
                data: { 'slave_id' : intSlaveId },
                success: function( arrmixResponseData ) {
                    $( '#js-modal-delete-confirmation' ).modal( 'hide' );
                    
                    if( true == arrmixResponseData.success ) {
                        var strAlertMessage = $( '#js-modal-body-delete-confirm-header-name' ).text() + ' has been deleted successfully';
                        showAlertMessage( 'success', strAlertMessage )
                        
                        resetDeleteConfirmationModal();
                        
                        setTimeout(function(){ 
                            location.reload();
                        }, 2000);
                    } else {
                        showAlertMessage( 'danger', arrmixResponseData.message );
                    }
                }
            });
        });
    });
    
    function showDeleteModal(ths){
        var intSlaveId = $( ths ).data( 'slave_id' );
        var strHeaderName = 'Slave Id <b>' + $( ths ).data( 'slave_id' ) + '</b>';

        showDeleteConfirmationModal( strHeaderName, intSlaveId );
    }
</script>
