@extends('layouts.app')
@include('layouts.header')
@section('title', 'Tools')

@section('content')
    <style>
        .mes {
            color: #ed5565;
            list-style-type: none;
        }

    </style>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row equal">

            {{-- ********************************************* PANNELLO IMPORTAZIONE FILES --}}
            <div class="col-lg-12">

                <div class="ibox float-e-margins">

                    {{-- ************** TITOLO --}}
                    <div class="ibox-title">
                        <h1 style="font-size: 35px !important;"><b>IMPORTAZIONE LETTURE DISTRIBUTORE NUOVI FORMATI</b> <small class="m-l-sm"></small></h1>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>

                    {{-- ************** SEZIONE IMPORTAZIONE --}}
                    <div class="ibox-content" id="carica">

                        {{-- ************** DIVIDER --}}
                        <div class="sk-spinner sk-spinner-wave">
                            <div class="sk-rect1"></div>
                            <div class="sk-rect2"></div>
                            <div class="sk-rect3"></div>
                            <div class="sk-rect4"></div>
                            <div class="sk-rect5"></div>
                        </div>

                        <h2>
                            File .XML input da distribuzione<br>
                        </h2>

                        <p>Selezionare i files XML per provvedere al caricamento delle letture (max 20 files)</p>

                        {{-- ************** FORM CARICAMENTO FILES --}}
                        <form method="post" enctype="multipart/form-data">

                            {{-- ************** VALIDAZIONE SESSIONE --}}
                            <input type="hidden" name="_token" value="{{ Session::token() }}" />

                            {{-- ************** SELEZIONE DEI FILES --}}
                            <div class="fileinput fileinput-new input-group {{ $errors->has('file') ? 'has-error' : '' }}"
                                data-provides="fileinput">
                                {{-- <div class="form-control" data-trigger="fileinput"> --}}

                                {{-- ************** DISPLAY CONTATORE DEI FILES SELEZIONATI --}}
                                <div class="form-control" data-trigger="fileinput">
                                    <i class="glyphicon glyphicon-file fileinput-exists"></i>
                                    {{-- <span class="fileinput-filename"></span> --}}
                                    <span id="fileInputCount"></span>
                                </div>

                                {{-- ************** CAMPO CON I NOMI DEI FILES SELEZIONATI --}}
                                <span class="input-group-addon btn btn-primary btn-file"
                                    style="background:#1ab394!important;color:white;">

                                    {{-- ************** TASTI --}}
                                    <span class="fileinput-new">Seleziona files</span>
                                    <span class="fileinput-exists">cambia</span>

                                    {{-- ************** SELETTORE DEI FILES --}}
                                    <input id="fileinput" type="file" accept=".xml" name="file_gestionale[]" multiple
                                        onchange="getFiles() " />

                                </span>


                                <a href="#" class="input-group-addon btn btn-danger fileinput-exists"
                                    data-dismiss="fileinput" onclick="javascript:deleteFiles()">cancella</a>
                            </div>

                            @if ($errors->has('file'))
                                <span class="help-block">
                                    <label class="control-label"
                                        style="color:#ed5565">{{ $errors->first('file') }}</label>
                                </span>
                            @endif

                            <div class="col-md-12">
                                <button id="btn_Conferma" type="submit" class="btn btn-primary btn-lg center-block"
                                    disabled>Conferma</button>
                            </div>

                            <div class="clearfix"></div>

                        </form>

                    </div>

                </div>

            </div>

            {{-- ************** LISTA FILES DA IMPORTARE --}}
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <div id="listafilesDaImportare">
                            <h2><b>Lista file/s da importare</b></h2>
                            <p class="panel-body"><b>Nessun file selezionato</b></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    </div>
@endsection

@section('scripts')
    <script>
        var fileInputCount = 0;

        //Cancelliamo la lista dei file da importare 
        function deleteFiles() {

            var element = document.getElementById('fileInputCount');

            element.innerHTML = "";

            //Cancelliamo il contenuto ogni volta che facciamo l'append della lista dei files da caricare
            $('#listafilesDaImportare').find('.panel-body').empty();
            $('#listafilesDaImportare').find('.panel-body').append('<b>Nessun file selezionato</b>')

            //Disabilitiamo il tasto CONFERMA
            $('#btn_Conferma').prop('disabled', true);

        }

        //Popoliamo la lista dei files da importare
        function getFiles() {
            var element = document.getElementById('fileInputCount');
            var fi = document.getElementById('fileinput');
            var fileInputCount = 0;
            var filesToLoad = ''; //Lista dei file da caricare che passiamo all'input field
            var maxFilesImportabili = 20; //Più di 20 files selezionati il form non li passa ai controller

            // var theFiles = e.target.files;
            // var relativePath = theFiles[0].webkitRelativePath;
            // var folder = relativePath.split("/");
            // alert(folder[0]);

            if (fi.files.length > 0 && fi.files.length <= maxFilesImportabili) {

                //Abilitiamo il tasto CONFERMA
                $('#btn_Conferma').prop('disabled', false);

                fileInputCount = fi.files.length;

                //Popoliamo il DISPLAY CONTATORE DEI FILES SELEZIONATI
                if (fileInputCount == 1) {
                    element.innerHTML = fileInputCount + " file selezionato";
                } else {
                    element.innerHTML = fileInputCount + " files selezionati";
                }

                //Cancelliamo il contenuto ogni volta che facciamo l'append della lista dei files da caricare
                $('#listafilesDaImportare').find('.panel-body').empty();

                //alert('Selected file: ' + fi.files.item(0).name + " Size:" + fi.files.item(0).size + " Type:" + fi.files.item(0).type);
                //console.log(fi.files);

                //Compositiamo la stringa con i nomi dei files da caricare
                for (var i = 0; i <= fi.files.length - 1; i++) {
                    $('#listafilesDaImportare').find('.panel-body').append('<b>' + (i + 1) + ') ' + fi.files.item(i).name +
                        '</b><br>')

                    filesToLoad += fi.files.item(i).name;
                }

            } else { //Se si selezionano più di maxFilesImportabili visualizziamo un alert
                element.innerHTML = fileInputCount + " files selezionati";

                alert("Hai selezionato " + fi.files.length + " files, numero massimo di file importabili " +
                    maxFilesImportabili + ".");
            }
        }
    </script>

@endsection