<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('machine_properties_values'); ?></div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <?php
            if ($permissions->hasPermission('add_machine_properties_values')) {
                echo Forms::FloatingAddButton('4c0870', '#add_machine_properties_values', CommonLanguage::getMessage('add'));
            }
            ?>
            <table class="table table-bordered maintenance-table" id="tableWithSearch" >
                <thead>
                    <tr>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('machine'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('note'); ?></th>
                        <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('Date'); ?></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 " data-backdrop="static" id="add_machine_properties_values" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md"  >
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="add-label bold"><?php echo CommonLanguage::getMessage('machine_properties_values');?></h5>
                <div id="assignAlert"></div>
            </div>
            <div class="modal-body">
                <form id="assignForm" class="form-group">
                    <div class="row form-group">
                        <div class=" col-md-12" >
                            <div class="col-md-4">
                                <label class="labelText"><?php print CommonLanguage::getMessage('line'); ?><span class="red-star">*</span></label>
                                <span class="fa fa-plus-circle m-l-5 openFrame" data-src="Maintenance/line?is_pop=1" style="color:#8a7dbe;cursor:pointer"></span>
                                <input type="hidden" class="full-width" id="line_id" name="line_id" required/>
                            </div>
                            <div class="col-md-4">
                                <label class="labelText"><?php print CommonLanguage::getMessage('Name'); ?><span class="red-star">*</span></label>
                                <span class="fa fa-plus-circle m-l-5 openFrame" data-src="Maintenance/machines_parts?is_pop=1" style="color:#8a7dbe;cursor:pointer"></span>
                                <input type="hidden" class="full-width" id="product_id" name="product_id" required/>
                            </div>
                            <div class=' date col-md-4 '>
                                <label><?php echo CommonLanguage::getMessage('Date'); ?><span class="red-star">*</span></label>
                                <input type='text' class="form-control" name="datetimepicker1" id="datetimepicker1" autocomplete="off" required />
                            </div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-12" > 
                            <label class="labelText"><?php print CommonLanguage::getMessage('note'); ?></label>
                            <textarea class="form-control note"   rows="3" style="overflow: hidden; word-wrap: break-word; resize:vertical "></textarea>
                        </div>
                    </div>
                    <div class="row value-div hidden">
                        <div class=" col-md-12 m-t-10 " >
                            <div class="col-md-6">
                                <label class="labelText"><?php print CommonLanguage::getMessage('property'); ?></label>
                            </div>
                            <div class="col-md-6">
                                <label class="labelText"><?php print CommonLanguage::getMessage('value'); ?></label>
                            </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-dark text-white" id="assignBtn"><?php print CommonLanguage::getMessage('Save') ?></button>
            </div>
        </div>
    </div>
</div>
<div class="row m-t-10 value-row-temp hidden" >
    <div class=" col-md-12" >
        <div class="col-md-6">
            <input type="text" class="full-width property_id form-control" readonly/>
        </div>
        <div class="col-md-6 ">
            <input type="number" class="full-width property_value form-control"  />
        </div>
    </div>
</div>
<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('product_sections')); ?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
                prop_val_alert = <?php echo json_encode(CommonLanguage::getMessage('prop_val_alert')); ?>,
                    Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>;
                    var IsEdit = false, IDToEdit = 0, IDToDelete = 0;
    $(function () {
        build_select2($("input[name=line_id]"),"xhr/CommonSearch?col_name=line_name&col_id=line_id&table=tbl_line");
        build_select2($("#product_id"), "xhr/MachineLineSearch?Status_ID=1&line_id="+$('#line_id').val());
        $("input[name=line_id]").on('change',function(){
            $("#product_id").val('').trigger('change');
            build_select2($("#product_id"),"xhr/MachineLineSearch?Status_ID=1&line_id="+$(this).val());
        });
        $("#datetimepicker1").datetimepicker({format: 'YYYY-MM-DD HH:mm:ss'});
        $(".floatingContainer").on("click", function () {
            IsEdit = false;
            IDToEdit = 0;
        })
        RebuildDataTable(title, [0], "MaintenanceAjax/machine_prop_values_ajax")
        $("#assignBtn").on("click", function () {
            $("#assignAlert").removeClass('hidden');
            if ($("#datetimepicker1").val() == '' || $("#product_id").val() == '') {
                $("#assignAlert").attr("class", "alert alert-danger").html(Required_Fields)
                return false;
            }
            var DataArr = {
                line_id: $("#line_id").val(),
                product_id: $("#product_id").val(),
                value_date_time: $("#datetimepicker1").val(),
                note: $(".note").val(),
                properties: []
            };
            $(".value-row").each(function () {
                if ($(this).find('.property_value').val() != '' && $(this).find('.property_value').val() != 0) {
                    DataArr.properties.push({
                        property_id: $(this).find('.property_id').attr("data-id"),
                        property_value: $(this).find('.property_value').val()
                    })
                }
            })
            if (DataArr.properties.length == 0) {
                $("#assignAlert").attr("class", "alert alert-danger").html(prop_val_alert)
                return false;
            }
            DataArr.value_id = IDToEdit;
            DataArr.is_edit = (IsEdit ? 1 : 0);
            $.ajax({
                url: "MaintenanceAjax/add_edit_property_values",
                method: "POST",
                data: DataArr,
                complete: function (v1, v2) {
                    if (v2 == "success" && v1.responseText == 'OK') {
                        $("#assignAlert").attr("class", "alert alert-success").html(Submitted_Successfully)
                        RebuildDataTable(title, [0], "MaintenanceAjax/machine_prop_values_ajax")
                        setTimeout(function () {
                            $("#assignAlert").addClass('hidden')
                            $("#add_machine_properties_values").modal("hide")
                        }, 5000)
                    } else {
                        $("#assignAlert").attr("class", "alert alert-danger").html(Failed_Submit)
                    }
                }
            })
        })
        $("#tableWithSearch tbody").on('click', '.edit_value', function () {
            IsEdit = true;
            IDToEdit = $(this).attr('data-id');
            //get_property_value_by_id
            $.ajax({
                url: "MaintenanceAjax/get_property_value_by_id",
                method: "GET",
                dataType: 'json',
                data: {id: IDToEdit},
                complete: function (v1, v2) {
                    if (v2 == "success") {
                        var data = v1.responseJSON;
                        $("#line_id").val(data['line_id']).attr("data-select-name", data['line_name']);
                        build_select2($("input[name=line_id]"),"xhr/CommonSearch?col_name=line_name&col_id=line_id&table=tbl_line");
                        $("#product_id").val(data['Product_ID']).attr("data-select-name", data['product_full_name'])
                        build_select2($("#product_id"), "xhr/MachineLineSearch?Status_ID=1&line_id="+data['line_id']+"&is_edited="+data['Product_ID']);
                        $("#datetimepicker1").val(data['value_date_time'])
                        $(".note").val(data['note'])
                        $('.value-row').remove()
                        $(".value-div").removeClass("hidden")
                        if (data['details'].length > 0) {
                            for (var i = 0; i < data['details'].length; i++) {
                                var prop = data['details'][i];
                                var temp = $(".value-row-temp").clone();
                                temp.appendTo($(".value-div"));
                                temp.removeClass('value-row-temp hidden').addClass('value-row')
                                $(".property_id", temp).attr("data-id", prop['property_id']).val(prop['property_name'])
                                $(".property_value", temp).val(prop['property_value'])
                                $("#add_machine_properties_values").modal("show")
                            }
                        }
                    }
                }
            })
        })
        $("#product_id").on("change", function () {
            if ($(this).val() == 0 || $(this).val() == '') {
                $(".value-div").addClass("hidden")
                $('.value-row').remove()
                return;
            }

            $.ajax({
                url: "MaintenanceAjax/get_product_maintenance",
                method: "GET",
                dataType: 'json',
                data: {id: $(this).val()},
                complete: function (v1, v2) {
                    if (v2 == "success") {
                        var data = v1.responseJSON;
                        if (data['prop'].length > 0) {
                            $(".value-div").removeClass("hidden")
                            $('.value-row').remove()
                            for (var i = 0; i < data['prop'].length; i++) {
                                var prop = data['prop'][i];
                                var temp = $(".value-row-temp").clone();
                                temp.appendTo($(".value-div"));
                                temp.removeClass('value-row-temp hidden').addClass('value-row')
                                $(".property_id", temp).attr("data-id", prop['property_id']).val(prop['property_name'])
                            }
                        }else{
                            $(".value-div").addClass("hidden")
                            $(".value-div .value-row").remove()
                        }
                    }
                }
            })
        })
    })
    $("#add_machine_properties_values").on("hidden.bs.modal", function () {
        $('.value-row').remove()
        $(".value-div").addClass("hidden");
        build_select2($("#product_id"), "xhr/MachinePartSearch?type=1&Status_ID=1");
    });
</script>
