<style>
    .nav-tabs-fillup>li>a:after {
        background: none repeat scroll 0 0 #4c0870 !important;
        border: 1px solid #4c0870 !important;
    }
    .AddButtons .fa-plus,.AddButtons .fa-minus{
        cursor:pointer;
    }
    .AddButtons .fa-minus{
        color:#ed9421;
    }
    .AddButtons .fa-plus{
        color:#4c0870; 
    }
    .required-fields{
        border: red solid 1px;
    }
</style>
<div class="modal fade" id="supplier_modal"  data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <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 bold hidden"> <?php echo CommonLanguage::getMessage('new_supplier'); ?></h5>
                <h5 class="edit-label h-labels bold hidden"> <?php echo CommonLanguage::getMessage('edit_supplier'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row"><?php echo Forms::AlertDiv('supplier_alert'); ?></div>
                <form method="POST" id="supplierform" onsubmit="return false">
                    <input type="hidden" name="Supplier_ID" id="Supplier_ID"/>
                    <div class="panel panel-transparent ">
                        <ul class="nav nav-tabs nav-tabs-fillup">
                            <li class="active">
                                <a data-toggle="tab" href="#slide1"><span><?php print CommonLanguage::getMessage('supplier_info'); ?></span></a>
                            </li>
                            <li>
                                <a data-toggle="tab" href="#slide2"><span><?php print CommonLanguage::getMessage('contact_info'); ?></span></a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane slide-left active" id="slide1">
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('Name'); ?></label><span class="red-star">*</span>
                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('Name'); ?>" id="Supplier_Name" name="Supplier_Name" class="form-control " required>
                                    </div>
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('mobile_phone'); ?></label><span class="red-star">*</span>
                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('mobile_phone'); ?>" id="Supplier_Mobile" name="Supplier_Mobile" class="form-control " required>
                                        <span id="check_phone" style="color:red;font-size:11px;"></span>
                                    </div> 
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('Currency'); ?></label>
                                        <span class="red-star">*</span>
                                        <input type="hidden" class="full-width" value="<?php echo $default_currency['Currency_ID']; ?>" name="Currency_ID" data-select-name="<?php echo $default_currency['Currency_Name'] . ' - ' . $default_currency['Currency_Code']; ?>" id="Currency_ID" required/>
                                    </div>
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('country'); ?></label>
                                        <span class="red-star">*</span>
                                        <input type="hidden" value="<?php echo smc_session()['default_setting']['default_country_id'] ?>" data-select-name="<?php echo smc_session()['default_country']['Country_Name'] ?>"  name="Supplier_Country" id="Supplier_Country" class="full-width" required/>
                                    </div>

                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3" >
                                        <label><?php print CommonLanguage::getMessage('city'); ?></label>
                                        <span class="red-star">*</span>
                                        <input type="hidden" value="<?php echo smc_session()['default_setting']['default_city_id'] ?>" data-select-name="<?php echo smc_session()['default_city']['Name'] ?>"  name="City_ID" id="City_ID" class="full-width" required/>
                                    </div>
                                    <div class="col-md-6">
                                        <label><?php print CommonLanguage::getMessage('address'); ?></label>
                                        <span class="red-star <?php echo smc_session()['default_setting']['enable_kabalan_height_width'] ? 'hidden' : ''; ?> ">*</span>
                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('address'); ?>"  id="Supplier_Address" name="Supplier_Address" class="form-control" <?php echo  smc_session()['default_setting']['enable_kabalan_height_width'] ? '' : 'required'; ?> >
                                    </div>
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('supplier_vat'); ?></label>
                                         <input type="text" placeholder="<?php print CommonLanguage::getMessage('supplier_vat'); ?>"  id="supplier_vat" name="supplier_vat" class="form-control" >
                                    </div>

                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3" >
                                        <label><?php echo CommonLanguage::getMessage('choose_branch') ?></label>
                                        <input id="branch_id" type="hidden" class="full-width" name="branch_id"  >
                                    </div>
                                </div>

                                <hr class="b-dashed">
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('company'); ?></label>
                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('company'); ?>" id="Supplier_Company" name="Supplier_Company" class="form-control " >
                                    </div>
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('commercial_registry'); ?></label>
                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('commercial_registry'); ?>" id="Supplier_CR" name="Supplier_CR" class="form-control " >
                                    </div> 
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('Email'); ?></label>
                                        <input type="email" placeholder="<?php print CommonLanguage::getMessage('Email'); ?>" id="Supplier_Email" name="Supplier_Email" class="form-control " >
                                    </div>
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('postal_code'); ?></label>
                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('postal_code'); ?>" id="Supplier_PostalCode" name="Supplier_PostalCode" class="form-control " >
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('Phone'); ?></label>
                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('Phone'); ?>" id="Supplier_Phone" name="Supplier_Phone" class="form-control " >
                                    </div> 
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('work_phone'); ?></label>
                                        <input type="text" placeholder="<?php print CommonLanguage::getMessage('work_phone'); ?>" id="Supplier_Work_Phone" name="Supplier_Work_Phone" class="form-control " >
                                    </div>
                                    <div class="col-md-3">
                                        <label class="labelText"><?php print CommonLanguage::getMessage('parent'); ?></label>
                                        <?php if (smc_session()['default_setting']['cust_supp_required_parent'] == 1) { ?>
                                            <span class="red-star">*</span>
                                        <?php } ?>
                                        <input type="hidden"  id="account_parent_id" name="account_parent_id" class="full-width " <?php echo (smc_session()['default_setting']['cust_supp_required_parent'] == 1) ? 'required' : '' ?>>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="labelText"><?php print CommonLanguage::getMessage('due_date_days'); ?></label>
                                        <input type="number" placeholder="<?php print CommonLanguage::getMessage('due_date_days'); ?>"  id="supplier_due_date_period" name="supplier_due_date_period" class="form-control " >
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <label class="labelText"><?php print CommonLanguage::getMessage('supplier_group'); ?></label>
                                        <input type="hidden"  id="supplier_group_id" name="supplier_group_id" class="full-width " >
                                    </div> 
                                    <div class="col-md-3">
                                        <label class="labelText"><?php print CommonLanguage::getMessage('supplier_class'); ?></label>
                                        <input type="hidden"  id="supp_class_id" name="supp_class_id" class="full-width " >
                                    </div> 
                                    <div class="col-md-3">
                                        <label><?php print CommonLanguage::getMessage('user_name'); ?></label>
                                        <div><input type="text" id="supplier_user_name" autocomplete="off" name="supplier_user_name" class="form-control" autocomplete="off" /></div>
                                    </div>
                                    <div class="col-md-3 pasword-div">
                                        <label><?php print CommonLanguage::getMessage('password'); ?></label>
                                        <div><input type="password" id="supplier_password" autocomplete="off" name="supplier_password" class="form-control" autocomplete="off" /></div>
                                    </div>
                                </div>
                                <div class="row form-group">
                                   
                                   
                                    <div class="col-md-3">
                                    <label><?php print CommonLanguage::getMessage('supplier_additional_number'); ?></label>
                                        <div><input type="text" id="supplier_additional_number" placeholder="<?php print CommonLanguage::getMessage('supplier_additional_number'); ?>"   name="supplier_additional_number" class="form-control"  /></div>
                                    </div>
                                    <div class="col-md-3 ">
                                        <label><?php print CommonLanguage::getMessage('supplier_other_id'); ?></label>
                                        <div><input type="text" id="supplier_other_id" placeholder="<?php print CommonLanguage::getMessage('supplier_other_id'); ?>"  name="supplier_other_id" class="form-control"   /></div>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3 <?php echo smc_session()['default_setting']['activate_autofill_other_amount']==1 ? '': 'hidden'?>">
                                        <label class="labelText"><?php print CommonLanguage::getMessage('other_acc_trans'); ?><span class="fa fa-info-circle" title="<?php echo CommonLanguage::getMessage('other_acc_trans_hint') ?>"></span></label>
                                        <input type="hidden"  id="other_pay_acc_id" name="other_pay_acc_id" class="full-width " >
                                    </div> 
                                </div>
                            </div>
                            <div class="tab-pane slide-left " id="slide2">
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('Name') ?></label>
                                        <span class="red-star">*</span>
                                    </div>
                                    <div class="col-md-2">
                                        <label><?php echo CommonLanguage::getMessage('position') ?></label>
                                        <span class="red-star">*</span>
                                    </div>
                                    <div class="col-md-2">
                                        <label><?php echo CommonLanguage::getMessage('Phone') ?></label>
                                    </div>
                                    <div class="col-md-3">
                                        <label><?php echo CommonLanguage::getMessage('note') ?></label>
                                    </div>
                                </div>
                                <div class="form-group row contact-row"> 
                                    <div  class=" col-md-3 "> 
                                        <input type="text" name="contact_name" autocomplete="off" class="contact_name form-control">
                                    </div> 
                                    <div  class=" col-md-2 "> 
                                        <input type="text" name="contact_position" autocomplete="off" class="contact_position form-control">
                                    </div> 
                                    <div  class=" col-md-2 "> 
                                        <input type="text" name="contact_phone_number" autocomplete="off"  placeholder="" class="contact_phone_number form-control">
                                    </div> 
                                    <div  class=" col-md-3 "> 
                                        <input type="text" name="contact_note"  autocomplete="off" class="contact_note form-control">
                                    </div> 
                                    <div class="col-md-2 AddButtons">
                                        <span class="fa fa-plus m-t-10 m-r-10" ></span>
                                        <span class="fa fa-minus m-t-10" ></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button  class="btn btn-default btn-cons"  data-dismiss="modal" type="button">
                    <span><?php print CommonLanguage::getMessage('Close'); ?></span>
                </button>
                <button class="btn btn-primary btn-cons"   id="Submitsupplier" type="button">
                    <span><?php print CommonLanguage::getMessage('Save'); ?></span>
                </button>
            </div>
            <?php echo Forms::ModalLoader('SupplierrIsBusy'); ?>
        </div>
    </div>
</div>
<script>
    var phone_uset_by_lang ='<?php echo CommonLanguage::getMessage('phone_uset_by') ?>';

    var country_id = <?php echo json_encode(smc_session()['default_setting']['default_country_id']) ?>,
            city_id = <?php echo json_encode(smc_session()['default_setting']['default_city_id']) ?>,
            city_name = <?php echo json_encode(smc_session()['default_city']['Name']) ?>,
            country_name = <?php echo json_encode(smc_session()['default_country']['Country_Name']) ?>;
    $(function () {
        build_select2($("#branch_id"), "xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches");
        build_select2($("#supplier_group_id"), "xhr/general_group_Search?group_type=supp");
        build_select2($("#supp_class_id"), "xhr/general_class_Search?class_type=supp");
        build_select2($("#Currency_ID"), "xhr/CurrencySearch");
        build_select2($("#account_parent_id"), "xhr/acc_subtype_search?type=supp");
        build_select2($("#Supplier_Country"), "xhr/CommonSearch?col_id=Country_ID&col_name=Country_Name&table=tbl_all_countries");
        build_select2($("#City_ID"), "xhr/searchCity?Country_ID=" + $("#Supplier_Country").val());
        build_select2($("#other_pay_acc_id"), ("xhr/accIDSearch?type=Payment"))
        $("#Supplier_Country").on('change', function () {
            $("#City_ID").val('').trigger('change');
            build_select2($("#City_ID"), "xhr/searchCity?Country_ID=" + $("#Supplier_Country").val());
        });
        $('.new_vendor').on('click', function () {
            $("#supplier_modal .add-label,.pasword-div").removeClass('hidden');
            $('#Supplier_Country').val(country_id).attr('data-select-name', country_name).trigger('change');
            $('#City_ID').val(city_id).attr('data-select-name', city_name).trigger('change');
            $('.contact-row:gt(0)').remove();
            $('#supplier_password').val('');
            $('#Currency_ID').val('<?php echo $default_currency['Currency_ID']; ?>').attr('data-select-name', '<?php echo $default_currency['Currency_Name'] . ' - ' . $default_currency['Currency_Code']; ?>').trigger('change');
            $('#Supplier_ID').val('');
        });
        $('.edit_vendor').on('click', function () {
            $("#supplier_modal .edit-label").removeClass('hidden');
            $(".pasword-div").addClass('hidden');
            $('#Supplier_ID').val($(this).attr('data-id'));
            CommonViewById('InventoryAjax/getSupplierDetails', {Supplier_ID: $(this).attr('data-id')},
                    '#SupplierrIsBusy', function (response) {
                        var supplier_main = response['main'],
                                contacts = response['contacts'],
                                current_contact_row = $('#slide2 .contact-row:eq(0)').clone();
                        $('#Supplier_Name').val(supplier_main.Supplier_Name);
                        $('#Supplier_Mobile').val(supplier_main.Supplier_Mobile);
                        $('#Supplier_Email').val(supplier_main.Supplier_Email);
                        $('#Supplier_Address').val(supplier_main.Supplier_Address);
                        $('#supplier_vat').val(supplier_main.supplier_vat);
                        
                        $('#supplier_additional_number').val(supplier_main.supplier_additional_number);
                        $('#supplier_other_id').val(supplier_main.supplier_other_id);

                        $('#Supplier_Work_Phone').val(supplier_main.Supplier_Work_Phone);
                        $('#Supplier_Phone').val(supplier_main.Supplier_Phone);
                        $('#Supplier_Company').val(supplier_main.Supplier_Company);
                        $('#Supplier_CR').val(supplier_main.Supplier_CR);
                        $('#supplier_due_date_period').val(supplier_main.supplier_due_date_period);
                        $('#Supplier_PostalCode').val(supplier_main.Supplier_PostalCode);
                        $('#supplier_user_name').val(supplier_main.user_name);
                        $('#Currency_ID').val(supplier_main.Currency_ID).attr('data-select-name', supplier_main.Currency_Name + ' - ' + supplier_main.Currency_Code).trigger('change')
                        $('#Supplier_Country').val(supplier_main.Country_ID).attr('data-select-name', supplier_main.Country_Name).trigger('change');
                        $('#City_ID').val(supplier_main.City_ID).attr('data-select-name', supplier_main.Name).trigger('change');
                        $('#account_parent_id').val(supplier_main.account_parent_id).attr('data-select-name', supplier_main.account_parent_name).trigger('change');
                        $('#supplier_group_id').val(supplier_main.supplier_group_id).attr('data-select-name', supplier_main.group_name).trigger('change');
                        $('#supp_class_id').val(supplier_main.supplier_class_id).attr('data-select-name', supplier_main.supp_class_name).trigger('change');
                        $('#other_pay_acc_id').val(supplier_main.other_pay_acc_id).attr('data-select-name', supplier_main.other_pay_acc_name).trigger('change');
                        $('#branch_id').val(supplier_main.branch_id).attr('data-select-name', supplier_main.branch_name).trigger('change');

                        if (contacts.length > 0) {
                            $("#slide2 .contact-row").remove()
                            $.each(contacts, function (index, value) {
                                current_contact_row = current_contact_row == null ? $("#slide2 .contact-row:eq(0)").clone() : current_contact_row;
                                $('input[name=contact_name]', current_contact_row).val(contacts[index].contact_name);
                                $('input[name=contact_position]', current_contact_row).val(contacts[index].contact_position);
                                $('input[name=contact_phone_number]', current_contact_row).val(contacts[index].contact_phone_number);
                                $('input[name=contact_note]', current_contact_row).val(contacts[index].contact_note);
                                $("#slide2").append(current_contact_row);
                                current_contact_row = null
                            });
                        }
                    });
        });
        $("#slide2").on("click", ".AddButtons .fa-plus", function (e) {
            var Parent = $(this).parents(".contact-row"), NewItem = Parent.clone().insertAfter(Parent);
            NewItem.find("input").val('');
        });
        $("#slide2").on("click", ".AddButtons .fa-minus", function (e) {
            if ($(".contact-row").length > 1)
                $(this).closest(".contact-row").empty().remove();
        });

        $("#Supplier_Mobile").on("change", function () {
            $.ajax({
            url: "InventoryAjax/check_supplier_phone",
            method: "GET",
            data: {Supplier_Mobile: $("#Supplier_Mobile").val()},
            dataType: 'json',
            complete: function (v1, v2) {
                    if (v2 == 'success') {
                        if(v1.responseJSON.error == 'error'){
                            $("#Submitsupplier").prop('disabled',false)
                            $("#check_phone").text('');

                        }
                        else{
                            $("#Submitsupplier").prop('disabled',true)
                            $("#check_phone").text(phone_uset_by_lang+v1.responseJSON.Supplier_Name);

                        }
                    }
                }
            })
        })

        $("#Submitsupplier").on("click", function () {
            if (!$("#supplierform").valid())
                return;
            var Data = new FormData(document.getElementById("supplierform")), contact_data = [];
            $('.contact-row').each(function () {
                if ($(this).find("input[name=contact_name]").val() && $(this).find("input[name=contact_position]").val()) {
                    contact_data.push({
                        contact_name: $(this).find("input[name=contact_name]").val(),
                        contact_position: $(this).find("input[name=contact_position]").val(),
                        contact_phone_number: $(this).find("input[name=contact_phone_number]").val(),
                        contact_note: $(this).find("input[name=contact_note]").val(),
                    })
                }
            });
            Data.append('contacts', JSON.stringify(contact_data))
            $("#SupplierrIsBusy").removeClass('hidden')
            $.ajax({
                url: "InventoryAjax/submitVendor",
                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, 1, 2, 3, 4, 5, 6], 'InventoryAjax/CustomerListRequest', {IsVendor: true, status_id: $('#vendor_status').val()});
                            hideModalAlert('supplier_modal', 'supplier_alert');
                        }
                        AddAlert("#supplier_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#SupplierrIsBusy").addClass('hidden')
                }
            });
        });
    });

</script>