<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 ($permissions->hasPermission('add_job_order_option')) {
                echo Forms::FloatingAddButton('4c0870', '#job_order_options_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('option_title'); ?></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="job_order_options_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog "  >
        <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_job_order_option'); ?></h5>
                <h5 class="edit-label h-labels text-left bold hidden"><?php echo CommonLanguage::getMessage('edit_job_order_option'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row"><?php echo Forms::AlertDiv('job_order_option_alert'); ?></div>
                <form id="jobOrderOptionForm">
                    <input type="hidden" name="option_id" id="option_id" />
                    <div class="row form-group">
                        <div class=" col-md-3" >
                            <label class="labelText"><?php print CommonLanguage::getMessage('option_title'); ?>
                                <span class="red-star">*</span>
                            </label>
                            <input type="text" class="form-control" autocomplete="off" id="option_title" name="option_title" required/>
                        </div>
                        <div class=" col-md-1" >
                            <label class="labelText"><?php print CommonLanguage::getMessage('sort_order'); ?>
                                <span class="red-star">*</span>
                            </label>
                            <input type="text" class="form-control" autocomplete="off" id="sort_order" name="sort_order" required/>
                        </div>
                        <div class=" col-md-2 m-t-20" >
                            <input type="checkbox"  class="is_published" id="is_published">
                            <label for="is_published"><?php echo CommonLanguage::getMessage('is_published');?></label>
                        </div>
                        <div class=" col-md-2 m-t-20" >
                            <input type="checkbox"  class="is_title_hidden" id="is_title_hidden">
                            <label for="is_title_hidden"><?php echo CommonLanguage::getMessage('is_title_hidden');?></label>
                        </div>
                        <div class=" col-md-2 m-t-20" >
                            <input type="checkbox"  class="is_content_hidden" id="is_content_hidden">
                            <label for="is_content_hidden"><?php echo CommonLanguage::getMessage('is_content_hidden');?></label>
                        </div>
                    </div>
                    <div class="row option-details-div form-group " >
                        <div>
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <label><?php  echo CommonLanguage::getMessage('option_detail_title');?><span class="red-star">*</span></label>
                                </div>
                                <div class="col-md-1">
                                    <label><?php  echo CommonLanguage::getMessage('sort_order');?><span class="red-star">*</span></label>
                                </div>
                                <div class="col-md-2">
                                    <label><?php  echo CommonLanguage::getMessage('type');?> <span class="red-star">*</span></label>
                                </div>
                                <div class="col-md-2">
                                    <label><?php  echo CommonLanguage::getMessage('is_required');?> </label>
                                </div>
                                <div class="col-md-3">
                                    <label><?php  echo CommonLanguage::getMessage('option_detail_value');?> </label>
                                </div>
                            </div>
                        </div>
                        <div class="job-order-option-row" data-id="0" data-option-value-editable="0">
                            <div class="col-md-12  m-t-5"  >
                                <div class="col-md-3"><input type="text" class="form-control option_detail_name"/></div>
                                <div class="col-md-1"><input type="text" class="form-control option_detail_sort_order"/></div>
                                <div class="col-md-2"><input type="hidden" class="type_id full-width"/></div>
                                <div class="col-md-1"><input type="checkbox" class="is_required hidden" name="is_required"/></div>
                                <div class="col-md-4 job-order-option-value"></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;"></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_job_order_option"><?php print CommonLanguage::getMessage('Save') ?></button>
            </div>
            <?php echo Forms::ModalLoader('jobOrderOptionLoader'); ?>
        </div>
    </div>
</div>
<script>
    $(function(){
        build_select2($("input.type_id"), ("xhr/commonSearch?col_id=type_id&col_name=type_name&table=tbl_job_order_option_type"))
        RebuildDataTable($('.panel-heading .panel-title').html(), [0], "InventoryAjax/jobOrderOptionList");
        $(".option-details-div").on("click", " .fa-plus", function (e) {
            var Parent = $(this).parents(".job-order-option-row"), NewItem = Parent.clone().insertAfter(Parent);
            NewItem.find("input").val('');
            NewItem.find(".select2-container").remove()
            NewItem.attr('data-id',0)
            NewItem.attr('data-option-value-editable',0)
            $('.job-order-option-value',NewItem).html('')
            $('input[name=is_required]',NewItem).prop('checked',false)
            $("input.type_id",NewItem).attr('disabled',false)
            $('.fa-minus',NewItem).css({"display": "inline"})
            $('input.is_required',NewItem).addClass('hidden')
            build_select2(NewItem.find("input.type_id"), ("xhr/commonSearch?col_id=type_id&col_name=type_name&table=tbl_job_order_option_type"))
            $(".select2-container", NewItem).show()
        })
        $(".option-details-div").on("click", ".fa-minus", function (e) {
            if($('.job-order-option-row').length > 1){
                $(this).closest(".job-order-option-row").empty().remove();  
            }
        });
        $(".floatingContainer").on("click", function () {
            $('#option_id').val(0);
            $('#job_order_options_modal .add-label').removeClass('hidden');
        });
        $("#job_order_options_modal").on("hidden.bs.modal", function () {
            $('.job-order-option-row:gt(0)').remove();
            $('.job-order-option-row').attr('data-id',0);
            $('.job-order-option-row').attr('data-option-value-editable',0);
            $(".job-order-option-value").html('')
            $('input.is_required').prop('checked',false)
            $('.fa-minus').css({"display": "inline"})
            $("input.type_id").attr('disabled',false).val('').trigger('change')
        });
        $('.option-details-div').on("change","input.type_id",function(){
            var parent = $(this).parents(".job-order-option-row"),type= $(this).val();
            if($(this).val() && (type == 2 || type == 7 || type == 3)){
                $('.job-order-option-value',parent).html('<input  type="hidden"  name="option_detail_value"  value=""   class="form-control tagsinput" />')
                $('.tagsinput',parent).tagsinput() 
            }else{
                $('.job-order-option-value',parent).html('')
            }
            ($(this).val() == 3 || !$(this).val()) ? $('input.is_required',parent).addClass('hidden') : $('input.is_required',parent).removeClass('hidden');
        });
        $('#tableWithSearch').on('click', '.delete', function () {
            var entry_value = $(this).parents('div.Action').attr('data-id');
            IncludeDeleteModal(common_delete_modal, {option_id: entry_value}, function () {
                RebuildDataTable($('.panel-heading .panel-title').html(), [0], "InventoryAjax/jobOrderOptionList")
            }, "InventoryAjax/deleteJobOrderOption");
        });
        $('#tableWithSearch').on('click', '.edit', function () {

            $('#job_order_options_modal .edit-label').removeClass('hidden');
            $('#option_id').val($(this).parents('div.Action').attr('data-id'));
            CommonViewById('InventoryAjax/getJobOrderOptionData', {option_id: $('#option_id').val()},
                           '#jobOrderOptionLoader', function (response) {
                var main = response['main'],details = response['details'],
                    current_row = $(".option-details-div .job-order-option-row:eq(0)").clone();
                $('#option_title').val(main.option_title);
                $('#sort_order').val(main.sort_order);
                $('#is_published').prop("checked",main.is_published == "1" ? true : false)
                $('#is_title_hidden').prop("checked",main.is_title_hidden == "1" ? true : false)
                if(details.length > 0){
                    $(".option-details-div .job-order-option-row").remove()
                    $.each(details,function(index,value){
                        current_row = current_row == null ? $(".option-details-div .job-order-option-row:eq(0)").clone() : current_row;
                        $('input.option_detail_name',current_row).val(details[index].option_detail_name);
                        $(".option-details-div").append(current_row);
                        $(".select2-container",current_row).remove();
                        $("input.type_id",current_row).val(details[index].type_id).attr("data-select-name", details[index].type_name);
                        $("input.option_detail_sort_order",current_row).val(details[index].option_detail_sort_order);
                        current_row.attr('data-id',details[index].option_detail_id)
                        if(details[index].type_id == 2 ||details[index].type_id == 3 || details[index].type_id == 7 ){
                            $('.job-order-option-value',current_row).html('<input type="hidden"  name="option_detail_value"  value="'+details[index].detail_value_title.join()+'"   class="form-control tagsinput" />')
                            $('.tagsinput',current_row).tagsinput();
                            if(details[index].detail_option_id){
                                var tagsinput = $('.tagsinput',current_row).next();
                                $('[data-role="remove"]',current_row).remove();
                                tagsinput.find("input").remove();
                            }
                        }

                        $('.fa-minus',current_row).css({"display": details[index].detail_option_id ? "none" : "inline"})
                        $("input.type_id",current_row).attr('disabled',details[index].detail_option_id  ? true : false)
                        details[index].type_id == 3 ? $('input.is_required',current_row).addClass('hidden') : $('input.is_required',current_row).removeClass('hidden');
                        current_row.attr('data-option-value-editable', details[index].detail_option_id ? 1 : 0)

                        $('input.is_required',current_row).prop('checked',details[index].is_required == 1 ? true : false)
                        build_select2($("input.type_id",current_row), ("xhr/commonSearch?col_id=type_id&col_name=type_name&table=tbl_job_order_option_type"));
                        $(".select2-container",current_row).show();
                        current_row = null
                    }); 
                }
            });
        });
        $("#submit_job_order_option").on("click", function () {
            var option_details =[],is_option_empty = false,option_details_ids =[];
            if (!$("#jobOrderOptionForm").valid())
                return;
            var Data = new FormData(document.getElementById("jobOrderOptionForm"));
            $('.job-order-option-row').each(function(){
                if($('input.type_id',$(this)).val() && $('input.option_detail_name',$(this)).val()){
                    option_details.push({type_id:$('input.type_id',$(this)).val(),
                                         option_detail_sort_order:$('input.option_detail_sort_order',$(this)).val(),
                                         option_detail_name:$('input.option_detail_name',$(this)).val(),
                                         option_detail_value:$('input[name=option_detail_value]',$(this)).val(),
                                         option_detail_id:$(this).attr('data-id'),
                                         option_detail_value_editable:$(this).attr('data-option-value-editable'),
                                         is_required:$('input.is_required',$(this)).is(":checked") ? 1 : 0})
                    if(($('input.type_id',$(this)).val() == 2 || $('input.type_id',$(this)).val() == 3 || $('input.type_id',$(this)).val() == 7) && !$('input[name=option_detail_value]',$(this)).val())
                        is_option_empty = true; 
                    $(this).attr('data-id') != 0 ? option_details_ids.push($(this).attr('data-id')) :'';
                }

            });
            if(option_details.length == 0){
                AddAlert("#job_order_option_alert",'<?php  echo CommonLanguage::getMessage('input_option');?>','danger')
                return;
            }
            if(is_option_empty){
                AddAlert("#job_order_option_alert",'<?php echo CommonLanguage::getMessage('alert_option');?>', 'danger');
                return;
            }
            Data.append('option_details_ids',JSON.stringify(option_details_ids));
            Data.append('option_details',JSON.stringify(option_details));
            Data.append("is_published", $('#is_published').is(":checked") ? 1 : 0)
            Data.append("is_title_hidden", $('#is_title_hidden').is(":checked") ? 1 : 0)
            Data.append("is_content_hidden", $('#is_content_hidden').is(":checked") ? 1 : 0)
            $("#jobOrderOptionLoader").removeClass('hidden');
            $.ajax({
                url: "InventoryAjax/submitJobOrderOption",
                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/jobOrderOptionList");
                            hideModalAlert('job_order_options_modal', 'job_order_option_alert');
                        }
                        AddAlert("#job_order_option_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#jobOrderOptionLoader").addClass('hidden');
                }
            });
        });
    });
</script>