@extends('adminlte::page')

@section('title', $general['title'])

@section('content_header')
  <h1>{{ $general['title'] }}</h1>
@stop

@section('content')
@php
    $ajaxUrl = "/admin/" . $general['cont_name'] . "/" . $parent. "/detalji";
@endphp
<div id="" class="card col-6">
  <div class="card-body justify-content-center align-items-center">
    Očitavanje: <b>{{ $ocitavanje->godina }} {{ $ocitavanje->j_mesec }} {{ $ocitavanje->naziv }}</b>
  </div>
</div>
<div class="">
  <div id="" class="card col-6">
    <div class="card-header">
      <div class="card-title">
        {{ $general['sub_title'] }}
      </div>
      <div class="card-tools">
      </div>
    </div>
    <div class="card-body justify-content-center align-items-center">
      <form id="xmlUploadForm">
        <div class="row">
          <div class="col-12 pb-2">
            <select name="distributer" id="distributer" class="form-control ui search fluid normal dropdown">
              <option value="0">Distributer</option>
              @foreach ($distributeri as $key => $value)
                <option value="{{ $value->id }}">{{ $value->naziv }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-12">
            <div class="form-grp">
              <div class="form-grp-label">
                U slučaju već postojećih vrednosti:
              </div>
              <div class="form-group">
                <input class="form-check-input" type="radio" name="overwrite" id="overwrite1" value="1" checked>
                <label class="form-check-label" for="overwrite1">
                  Prepiši postojeće
                </label>
              </div>
              <div class="form-group">
                <input class="form-check-input" type="radio" name="overwrite" id="overwrite2" value="0">
                <label class="form-check-label" for="overwrite2">
                  Preskoči postojeće
                </label>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="uploadContainer col border">
              <div class="row">
                <div class="imgWrapper col-12 p-2">
                  <div data-type="upload" class="dropzone upl-dropzone dz-clickable" id="upl-dropzone">
                    <div class="dz-message d-flex flex-column">
                      <i class="fa fa-cloud-upload-alt"></i>
                      Drag and drop or click
                    </div>
                    <div class="fallback">
                      <input name="file" type="file" multiple />
                    </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="submit_container" class="d-none form-row pt-2">
          <div class="col-12">
          @csrf
          <button type="submit" class="btn-sm btn-primary submit float-right">Učitavanje</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="spinner_overlay" id="spinner_overlay">
  <div class="w-100 d-flex justify-content-center align-items-center">
    <div class="spinner"></div>
  </div>
</div>
<div class="d-none">
  <div id="previewTPL" class="dz-preview dz-file-preview">
    <div class="dz-details">
      <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
  </div>
</div>
@stop

@section('css')
  <style type="text/css">
  .upl-dropzone {
    border: 2px dashed #dedede;
    border-radius: 5px;
    background: #f5f5f5;
  }
  .upl-dropzone.dz-clickable .dz-message, .upl-dropzone.dz-clickable .dz-message * {
      cursor: pointer;
  }
  .upl-dropzone i{
    font-size: 5rem;
  }
  .dz-message i{
    font-size: 5rem;
    padding-top: 1rem;
  }
  .upl-dropzone .dz-message {
    color: rgba(0,0,0,.54);
    font-weight: 500;
    font-size: initial;
    text-transform: uppercase;
  }
  .dz-drag-hover {
    border: 2px solid #dedede !important;
  }
  .dz-drag-hover .dz-message {
    opacity: 0.5 !important;
  }
  .dz-error-message span {
    color: red;
    font-weight: 400;
  }
  .imgWrapper {
    text-align: center;
  }
    .spinner {
      height: 60px;
      width: 60px;
      margin: auto;
      display: flex;
      position: absolute;
      -webkit-animation: rotation .6s infinite linear;
      -moz-animation: rotation .6s infinite linear;
      -o-animation: rotation .6s infinite linear;
      animation: rotation .6s infinite linear;
      border-left: 6px solid rgba(0, 174, 239, .15);
      border-right: 6px solid rgba(0, 174, 239, .15);
      border-bottom: 6px solid rgba(0, 174, 239, .15);
      border-top: 6px solid rgba(0, 174, 239, .8);
      border-radius: 100%;
    }

    @-webkit-keyframes rotation {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
      }
    }

    @-moz-keyframes rotation {
      from {
        -moz-transform: rotate(0deg);
      }
      to {
        -moz-transform: rotate(359deg);
      }
    }

    @-o-keyframes rotation {
      from {
        -o-transform: rotate(0deg);
      }
      to {
        -o-transform: rotate(359deg);
      }
    }

    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);
      }
    }

    .spinner_overlay {
      position: absolute;
      display: none;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.3);
      z-index: 500;
      cursor: pointer;
    }

    .form-grp .form-group{
      padding-left: 1rem;
    }
    .form-grp .form-group label{
      margin-left: 0.5rem;
    }
    .form-grp-label {
      font-size: 1.1rem;
      font-weight: bold;
      padding-bottom: 0.5rem;
    }
  </style>
  <link href="/vendor/icheck/skins/all.css" rel="stylesheet">
  <link href="/vendor/dropzone/dropzone.css" rel="stylesheet">
@stop

@section('js')
	<script src="/js/jquery.blockUI.js"></script>
  <script src="/vendor/icheck/icheck.js"></script>
  <script src="/vendor/dropzone/dropzone.js"></script>
  <script>
	  var blocked = [];
    var ajaxUrl = '{{ $ajaxUrl }}';
    var queryStr = '{{ $qstring ?? '' }}';
    var dropzone;

    Dropzone.autoDiscover = false;

	  $(document).ready(function() {

      $('input').iCheck({
        checkboxClass: 'icheckbox_square-red',
        radioClass: 'iradio_square-red',
        increaseArea: '30%' // optional
      });

      $(".hiddenAtLoad").removeClass('d-none');

      dropzone = new Dropzone(".upl-dropzone", {
        url: "{{ $ajaxUrl.'/uploadExcel' }}",
        addRemoveLinks: true,
        uploadMultiple: false,
        maxFiles: 1,
        paramName: 'file',
        acceptedFiles: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        accept: function(file, done) {
          blockElement($("#xmlUploadForm"));
          done();
        },
        maxfilesexceeded: function(file) {
          this.removeAllFiles();
          this.addFile(file);
        },
        init: function() {
          this.on("removedfile", function(file) {
            if(this.files.length == 0) {
              $("#submit_container").addClass('d-none');
            }
          });
          this.on("addedfile", function(file) {
          });
          this.on("sending", function(file, xhr, formData) { 
            formData.append("_token", '{{ csrf_token() }}');
            formData.append("type", $(this.element).data('type'));
          });
          this.on("complete", function(file) {
            unBlockAll();
          });
          this.on("success", function(file, response) {
            file.id = response.id;
            $("#submit_container").removeClass('d-none');
          });
          this.on("error", function(file, errorMessage) {
          });
        },
      });
	  });

    $(document).on( 'submit', '#xmlUploadForm', function (e) {
      e.preventDefault();
      blockElement($(this));
      $("#submit_container .submit").attr('disabled','disabled');

      var form = $(this).closest("form");
      form.removeClass('was-validated');
      $.each($('.is-invalid'), function(key, value){
          $(value).removeClass('is-invalid').parent().find('.invalid-feedback').remove();
      });

      var formData = [];
      formData.push({name:'_token', value: '{{ csrf_token() }}'});
      formData.push({name:'files', value: JSON.stringify(dropzone.files)});
      formData.push({name:'distributer', value: $("#distributer").val()});
      formData.push({name:'overwrite', value: $("input[name='overwrite']:checked").val()});

      var data = {msg: null, running: true};
      $.ajax({
          url: ajaxUrl + '/processExcel',
          dataType: "json",
          data: formData,
          type: "POST",
          cache: false,
          success: function (response) {
            unBlockAll();
            $("#submit_container .submit").removeAttr('disabled');
          },
          error: function (response) {
            unBlockAll();
            $("#submit_container .submit").removeAttr('disabled');
            if (response.status == 422) {
              $.each(response.responseJSON.errors, function (i, error) {
                  var el = $(document).find('#'+i);
                  el.addClass('is-invalid');
                  el.after($('<div class="invalid-feedback">'+error[0]+'</div>'));
              });
            }else{
            }
          }
      });

    });

	  function blockElement(element)
	  {
      var bl = $("#spinner_overlay").clone();
      bl.removeAttr('id').appendTo(element);
      bl.css("display","flex");
      blocked.push(bl);
	  }

	  function unBlockAll()
	  {
	    for (var i = blocked.length - 1; i >= 0; i--) {
	      blocked[i].remove();
	    }
	  }
  
  </script>
@stop