<div class="modal fade" id="customer_modal" role="dialog" aria-labelledby="ModalLabel" 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 text-left bold hidden"><?php echo CommonLanguage::getMessage('add_customer'); ?></h5>
                <h5 class="edit-label h-labels text-left bold hidden"><?php echo CommonLanguage::getMessage('edit_customer'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row">  <?php echo Forms::AlertDiv('customer_alert'); ?></div>
                <form id="customer_form" method="POST" onsubmit="return false">
                    <input type="hidden" name="organization_id" id="organization_id">
                    <div class="row form-group">
                        <div class="col-md-3">
                            <label for="name-input"><?php print CommonLanguage::getMessage('customer_name'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" id="organization_customer_name" name="organization_customer_name" class="form-control" required />
                        </div>
                        <div class="col-md-3">
                            <label for="mobile-input"><?php print CommonLanguage::getMessage('Phone'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" id="orgaization_mobile_phone" name="orgaization_mobile_phone" class="form-control" required />
                        </div>
                        <div class="col-md-3">
                            <label for="workphone-input"><?php print CommonLanguage::getMessage('second_phone'); ?></label>
                            <input type="text" id="orgaization_work_phone" name="orgaization_work_phone" class="form-control" />
                        </div>
                        <div class="col-md-3">
                            <label for="email-input"><?php print CommonLanguage::getMessage('Email'); ?></label>
                            <input type="email" id="organization_email" name="organization_email" class="form-control empty" />
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-3">
                            <label><?php print CommonLanguage::getMessage('country'); ?></label>
                            <input type="hidden" value="120" data-select-name="Lebanon"  name="country_id" id="country_id" class="full-width"/>
                        </div>
                        <div class="col-md-3" >
                            <label><?php print CommonLanguage::getMessage('city'); ?></label>
                            <input type="hidden" value="2438" data-select-name="Beirut"  name="city_id" id="city_id" class="full-width"/>
                        </div>
                        <div class="col-md-3">
                            <label for="address-input"><?php print CommonLanguage::getMessage('address'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" id="organization_address" name="organization_address" class="form-control"  required />
                        </div>
                        <div class="col-md-3">
                            <label><?php print CommonLanguage::getMessage('customer_group'); ?></label>
                            <input type="hidden"   name="organization_group_id" id="organization_group_id" class="full-width"/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-3">
                            <label><?php print CommonLanguage::getMessage('job_desc'); ?></label>
                            <input type="text"  id="job_description" name="job_description" class="form-control" >
                        </div>
                        <div class="col-md-3">
                            <label><?php print CommonLanguage::getMessage('region'); ?></label>
                            <input type="hidden"  id="region_id" name="region_id" class="full-width " >
                        </div>

                        <div class="col-md-3">
                            <label><?php print CommonLanguage::getMessage('longitude'); ?></label>
                            <input type="number" value=""  name="organization_longitude" id="organization_longitude" class="form-control"/>
                        </div>
                        <div class="col-md-3" >
                            <label><?php print CommonLanguage::getMessage('latitude'); ?></label>
                            <input type="number"   name="organization_latitude" id="organization_latitude" class="form-control"/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-3">
                            <label for="name-input"><?php print CommonLanguage::getMessage('contact_name'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" id="contact_name" name="contact_name" class="form-control" required />
                        </div>
                        <div class="col-md-3">
                            <label for="email-input"><?php print CommonLanguage::getMessage('contact_email'); ?></label>
                            <input type="email" id="contact_email" name="contact_email" class="form-control empty" />
                        </div>
                        <div class="col-md-3">
                            <label for="workphone-input"><?php print CommonLanguage::getMessage('contact_work_phone'); ?></label>
                            <input type="text" id="contact_work_phone" name="contact_work_phone" class="form-control" />
                        </div>
                        <div class="col-md-3">
                            <label for="mobile-input"><?php print CommonLanguage::getMessage('contact_mobile_phone'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" id="contact_mobile_phone" name="contact_mobile_phone" class="form-control" required />
                        </div>
                    </div>
                    <div class="row m-t-10 form-group">                  
                        <div class="col-md-3">     
                            <label class="">Allowed File Extensions: .jpg, .gif, .jpeg, .png, .pdf, .txt, .csv,  .zip, .log, .docx</label>

                            <input type="file" id="customer_attachments" class="form-control" name="customer_attachments[]" multiple onchange="ValidateForNewAttachment(this,['.jpg', '.gif', '.jpeg', '.png', '.pdf', '.txt', '.csv',  '.zip', '.log', '.docx'])">
                            <div class="display-flex customer_attachments_div" >
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('cancel'); ?></button>
                <button style="color:white !important;" id="submit_customer" class="btn bg-complete-dark"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
        </div>
        <?php echo Forms::ModalLoader('customer_loader'); ?>
    </div>
</div>
<script>
    var deleted_attachments = [];
    $(function(){
        build_select2($("#country_id"), "xhr/CommonSearch?col_id=Country_ID&col_name=Country_Name&table=tbl_all_countries"); 
        build_select2($("#city_id"), "xhr/searchCity?Country_ID="+$("#country_id").val());
        build_select2($("#region_id"), "xhr/CommonSearch?col_id=region_id&col_name=region_name&table=tbl_regions");
        $("#add_customer").on("click",function(){
            deleted_attachments = [];
            $("#organization_id").val(0);
            $('#customer_modal .add-label').removeClass('hidden');
            $('#country_id').val(120).attr('data-select-name','Lebanon').trigger('change');
            $('#city_id').val(2438).attr('data-select-name','Beirut').trigger('change');
            $('.customer_attachments_div').empty();
        });
        $("#country_id").on('change',function(){
            $("#city_id").val('').trigger('change');
            build_select2($("#city_id"), "xhr/searchCity?Country_ID="+$("#country_id").val());
        });
        $("#tableWithSearch").on("click",".edit_customer",function(){
            deleted_attachments = [];
            var organization_id = $(this).attr("data-id")
            $('#customer_modal .edit-label').removeClass('hidden');
            $("#organization_id").val(organization_id)
            CommonViewById("crmAjax/getCustomerData",{organization_id:organization_id},'#customer_loader',function(response){
                var Keys = Object.keys(response[0][0])
                $.each(Keys, function (key, value) {
                    $('#' + value).val(response[0][0][value])
                });
                if(response[1].length> 0){
                    var Key2 = Object.keys(response[1][0])
                    $.each(Key2, function (key, value) {
                        $('#' + value).val(response[1][0][value])
                    });
                }
                $('#region_id').val(response[0][0].region_id).attr('data-select-name',response[0][0].region_name).trigger('change');
                $('#country_id').val(response[0][0].Country_ID).attr('data-select-name',response[0][0].Country_Name).trigger('change');
                $('#city_id').val(response[0][0].city_id).attr('data-select-name',response[0][0].Name).trigger('change');
                $('#organization_group_id').val(response[0][0].organization_group_id).attr('data-select-name',response[0][0].group_name).trigger('change');
                $('.customer_attachments_div').html(response[2]);
            })
        });
        $("#submit_customer").on("click", function () {
            if (!$("#customer_form").valid())
                return;
            $("#customer_loader").removeClass('hidden');
            var Data = new FormData(document.getElementById("customer_form"));
            Data.append('deleted_attachments', JSON.stringify(deleted_attachments));
            $.ajax({
                url: "crmAjax/submitCustomer",
                method: "POST",
                data: Data,
                processData: false,
                contentType: false,
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            changeTable();
                            hideModalAlert('customer_modal', 'customer_alert');
                        }
                        AddAlert("#customer_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#customer_loader").addClass('hidden');
                }
            });
        });
        $('.customer_attachments_div').on('click', '.delete_attachment', function () {
            deleted_attachments.push($(this).closest('.main_attachment_row').attr('data-attachment-name'));
            $(this).closest('.main_attachment_row').remove();
        });
    });
</script>
