<style>
    .nav-tabs-fillup>li>a:after {
        background: none repeat scroll 0 0 #eb9220 !important;
        border: 1px solid #eb9220 !important;
    }
</style> 
<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('web_api_users'); ?></div>
            <?php if ($permissions->hasPermission('add_web_api_users')) { ?>
                <div class="col-xs-12 p-0 m-b-10">  
                    <div class="floatingContainer ">
                        <a href="" id="new_user" data-target="#add_user_modal" data-toggle="modal" >
                            <div class="actionButton bg-info-light" >
                                <p class="floatingText"><span class="floatingTextBG"><?php echo CommonLanguage::getMessage('add') ?></span></p>
                            </div>
                        </a>
                    </div>
                </div>
            <?php } ?>
        </div>
        <div class="panel-body">

            <div class="row">
                <div class="col-md-12">
                    <div id="user_list_alert"></div>

                    <div class="table-responsive">
                        <table class="table table-bordered setting-table" id="usersTable">
                            <thead>
                                <tr>
                                    <th><?php print CommonLanguage::getMessage('title') ?></th>
                                    <th><?php print CommonLanguage::getMessage('username') ?></th>
                                    <th><?php print CommonLanguage::getMessage('pricing_class') ?></th>
                                    <th><?php print CommonLanguage::getMessage('Depot') ?></th>
                                    <th><?php print CommonLanguage::getMessage('Action') ?></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="add_user_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width:50%;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="row">
                    <?php echo Forms::AlertDiv('user_alert'); ?>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="user_form" method="POST" onsubmit="return false">



                    <div class="row  m-t-20">
                        <div class="col-md-6 form-group">
                            <label><?php print CommonLanguage::getMessage('title'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text"  placeholder="<?php print CommonLanguage::getMessage('title'); ?>" id="api_title" name="api_title" class="form-control " required>
                        </div>
                        <div class="col-md-6 form-group">
                            <label><?php print CommonLanguage::getMessage('username'); ?></label>
                            <span class="red-star">*</span>
                            <input type="hidden"  name="api_user_id" id="api_user_id" class="full-width" />
                        </div>
                    </div>


                    <div class="row ">
                        <div class="col-md-6  form-group ">
                            <label><?php print CommonLanguage::getMessage('pricing_class'); ?></label>
                            <span class="red-star">*</span>
                            <input class="Role_ID full-width" id="class_id" name="class_id" type="hidden" required />
                        </div>
                        <div class="col-md-6 form-group">
                            <label><?php print CommonLanguage::getMessage('Depot'); ?></label>
                            <span class="red-star">*</span>
                            <input type="hidden" id="depot_id" name="depot_id" class="full-width" required>
                        </div>
                    </div>
                    <div class="row ">
                        <div class="col-md-12  form-group ">
                            <label><?php print CommonLanguage::getMessage('others'); ?></label>
                            <textarea class="form-control " id="other_data" name="other_data" rows="7" style="overflow: hidden; word-wrap: break-word; resize:vertical "></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_user"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('userLoader'); ?>
        </div>
    </div>
</div>
<div class="modal fade" id="enable-disable-modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <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('enable_user'); ?></h5>
                <h5 class="edit-label h-labels text-left bold hidden"><?php echo CommonLanguage::getMessage('disable_user'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row"><?php echo Forms::AlertDiv('enable_disable_alert'); ?></div>
                <div class="row">
                    <input  type="hidden" id="user_status_id"/>
                    <input  type="hidden" id="enabled_disabled_user_id"/>
                    <div class="col-md-12 m-t-10 form-group">
                        <p class="about_enable_user hidden"><?php echo CommonLanguage::getMessage('about_enable_user'); ?></p>
                        <p class="about_disable_user hidden"><?php echo CommonLanguage::getMessage('about_disable_user'); ?></p>
                        <p><?php echo CommonLanguage::getMessage('Proceed_Delete'); ?></p>
                    </div>
                </div>

                <?php echo Forms::ModalLoader('enableDisableLoader'); ?>
            </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_enable_disable"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
        </div>
    </div>
</div>

>
<script>
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            edit_id = 0, is_edit = false;
    $(function () {
        RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3], 'SettingsAjax/web_api_user_ajax', {}, '#usersTable');
        build_select2($("#depot_id"), "xhr/depotSearch")
        build_select2($("#class_id"), "xhr/PricingClassSearch?type=0")
        build_select2($("#api_user_id"), ("xhr/searchEmployeeUsers?type=3"))

        $('#usersTable').on('click', '.delete_user', function () {
            var entry_value = $(this).parents('div.Action').attr('data-id')
            IncludeDeleteModal(common_delete_modal, {user_id: entry_value}, function () {
                RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3], 'SettingsAjax/web_api_user_ajax', {}, '#usersTable');
            }, "SettingsAjax/delete_web_api_user");
        });
        $("#usersTable").on('click', '.enable_disable_user', function () {
            $('#enable-disable-modal .about_enable_user,#enable-disable-modal .about_disable_user').addClass('hidden');
            var status_id = $(this).attr('data-id'), user_id = $(this).parents('div.Action').attr('data-id');
            $('#user_status_id').val(status_id);
            $('#enabled_disabled_user_id').val(user_id);
            status_id == 0 ? $('#enable-disable-modal .add-label,#enable-disable-modal .about_enable_user').removeClass('hidden') : $('#enable-disable-modal .edit-label,#enable-disable-modal .about_disable_user').removeClass('hidden');
        });
        $("#new_user").on("click", function () {
            edit_id = 0;
            is_edit = false;
        });

//        $('#add_user_modal').on('hidden.bs.modal', function () {
//            $('#User_Full_Name').val('');
//        });
        $("#usersTable").on("click", ".edit_user", function () {
            is_edit = true;
            edit_id = $(this).parents('div.Action').attr('data-id');
            CommonViewById('SettingsAjax/get_web_api_user', {user_id: edit_id},
                    '#userLoader', function (response) {
                        $("#api_user_id").val(response['app_user_id']).attr("data-select-name", response["username"]);
                        build_select2($("#api_user_id"), ("xhr/searchEmployeeUsers?type=3"))
                        $('#api_title').val(response['title']);
                        $('#other_data').val(response['other_data']);
                        $('#depot_id').val(response['depot_id']).attr("data-select-name", response['Depot_Name']);
                        build_select2($("#depot_id"), "xhr/depotSearch")
                        $('#class_id').val(response['class_id']).attr("data-select-name", response['Class_Name']);
                        build_select2($("#class_id"), "xhr/PricingClassSearch?type=0")
                    });
        });
        $("#submit_user").on("click", function () {
            if (!$("#user_form").valid())
                return;
            var Data = new FormData(document.getElementById("user_form"));
            Data.append('is_edit', is_edit ? 1 : 0)
            Data.append('user_id', is_edit ? edit_id : 0)
            $("#userLoader").removeClass('hidden');
            $.ajax({
                url: "SettingsAjax/add_edit_web_api_user",
                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, 1, 2, 3], 'SettingsAjax/web_api_user_ajax', {}, '#usersTable');
                            hideModalAlert('add_user_modal', 'user_alert');

                        }
                        AddAlert("#user_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#userLoader").addClass('hidden');
                }
            });
        });

    });
</script>

