<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('devices'); ?></div>
            <?php if ($permissions->hasPermission('add_device')) { ?>
            <div class="col-xs-12 p-0 m-b-10 device_button_div">  
                <div class="floatingContainer ">
                    <a href="" id="new_device" data-target="#device_modal" data-toggle="modal" >
                        <div class="actionButton bg-info-light" >
                            <p class="floatingText"><span class="floatingTextBG"><?php echo CommonLanguage::getMessage('add_device') ?></span></p>
                        </div>
                    </a>
                </div>
            </div>
            <?php } ?>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-bordered setting-table" id="tableWithSearch">
                            <thead>
                                <tr>
                                    <th><?php print CommonLanguage::getMessage('device_name') ?></th>
                                    <th><?php print CommonLanguage::getMessage('ip') ?></th>
                                    <th><?php print CommonLanguage::getMessage('status') ?></th>
                                    <th><?php print CommonLanguage::getMessage('Action') ?></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="device_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="add-label h-labels text-left bold hidden"><?php echo CommonLanguage::getMessage('add_device'); ?></h5>
                <h5 class="edit-label h-labels text-left bold hidden"><?php echo CommonLanguage::getMessage('edit_device'); ?></h5>
            </div>
            <div class="modal-body">
                <form id="device_form" method="POST" onsubmit="return false">
                    <input type="hidden" id="device_id" name="device_id"/>
                    <div class="row">
                        <?php echo Forms::AlertDiv('device_alert'); ?>
                    </div>
                    <div class="row  form-group">
                        <div class="col-md-6">
                            <label><?php print CommonLanguage::getMessage('device_name'); ?></label>
                            <span class="red-star">*</span>
                            <input class="form-control empty" id="device_name" name="device_name" type="text" autocomplete="off" required/>
                        </div>
                        <div class="col-md-6">
                            <label><?php print CommonLanguage::getMessage('ip'); ?></label>
                            <span class="red-star">*</span>
                            <input class="form-control empty" id="device_ip" name="device_ip" type="text" autocomplete="off" required/>
                        </div>
                    </div> 
                    <div class="row form-group">
                        <div class="col-md-6 ">
                            <label><?php print CommonLanguage::getMessage('type'); ?></label>
                            <span class="red-star">*</span>
                            <select name="type_id" id="type_id" data-init-plugin="select2" class="full-width" required>
                                <option value><?php echo CommonLanguage::getMessage('Select');?></option>
                                <option value="1"><?php echo CommonLanguage::getMessage('attendance');?></option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <div><label><?php print CommonLanguage::getMessage('is_active'); ?></label></div>
                            <div><input type="checkbox" id="is_active" /></div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-12">
                            <label><?php print CommonLanguage::getMessage('note'); ?></label>
                            <textarea name="note" id="note" class="form-control"></textarea>
                        </div>
                    </div> 
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button class="btn bg-info-light text-white" id="submit_device"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('device_loader'); ?>
        </div>
    </div>
</div>
<script>
    $(function(){
        new Switchery($("#is_active").get(0), {color: $.Pages.getColor("info-light")});
        $("#new_device").on("click", function () {
            $('#device_id').val(0)
            $("#device_modal .add-label").removeClass('hidden');
            if(!$('#is_active').is(":checked")){
                $('#is_active').trigger('click');
            }
        });

        RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'SettingsAjax/getDevices');
        $('#tableWithSearch').on('click', '.delete', function () {
            var entry_value = $(this).parents('div.Action').attr('data-id')
            IncludeDeleteModal(common_delete_modal, {device_id: entry_value}, function () {
                RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'SettingsAjax/getDevices');
            }, "SettingsAjax/deleteDevice");
        });


        $("#tableWithSearch").on("click",'.edit', function () {
            var entry_value = $(this).parents('div.Action').attr('data-id');
            $("#device_modal .edit-label").removeClass('hidden');
            $('#device_id').val(entry_value);
            CommonViewById('SettingsAjax/getDeviceData', {device_id: entry_value},
                           '#device_loader', function (response) {
                var response =  response;
                $('#device_name').val(response.device_name);
                $('#device_ip').val(response.device_ip);
                $('#note').val(response.note);
                $('#type_id').val(response.type_id).select2();
                if((response.is_active == 1 && !$('#is_active').is(":checked")) || (response.is_active == 0 && $('#is_active').is(":checked"))){
                    $('#is_active').trigger('click');                    
                }

            });
        });
        $("#submit_device").on("click", function () {
            if (!$("#device_form").valid())
                return;
            var Data = new FormData(document.getElementById("device_form"));
            Data.append('is_active',$('#is_active').is(":checked") ? 1 : 0)
            $("#device_loader").removeClass('hidden');
            $.ajax({
                url: "SettingsAjax/submitDevice",
                method: "POST",
                data: Data,
                processData: false,
                contentType: false,
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'SettingsAjax/getDevices');
                            hideModalAlert('device_modal', 'device_alert');
                        }
                        AddAlert("#device_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#device_loader").addClass('hidden');
                }
            });
        });
    });
</script>