@extends('admin.layout.base')

@section('page_content')
  <div class="ui container">
    <h1 class="ui header">
      Evento
    </h1>
    <br />
    <form class="ui form" method="post" action="{{$urls->admin}}/evento/{{$evento->id}}/edit">
      <div class="ui grid">
        <div class="row">
          <div class="two wide column">
            <div class="ui header">
              Titulo
            </div>
          </div>
          <div class="ten wide column">
            <div class="ui fluid input">
              <input type="text" name="titulo" value="{{$evento->titulo}}" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="two wide column">
            <div class="ui header">
              Empresa
            </div>
          </div>
          <div class="six wide column">
            <div class="ui fluid input">
              <input type="text" name="empresa" value="{{$evento->empresa}}" />
            </div>
          </div>
          <div class="two wide column">
          </div>
          <div class="six wide column">
            <div class="ui selection dropdown" id="servicio">
              <input type="hidden" name="servicio" value="{{$evento->servicio}}" />
              <i class="dropdown icon"></i>
              <div class="default text">Servicio</div>
              <div class="menu">
                @foreach ($servicios as $servicio)
                  <div class="item" data-value="{{$servicio->titulo}}">{{$servicio->titulo}}</div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="two wide column">
            <div class="ui header">
              Descripcion
            </div>
          </div>
          <div class="eight wide column">
            <div class="ui fluid input">
              <textarea name="descripcion">{{$evento->descripcion}}</textarea>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="two wide column">
            <button class="ui fluid button">Guardar</button>
          </div>
        </div>
      </div>
    </form>
    <div class="ui header">
      Media
    </div>
    <table class="ui collapsing table" id="imagenes">
      <thead>
        <tr>
          <th colspan="2" class="right aligned">
            <i class="plus icon" id="agregar_imagen"></i>
          </th>
        </tr>
        <tr>
          <th>Archivo</th>
          <th>Borrar</th>
        </tr>
      </thead>
      <tbody>
        @if ($imagenes)
          @foreach (array_values($imagenes) as $i => $imagen)
            <tr>
              <td>{{$imagen->media->n}}</td>
              <td>
                <i class="trash icon" data-media="{{$i}}"></i>
              </td>
            </tr>
          @endforeach
        @endif
      </tbody>
    </table>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    class Elem {
      constructor(tag, attrs, close = true) {
        this.tag = '<' + tag
        if (close) {
          this.tag += '></' + tag + '>'
        } else {
          this.tag += '/>'
        }
        this.attrs = attrs
        this.children = []
      }
      addChild(child) {
        if (typeof child != 'object' || typeof child.tag == 'undefined') {
          return this
        }
        this.children.push(child)
        return this
      }
      html(text) {
        this.text = text
        return this
      }
      build() {
        let obj = $(this.tag)
        $.each(this.attrs, (key, el) => {
          obj.attr(key, el)
        })
        $.each(this.children, (i, el) => {
          obj.append(el.build())
        })
        if (typeof this.text !== 'undefined') {
          obj.html(this.text)
        }
        return obj
      }
    }
    var imagenes = {
      imagenes: [
        @if ($imagenes)
          @foreach (array_values($imagenes) as $imagen)
            '{{$imagen->media->n}}',
          @endforeach
        @endif
      ],
      setup: () => {
        $('#agregar_imagen').css('cursor', 'pointer').click(() => {
          imagenes.add()
        })
        $('.trash.icon').css('cursor', 'pointer').click(function() {
          let i = $(this).attr('data-media')
          imagenes.deleteImage(i)
        })
      },
      buildForm: () => {
        let form = new Elem('form', {class: 'ui form', id: 'add_image'}).addChild(
          new Elem('div', {class: 'ui grid'}).addChild(
            new Elem('div', {class: 'row'}).addChild(
              new Elem('div', {class: 'sixteen wide column'}).addChild(
                new Elem('div', {class: 'ui fluid input'}).addChild(
                  new Elem('input', {type: 'file', name: 'imagen[]', multiple: 'multiple'}, false)
                )
              )
            )
          ).addChild(
            new Elem('div', {class: 'row'}).addChild(
              new Elem('div', {class: 'two wide column'}).addChild(
                new Elem('div', {class: 'ui fluid button', type: 'submit'}).html('Agregar')
              )
            ).addChild(
              new Elem('div', {class: 'fourteen wide column'}).addChild(
                new Elem('div', {id: 'resultado', class: 'ui fluid basic segment'})
              )
            )
          )
        )
        return form.build()
      },
      add: () => {
        var imgs = $('#imagenes')
        var div = imgs.next('.modal')
        if (div.length > 0) {
          div.remove()
        }
        div = $('<div></div>').attr('class', 'ui modal').append(
          $('<i></i>').attr('class', 'inside close icon')
        )
        if (imagenes.imagenes.length >= 12) {
          div.append(
            $('<div></div>').attr('class', 'header').html('Media')
          ).append(
            $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de media.')
          )
          imgs.after(div)
          div.modal('show')
          return
        }

        div.append(
          $('<div></div>').attr('class', 'header').html('Media')
        ).append(
          $('<div></div>').attr('class', 'content').append(imagenes.buildForm())
        )
        imgs.after(div)
        div.modal('show')
        div.find('form .button').click((e) => {
          div.find('form').submit()
        })
        div.find('form').submit((e) => {
          e.preventDefault()
          imagenes.addImage()
          return false
        })
      },
      addImage: () => {
        let form = $('#add_image')
        $('#resultado').html('')
        $('#resultado').append(
          $('<div></div>').attr('class', 'ui active loader')
        )
        let data = new FormData(form[0])
        let url = '{{$urls->admin}}/evento/{{$evento->id}}/add'
        let fallo = () => {
          $('#resultado').html('')
          $('#resultado').append(
            $('<div></div>').attr('class', 'ui negative message')
              .append($('<i></i>').attr('class', 'inline close icon'))
              .append('<p>No se pudo agregar.</p>')
          )
          $('#resultado .message .close').on('click', function() {
            $(this).closest('.message')
                .transition('fade');
          });
        }
        $.ajax({
          url: url,
          data: data,
          processData: false,
          contentType: false,
          type: 'POST',
          success: (output) => {
            if (output.estado) {
              window.location.reload()
              return
            }
            fallo()
          },
          error: () => {
            fallo()
          }
        })
      },
      deleteImage: (i) => {
        let media = imagenes.imagenes[i]
        let url = '{{$urls->admin}}/evento/{{$evento->id}}/image/delete'
        $.post(url, {media: media}, (output) => {
          if (output.estado) {
            window.location.reload()
          }
        })
      }
    }
    $(document).ready(() => {
      $('#servicio').dropdown()
      imagenes.setup()
    })
  </script>
@endpush