<div class="modal fade" id="form_vehicle_modal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><%= _("Documents") %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <% Document::FILES_CATEGORIES.each do |category| %>
        <div class="p-5">
          <h6 style="font-weight: bold"><%= category.upcase.gsub("_", " ") %></h6>
          <%= form_for @document, url: group_vehicle_save_documents_path(@group, @vehicle), html: {class: "dropzone", id: "dropzone_#{category}"} do |f| %>
            <div class="fallback" >
              <%= f.file_field :path %>
            </div>
          <% end %>
          <hr>
        </div>
        <script>
            $(function(){
                let dropzoneInstance = new Dropzone($("#dropzone_<%= category %>").get(0));
                dropzoneInstance.options.paramName = "document[path]";
                dropzoneInstance.options.maxFiles = 1;

                dropzoneInstance.on('error', function(file, response) {
                    if(response.path){
                        let errors = "";
                        for(let i in response.path){
                            errors += " " + response.path[i];
                        }
                        $(file.previewElement).find('.dz-error-message').text(errors);
                    }
                    let elm  = $(".dz-image-preview");
                    elm.removeClass("dz-image-preview");
                    elm.addClass("dz-file-preview");

                });

                dropzoneInstance.on("addedfile", function(file) {
                    if (this.files[1]!=null){
                        this.removeFile(this.files[0]);
                    }
                });

                dropzoneInstance.on("success", function(file, response) {
                    addLinkToDownloadFile(file, response.path.url, "<%= category %>");
                });

                dropzoneInstance.on("complete", function(file) {
                    if(file.prevUpload){
                        addLinkToDownloadFile(file, file.path.url, "<%= category %>");
                        this.files.push(file);
                    }
                });

                if(<%= @files.has_key? category %>){
                    let mockFile = {
                        name: "<%= @files[category][:name] if @files.has_key? category %>",
                        size: "<%= @files[category][:size] if @files.has_key? category %>",
                        status: "<%= @files[category][:status] if @files.has_key? category %>",
                        prevUpload: true,
                        path: {
                            url: "<%= @files[category][:path] if @files.has_key? category %>"
                        }
                    };

                    dropzoneInstance.emit("addedfile", mockFile);
                    dropzoneInstance.emit("complete", mockFile);
                }

                dropzoneInstance.on('sending', function(file, xhr, formData){
                    formData.append('document[file_category]', '<%= Document::file_categories[category.to_sym] %>');
                });
            });
        </script>
      <% end %>
    </div>
  </div>
</div>

<script>
  hideLoadingImg();
  $('#form_vehicle_modal').on("hidden.bs.modal", function () {
    showLoadingImg();
    $.get("<%= group_vehicles_path @group %>.js?<%= request.query_parameters.to_query %>", function(){
      hideLoadingImg();
      loadHideColumnSelectorTable();
    });
  });
  setTimeout("$('.nav.nav-tabs .nav-item:last-child a:last-child').click();$('.nav.nav-tabs .nav-item:first-child a:first-child').click();", 300);

  function addLinkToDownloadFile(file, url, category){
      let previeTemplate = $(file.previewTemplate);
      let btn = previeTemplate.find(".download-link");
      btn.attr("href", url);
      btn.show();
  }
  Dropzone.prototype.defaultOptions.dictFallbackMessage = "Su navegador no admite la carga de archivos de arrastrar y soltar.";
  Dropzone.prototype.defaultOptions.dictFallbackText = "Utilice el siguiente formulario de respaldo para cargar sus archivos como en los viejos tiempos.";
  Dropzone.prototype.defaultOptions.dictFileTooBig = "El archivo es demasiado grande ({{filesize}} MiB). Tamaño máximo de archivo: {{maxFilesize}} MiB.";
  Dropzone.prototype.defaultOptions.dictInvalidFileType = "No puedes subir archivos de este tipo.";
  Dropzone.prototype.defaultOptions.dictResponseError = "El servidor respondió con el código {{statusCode}}.";
  Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancelar carga";
  Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "¿Estás seguro de que deseas cancelar esta carga?";
  Dropzone.prototype.defaultOptions.dictRemoveFile = "Eliminar";
  Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "No puedes subir más archivos.";

  Dropzone.prototype.defaultOptions.previewTemplate = `
	<div class="dz-preview dz-file-preview">
	   <div class="dz-image"></div>
	   <div class="dz-details">
		  <div class="dz-filename"><span data-dz-name></span></div>
		  <div class="dz-size"><span data-dz-size></span></div>
		  <div class="content-buttons-candidate without-border">
			<a href="javascript:void(0)" target="_blank" class='btn-upload btn border-radius white download-link'>
				<i class="fas fa-sync-alt primary-color"></i>
				Descargar
			</a>
			<a href="javascript:void(0)" onclick="uploadNewFile(this)" class='btn-upload btn border-radius white'>
				<i class="fas fa-sync-alt primary-color"></i>
				Actualizar
			</a>
		  </div>
	   </div>
	   <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
	   <div class="dz-success-mark">
	   </div>
	   <div class="dz-pending-mark">

	   </div>
	   <div class="dz-error-mark">
		  <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 286.054 286.054" style="enable-background:new 0 0 286.054 286.054;" xml:space="preserve">
			<g>
				<path style="fill:#E2574C;" d="M143.027,0C64.04,0,0,64.04,0,143.027c0,78.996,64.04,143.027,143.027,143.027   c78.996,0,143.027-64.022,143.027-143.027C286.054,64.04,222.022,0,143.027,0z M143.027,259.236   c-64.183,0-116.209-52.026-116.209-116.209S78.844,26.818,143.027,26.818s116.209,52.026,116.209,116.209   S207.21,259.236,143.027,259.236z M143.036,62.726c-10.244,0-17.995,5.346-17.995,13.981v79.201c0,8.644,7.75,13.972,17.995,13.972   c9.994,0,17.995-5.551,17.995-13.972V76.707C161.03,68.277,153.03,62.726,143.036,62.726z M143.036,187.723   c-9.842,0-17.852,8.01-17.852,17.86c0,9.833,8.01,17.843,17.852,17.843s17.843-8.01,17.843-17.843   C160.878,195.732,152.878,187.723,143.036,187.723z"/>
			</g>
		  </svg>
	   </div>
	   <div class="dz-error-message"><span data-dz-errormessage></span></div>
	</div>
`;


  Dropzone.prototype.defaultOptions.dictDefaultMessage = `
	<div class="content-buttons-candidate without-border">
		<p class="text-box">Arrastra los archivos aquí para subirlos</p>
		<a href="javascript:void(0)" class='btn-upload btn border-radius white'>
			<i class="fas fa-cloud-upload-alt primary-color"></i>
			Subir un archivo
		</a>
	</div>
`;

  function uploadNewFile(elm){
      $(elm).parent().parent().parent().parent().click();
  }
</script>
