@extends('layouts.archives_panel')

@section('title')  @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');
                            $('#file_name').val('');
                            $('#FormID textarea').val('');
                        }
                    });
    });
});

function refresh() {
  window.location='{{ URL::current() }}?token={{ request()->token }}';
}

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" style="font-size: 20px;" > 

                                        <li class="breadcrumb-item"><a href="{{ URL::route('archives') }}" class="breadcrumb-link">Répertoire</a></li>

                                        <li class="breadcrumb-item active" aria-current="page"></li>


                                      </ol>
                                  </nav>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!-- ============================================================== -->
                  <!-- end pageheader  -->
                  <!-- ============================================================== -->

<div class="row">    



@if(!empty($archives_folder->password))




<div class="col-md-6 offset-md-3">
  <div class="card">
    <div class="card-body">

<form method="POST" action="{{ URL::route('access_archives_files', $archives_folder->id) }}" class="col-md-12" >
  
@csrf

  <div class="col-md-12 mb-3">
        <label>Mot de passe:</label>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fa fa-lock"></i></span>
          </div>
          <input name="password" class="form-control input-lg" type="password" required="required" value="" autocomplete="new-password">
        </div> 
  </div>

  <div class="col-md-12">
    <div class="form-group">
      <button class="btn btn-primary btn-block text-uppercase" type="submit"><i class="fa fa-lock"></i> accès</button>
    </div>
  </div>

</form>

    </div>
  </div>
</div>


@endif



@if($hideFiles == false)

<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" 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" 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="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

<input type="hidden" name="folder_id" id="folder_id" value="{{ $archives_folder->id }}">

  <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="table-responsive">
          <table id="example" class="table table-striped table-bordered first">
            <thead>
            <tr class="text-uppercase">
              <th style="width: 20%">Nom de fichier</th>
              <th>Description</th>
              <th>Télécharger</th>
              <th>Date</th>
              <th>Agent</th>
              @if(auth()->user()->super_admin == 1)
              <th>Action</th>
              @endif
            </tr>
            </thead>
            <tbody>


             @foreach($files as $fil)
                <tr>
                                                
                    <td></td>

                    <td>
                      <a class="btn btn-primary btn-sm mb-1" href="#" data-toggle="modal" data-target="#exampleModalDescription-{{ $fil->id }}"><i class="fa fa-eye"></i> Description</a>


<!-- Modal -->
<div class="modal fade" id="exampleModalDescription-{{ $fil->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelDescription-{{ $fil->id }}" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabelDescription-{{ $fil->id }}">Description</h5>
      <a href="#" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
    </div>
    <div class="modal-body">

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

                    </td>

                    
                    <td class="text-center">
                      <a class="btn btn-rounded btn-dark btn-sm" target="_black" href="{{ url('/') }}/uploads/archives/{{ $fil->file_path }}"><i class="fas fa-download"></i> Télécharger</a>
                      
                    </td>
                    
                    <td>
                    
                      {{ $enTofr->format('d/m/Y H:i') }}
                    </td>

                    <td>