@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">
      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>
                <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>
@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 $imagen)
        '{{$imagen->media->n}}',
      @endforeach
    @endif
  ]
  imagenes.url = '{{$urls->admin}}'
  imagenes.evento = '{{$evento->id}}'
  $('#servicio').dropdown()
  imagenes.setup()
@endpush