@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">
              Título
            </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">
              Descripción
            </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">
      Elementos
    </div>
    <div class="ui equal width grid">
      <div class="column">
        <h4 class="ui header">
          Fotos
        </h4>
        <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)
                @if (strpos($imagen->media->html, '<img') === false)
                  @continue
                @endif
                <tr>
                  <td>
                    <div class="ui mini image">
                      <img src="{{$imagen->thumb->filename}}" />
                    </div>
                    {{$imagen->media->n}}</span>
                  </td>
                  <td class="center aligned">
                    <i class="trash icon" data-media="{{$i}}"></i>
                  </td>
                </tr>
              @endforeach
            @endif
          </tbody>
        </table>
      </div>
      <div class="column">
        <h4 class="ui header">
          Videos
        </h4>
        <table class="ui collapsing table" id="videos">
          <thead>
            <tr>
              <th colspan="2" class="right aligned">
                <i class="plus icon" id="agregar_video"></i>
              </th>
            </tr>
            <tr>
              <th>Archivo</th>
              <th>Borrar</th>
            </tr>
          </thead>
          <tbody>
            @if ($imagenes)
              @foreach (array_values($imagenes) as $i => $imagen)
                @if (strpos($imagen->media->html, '<img') !== false)
                  @continue
                @endif
                <tr>
                  <td>
                    <div class="ui mini image">
                      <img src="{{$imagen->thumb->filename}}" />
                    </div>
                    {{$imagen->media->n}}</span>
                  </td>
                  <td class="center aligned">
                    <i class="trash icon" data-media="{{$i}}"></i>
                  </td>
                </tr>
              @endforeach
            @endif
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript" src="{{$urls->scripts}}/admin/eventos.js"></script>
@endpush

@push('readyjs')
  imagenes.imagenes = {
    @if ($imagenes)
      @foreach (array_values($imagenes) as $i => $imagen)
        @if (strpos($imagen->media->html, '<img') === false)
          @continue
        @endif
        {{$i}}: '{{$imagen->media->n}}',
      @endforeach
    @endif
  }
  imagenes.url = '{{$urls->admin}}'
  imagenes.evento = '{{$evento->id}}'
  imagenes.setup()
  videos.videos = {
    @if ($imagenes)
      @foreach (array_values($imagenes) as $i => $imagen)
        @if (strpos($imagen->media->html, '<img') !== false)
          @continue
        @endif
        {{$i}}: '{{$imagen->media->n}}',
      @endforeach
    @endif
  }
  videos.url = imagenes.url
  videos.evento = imagenes.evento
  videos.setup()
  $('#servicio').dropdown()
@endpush