<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('bone_type_list'); ?></div>
            <?php
            if ($permissions->hasPermission('add_bone_type')) {
                echo Forms::FloatingAddButton('4c0870', '#add-edit-bone-type-modal', CommonLanguage::getMessage('add'));
            }
            ?>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered inventory" 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('coupon_account'); ?></th>
                                <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('vat_account'); ?></th>
                                <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('service_account'); ?></th>
                                <th class="text-center" style="width:15%" ><?php print CommonLanguage::getMessage('Action'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-md " data-backdrop="static" id="add-edit-bone-type-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm"  >
        <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 h-labels text-left bold hidden"><?php echo CommonLanguage::getMessage('add_bone_type'); ?></h5>
                <h5 class="edit-label h-labels text-left bold hidden"><?php echo CommonLanguage::getMessage('edit_bone_type'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row"><?php echo Forms::AlertDiv('bone_type_alert'); ?></div>
                <form id="boneTypeForm">
                    <input type="hidden" name="bone_type_id" id="bone_type_id" />
                    <div class="row form-group">
                        <div class=" col-md-12  " >
                            <label class="labelText"><?php print CommonLanguage::getMessage('Name'); ?><span class="red-star">*</span></label>
                            <input type="text" class="form-control" autocomplete="off" id="bone_type_name" name="bone_type_name" required/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class=" col-md-12  " >
                            <label class="labelText"><?php print CommonLanguage::getMessage('coupon_account'); ?>
                                <span class="red-star">*</span>
                            </label>
                            <input type="hidden" class="full-width" id="Account_ID" name="Account_ID" required/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class=" col-md-12  " >
                            <label class="labelText"><?php print CommonLanguage::getMessage('vat_account'); ?>
                                <span class="red-star">*</span>
                            </label>
                            <input type="hidden" class="full-width" id="vat_account_id" name="vat_account_id" required/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class=" col-md-12  " >
                            <label class="labelText"><?php print CommonLanguage::getMessage('service_account'); ?>
                            </label>
                            <input type="hidden" class="full-width" id="service_account_id" name="service_account_id" />
                        </div>
                    </div>
                    <div class="row service-div form-group " >
                        <label><?php echo CommonLanguage::getMessage('service');?></label>
                        <div class="service-row add-row">
                            <div class="col-md-12  "  >
                                <div class="col-md-6"><input type="hidden" class="product_id full-width"/></div>
                                <div class="col-md-4"><input type="number" class="form-control service_price" min="0" step="any"/></div>
                                <div class="col-md-1 Add">
                                    <span class="fa fa-plus m-l-5 " style="color:#8a7dbe;cursor:pointer"></span>
                                    <span class="fa fa-minus m-l-5 " style="color:#ed9421;cursor:pointer;display:none;"></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 type="button" class="btn btn-primary white" id="submit_bone_type"><?php print CommonLanguage::getMessage('Save') ?></button>
            </div>
            <?php echo Forms::ModalLoader('boneTypeLoader'); ?>
        </div>
    </div>
</div>
<script>
    $(function(){
        build_select2($("input.product_id"), ("xhr/ProductSearch?show_default_uom=1"))
        RebuildDataTable($('.panel-heading .panel-title').html(), [0], "InventoryAjax/bone_type_ajax");
        build_select2($('#Account_ID'),"xhr/allAccountsSearch");
        build_select2($('#vat_account_id'),"xhr/allAccountsSearch");
        build_select2($('#service_account_id'),"xhr/allAccountsSearch");
        $(".service-div").on("click", " .fa-plus", function (e) {
            $(".service-div  .fa-minus").css("display", "inline-block")
            var Parent = $(this).parents(".service-row"), NewItem = Parent.clone().insertAfter(Parent);
            NewItem.find("input").val('');
            NewItem.find(".select2-container").remove()
            build_select2(NewItem.find("input.product_id"), ("xhr/ProductSearch?show_default_uom=1"))
            $(".select2-container", NewItem).show()
        })
        $(".service-div").on("click", ".fa-minus", function (e) {
            $(this).closest(".service-row").empty().remove();
            $(".service-row").each(function () {
                $(" .fa-minus", $(this).parents('.service-div')).css({"display": $(".service-row", $(this).parents('.service-div')).length <= 1 ? "none" : "inline-block"})
            });
        });
        $(".floatingContainer").on("click", function () {
            $('#bone_type_id').val(0);
            $('#add-edit-bone-type-modal .add-label').removeClass('hidden');
        });
        $('#tableWithSearch').on('click', '.delete_bone_type', function () {
            var entry_value = $(this).parents('div.Action').attr('data-id');
            IncludeDeleteModal(common_delete_modal, {bone_type_id: entry_value}, function () {
                RebuildDataTable($('.panel-heading .panel-title').html(), [0], "InventoryAjax/bone_type_ajax")
            }, "InventoryAjax/deleteBoneType");
        });
        $('#tableWithSearch').on('click', '.edit_bone_type', function () {
            $('#add-edit-bone-type-modal .edit-label').removeClass('hidden');
            $('#bone_type_id').val($(this).parents('div.Action').attr('data-id'));
            CommonViewById('InventoryAjax/getBoneTypeData', {bone_type_id: $('#bone_type_id').val()},
                           '#boneTypeLoader', function (response) {
                var main = response['main'],details = response['details'],
                    current_row = $(".service-div .service-row:eq(0)").clone();
                $('#Account_ID').val(main[0].Account_ID)
                $('#Account_ID').attr('data-select-name',main[0].Account_Name)
                build_select2($('#Account_ID'),"xhr/allAccountsSearch");
                $('#vat_account_id').val(main[0].vat_account_id)
                $('#vat_account_id').attr('data-select-name',main[0].vat_account_name)
                $('#service_account_id').val(main[0].service_account_id)
                $('#service_account_id').attr('data-select-name',main[0].service_account_name)
                $('#bone_type_name').val(main[0].bone_type_name);
                build_select2($('#service_account_id'),"xhr/allAccountsSearch");
                build_select2($('#vat_account_id'),"xhr/allAccountsSearch");
                if(details.length > 0){
                    $(".service-div .service-row").remove()
                    $.each(details,function(index,value){
                        current_row = current_row == null ? $(".service-div .service-row:eq(0)").clone() : current_row;
                        $('input.service_price',current_row).val(details[index].service_price);
                        $(".service-div").append(current_row);
                        $(".select2-container",current_row).remove();
                        $("input.product_id",current_row).val(details[index].product_id).attr("data-select-name", details[index].current_product);
                        build_select2($("input.product_id",current_row), ("xhr/ProductSearch?show_default_uom=1"));
                        $(".select2-container",current_row).show();
                        current_row = null
                        $(".service-row").each(function () {
                            $(" .fa-minus", $(this).parents('.service-div')).css({"display": $(".service-row", $(this).parents('.service-div')).length <= 1 ? "none" : "inline-block"})
                        });
                    }); 
                }
            });
        });
        $("#submit_bone_type").on("click", function () {
            var service_details =[];
            if (!$("#boneTypeForm").valid())
                return;
            var Data = new FormData(document.getElementById("boneTypeForm"));
            $('.service-row').each(function(){
                if($('input.product_id',$(this)).val() && $('input.service_price',$(this)).val()){
                    service_details.push({product_id:$('input.product_id',$(this)).val(),
                                          service_price:$('input.service_price',$(this)).val()}) 
                }

            });
            Data.append('service_details',JSON.stringify(service_details));
            $("#boneTypeLoader").removeClass('hidden');
            $.ajax({
                url: "InventoryAjax/submitBoneType",
                method: "POST",
                data: Data,
                processData: false,
                contentType: false,
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            RebuildDataTable($('.panel-heading .panel-title').html(), [0], "InventoryAjax/bone_type_ajax");
                            hideModalAlert('add-edit-bone-type-modal', 'bone_type_alert');
                        }
                        AddAlert("#bone_type_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#boneTypeLoader").addClass('hidden');
                }
            });
        });
    });
</script>