<script src=" <?php echo THEME_PATH; ?>/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="<?php echo THEME_PATH; ?>/plugins/jquery-dynatree/jquery.dynatree.min.js" type="text/javascript"></script>
<link href="<?php echo THEME_PATH; ?>/plugins/jquery-dynatree/skin/ui.dynatree.css" rel="stylesheet" type="text/css" media="screen"/>
<style>
    ul.dynatree-container {
        overflow: visible !important;
    }
    .alert-dismissible{
        margin-top:20px;
        margin-left:58px;
        border: 1px dashed #4c0870;
        background-color: #fff;
        color: #4E5E6A;
        font-size:16px;
        width: 50%;
    }
    .TreeItem{
        display:inline-block;
        cursor:default();
    }
    .TreeItem > .ActionButton{
        position:relative;
        top:1px;
        cursor:pointer;
        margin:0 5px;
        opacity:0;
        font-size:18px;
        visibility:hidden;
        -webkit-transition:opacity 0.2s linear;
        -moz-transition:opacity 0.2s linear;
        transition:opacity 0.2s linear;
    }
    .TreeItem:hover > .ActionButton{
        opacity:1;
        visibility:visible;
    }
    .dynatree-exp-cd span.dynatree-expander,.dynatree-exp-cdl span.dynatree-expander {
        background-position: 0 !important ;
        margin-top:-4px;
    }
    .CenterHAndV{
        width:100%;
        height:100%;
        text-align:center;
        font-size: 18px;
    }
    #PrimaryCats .fa-circle-o{
        color: #4c0870;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor:pointer;
    }
    #PrimaryCats .mainPageLinks{
        display: block;
        height: 100%;
    }
    #PrimaryCats .CenterHAndV .MiddleIcon{
        font-size: 45px;
        display: block;
        margin: 30px 0;
    }
    #AddNewItemDiv,#RemoveAddedItemDiv,#AddNewItemElement,#EditItemDiv{
        border: 1px dashed rgba(0, 0, 0, 0.25);
        padding: 10px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }
    .tool-tip{
        color: #fff;
        background-color: rgba( 0, 0, 0, .7);
        text-shadow: none;
        font-size: .8em;
        visibility: hidden;
        -webkit-border-radius: 7px; 
        -moz-border-radius: 7px; 
        -o-border-radius: 7px; 
        border-radius: 7px;	
        text-align: center;	
        opacity: 0;
        z-index: 999;
        padding: 3px 8px;	
        position: absolute;
        cursor: default;
        -webkit-transition: all 240ms ease-in-out;
        -moz-transition: all 240ms ease-in-out;
        -ms-transition: all 240ms ease-in-out;
        -o-transition: all 240ms ease-in-out;
        transition: all 240ms ease-in-out;	
    }
    .tool-tip,
    .tool-tip.top{
        top: auto;
        bottom: 114%;
        left: 50%;		
    }
    .tool-tip.top:after,
    .tool-tip:after{
        position: absolute;
        bottom: -12px;
        left: 50%;
        margin-left: -7px;
        content: ' ';
        height: 0px;
        width: 0px;
        border: 6px solid transparent;
        border-top-color: rgba( 0, 0, 0, .7);	
    }
    /* default heights, width and margin w/o Javscript */
    .tool-tip,
    .tool-tip.top{
        z-index:9999;
        width: 150px;
        height: 22px;
        margin-left: -72px;
    }
    /* on hover of element containing tooltip default*/
    *:not(.on-focus):hover > .tool-tip,
    .on-focus input:focus + .tool-tip{
        visibility: visible;
        opacity: 1;
        -webkit-transition: all 240ms ease-in-out;
        -moz-transition: all 240ms ease-in-out;
        -ms-transition: all 240ms ease-in-out;
        -o-transition: all 240ms ease-in-out;
        transition: all 240ms ease-in-out;		
    }
</style>
<div class="wrapper">
    <div class="panel">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <div id="check-tree">
                    </div>
                    <div id='AjaxLoader' class="hidden" style='height:100px;text-align:center'><img src='img/demo/progress.svg' /></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var ExpandAfterReloading = "",active_row,product_machines = <?php  echo json_encode($product_machines);?>;
    $(function(){
        for(var i=0;i<product_machines.length;i++){
            $('#check-tree').append($('<h6><b>'+product_machines[i]['Product_Name']+'</b></h6><div class="check-tree'+i+'"></div>'))
            buildDynatree('.check-tree'+i);
            getData('.check-tree'+i,product_machines[i]['Product_ID']);
        }
    });
    function getData(tree_class,main_id){
        $('#AjaxLoader').removeClass('hidden')
        PageTreeObject.options.initAjax.url = "InventoryAjax/ajaxProductDetails?product_id="+main_id+"&cmd=fetch&id=" + 1
        PageTreeObject.reload(function () {
            $("#AjaxLoader").remove();
            $(tree_class).css("visibility", "visible");
            try {
                if (PageTreeObject.count() == 0) {
                    $("#EmptyTreeMsg").show()
                } else {
                    $("#EmptyTreeMsg").hide()
                }
            } catch (err) {
            }
            $('#AjaxLoader').addClass('hidden')
        });
    }
    function buildDynatree(tree_class){
        $(tree_class).dynatree({
            title: "",
            selectMode: 3,
            keyboard: false,
            fx: {height: "toggle", duration: 200},
            autoFocus: false,
            initAjax: {},
            onCreate: function (dtnode, nodeSpan) {
                if (dtnode.data.DontShow == "yes")
                    dtnode.li.style.display = "none";
            },
            onCustomRender: function (node) {
                return "<div class='TreeItem' data-entry-id='"+node.data.part_id+"' data-machine-type-id='"+node.data.machine_type_id+"' data-product-id='" + node.data.part_product_id + "' data-parent-id='" + node.data.Product_ID + "' > " + "<span class='product_name'>"+node.data.Product_Name +"</span>"+(node.data.part_note ? "  ("+"<span class='product_note'>"+node.data.part_note+"</span>"+")" : "")+"<span onclick='NewChecklistSchedule(this)' class='ActionButton fa fa-plus'><div class='tool-tip slideIn top'><?php echo CommonLanguage::getMessage('new_checklist_schedule'); ?></div></span></div>";
            },
            onRender: function (node, nodeSpan) {
                node.select()
                $(nodeSpan).find(".TreeItem").addClass("OriginallyChecked")
            },
            onLazyRead: function (node) {
                node.appendAjax({
                    url: "InventoryAjax/ajaxProductDetails?product_id="+node.data.part_product_id+"&cmd=fetch&id=" + node.data.part_product_id,
                    debugLazyDelay: 750
                });
            }
        });
        window.PageTreeObject = $(tree_class).dynatree("getTree");
    }
    function NewChecklistSchedule(who){
        $('#checklist-schedule-modal').modal('show');
         $('#checklist_line_machine tbody').empty();
        var product_type =  $(who).parent().attr('data-machine-type-id'),
            current_product_id = '';
        CommonViewById('MaintenanceAjax/getLineMachineParts', {product_id: $(who).parent().attr('data-product-id')},
                       '#checklistScheduleLoader', function (response) {
            var TR ='';
            $.each(response,function(i){
                current_product_id  = response[i]['Product_ID'];
                TR += '<tr data-line-id="'+response[i]['line_id']+'" data-machine-id="'+response[i][product_type == 1 ? 'main_part_id' : 'parent_part_id']+'" data-part-id="'+(product_type == 1 ? '' : response[i]['main_part_id'])+'">'+
                    '<td><input name="checklist_checkbox" type="checkbox"/></td>'+
                    '<td>'+response[i]['line_name']+'</td>'+
                    '<td>'+response[i][product_type == 1 ? 'main_product_name' : 'parent_product_name']+'</td>'+
                    '<td>'+(product_type == 1 ? '' : response[i]['main_product_name'])+'</td>'+
                    '</tr>';
            });
            current_product_id = product_type == 1 ?  $(who).parent().attr('data-product-id') :  current_product_id;
            build_select2($("input[name=property_id]"),"xhr/PropertyLineSearch?Product_ID="+current_product_id);
            $('#checklist_line_machine tbody').append(TR)
        
        });
    }
</script>
<?php
include 'Views/Maintenance/line-checklist-schedule-modal.php';