totalsport/resources/views/admin/eventos/show.blade.php

@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">
    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)
        })
      },
      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(
            $('<form></form>').attr('class', 'ui form').attr('id', 'add_image').append(
              $('<div></div>').attr('class', 'ui fluid input').append(
                $('<input />').attr('type', 'file').attr('name', 'imagen[]').attr('multiple', 'multiple')
              )
            ).append(
              $('<button></button>').attr('class', 'ui button').html('Agregar')
            )
          )
        )
        imgs.after(div)
        div.modal('show')
        div.find('form').submit((e) => {
          e.preventDefault()
          imagenes.addImage()
          return false
        })
      },
      addImage: () => {
        let form = $('#add_image')
        let data = new FormData(form[0])
        let url = '{{$urls->admin}}/evento/{{$evento->id}}/add'
        $.ajax({
          url: url,
          data: data,
          processData: false,
          contentType: false,
          type: 'POST',
          success: (output) => {
            if (output.estado) {
              window.location.reload()
            }
          }
        })
      },
      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