@extends('layouts.app')
@section('title', 'Agency Installment Update')

@section('content')
<div class="container-fluid mt-1">
	<div class="col-lg-12">
        <div class="card shadow-sm">
        	<form method="post" name="addFrm" id="addFrm" role="form" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
	            @csrf
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-2">
                            <label for="name-input" class="col-form-label">File Upload</label><br>
                        <input type="file" name="loan_excel" id="loan_excel" class="drospify" data-height="250" data-parsley-trigger="keyup" accept=".xlsx" data-parsley-fileextension='xlsx' data-parsley-errors-container="#startTimeErrorContainer" data-parsley-trigger="change" required>
                            <div id="startTimeErrorContainer"></div>
                        </div>
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">&nbsp;</label><br>
                            <input type="button" value="Submit" name="submit" id="submit" class="btn btn-primary" onclick="saveData();">
                            <button type="button" class="btn btn-danger">Close</button>
                        </div>
                    </div>
                </div>
             </form>
        </div>
    </div>
     <div class="col-lg-12 d-none" id="success_div">
        <div class="card ">
            <div class="card-header">
                <div class="card-title">
                    <h5 class="modal-title" style="line-height: 1rem;" id="exampleModalLabel">Import Output</h5>
                </div>
            </div>
            <div class="card-body">
                <div id="import_div">

                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<x-alert/>
<script type="text/javascript">
    function saveData()
    {
        if ($("#addFrm").parsley())
        {
            if ($("#addFrm").parsley().validate()) {
            event.preventDefault();
            if ($("#addFrm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('agencyinstallmentupdate') }}",
                    data: new FormData($("#addFrm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {
                            $("#import_div").html("");
                            $("#import_div").html(response.output);
                            $("#success_div").removeClass('d-none');
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success',
                            });

                            $("#addFrm")[0].reset();
                            $("#addFrm").parsley().reset();
                            // setTimeout(function(){  location.reload(); }, 800);

                    },
                    error:function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err +'<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:err,
                            type: 'error',
                            delay: 2000
                        });
                    }
                });
            }
        }
        }
    }
</script>
@endsection