<style>
    .checkbox label::after {
        left:1.2px !important;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div id="usercustomerAlert"></div>
            <div class="panel-title"><?php print $title; ?></div>

            <div class="clearfix"></div>
        </div>

        <div class="panel-body">
            <div class="row m-b-10 form-group">
                <div class="col-md-3">
                    <label class="labelText"><?php print CommonLanguage::getMessage('salesman'); ?><span class="red-star">*</span></label>
                    <input type="hidden" class="full-width" id="salesman_id"/>
                </div>
                <div class="col-md-3">
                    <label class="labelText"><?php print CommonLanguage::getMessage('user'); ?></label>

                    <select  id="user_id"  class="full-width " data-init-plugin="select2">
                        <option value="" selected><?php echo CommonLanguage::getMessage('Select'); ?></option>
                        <option value="no_link" ><?php echo CommonLanguage::getMessage('is_not_linked'); ?></option>
                        <?php foreach ($users as $user): ?>
                            <option value="<?php echo $user['User_ID']; ?>"><?php echo $user['User_Name']; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <table class="table table-bordered inventory table-hover demo-table-search " id="tableWithSearch">
                <thead>
                    <tr>
                        <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('Code'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('Name'); ?></th>
                        <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('Phone'); ?></th> 
                        <th class="text-center" style="width:25%"><?php print CommonLanguage::getMessage('address'); ?></th>
                        <th class="text-center" style="width:25%"><?php print CommonLanguage::getMessage('salesman'); ?></th>
                        <th class="text-center" style="width:25%"><?php print CommonLanguage::getMessage('users'); ?></th>

                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <div class="container-sm-height data-options">
                <button class=" btn  btn-cons m-b-10 pull-right" id="submit_customers" style="color:#fff;background-color:#4c0870  ;padding-top: 10px;top: 20px;min-width:253px;" type="button"><i class="pg-form"></i> <span class="bold"><?php print CommonLanguage::getMessage('Save'); ?></span></button>
            </div>
        </div>

    </div>
</div>


<script>
    var CurentCustomer_ToDelete;
    var Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            title = <?php echo json_encode(CommonLanguage::getMessage('user_customer_list')); ?>;
    $(function () {
        build_select2($("#salesman_id"), "xhr/employeeSearch?not_linked=1")

        change_table()
        $("#salesman_id,#user_id").on("change", function () {
            change_table()
        })
        var table = $('#tableWithSearch').DataTable();
        table.on('draw.dt', function (e, settings) {
            $("select[name=sales_ids],select[name=user_ids]").select2()
        });
        $("#submit_customers").on("click", function () {
            var data = {
                customers: [],
                customer_ids:[]
            };
            $("#tableWithSearch tbody tr").each(function () {
                data.customers.push({
                    customer_id: $('select[name=sales_ids]', $(this)).attr("data-cust-id"),
                    user_ids: $("select[name=user_ids]", $(this)).val(),
                    sales_ids: $("select[name=sales_ids]", $(this)).val(),
                })
                data.customer_ids.push($('select[name=sales_ids]', $(this)).attr("data-cust-id"))
            })

            $.ajax({
                type: 'POST',
                url: 'InventoryAjax/assign_salesman_user_customer',
                data: data,
                complete: function (data, vv) {
                    if (vv == "success") {
                        if (data.responseText == 'OK') {
                            toastr.clear();
                            toastr.success(Submitted_Successfully)
                            change_table()
//                            RebuildDataTable(title, [1, 2, 3], 'InventoryAjax/UserCustomersList',  {uid: $("#users").val()});
                        } else {
                            toastr.error(Failed_Submit)
                        }
                    }
                }
            })
        })


    });

    function change_table() {
        RebuildDataTable(title, [1, 2, 3, 4], 'InventoryAjax/salesman_customer_list',
                {employee_id: $("#salesman_id").val(), user_id: $("#user_id").val()});

    }


</script>
