@extends('ATCore::atcore_layout')

@section('content')
<div class="container">
    <div class="card card-default p-2">

      <div class="panel-body">

        <!-- Standar Form -->
        <h4>Arrastra los archivos a la zona indicada</h4>


        <!-- Drop Zone -->

        <div class="upload-drop-zone" id="drop-zone">
          Solo arrastra y sueltalos aquí
        </div>

        <!-- Progress Bar -->


        <!-- Upload Finished -->
        <div class="js-upload-finished">
          <h3>Detección de Archivos</h3>
          <div class="list-group">
            <span id="span_datos_basicos" class="list-group-item"><span id="span_badge_datos_basicos" class="badge pull-right"></span> Datos Básicos</span>
            <span id="span_firma_digital" class="list-group-item"><span id="span_badge_firma_digital"  class="badge pull-right"></span> Firma Digital</span>
            <span id="span_folios_produccion" class="list-group-item"><span id="span_badge_folios_produccion"  class="badge pull-right"></span> Folios de Producción</span>
          </div>
          <p>

        </div>
      </div>
    </div>
    <form action="{{ route('import_account_step_1') }}" method="post" enctype="multipart/form-data" id="js-upload-form">
        @csrf
        @include('ATCore::atplus_crud.forms.select_options',['label' => '¿Es Certificación?', 'input_name' => 'es_certificacion', 'options' => [1 => 'SI', 2 => 'NO']])
        <div class="form-inline">
          <div class="form-group" style="display: none;">
            <input type="file" name="files[]" id="js-upload-files" multiple>
          </div>

        </div>
    </form>
    <button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit" onclick="enviarArchivos()">Validar Contenido</button>
  </div> <!-- /container -->
@stop

@section ('atplus_main_js')
<script>
    let revDatosBasicos = false;
    let revFirmaDigital = false;
    let revFoliosProduccion = false;

+ function($) {
    'use strict';

    // UPLOAD CLASS DEFINITION
    // ======================

    var dropZone = document.getElementById('drop-zone');
    var uploadForm = document.getElementById('js-upload-form');

    var startUpload = function(files) {


        let i = 0;
        for (i;i<files.length;i++){
            const splitName = files[i]['name'].split('.');
            switch (splitName[splitName.length-1]){
                case 'xlsx': revDatosBasicos = true; break;
                case 'pfx': revFirmaDigital = true; break;
                case 'xml': revFoliosProduccion = true; break;
            }
        }

        if (revDatosBasicos){
            document.getElementById('span_datos_basicos').classList.remove('list-group-item-danger');
            document.getElementById('span_datos_basicos').classList.add('list-group-item-success');
            document.getElementById('span_badge_datos_basicos').classList.remove('alert-danger');
            document.getElementById('span_badge_datos_basicos').classList.add('alert-success');
            document.getElementById('span_badge_datos_basicos').innerHTML = 'Encontrado';
        }else{
            document.getElementById('span_datos_basicos').classList.add('list-group-item-danger');
            document.getElementById('span_badge_datos_basicos').classList.add('alert-danger');
            document.getElementById('span_badge_datos_basicos').innerHTML = 'No Encontrado';
        }
        if (revFirmaDigital){
            document.getElementById('span_firma_digital').classList.remove('list-group-item-danger');
            document.getElementById('span_firma_digital').classList.add('list-group-item-success');
            document.getElementById('span_badge_firma_digital').classList.remove('alert-danger');
            document.getElementById('span_badge_firma_digital').classList.add('alert-success');
            document.getElementById('span_badge_firma_digital').innerHTML = 'Encontrado';
        }else{
            document.getElementById('span_firma_digital').classList.add('list-group-item-danger');
            document.getElementById('span_badge_firma_digital').classList.add('alert-danger');
            document.getElementById('span_badge_firma_digital').innerHTML = 'No Encontrado';
        }
        if (revFoliosProduccion){
            document.getElementById('span_folios_produccion').classList.remove('list-group-item-danger');
            document.getElementById('span_folios_produccion').classList.add('list-group-item-success');
            document.getElementById('span_badge_folios_produccion').classList.remove('alert-danger');
            document.getElementById('span_badge_folios_produccion').classList.add('alert-success');
            document.getElementById('span_badge_folios_produccion').innerHTML = 'Encontrado';
        }else{
            document.getElementById('span_folios_produccion').classList.add('list-group-item-danger');
            document.getElementById('span_badge_folios_produccion').classList.add('alert-danger');
            document.getElementById('span_badge_folios_produccion').innerHTML = 'No Encontrado';
        }
        document.getElementById('js-upload-files').files = files;
    }


    uploadForm.addEventListener('submit', function(e) {
        var uploadFiles = document.getElementById('js-upload-files').files;
        console.log('*********');
        console.log(uploadFiles);
        console.log('*********');
        e.preventDefault()

        startUpload(uploadFiles)
    })

    dropZone.ondrop = function(e) {
        e.preventDefault();
        this.className = 'upload-drop-zone';

        startUpload(e.dataTransfer.files)
    }

    dropZone.ondragover = function() {
        this.className = 'upload-drop-zone drop';
        return false;
    }

    dropZone.ondragleave = function() {
        this.className = 'upload-drop-zone';
        return false;
    }

}(jQuery);


function enviarArchivos(){
    if (revDatosBasicos && revFirmaDigital && revFoliosProduccion){
        console.log(document.getElementById('js-upload-files').files);
        document.getElementById('js-upload-form').submit();
    }else{
        Swal.fire({
            icon: 'error',
            title: 'Es obligatorio incluir los 3 archivos',
            text: 'Deben tener las siguientes extensiones: xlsx, pfx y xml',

        })
    }



}
</script>
@stop

@section('atplus_main_css')
<style>
/* layout.css Style */
.upload-drop-zone {
  height: 200px;
  border-width: 2px;
  margin-bottom: 20px;
}

/* skin.css Style*/
.upload-drop-zone {
  color: #ccc;
  border-style: dashed;
  border-color: #ccc;
  line-height: 200px;
  text-align: center
}
.upload-drop-zone.drop {
  color: #222;
  border-color: #222;
}
</style>
@stop