{% extends 'base.html.twig' %}

{% block body %}
<header class="client-time">
    <h1 class="modal-title">{{title}}</h1>
</header>

<!--
<div class="modal-header">
  {# <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> #}
  <h3 class="modal-title">Import Excel</h3>
</div>
</div>
-->

{{ form_start(form, { "action": path("importfromOnedrive") }) }}


<div class="modal-body">
  {{ form_errors(form) }}
  {% for message in app.flashes('success') %}
            <div class="alert alert-success" style="margin-bottom: 15px;">
                {{ message }}
            </div>
  {% endfor %}

    {% for flashMessage in app.flashes('warning') %}
        <div class="alert alert-warning" style="margin-bottom: 15px; padding: 10px;">
            {{ flashMessage|raw }}
        </div>
    {% endfor %}


 {#  {{ form(form)}}

  <div class="row">
    <div class="col-md-12 form-group">{{ form_label(form.reportTo) }} {{ form_widget(form.reportTo) }} not used  <a data-toggle="modal" href="{{ path('report_to_new_candidate')}}" data-target="#mainModal" class="btn btn-sm btn-info">Report To</a> </div>
  </div>
 #}

  <div class="row">
    <div class="col-md-12 form-group">{{ form_label(form.onedriveUrl) }} {{ form_widget(form.onedriveUrl) }}</div>
    <div class="col-md-12 form-group">{{ form_label(form.targetId) }} {{ form_widget(form.targetId) }}</div>    
    <div class="col-md-12 form-group">{{ form_label(form.informationType) }} {{ form_widget(form.informationType) }}</div>

  </div>



{% if is_granted('ROLE_ADMIN') %}
  {#  #}
{% endif %}

<div class="modal-footer">
  <button class="btn btn-sm btn-success" type="submit" id="ajaxModalFormSubmitBtn" disabled>Import</button>
  <a  href="{{ path('candidates')}}"   class="btn btn-sm" ><button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button></a>
</div>
{{ form_end(form) }}

  <div class="row">
    <div class="col-md-12 form-group">{{ excel_content | raw }}</div>
  </div>

<style>
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1000;
  width: 70px;
  height: 70px;
  margin: -26px 0 0 -26px;
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #ac1313;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: none;
  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
  z-index: 1000;
}

.full-height1{
  opacity:    0.2; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
  display: none;
    
}

</style>


<div id="loader"></div> 
<div id="myDiv" >
    <p></p>
    <h2>Import in progress...</h2>
</div>
<div class="full-height1"></div>


<script>
$(document).ready(function(){
  if(typeof(tinyMCE) !== 'undefined') {
    var length = tinyMCE.editors.length;
    for (var i=length; i>0; i--) {
      tinyMCE.editors[i-1].remove();
    };
  }
  tinyMCE.init({
      selector:'textarea.tinymce',
    remove_linebreaks: true,
    convert_newlines_to_brs: false,
    entity_encoding: 'raw',
    entities: '160,nbsp,38,amp,60,lt,62,gt',});
});
</script>

<script type="text/javascript">

$('.btn').click(function(){
    $("#form_reportTo option").each(function(i){
        $(this).attr('value',$(this).attr('value').trim());
    });
});



 $('#clearReport').click(function() {
  console.log($("#form_reportTo option:selected").val());
  if($("#form_reportTo").has('option').length > 0 && $("#form_reportTo option:selected").val() != '')
  {
    if (confirm('Are you sure that you want to clear the Report To ?')) {
     $("#form_reportTo").html('<option value> Please select a candidate. </option>');
    };
  }else{
    alert('no data is given!');
  }

});



$( "form[name='import']").submit(function( event ) {
    $("#loader").css("display", "block");
    $("#myDiv").css("display", "block");
    $(".full-height1").css("display", "block");
});


</script>

<script type="text/javascript">
$('#import_targetId').select2({
  ajax: {
    url: "{{ path('assignments_list.json') }}",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, page) {
      return { results: data };
    },
    cache: true
  },
  minimumInputLength: 0,
  placeholder: 'Select the Assignment',
  allowClear: true
  // templateResult: formatTemplateResult,
  // templateSelection: formatTemplateResultSelection,
}).on('change', function (e) {
  $('#ajaxModalFormSubmitBtn').attr('disabled', $(this).val() == '');
});

</script>

<style>

.select2-container {
    width: 100%!important;
    height: 36px!important;
}


</style>

{% include 'include/insert_form_js.html.twig' %}


{% endblock %}