<div class="container">
    <label for="files">Select files:</label>
    <div class="col-md-12 input-group">

        <input class=" form-control" type="text" id="file-text" disabled/>
        <div class="input-group-btn">
            <label for="files" class="btn btn-default">Browse</label>
            <input id="files" type="file" name="files" class="btn btn-default" multiple style="visibility:hidden;"/>
        </div>
    </div>

    <img src="/public/img/resourcemanager/loading.gif" id="loading_gif" />

    <div class="col-md-10 input-group">
        <label for="types">Language: </label>
        <select class="form-control" id="lang" name="lang">
            <option value="0"></option>
            <option value="ref">Reference</option>
            <?php foreach ($this->mresourcemanager->getPartners() as $partner): ?>
                <?php if ($this->mresourcemanager->tableExist($partner->username)): ?>
                    <option value="<?=$partner->username?>">
                        <?=$partner->name?>
                    </option>
                <?php endif; ?>
            <?php endforeach; ?>
        </select>
    </div>
    <br/>

    <div class="col-md-6">
        <button id="res-import" type="button" name="button" class="btn btn-primary">Import</button>
    </div>

    <div class="col-md-6">
        <button id="res-corr" type="button" name="button" class="btn btn-primary">Resource correct</button>
    </div>
    <br/>
    <br/>
</div>

<div class="container">
    <div id="alert-div" class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>

<script type="text/javascript">
    $('#files').on('change', function() {
        let txt         = '';
        let totalfiles  = document.getElementById('files').files.length;

        for (let i = 0; i < totalfiles; i++) {
            if (i != 0)
                txt += ', ';

            txt += $('#files').prop('files')[i].name;
        }

        $('#file-text').val(txt);
    });

    $('#res-corr').click(function () {
        $('#loading_gif').show();
        $('#files').attr("disabled", true);
        $('#res-import').attr("disabled", true);
        $('#res-corr').attr("disabled", true);

        $.post("/resourcemanager/correctResources", {
            }, function(data, status) {
                let response = JSON.parse(data);

                if (response.updated) {
                    let myToast = Toastify({
                        text: "Update was successful.",
                        duration: 3000,
                        close: true
                    });

                    myToast.showToast();

                    $('#loading_gif').hide();
                    $('#files').removeAttr("disabled");
                    $('#res-import').removeAttr("disabled");
                    $('#res-corr').removeAttr("disabled");
                }
            }
        );
    });

    $("#res-import").click(function() {
        $('#alert-div').hide();
        $('#alert-div').html('');

        let form_data   = new FormData();
        let totalfiles  = document.getElementById('files').files.length;
        let language    = $('#lang').find(":selected").val();

        if (totalfiles === 0) {
            $("#alert-div").append("<p>No file selected</p>");
            $('#alert-div').show();
            return;
        }

        if (language == 0) {
            $("#alert-div").append("<p>No language selected</p>");
            $('#alert-div').show();
            return;
        }

        $('#loading_gif').show();
        $('#files').attr("disabled", true);
        $('#res-import').attr("disabled", true);
        $('#res-corr').attr("disabled", true);

        form_data.append("lang", language);

        for (let i = 0; i < totalfiles; i++)
            form_data.append("files[]", $('#files').prop('files')[i]);

        $.ajax({
            url: '/resourcemanager/importResource',
            dataType: 'text',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response) {
                let obj = jQuery.parseJSON(response);

                console.log(obj);

                $('#loading_gif').hide();
                $('#files').removeAttr("disabled");
                $('#res-import').removeAttr("disabled");
                $('#res-corr').removeAttr("disabled");

                if (obj.notInserted !== 0) {
                    let myToast = Toastify({
                        text: "Import was successfully!",
                        duration: 3000,
                        close: true
                    });

                    myToast.showToast();
                } else {
                    $("#alert-div").append("<p>The following files were not imported:</p>");
                    $("#alert-div").append("<ul id='alert-list'></ul>");

                    for (let i = 0; i < obj.notInserted.length; i++)
                        $("#alert-list").append("<li>"+obj.notInserted[i]+"</li>");

                    $('#alert-div').show();
                }
            }
         });
    });
</script>
