<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print $title; ?></div>
            <?php if (smc_session()['default_setting']['sync_type'] != 2 && $permissions->hasPermission('add_product_specification_options')) {
    echo Forms::FloatingAddButton('4c0870', '#product_specification_option_modal', CommonLanguage::getMessage('add'), 'add_product_specification_modal'); } ?>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered inventory" id="tableWithSearch">
                    <thead>
                        <tr>
                            <th><?php print CommonLanguage::getMessage('specification') ?></th>
                            <th><?php print CommonLanguage::getMessage('options') ?></th>
                            <th><?php print CommonLanguage::getMessage('Action') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="product_specification_option_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header 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 h-labels text-left bold hidden"> <?php echo CommonLanguage::getMessage('add_product_specification_options'); ?></h5>
                <h5 class="edit-label h-labels text-left bold hidden"> <?php echo CommonLanguage::getMessage('edit_product_specification_options'); ?></h5>
            </div>
            <div class="modal-body">
                <form id="product_specification_option_form" method="POST" onsubmit="return false">
                    <div class="row">
                        <?php echo Forms::AlertDiv('product_specification_option_alert'); ?>
                        <input type='hidden' name='product_specification_id' id='product_specification_id'/>
                    </div>
                    <div class="row form-group m-t-10">
                        <div class="col-md-5">
                            <label><?php print CommonLanguage::getMessage('specification'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text"  placeholder="<?php print CommonLanguage::getMessage('specification'); ?>" id="product_specification_name" name="product_specification_name" class="form-control " autocomplete="off" required>
                        </div>
                    </div> 
                    <div class="row form-group product_detail_div">
                        <div class="col-md-12  ">
                            <div class="col-xs-5 p-l-0">
                                <label ><?php print CommonLanguage::getMessage('Name'); ?></label>
                                <span class="red-star">*</span>
                            </div>
                            <div class="col-xs-5 p-l-0">
                                <label ><?php print CommonLanguage::getMessage('Code'); ?></label>
                                <span class="red-star">*</span>
                            </div>
                        </div>
                        <div class="product-details-items">
                            <div class="row  mp-row m-t-10 add-row">
                                <div class="col-xs-5 p-l-0">
                                    <input type="text"   class="form-control current_name">
                                </div>
                                <div class="col-xs-5 p-l-0">
                                    <input type="text"    class="form-control current_code">
                                </div>
                                <div class="col-xs-2 p-l-0">
                                    <span class="fa fa-plus" style="color:#4c0870;margin-top:15px;margin-right:25px"></span>
                                    <span class="fa fa-minus" style="color:#ed9421;margin-top:15px;display:none;"></span>  
                                </div>
                            </div>
                        </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 btn-primary" id="submit_product_specification_option"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('product_specification_option_loader'); ?>
        </div>
    </div>
</div>
<script>
    $(function () {
        RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'InventoryAjax/product_specification_options_list',1);
        $(".add_product_specification_modal").on("click", function () {
            $('#product_specification_option_modal .add-label').removeClass('hidden')
            $("#product_specification_id").val(0);
        });
        $('#tableWithSearch').on('click', '.delete', function () {
            var entry_value = $(this).parents('div.Action').attr('data-id')
            IncludeDeleteModal(common_delete_modal, {product_specification_id: entry_value}, function () {
                RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'InventoryAjax/product_specification_options_list');
            }, "InventoryAjax/deleteProductSpecificationOptions");
        });
        $("#tableWithSearch").on("click", ".edit", function () {
            $('#product_specification_option_modal .edit-label').removeClass('hidden')
            var product_specification_id = $(this).parents('div.Action').attr('data-id');
            $("#product_specification_id").val(product_specification_id);
            CommonViewById('InventoryAjax/viewProductSpecificationOptions', {product_specification_id:product_specification_id},
                           '#product_specification_option_loader', function (response) {
                var main = response['main'],options = response['options'],
                    current_row = $(".product-details-items .mp-row:eq(0)").clone();
                $('#product_specification_name').val(main.product_specification_name)
                if(options.length > 0){
                    $(".product-details-items .mp-row").remove()
                    $.each(options,function(index,value){
                        current_row = current_row == null ? $(".product-details-items .mp-row:eq(0)").clone() : current_row;
                        $('input.current_name',current_row).val(options[index].option_name);
                        $('input.current_code',current_row).val(options[index].option_code);
                        $(".product-details-items").append(current_row);
                        current_row = null
                        $(".mp-row").each(function () {
                            $(" .fa-minus", $(this).parents('.product-details-items')).css({"display": $(".mp-row", $(this).parents('.product-details-items')).length <= 1 ? "none" : "inline-block"})
                        });
                    }); 
                }
            });
        });
        $("#product_specification_option_form").on("click", ".product-details-items .fa-plus", function (e) {
            $(".fa-minus",$(this).parents('.product-details-items')).css("display", "inline-block")
            var Parent = $(this).parents(".mp-row"), NewItem = Parent.clone().insertAfter(Parent);
            NewItem.find("input").val('');
        });
        $("#product_specification_option_form").on("click", ".product-details-items .fa-minus", function (e) {
            var parent =$(this).parents('.product_detail_div');
            $(this).closest(".mp-row").empty().remove();
            $(".mp-row",parent).each(function () {
                $(".fa-minus", $(this)).css({"display": $(".mp-row", parent).length <= 1 ? "none" : "inline-block"})
            });
        });
        $("#submit_product_specification_option").on("click", function () {
            if (!$("#product_specification_option_form").valid())
                return;
            var Data = new FormData(document.getElementById("product_specification_option_form"));
            var option_arr = [];
            $(".mp-row").each(function(){
                if($(".current_name",$(this)).val() && $(".current_code",$(this)).val()){
                    option_arr.push({name:$(".current_name",$(this)).val(),
                                     code: $(".current_code",$(this)).val() })
                }
            });
            if(option_arr.length == 0){
                AddAlert("#product_specification_option_alert","<?php echo CommonLanguage::getMessage('input_option');?>", "danger");
                return;
            }
            Data.append('option',JSON.stringify(option_arr))
            $("#product_specification_option_loader").removeClass('hidden');
            $.ajax({
                url: "InventoryAjax/submitProductSpecificationOptions",
                method: "POST",
                data: Data,
                dataType: "json",
                processData: false,
                contentType: false,
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'InventoryAjax/product_specification_options_list');
                            hideModalAlert('product_specification_option_modal', 'product_specification_option_alert');
                        }
                        AddAlert("#product_specification_option_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#product_specification_option_loader").addClass('hidden');
                }
            });
        });
    });
</script>