{!! Form::open(array('url' => 'banks/upi-bank/save', 'id' => 'newbank-form', 'class' => 'm-form m-form--fit m-form--label-align-right', 'autocomplete' => 'on', "enctype"=>"multipart/form-data")) !!}

<div class="m-scrollable" data-scrollbar-shown="true" data-scrollable="true" data-height="500px">
    <div id="msg"> </div>
    
    <input type="hidden" id="id" name="id" value="{{ isset($bank->id) ? Hasher::encode($bank->id)  : '0'}}">
    <input type="hidden" id="qr_code" name="qr_code" value="{{ isset($detail->image) ? $detail->image : ''}}">
    
    <div class="form__heading">
        <h3 class="form__heading-title m--font-info mb-4">Bank Details</h3>
    </div>

    <div class="col-md-11  alert alert-danger alert-dismissible fade show print-error-msg m-alert m-alert--air" role="alert" style="display: none; margin-left: 18px;">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
        <ul class="db_error"></ul>
    </div>
    
    {{ Form::CtText('name',(isset($bank->name) ? $bank->name : ''),['required'],'Bank Name','*') }}

    {{ Form::CtText('upi_id',(isset($detail->upi_id) ? $detail->upi_id : ''), ['required'],'UPI Id','*') }}

    <div class="form-group">
        <label for="">Upload QR Code:</label>
        <div class="custom-file">
            {{ Form::file('image', array('class'=>'custom-file-input' ,'id'=>'customFile1', 'accept'=>'image/x-png,image/png,image/jpeg' )) }}
            <label class="custom-file-label file-name" for="customFile2">Choose file</label>
        </div>
        <span class="m-form__help">Supported File Type: jpeg, png</span>
    </div>

</div>

{{ Form::close() }}
<!--end::Modal-->


<script type="text/javascript">

    $("#newbank-form").validate({
        rules: {
            name: {
                required: true
            },
            upi_id: {
                required: true
            },
            image: {
                required: function(element){
                    return $("#id").val() == "";
                },
                extension: "jpeg,jpg,png"
            },
        },
        messages: {
            image: {
                required: "Please Select File",
                extension: "Please Upload Jpeg,Jpg,Png"
            },
        }
    });

    $('#newbank-form').on('submit', function(event){
        event.preventDefault();
        $.ajax({
            url:base_url+"/banks/upi-bank/save",
            method:"POST",
            data:new FormData(this),
            dataType:'JSON',
            contentType: false,
            cache: false,
            processData: false,
            beforeSend : function() {
                $.blockUI({ message: '<img src="{{ URL::to("images/loading.svg") }}" height="100%" width="100%" />', css: { border:'none', backgroundColor:'transparent' , top: '0%' , bottom: '0%'} });
            },
            success : function (data) {
                if(data.success) {        //Success Message
                    swal(data["success"], data[0], "success")
                    .then((isOK) => {
                        (mApp.unblock('.modal-content'), true);
                        eModal.close();
                        $('#upi-banks').DataTable().ajax.reload();
                    });
                    $('#newbank-form').clearForm();
                }
                else if(data.error){
                    swal(data["error"], data[0], "error")
                    .then((isOK) => {
                        (mApp.unblock('.modal-content'), true);
                        table.ajax.reload(mApp.unblock("#newbank-form"), false);
                    });
                }
                else if(data.validation) {
                    printErrorMsg(data.validation);
                    (mApp.unblock('.modal-content'), true);
                }
            },
           
            complete: function () {
                $.unblockUI();
            },
            // for modal blocking
            
        })
         mApp.block('.modal-content', {
                    overlayColor: '#000000',
                    type: 'loader',
                    state: 'success',
                    message: 'Please Wait...'
            });
    });

    // *****  Backend Error Validation Start   ***** //
    function printErrorMsg (msg) {
        $(".print-error-msg").find("ul").html('');
        $(".print-error-msg").css('display','block');
        $.each( msg, function( key, value ) {
            $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
        });

    }
    // *****  Backend Error Validation End   ***** //

    $('#customFile1').change(function() {
        var file = $('#customFile1')[0].files[0].name;
        $('.file-name').text(file);
    });

    
    //****************** Clear Form After Submit the Form START ************//
    $.fn.clearForm = function() {
        return this.each(function() {
            var type = this.type, tag = this.tagName.toLowerCase();
            if (tag == 'form')
                return $(':input',this).clearForm();
            if (type == 'text' || type == 'password' || tag == 'textarea' || type == 'email')
                this.value = '';
            else if (type == 'checkbox' || type == 'radio')
                this.checked = false;
            else if (tag == 'select')
                this.selectedIndex = -1;
        });
    };
    //****************** Clear Form After Submit the Form END ************//


</script>