@extends('admin.layout.base')

@section('page_content')
  <div class="ui container">
    <h1 class="ui header">
      {{str_replace('_', ' ', mb_strtoupper($titulo))}}
    </h1>
    <div class="ui grid">
      <div class="row">
        <div class="nine wide column">
          <div class="ui top attached right aligned segment">
            <button class="ui inverted dark-blue button form_link">
              NUEVO
            </button>
          </div>
          <table class="ui bottom attached celled table">
            <thead>
              <tr>
                <th>Documento</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              @foreach ($archivos as $archivo)
                <tr>
                  <td>{{str_replace([$titulo, '_'], ['', ' '], $archivo->getBasename('.' . $archivo->getExtension()))}}</td>
                  <td class="center aligned">
                    <i class="trash alternate outline icon" data-file="{{$archivo->getBasename('.' . $archivo->getExtension())}}"></i>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="ui basic modal" id="doc_form">
    <i class="close icon"></i>
    <div class="inverted dark-blue header">
    </div>
    <div class="inverted dark-blue content">
      <form class="ui form" method="post" action="#">
        <input type="hidden" name="filename" />
        <div class="field">
          <input type="file" name="archivo" placeholder="Archivo" />
        </div>
        <div id="mod" class="field"></div>
        <button class="ui button">Subir</button>
        <div id="documento_message"></div>
      </form>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    function formulario(link, title, mod) {
      $('#doc_form').find('.header').html(title)
      $('#doc_form').find('form').find("[name='filename']").val(link)
      if (mod == 'fecha') {
        fecha()
      }
      $('#doc_form').modal('show')
      $('#doc_form').find('form').submit(function(e) {
        e.preventDefault()
        var form_data = new FormData(this)
        $.ajax({
          url: '{{$urls->base}}/admin/documentos',
          type: 'post',
          data: form_data,
          contentType: false,
          cache: false,
          processData: false,
          success: function(data) {
            if (data.estado == true) {
              $('#doc_form').find('.header').html('')
              $('#doc_form').find('form').find("[name='filename']").val('')
              $('#doc_form').modal('hide')
              $('#documento_message').html('')
              $('#documento_message').hide()
              location.reload()
            } else {
              $('#documento_message').html('Error al subir el archivo.')
              $('#documento_message').show()
            }
          }
        })

        return false
      })
    }
    function fecha() {
      var fecha = $('<div></div>').attr('class', 'ui calendar').append(
        $('<div></div>').attr('class', 'ui input left icon').append(
          $('<i></i>').attr('class', 'calendar icon')
        ).append(
          $('<input />').attr('type', 'text').attr('name', 'month').attr('placeholder', 'Mex / Año')
        )
      )
      $('#mod').append(fecha)
      $('#mod').find('.ui.calendar').calendar({
        type: 'month',
        text: {
          months: [
            '{!!implode("', '", $months->full)!!}'
          ],
          monthsShort: [
            '{!!implode("', '", $months->short)!!}'
          ]
        }
      })
    }
    $(document).ready(function() {
      $('.trash').css('cursor', 'pointer').click(function() {
        var file = $(this).attr('data-file')
        $.post('{{$urls->admin}}/documentos/delete', {archivo: file}, function(data) {
          if (data.estado) {
            location.reload()
            return
          }
          alert('No se pudo borrar el archivo.')
        })
      })
      $('#doc_form').modal({
        onHidden: function() {
          $('#mod').html('')
        }
      })
      $('#documento_message').hide()
      $('.form_link').click(function() {
        var link = '{{$titulo}}'
        var title = '{{mb_strtoupper($titulo)}}'
        var mod = 'fecha'
        if (link == 'valores') {
          mod = ''
        }
        formulario(link, title, mod)
      })
    })
  </script>
@endpush