@extends('layouts.archives_panel')

@section('title') Archives @stop

@section('CSS') 


<link rel="stylesheet" type="text/css" href="{{url('/')}}/js/datatables/dataTables.bootstrap4.min.css">

<style type="text/css">
.figure-attachment {
    min-height: 100px;
}
.fa-lg {
  font-size: 36px !important;
}
</style>

@stop

@section('JS') 


<script src="{{url('/')}}/js/datatables/jquery.dataTables.min.js"></script>
<script src="{{url('/')}}/js/datatables/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript" class="init">
  $(document).ready(function() {
    $("#example").dataTable({ "language": { "url": "{{ url('/') }}/js/datatables/lang/fr.json" }
    });
  });
  </script>



<script type="text/javascript">
$(document).ready(function(){

    $("#FormID").submit(function(evn){

        evn.preventDefault();

                    $('.resp-div').css('display', 'block');
                    $('.myprogress').css('width', '0%');
                    $('.msg').text('');

                    var file_name = $('#file_name').val();
                    var description = $('#description').val();
                    var myfile = $('#myfile').val();
                    var folder_id = $('#folder_id').val();

                    var formData = new FormData();

                    formData.append('file', $('#file')[0].files[0]);
                    formData.append('file_name', file_name);
                    formData.append('description', description);
                    formData.append('folder_id', folder_id);
                    

                    $('#submit').css('display', 'none');
                    $('.msg').text('Téléchargement en cours ...');

                    $.ajax({
                        url: '{{ URL::route("archive_store") }}',
                        data: formData,
                        processData: false,
                        contentType: false,
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        // this part is progress bar
                        xhr: function () {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function (evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = evt.loaded / evt.total;
                                    percentComplete = parseInt(percentComplete * 99);
                                    $('.myprogress').text(percentComplete + '%');
                                    $('.myprogress').css('width', percentComplete + '%');
                                }
                            }, false);
                            return xhr;
                        },
                        success: function (data) {
                            $('.msg').html(data);
                            $('.myprogress').text('100%');
                            $('.myprogress').css('width', '100%');
                            $('#submit').css('display', 'block');
                            $('#FormID input').val('');
                            $('#FormID textarea').val('');
                        }
                    });
    });
});

function refresh() {
  window.location='{{ URL::current() }}';
}

function ValidateSize(file) {
  var FileSize = file.files[0].size / 1024 / 1024; // in MB
  if (FileSize > 50) {
      $('#file').val(''); //for clearing with Jquery
      alert('La taille du fichier dépasse 50 Mo');
      
  } 
}

</script>


@stop


@section('content')


<!-- ============================================================== -->
                  <!-- pageheader  -->
                  <!-- ============================================================== -->
                  <div class="row">
                      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                          <div class="page-header">
                              <h3 class="mb-2">Archives</h3>
                              <div class="page-breadcrumb">
                                  <nav aria-label="breadcrumb">
                                      <ol class="breadcrumb">
                                          <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Archives</a></li>
                                      </ol>
                                  </nav>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!-- ============================================================== -->
                  <!-- end pageheader  -->
                  <!-- ============================================================== -->

<div class="row">    



<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
  <div class="card">
    <h5 class="card-header">
@if(auth()->user()->super_admin == 1)
      <a href="#" class="btn btn-primary mb-1 mr-1" data-toggle="modal" data-target="#exampleModalRepertoire"><i class="fa fa-folder"></i> Nouveau Répertoire </a>

      <a href="#" class="btn btn-primary mb-1" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-plus"></i> Déposer </a>
@endif

@if(auth()->user()->is_archives_agent == 1) 

      <a href="#" class="btn btn-primary mb-1 mr-1" data-toggle="modal" data-target="#exampleModalRepertoire"><i class="fa fa-folder"></i> Nouveau Répertoire </a>

      <a href="#" class="btn btn-primary mb-1" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-plus"></i> Déposer </a>

@endif

    </h5>
  <div class="card-body">


<!-- Modal -->
<div class="modal fade" id="exampleModalRepertoire" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelRepertoire" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabelRepertoire">Nouveau Répertoire</h5>
      <a href="#" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
    </div>
    <div class="modal-body">

<form method="POST" action="{{ URL::route('repertoire_store') }}">

{{ csrf_field() }}


  <div class="col-md-12 mb-3">
    <div class="form-group">
    <label>Nom:</label>
    <div class="input-group">
      <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-folder"></i></span></div>
      <input name="folder_name" type="text" class="form-control input-lg" value="{{ old('folder_name') }}" required>
    </div>
    </div>
  </div>

@if(auth()->user()->super_admin == 1)
  <div class="col-md-12 mb-4">
    <div class="form-group">
    <label>Mot de passe:</label>
    <div class="input-group">
      <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-lock"></i></span></div>
      <input name="password" type="text" class="form-control input-lg" value="{{ old('password') }}">
    </div>
    </div>
  </div>
@else
  <input name="password" type="hidden" class="form-control input-lg" value="">
@endif
<div class="col-md-12 mb-3">
    <button class="btn btn-success btn-block input-lg" type="submit">Ajouter</button>
</div>


</form>

    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-dark" data-dismiss="modal">Fermer</a>
    </div>
  </div>
</div>
</div>
<!-- End Modal -->


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Déposer</h5>
      <a  onclick="refresh();" href="#" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
    </div>
    <div class="modal-body">

<div class="col-md-12 text-center resp-div" style="display: none;">
  <div class="msg mb-3"></div>

    <div class="progress mb-3" style="margin: auto;">
      <div class="progress-bar progress-bar-success progress-bar-striped myprogress" role="progressbar" style="width:0%; ">0%</div>
    </div>
    
</div>



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


<form method="POST" id="FormID" action="{{ URL::route('archive_store') }}" enctype="multipart/form-data">

@csrf



<div class="col-md-12 mb-4">
      <label>Répertoire: <span class="text-danger">*</span></label>
      <select name="folder_id" id="folder_id" class="selectpicker" data-width="100%" required="required">   
      <option value="">Choisir</option>
        @foreach($archives_folders as $archives_folder)
          <option value="{{ $archives_folder->id }}"> </option>
        @endforeach
      </select>
</div>



  <div class="col-md-12 mb-1">
    <div class="form-group">
    <label>Nom de fichier: <span class="text-danger">*</span></label>
    <input name="file_name" type="text" class="form-control input-lg" value="{{ old('file_name') }}" id="file_name" required="required">
    </div>
  </div>

  <div class="col-md-12 mb-1">
        <label>Description:</label>
        <textarea name="description" id="description" class="form-control" rows="7">{{ old('description') }}</textarea>
  </div>

<div class="col-md-12 mb-1">
      <label>fichier:  <span class="text-danger">*</span></label>
        <div class="custom-file">
          <input type="file" name="file" id="file" required="required" onchange="ValidateSize(this)">
        </div>
        <small class="form-text text-danger">La taille limite du fichier est de 50Mo </small>
        
        @if($errors->first('file'))
          <small class="form-text text-danger">{{ $errors->first('file') }}</small>
        @endif
</div>

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

<div class="col-md-12">
    <button type="submit" name="submit" id="submit" class="btn btn-success btn-block input-lg">Déposer</button>
</div>

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


</form>



    </div>
    <div class="modal-footer">
      <a  onclick="refresh();" href="#" class="btn btn-dark" data-dismiss="modal">Fermer</a>
    </div>
  </div>
</div>
</div>
<!-- End Modal -->


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

@if(Session::has('error'))

<div class="alert alert-danger alert-dismissible fade show text-center" role="alert">
  <strong>{{ Session::get('error') }}</strong>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

@endif

@if(Session::has('success'))
<div class="alert alert-success alert-dismissible fade show text-center" role="alert">
  <strong>{{ Session::get('success') }}</strong>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
@endif

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


<div class="row">
@foreach($archives_folders as $folder)

<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
  <div class="card card-figure" style="border: 1px solid #97a0ed;">

<a href="{{ URL::route('archives_files', $folder->id) }}">
      <figure class="figure">
        <div class="figure-attachment">
          <span class="fa-stack fa-lg">
            <i class="fa fa-square fa-stack-2x text-primary"></i>
            <i class="fa fa-folder fa-stack-1x fa-inverse"></i>
          </span>
        </div>
        <figcaption class="figure-caption">
          <ul class="list-inline d-flex text-muted mb-0">
            <li class="list-inline-item text-truncate mr-auto">
                            <p class="text-muted">