@extends('layouts/microfin_layout')
@section('title', '| Import Regular Loan')
@section('content')
    <style type="text/css">
        .form-control {
            font-size: 11px !important;
            padding: 5px !important;
        }

        label {
            font-size: 11px !important;
        }

        .cbr-replaced {
            top: 8px !important;
        }

        ul.workingAreaOptionsResult {
            list-style-type: none;
        }

        .ui-widget-content {
            padding-left: 5px !important;
            font-size: 11px;
            color: #555;
        }

        .ui-autocomplete {
            padding-left: 0 !important;
        }

        .ui-autocomplete .ui-menu-item {
            padding-left: 5px !important;
        }
        .row.add-data-form {
            min-height: 105vh;
        }
    </style>
    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-8 col-md-offset-2 fullbody">
                <div class="viewTitle" style="border-bottom:1px solid white;">
                    <a href="{{ url('mfn/viewRegularLoan') }}" class="btn btn-info pull-right addViewBtn">
                        <i class="glyphicon glyphicon-th-list viewIcon"></i>
                        Regular Loan Lists
                    </a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">Import Regular Loan</div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="instructions">
                                    <h3>Instructions</h3>
                                    <ol>
                                        <li>
                                            <strong>Download the Template</strong>
                                            <p>Click the "Download Template" button to download the Regular Loan Import
                                                Form.</p>
                                        </li>
                                        <li>
                                            <strong>Fill the Template</strong>
                                            <p>Ensure that the data is entered only within the range of rows A2 to
                                                O{{$rowCount}} in the template. Any data outside this range will not be
                                                processed.</p>
                                        </li>
                                        <li>
                                            <strong>Upload the Template</strong>
                                            <p>Navigate to the upload section in the form. Select the completed template
                                                file and upload it using the provided upload functionality.</p>
                                        </li>
                                    </ol>
                                </div>

                                <hr style="border: 1px solid #ccc; margin: 20px 0;">

                                {{-- link of download Regular Loan template --}}
                                <div class="form-group ">
                                    <label class="col-sm-2 control-label">Template</label>
                                    <div class="col-sm-10">
                                        <a href="{{ url('mfn/generateRegularLoanTemplate/') }}" class="btn btn-info">
                                            <i class="glyphicon glyphicon-download-alt"></i>
                                            Download Template
                                        </a>
                                    </div>
                                </div>

                                <hr style="border: 1px solid #ccc; margin: 20px 0;">

                                {{-- form for import Regular Loan --}}
                                {!! Form::open(array('url' => '', 'id' => 'importRegularLoan', 'role' => 'form', 'class' =>
                                'form-horizontal validate', 'files' => true)) !!}

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Upload File</label>
                                    <div class="col-sm-10">
                                        {!! Form::file('file', ['class' => 'form-control', 'required', 'accept' => '.xlsx']) !!}
                                        <p class="file-errors" style="color: darkred !important;"></p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-10 col-sm-offset-2">
                                        {!! Form::submit('Submit', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
                                        <a href="{{ url('mfn/viewRegularLoan') }}"
                                           class="btn btn-danger closeBtn">Close</a>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        "use strict";

        $(document).ready(function () {
            const fileErrors = $('.file-errors');

            $('#importRegularLoan').submit(function (event) {
                event.preventDefault();

                const formData = new FormData(this);

                $("#submit").prop("disabled", true);
                fileErrors.fadeOut(300, function () {
                    $(this).empty().show();
                });

                $.ajax({
                    type: 'post',
                    url: "{{ url('mfn/importRegularLoan') }}",
                    data: formData,
                    dataType: 'json',
                    processData: false, // Prevent jQuery from automatically processing the data
                    contentType: false, // Prevent jQuery from setting the content type
                    success: function (_response) {
                        if (_response.errors) {
                            toastr.warning(_response.responseText, _response.responseTitle, opts);

                            fileErrors.append("<ul>");
                            Object.keys(_response.errors).forEach(function (key) {
                                const errorMsg = _response.errors[key];
                                if (Array.isArray(errorMsg)) {
                                    // Add each error in the array to the list view
                                    errorMsg.forEach(function (msg) {
                                        fileErrors.append('<li><small>' + msg + '</small></li>');
                                        // Show a toast for each specific error
                                        toastr.warning(msg, 'Validation Error', opts);
                                    });
                                } else {
                                    // Handle non-array error messages
                                    fileErrors.append('<li><small>' + errorMsg + '</small></li>');
                                    toastr.warning(errorMsg, 'Validation Error', opts);
                                }
                            });
                            fileErrors.append("</ul>");
                        } else if (_response.responseTitle === 'Warning!') {
                            toastr.warning(_response.responseText, _response.responseTitle, opts);
                        } else {
                            toastr.success(_response.responseText, _response.responseTitle, opts);

                            setTimeout(function () {
                                window.location.href = `{{ url('mfn/viewRegularLoan') }}`;
                            }, 3000);
                        }
                    },
                    error: function (_response) {
                        const errors = _response.responseJSON.errors || {};
                        alert(errors);

                        fileErrors.append("<ul>");
                        Object.keys(errors).forEach(function (key) {
                            fileErrors.append('<li><small>' + errors[key] + '</small></li>');
                        });
                        fileErrors.append("</ul>");
                    },
                    complete: function () {
                        $("#submit").prop("disabled", false);
                    }
                });

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