@extends('layouts.app')
@section('title', 'Escrow Amount Upload')

@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-12 text-center">
                            <h5>Escrow Amount Update</h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <label for="name-input" class="col-form-label">Select State <span style="color:red">*</span></label><br>
                            <select name="stateid" id="stateid" class="form-control" onchange="getstateagencies(this.value);" required>
                               <option value="">Select State</option>
                                                           </select>
                        </div>
                        <div class="col-lg-2">
                            <label for="name-input" class="col-form-label">Select Agency <span style="color:red">*</span></label><br>
                            <select name="agencyid" id="agencyid" class="form-control" required>
                               <option value="">Select Agency</option>
                            </select>
                        </div>
                        <div class="col-lg-2">
                            <label for="name-input" class="col-form-label">File Upload <span style="color:red">*</span></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 mt-4">
                            <label for="name-input" class="col-form-label">&nbsp;</label>
                            <input type="button" value="Upload Amounts" name="submit" id="submit" class="btn btn-primary" onclick="saveData();">
                        </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 getstateagencies(stateid)
    {
        $.ajax({
            type: "POST",
            url: "{{route('getstateagencylist')}}",
            data: { "_token": "{{ csrf_token() }}",
                    "stateid":stateid
                },
            success: function(html)
            {
                $("#agencyid").html("");
                $("#agencyid").html(html);
            }
            });
    }
    function saveData()
    {
        if ($("#addFrm").parsley())
        {
            if ($("#addFrm").parsley().validate()) {
            event.preventDefault();
            if ($("#addFrm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('escrowuploadamount') }}",
                    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