@using Alpha.UtilidadesMariano.GeneralLIb.Util
@{
    ViewBag.Title = "UploadFiles";
    Layout = "";
}
<html>
<head>
    <title>Subir archivos</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
        }

        input[type="file"] {
            position: absolute;
            left: -99999%;
        }

        label.fileLabel, input[type="submit"] {
            margin-top: 10px;
            box-shadow: 0px 0px 3px 0px #1c1b18;
            background: linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
            background-color: #4CAF50;
            border-radius: 15px;
            border: 1px solid #333029;
            display: inline-block;
            cursor: pointer;
            color: #505739;
            font-size: 14px;
            font-weight: bold;
            padding: 8px 10px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #b5b5b5;
        }

        label.fileLabel:focus {
            outline: 1px dotted #000;
        }
    </style>
</head>
<body>
    <h2 id="title">Subir archivos</h2>
    @{ 
        var CsvAllowedExtensions = ViewBag.Inner ? ".txt, .pdf, .xls, .xlsx" : ".txt";
    }
    <form id="formUpload">
        <input type="hidden" id="Ip" name="Ip" value="@ViewBag.Ip" />
        <input type="hidden" id="Inner" name="Inner" value="@ViewBag.Inner.ToString()" />
        <label id="fileLabel" class="fileLabel">
            <span>Haga click aquí para seleccionar los archivos</span>
            <input type="file" accept="@CsvAllowedExtensions" multiple id="file" name="file" />
        </label>
        <br />
        <input style="display:none;" id="upload" type="submit" value="Subir archivos" />
        <br />
        <label style="color: blue" id="labelExtensions">Extensiones permitidas: @CsvAllowedExtensions</label>
        <label style="display: none; color: green" id="labelExito">Los archivos se han subido exitosamente</label>
        <label style="display: none; color: red" id="labelError">Hubo un error al subir los archivos</label>
    </form>
    <script type="text/javascript">
        document.getElementById('file').onchange = (e) => { document.getElementById('upload').style = ""; document.getElementById('labelExito').style.display = 'none'; document.getElementById('labelError').style.display = 'none'; }
        var domReady = function (callback) {
            document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
        };
        domReady(function () {
            @if(ViewBag.Ip == null)
            {
                @:document.getElementById('fileLabel').style.display = 'none';
                @:document.getElementById('title').innerText = 'Error';
            }
            var labels = document.querySelectorAll('.fileLabel');
            Array.prototype.forEach.call(labels, function (label) {
                var input = label.querySelector('input[type="file"]'),
                    span = label.querySelector('span');
                var textoSpanDefecto = span.innerHTML;
                input.addEventListener('change', function (e) {
                    var texto;
                    if (this.files && this.files.length > 1)
                        texto = this.files.length + ' archivos seleccionados';
                    else {
                        texto = e.target.value.split('\\').pop();
                        if (!texto) {
                            texto = textoSpanDefecto;
                        }
                    }
                    span.innerHTML = texto;
                });
            });

            document.getElementById('formUpload').addEventListener('submit', function (e) {
                var formData = new FormData(this);
                var request = new XMLHttpRequest();
                @{var Url = ViewBag.Inner ? "http://192.168.238.114/coordinador/api/File/VmUpload" : "https://cabinas.sintia.com.ar/coordinador/api/File/VmUpload"; }
                request.open('POST', '@Url');
                request.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        if (this.status === 200) {
                            document.getElementById('labelExito').style.display = 'block';
                            document.getElementById('labelError').style.display = 'none';
                            @{if (!ViewBag.Inner) {
                                    @:setTimeout(() => goToAction('Outer/ListFiles', { Ip: '@ViewBag.Ip', Inner: '@ViewBag.Inner' }), 2000);
                            }}
                        } else {
                            document.getElementById('labelExito').style.display = 'none';
                            document.getElementById('labelError').style.display = 'block';
                        }
                    }
                };
                request.send(formData);
                e.preventDefault();
                e.stopPropagation();
            });
        });
        function goToAction(action, queryParameters) {
            var Parameters = buildSearchParams(queryParameters);
            var url = location.protocol + '//' + location.host + '/' + getCurrentControllerName() + '/' + action + "?" + Parameters.toString();
            window.location.href = url;
        }
        function buildSearchParams(queryParameters) {
            if (!queryParameters)
                return null;
            var Parameters = new URLSearchParams();
            Object.keys(queryParameters).forEach(e => Parameters.append(e, queryParameters[e]));
            return Parameters;
        }
        function getCurrentControllerName() {
            var url = window.location.pathname.split("/");
            return url[1];
        }
        //document.addEventListener('contextmenu', event => event.preventDefault());
    </script>
</body>
</html>
