@extends('layouts/microfin_layout')
@section('title', '| Loan Application Disburse')
@section('content')
    @include('microfin.loan.stack')
    @stack('formStyleScript')
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">

    <style>
        .token-label {  
            max-width: 1000px !important;  /* width given 1000px because of collaps some string */ 
        }  
    </style>

    <script type="text/javascript">
        $("#loadingModal").show();
    </script>
    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-10 col-md-offset-1 fullbody">
                <div class="viewTitle" style="border-bottom:1px solid white;">
                    <a href="{{ url('mfn/loan/paymentRequest') }}" class="btn btn-info pull-right addViewBtn">
                        <i class="glyphicon glyphicon-th-list viewIcon"></i>
                        Loan Payment Request List
                    </a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">
                            Loan Application Disburse
                        </div>
                    </div>


                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                {!! Form::open(['url' => '#', 'role' => 'form', 'class' => 'form-horizontal form-groups', 'id' => 'rootwizard']) !!}
                                {!! Form::hidden('application_id', $loanApplication->id) !!}



                                <ul class="nav nav-tabs">
                                    <li class="" id="application_nav"><a href="#applicationBB">Application
                                            Information</a>
                                    </li>
                                    <li id="essential_nav"><a href="#essentialBB">Essential
                                            Information</a>
                                    </li>
                                    <li id="photo_nav"><a href="#photoBB">Photo</a></li>
                                </ul>

                                <div class="tab-content">
                                    <div id="application_tab" class="tab-pane fade">
                                        @include('microfin.loan.application.application_tab')
                                    </div>
                                    <div id="essential_tab" class="tab-pane fade">
                                        @include('microfin.loan.application.essential_tab')
                                    </div>
                                    <div id="photo_tab" class="tab-pane fade">
                                        @include('microfin.loan.application.photo_tab')
                                    </div>
                                </div>


                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#loadingModal").hide();
            $('#application_nav').addClass('active');
            $('#application_tab').addClass('in active');
            // $('#essential_nav').addClass('active');
            // $('#essential_tab').addClass('in active');

            $("form").submit(function(event) {
                event.preventDefault();
                $("button").prop("disabled", true);
                var formData = new FormData(this);
                $.ajax({
                        url: "{{ url('mfn/disburse/store') }}",
                        type: 'POST',
                        dataType: "json",
                        contentType: false,
                        data: formData,
                        processData: false,
                    })
                    .done(function(_response) {
                        if (_response.errors) {
                            $.each(_response.errors, function(index, val) {
                                toastr.warning(val, 'Error!', opts);
                            });
                            $("button").prop("disabled", false);
                        } else {
                            if (_response.responseTitle == 'Warning!') {
                                toastr.warning(_response.responseText, _response.responseTitle, opts);
                                $("button").prop("disabled", false);
                            } else {
                                toastr.success(_response.responseText, _response.responseTitle, opts);
                                setTimeout(function() {
                                    window.location.href = "{{ url('mfn/loan/paymentRequest') }}";
                                }, 3000);
                            }
                        }
                    })
                    .fail(function() {
                        alert("response error");
                        $("button").prop("disabled", false);
                    });

            });
        });
    </script>
@endsection