
<style>
    .table thead tr >th{
        background-color: #4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #FFFFFF;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd; 

    }
    .btn-default{
        border: none;
        background-color: #eee;
    }
    .btn-default:hover{
        background-color:#4c0870 !important;
        color:#fff;
        border: none;
    }
    .p-0{
        padding:0!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('att_template'); ?></div>

            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <?php
            echo Forms::FloatingAddButton('4c0870', '#add_att_template', CommonLanguage::getMessage('add'));
            ?>
            <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch" >
                <thead>
                    <tr>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('Name'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('max_hrs_shift'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('Action'); ?></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>



    </div>
</div>
<div class="modal fade bs-example-modal-md " id="add_att_template" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog " style="width:50%;" >
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="pg-close fa-22"></i></span></button>
                <h4 class="modal-title"><?php print CommonLanguage::getMessage('att_template') ?></h4>
                <div id="assigAlert"></div>
            </div>
            <div class="modal-body">
                <form id="assigForm">
                    <div class="row">
                        <div class=" col-md-12 m-t-10 " >
                            <div class=" col-md-6 m-t-10 " >
                                <label class="labelText"><?php print CommonLanguage::getMessage('Name'); ?><span class="red-star">*</span></label>
                                <input type="text" class="form-control" id="template_name" name="template_name" required/>
                            </div>
                            <div class=" col-md-6 m-t-10 " >
                                <label class="labelText"><?php print CommonLanguage::getMessage('max_hrs_shift'); ?><span class="red-star">*</span></label>
                                <input type="text" class="form-control" id="max_hrs_shift" name="max_hrs_shift" required />
                            </div>

                        </div>
                        <div id="col-divs">
                            <div class="col-md-12">
                                <div class="col-md-4 form-group" >
                                    <label><?php print CommonLanguage::getMessage('excel_column'); ?></label>
                                </div>
                                <div class="col-md-4 form-group" >
                                    <label><?php print CommonLanguage::getMessage('sys_column'); ?></label>
                                </div>

                            </div>
                            <div class="col-md-12 col-item">
                                <div class="col-md-4 form-group" >
                                    <select class="full-width excel_col" data-init-plugin="select2">

                                        <?php
                                        $i = 0;
                                        foreach (range('A', 'Z') as $column) {
                                            ?>
                                            <option value="<?php echo $i++; ?>" ><?php echo $column ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                                <div class="col-md-4 form-group" >
                                    <select class="full-width sys_col" data-init-plugin="select2">
                                        <option value="date_in"><?php echo CommonLanguage::getMessage('date_in') ?></option>
                                        <option value="date_out"><?php echo CommonLanguage::getMessage('date_out') ?></option>
                                        <option value="time_out"><?php echo CommonLanguage::getMessage('time_out') ?></option>
                                        <option value="time_in"><?php echo CommonLanguage::getMessage('time_in') ?></option>
                                        <option value="work_id"><?php echo CommonLanguage::getMessage('work_id') ?></option>
                                        <option value="location_id"><?php echo CommonLanguage::getMessage('location_id') ?></option>
                                        <option value="location_name"><?php echo CommonLanguage::getMessage('location_name') ?></option>
                                        <option value="date_time_in"><?php echo CommonLanguage::getMessage('date_time_in') ?></option>
                                        <option value="date_time_out"><?php echo CommonLanguage::getMessage('date_time_out') ?></option>
                                        <option value="date_time"><?php echo CommonLanguage::getMessage('date_time') ?></option>
                                        <option value="attendance_type"><?php echo CommonLanguage::getMessage('attendance_type') ?></option>
                                    </select>
                                </div>

                                <div class="col-md-2 add-round">
                                    <span class="fa fa-plus-circle" style="color:#4c0870;margin-top:15px;margin-right:25px"></span>
                                    <span class="fa fa-minus-circle" style="color:#ed9421;margin-top:15px;"></span>
                                </div>
                            </div>
                        </div>


                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close') ?></button>
                <button style="color:white !important;" type="button" class="btn bg-success white" id="assignBtn" style="width:auto"><?php print CommonLanguage::getMessage('Save') ?></button>
            </div>
        </div>
    </div>
</div>

<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('att_template')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
    var IsEdit = false, IDToEdit = 0;
    $(function () {


        $(".floatingContainer").on("click", function () {
            $(".col-item:gt(0)").remove()
            IsEdit = false;
            IDToEdit = 0;
        })

        RebuildDataTable(title, [0], "HRMAjax/att_template_ajax")




        $("#col-divs").on("click", " .fa-plus-circle", function (e) {
            $("#col-divs  .fa-minus-circle").css("display", "inline-block")
            var Parent = $(this).parents(".col-item"), NewItem = Parent.clone().insertAfter(Parent);
            NewItem.find("input").val('');
            $(".select2-container", NewItem).empty().remove()
            NewItem.find(".excel_col,.sys_col").show().select2()


        })
        $("#col-divs").on("click", ".fa-minus-circle", function (e) {
            if ($(".col-item").length == 1) {
                $(".col-item input").val("");
            } else {
                $(this).closest(".col-item").empty().remove();
            }
        })
        $("#assignBtn").on("click", function () {

            if ($('#template_name').val() == '' || $('#max_hrs_shift').val() == '') {
                $("#assigAlert").attr("class", "alert alert-danger").html(Required_Fields)
                $(document.body).animate({scrollTop: 0})
                return;
            }
            var Data = new FormData(document.getElementById("assigForm"));

            var datacol = {};
            $("#col-divs .col-item").each(function () {
//        var col_name = $(this).find(".excel_col").val();
                datacol[$(this).find("select.excel_col").val()] = $(this).find("select.sys_col").val();
            })
 
            Data.append('columns', JSON.stringify(datacol))

            Data.append("template_id", IDToEdit)
            Data.append("is_edit", (IsEdit ? 1 : 0))
            $.ajax({
                url: "HRMAjax/add_edit_att_template",
                method: "POST",
                dataType: 'json',
                data: Data,
                processData: false,
                contentType: false,
                complete: function (v1, v2) {
                    if (v2 == "success" && v1.responseJSON == 'OK') {
                        $("#assigAlert").attr("class", "alert alert-success").html(Submitted_Successfully)
                        RebuildDataTable(title, [0], "HRMAjax/att_template_ajax")
                        setTimeout(function () {
                            $("#assigAlert").addClass('hidden')
                            $("#add_att_template").modal("hide")
                        }, 5000)
                    } else {
                        $("#assigAlert").attr("class", "alert alert-danger").html(v1.responseJSON)
                    }
                }
            })

//    console.log(data)
        })

        $("#tableWithSearch").on("click", ".delete", function () {
            var entry_value = $(this).parents('.Action').attr('data-id');
            var data = {
                id: entry_value,
            };

            IncludeDeleteModal(common_delete_modal, data, function () {
                RebuildDataTable(title, [0], "HRMAjax/att_template_ajax")
            }, "HRMAjax/delete_att_template");
        })

        $("#tableWithSearch tbody").on('click', '.Edit', function () {
            IsEdit = true;
            IDToEdit = $(this).parents('div.Action').attr('data-id');
            $.ajax({
                url: "HRMAjax/get_att_template_by_id",
                method: "GET",
                dataType: 'json',
                data: {id: IDToEdit},
                complete: function (v1, v2) {
                    if (v2 == "success") {
                        var data = v1.responseJSON;
                        $("#template_name").val(data['template_name'])
                        $("#max_hrs_shift").val(data['max_hrs_shift'])
                        $(".col-item:gt(0)").remove()
//                        for (var x = 0; x < data['columns'].length; x++) {
                        var x = 0;
                        $.each(data['columns'], function (index, value) {
//                            console.log(data['columns'][x])
                            if (x == 0) {
                                $(".col-item:eq(0)").find("select.excel_col").val(index).select2()
                                $(".col-item:eq(0)").find("select.sys_col").val(value).select2()
                            } else {
                                var item = $(".col-item:eq(0)").clone();
                                $(".select2-container", item).empty().remove()
                                item.find("select.excel_col").val(index).show().select2()
                                item.find("select.sys_col").val(value).show().select2()
                                item.appendTo($("#col-divs"))

                            }
                            x++;
                        });
                    }
                }
            })

            $("#add_att_template").modal("show")

        })


    })





</script>
