Galeria funcionando

bootstrap/web/config.php

@@ -23,6 +23,11 @@ return [
       'assets',
       'styles'
     ])),
+    'scripts' => DI\string(implode('/', [
+      '{urls.base}',
+      'assets',
+      'scripts'
+    ])),
     'images' => DI\string(implode('/', [
       '{urls.base}',
       'assets',
@@ -40,7 +45,7 @@ return [
       '{urls.base}',
       'admin'
     ])),
-    'map' => 'https://maps.google.com/maps?hl=es&q=Avenida%20Nueva%20Providencia%201945,%20Providencia&ie=UTF8&z=16&iwloc=B&output=embed'
+    'map' => 'https://maps.google.com/maps?hl=es&q=Avenida%20Nueva%20Providencia%201945,of.%20919,%20Providencia&ie=UTF8&z=16&iwloc=B&output=embed'
   ],
   'assets' => [
     'styles' => [
@@ -59,8 +64,8 @@ return [
       ]))
     ],
     'scripts' => [
-      'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js',
-      'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/semantic.min.js'
+      'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
+      'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js'
     ],
     'fonts' => (object) [
       'text/css' => [

bootstrap/web/setup.php

@@ -17,15 +17,6 @@ return [
     );
   },
   ProVM\TotalSport\Common\Service\MediaLoader::class => function(Container $c) {
-    $obj = new ProVM\TotalSport\Common\Service\MediaLoader($c->get('folders.images'), $c->get('urls')['images']);
-    $obj->setFFMpeg($c->get(FFMpeg\FFMpeg::class));
-    return $obj;
-  },
-  FFMpeg\FFMpeg::class => function(Container $c) {
-    $obj = null;
-    try {
-      $obj = FFMpeg\FFMpeg::create();
-    } catch (\Exception $e) {}
-    return $obj;
+    return new ProVM\TotalSport\Common\Service\MediaLoader($c->get('folders.images'), $c->get('urls')['images']);
   }
 ];

common/Controller/Web/Admin/Eventos.php

@@ -114,7 +114,7 @@ class Eventos {
     $e = $eventos[$evento];
     $status = $loader->delete($e, $post['media']);
     $output = [
-      'informacion' => $file,
+      'informacion' => $post,
       'evento' => $e,
       'estado' => !$status
     ];
@@ -123,4 +123,38 @@ class Eventos {
       ->withHeader('Content-Type', 'application/json')
       ->withStatus(201);
   }
+  public function addVideo(Request $request, Response $response, Container $container, DataHandler $handler, MediaLoader $loader, $evento): Response {
+    $post = $request->getParsedBody();
+    $files = $request->getUploadedFiles();
+    if (count($files) == 0) {
+      $output = [
+        'informacion' => '',
+        'evento' => $evento,
+        'estado' => false
+      ];
+      $response->getBody()->write(json_encode($output));
+      return $response->withHeader('Location', implode('/', [
+        $container->get('urls')['admin'],
+        'evento',
+        $evento
+      ]));
+    }
+    $file = $files['video'];
+    $eventos = $handler->load('eventos');
+    $e = $eventos[$evento];
+    if (is_array($file)) {
+      $status = false;
+      foreach ($file as $f) {
+        $status |= $loader->add($e, $f);
+      }
+    } else {
+      $status = $loader->add($e, $file);
+    }
+    $response->getBody()->write(json_encode($output));
+    return $response->withHeader('Location', implode('/', [
+      $container->get('urls')['admin'],
+      'evento',
+      $evento
+    ]));
+  }
 }

common/Controller/Web/Admin/Galeria.php

@@ -0,0 +1,160 @@
+<?php
+namespace ProVM\TotalSport\Common\Controller\Web\Admin;
+
+use Psr\Container\ContainerInterface as Container;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+use ProVM\TotalSport\Common\Service\DataHandler;
+use ProVM\TotalSport\Common\Service\MediaLoader;
+
+class Galeria {
+  public function __invoke(Request $request, Response $response, View $view, DataHandler $handler): Response {
+    $galeria = $handler->load('galeria');
+    return $view->render($response, 'admin.galeria', compact('galeria'));
+  }
+  public function show(Request $request, Response $response, View $view, DataHandler $handler, MediaLoader $loader, $evento): Response {
+    $galeria = $handler->load('galeria');
+    $e = $galeria[$evento];
+    $e->id = $evento;
+    $imagenes = $loader->load($e);
+    $servicios = $handler->load('servicios');
+    return $view->render($response, 'admin.galeria.show', ['evento' => $e, 'imagenes' => $imagenes, 'servicios' => $servicios]);
+  }
+  public function edit(Request $request, Response $response, Container $container, DataHandler $handler, $evento): Response {
+    $galeria = $handler->load('galeria');
+    $e = $galeria[$evento];
+    $post = $request->getParsedBody();
+    $servicios = $handler->load('servicios');
+    $fields = ['titulo', 'empresa', 'servicio', 'descripcion'];
+    $changed = false;
+    foreach ($fields as $field) {
+      if ($post[$field] != $e->{$field}) {
+        $e->{$field} = $post[$field];
+        $changed = true;
+      }
+    }
+    if ($changed) {
+      $galeria[$evento] = $e;
+      $handler->save('galeria', $galeria);
+    }
+    return $response->withHeader('Location', implode('/', [
+      $container->get('urls')['admin'],
+      'galeria'
+    ]));
+  }
+  public function add(Request $request, Response $response, View $view, DataHandler $handler): Response {
+    $servicios = $handler->load('servicios');
+    return $view->render($response, 'admin.galeria.add', compact('servicios'));
+  }
+  public function do_add(Request $request, Response $response, Container $container, DataHandler $handler): Response {
+    $post = $request->getParsedBody();
+    $galeria = $handler->load('galeria');
+    $evento = [
+      'titulo' => $post['titulo'],
+      'empresa' => $post['empresa'],
+      'servicio' => $post['servicio'],
+      'descripcion' => $post['descripcion']
+    ];
+    $galeria []= $evento;
+    $status = $handler->save('galeria', $galeria);
+    return $response->withHeader('Location', implode('/', [
+        $container->get('urls')['admin'],
+        'galeria'
+      ]));
+  }
+  public function delete(Request $request, Response $response, Container $container, DataHandler $handler, MediaLoader $loader, $evento): Response {
+    $galeria = $handler->load('galeria');
+    unset($galeria[$evento]);
+    $galeria = array_values($galeria);
+    $handler->save('galeria', $galeria);
+    return $response->withHeader('Location', implode('/', [
+        $container->get('urls')['admin'],
+        'galeria'
+      ]));
+  }
+  public function addImage(Request $request, Response $response, DataHandler $handler, MediaLoader $loader, $evento): Response {
+    $post = $request->getParsedBody();
+    $files = $request->getUploadedFiles();
+    if (count($files) == 0) {
+      $output = [
+        'informacion' => '',
+        'evento' => $evento,
+        'estado' => false
+      ];
+      $response->getBody()->write(json_encode($output));
+      return $response
+        ->withHeader('Content-Type', 'application/json')
+        ->withStatus(201);
+    }
+    $file = $files['imagen'];
+    $galeria = $handler->load('galeria');
+    $e = $galeria[$evento];
+    if (is_array($file)) {
+      $status = false;
+      foreach ($file as $f) {
+        $status |= $loader->add($e, $f);
+      }
+    } else {
+      $status = $loader->add($e, $file);
+    }
+    $output = [
+      'informacion' => $file,
+      'evento' => $e,
+      'estado' => $status
+    ];
+    $response->getBody()->write(json_encode($output));
+    return $response
+      ->withHeader('Content-Type', 'application/json')
+      ->withStatus(201);
+  }
+  public function deleteImage(Request $request, Response $response, DataHandler $handler, MediaLoader $loader, $evento): Response {
+    $post = $request->getParsedBody();
+    $galeria = $handler->load('galeria');
+    $e = $egaleria[$evento];
+    $status = $loader->delete($e, $post['media']);
+    $output = [
+      'informacion' => $post,
+      'evento' => $e,
+      'estado' => !$status
+    ];
+    $response->getBody()->write(json_encode($output));
+    return $response
+      ->withHeader('Content-Type', 'application/json')
+      ->withStatus(201);
+  }
+  public function addVideo(Request $request, Response $response, Container $container, DataHandler $handler, MediaLoader $loader, $evento): Response {
+    $post = $request->getParsedBody();
+    $files = $request->getUploadedFiles();
+    if (count($files) == 0) {
+      $output = [
+        'informacion' => '',
+        'evento' => $evento,
+        'estado' => false
+      ];
+      $response->getBody()->write(json_encode($output));
+      return $response->withHeader('Location', implode('/', [
+        $container->get('urls')['admin'],
+        'evento',
+        $evento
+      ]));
+    }
+    $file = $files['video'];
+    $galeria = $handler->load('galeria');
+    $e = $galeria[$evento];
+    if (is_array($file)) {
+      $status = false;
+      foreach ($file as $f) {
+        $status |= $loader->add($e, $f);
+      }
+    } else {
+      $status = $loader->add($e, $file);
+    }
+    $response->getBody()->write(json_encode($output));
+    return $response->withHeader('Location', implode('/', [
+      $container->get('urls')['admin'],
+      'evento',
+      $evento
+    ]));
+  }
+}

common/Controller/Web/Eventos.php

@@ -1,18 +1,24 @@
 <?php
 namespace ProVM\TotalSport\Common\Controller\Web;
 
-use Psr\Container\ContainerInterface as Container;
 use Psr\Http\Message\ServerRequestInterface as Request;
 use Psr\Http\Message\ResponseInterface as Response;
 use Slim\Views\Blade as View;
-use ProVM\TotalSport\Common\Service\DataHandler;
-use ProVM\TotalSport\Common\Service\MediaLoader;
 
 class Eventos {
-  public function __invoke(Request $request, Response $response, View $view, DataHandler $handler, MediaLoader $loader, $evento): Response {
-    $eventos = $handler->load('eventos');
-    $e = $eventos[$evento];
-    $imagenes = $loader->load($e);
-    return $view->render($response, 'evento', ['evento' => $e, 'imagenes' => $imagenes]);
+  public function deportivos(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'eventos.deportivos');
+  }
+  public function carreras(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'eventos.carreras');
+  }
+  public function bienestar(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'eventos.bienestar');
+  }
+  public function ligas(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'eventos.ligas');
+  }
+  public function team(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'eventos.team');
   }
 }

common/Controller/Web/Galeria.php

@@ -0,0 +1,18 @@
+<?php
+namespace ProVM\TotalSport\Common\Controller\Web;
+
+use Psr\Container\ContainerInterface as Container;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+use ProVM\TotalSport\Common\Service\DataHandler;
+use ProVM\TotalSport\Common\Service\MediaLoader;
+
+class Galeria {
+  public function __invoke(Request $request, Response $response, View $view, DataHandler $handler, MediaLoader $loader, $evento): Response {
+    $galeria = $handler->load('galeria');
+    $e = $galeria[$evento];
+    $imagenes = $loader->load($e);
+    return $view->render($response, 'evento', ['evento' => $e, 'imagenes' => $imagenes]);
+  }
+}

common/Controller/Web/Home.php

@@ -14,6 +14,7 @@ class Home {
       'title' => 'BUSCAMOS LA MEJOR EXPERIENCA',
       'contenido' => 'Eventos hechos a tu medida'
     ];
+    $resumen = $handler->load('resumen');
     $servicios = $handler->load('servicios');
     $frase = (object) [
       'titulo' => 'Lorem ipsum dolor sit amet, consectetur adipiscing',
@@ -25,8 +26,8 @@ class Home {
     }
 
     $testimonios = $handler->load('testimonios');
-    $eventos = $handler->load('eventos');
-    foreach ($eventos as &$evento) {
+    $galeria = $handler->load('galeria');
+    foreach ($galeria as &$evento) {
       if (!isset($evento->imagen)) {
         $evento->imagen = '<img src="#" alt="Imagen no encontrada" title="Imagen no encontrada" />';
         $imagenes = $loader->load($evento);
@@ -39,6 +40,6 @@ class Home {
       }
     }
 
-    return $view->render($response, 'home', compact('banner', 'servicios', 'frase', 'clientes', 'testimonios', 'eventos'));
+    return $view->render($response, 'home', compact('banner', 'resumen', 'servicios', 'frase', 'clientes', 'testimonios', 'galeria'));
   }
 }

common/Controller/Web/Servicios.php

@@ -0,0 +1,21 @@
+<?php
+namespace ProVM\TotalSport\Common\Controller\Web;
+
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+
+class Servicios {
+  public function deportivos(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'servicios.deportivos');
+  }
+  public function culturales(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'servicios.culturales');
+  }
+  public function animacion(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'servicios.animacion');
+  }
+  public function arriendos(Request $request, Response $response, View $view): Response {
+    return $view->render($response, 'servicios.arriendo');
+  }
+}

common/Service/MediaLoader.php

@@ -11,10 +11,6 @@ class MediaLoader {
     $this->folder = $media_folder;
     $this->media_url = $media_assets_url;
   }
-  protected $ffmpeg;
-  public function setFFMpeg(FFMpeg $ffmpeg) {
-    $this->ffmpeg = $ffmpeg;
-  }
   protected function getFolder($event) {
     return implode(DIRECTORY_SEPARATOR, [
       $this->folder,
@@ -40,7 +36,7 @@ class MediaLoader {
       case 'avi':
       case 'ogg':
       case 'webm':
-        return implode(PHP_EOL, [
+        return implode('', [
           '<video class="media" controls="controls">',
           implode('', [
             '<source src="',
@@ -104,6 +100,9 @@ class MediaLoader {
       $medias[$name]->{$type} = $obj;
     }
     array_walk($medias, function(&$item) {
+      if ($item->media === null) {
+        $item->media = $item->original;
+      }
       if ($item->thumb === null) {
         $item->thumb = $item->media;
       }
@@ -259,10 +258,6 @@ class MediaLoader {
     ]);
     $file->moveTo($filename);
 
-    if ($this->ffmpeg === null) {
-      return file_exists($filename);
-    }
-
     $thumb = implode(DIRECTORY_SEPARATOR, [
       $folder,
       implode('.', [
@@ -274,22 +269,32 @@ class MediaLoader {
       ])
     ]);
 
-    $video
-      ->filters()
-      ->resize(new FFMpeg\Coordinate\Dimension(320, 240))
-      ->synchronize();
-    $video
-      ->frame(FFMpeg\Coordinate\TimeCode::fromSeconds(1))
-      ->save($thumb);
-    $media = implode(DIRECTORY_SEPARATOR, [
-      $folder,
-      implode('.', [
-        $base_name,
-        $extension
-      ])
+    $image = imagecreatetruecolor(300, 300);
+    $black = imagecolorallocate($image, 0, 0, 0);
+    imagefill($image, 0, 0, $black);
+
+    $pfile = implode(DIRECTORY_SEPARATOR, [
+      dirname($this->folder, 3),
+      'resources',
+      'data',
+      'play.png'
     ]);
-    $video
-      ->save(new FFMpeg\Format\Video\X264(), $media);
+    $play = imagecreatefrompng($pfile);
+    list($w, $h) = getimagesize($pfile);
+    $r = $w / $h;
+    $w = 100;
+    $h = $r * $w;
+    $play = imagescale($play, $w, $h);
+
+    $x = (300 - $w) / 2;
+    $y = (300 - $h) / 2;
+    $x2 = (300 + $w) / 2 - $x;
+    $y2 = (300 + $h) / 2 - $y;
+
+    imagecopyresampled($image, $play, $x, $y, 0, 0, $x2, $y2, $w, $h);
+
+    imagejpeg($image, $thumb, 50);
+
     return file_exists($filename);
   }
   public function delete($event, $filename) {

public/.htaccess

@@ -1,4 +1,5 @@
 RewriteEngine On
+RewriteBase /totalsport/
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule ^ index.php [QSA,L]

public/assets/scripts/admin/eventos.js

@@ -0,0 +1,280 @@
+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: [],
+  url: '',
+  evento: '',
+  setup: () => {
+    $('#agregar_imagen').css('cursor', 'pointer').click(() => {
+      imagenes.add()
+    })
+    $('#imagenes .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 + videos.videos.length >= 12) {
+      div.append(
+        $('<div></div>').attr('class', 'header').html('Foto')
+      ).append(
+        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de elementos.')
+      )
+      imgs.after(div)
+      div.modal('show')
+      return
+    }
+
+    div.append(
+      $('<div></div>').attr('class', 'header').html('Foto')
+    ).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')
+    $('#add_image #resultado').html('')
+    $('#add_image #resultado').append(
+      $('<div></div>').attr('class', 'ui active loader')
+    )
+    let data = new FormData(form[0])
+    let url = imagenes.url + '/evento/' + imagenes.evento + '/image/add'
+    let fallo = () => {
+      $('#add_image #resultado').html('')
+      $('#add_image #resultado').append(
+        $('<div></div>').attr('class', 'ui negative message')
+          .append($('<i></i>').attr('class', 'inline close icon'))
+          .append('<p>No se pudo agregar.</p>')
+      )
+      $('#add_image #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 = imagenes.url + '/evento/' + imagenes.evento + '/image/delete'
+    $.post(url, {media: media}, (output) => {
+      if (output.estado) {
+        window.location.reload()
+      }
+    })
+  }
+}
+var videos = {
+  videos: [],
+  url: '',
+  evento: '',
+  setup: () => {
+    $('#agregar_video').css('cursor', 'pointer').click(() => {
+      videos.add()
+    })
+    $('#videos .trash.icon').css('cursor', 'pointer').click(function() {
+      let i = $(this).attr('data-media')
+      videos.deleteVideo(i)
+    })
+  },
+  buildForm: () => {
+    let form = new Elem('form', {
+      class: 'ui form',
+      id: 'add_video',
+      method: 'post',
+      enctype: 'multipart/form-data',
+      action: videos.url + '/evento/' + videos.evento + '/video/add'
+    }).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: 'video[]', 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')
+          )
+        )
+      )
+    )
+    return form.build()
+  },
+  add: () => {
+    var vds = $('#videos')
+    var div = vds.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 + videos.videos.length >= 12) {
+      div.append(
+        $('<div></div>').attr('class', 'header').html('Video')
+      ).append(
+        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de elementos.')
+      )
+      vds.after(div)
+      div.modal('show')
+      return
+    }
+
+    div.append(
+      $('<div></div>').attr('class', 'header').html('Video')
+    ).append(
+      $('<div></div>').attr('class', 'content').append(videos.buildForm())
+    )
+    vds.after(div)
+    div.modal('show')
+    div.find('form .button').click((e) => {
+      div.find('form').submit()
+    })
+    /*div.find('form').submit((e) => {
+      e.preventDefault()
+      videos.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 = imagenes.url + '/evento/' + imagenes.evento + '/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()
+      }
+    })
+  },*/
+  deleteVideo: (i) => {
+    let media = videos.videos[i]
+    let url = videos.url + '/evento/' + videos.evento + '/video/delete'
+    $.post(url, {media: media}, (output) => {
+      if (output.estado) {
+        window.location.reload()
+      }
+    })
+  }
+}

public/assets/scripts/admin/galeria.js

@@ -0,0 +1,280 @@
+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: [],
+  url: '',
+  evento: '',
+  setup: () => {
+    $('#agregar_imagen').css('cursor', 'pointer').click(() => {
+      imagenes.add()
+    })
+    $('#imagenes .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 + videos.videos.length >= 12) {
+      div.append(
+        $('<div></div>').attr('class', 'header').html('Foto')
+      ).append(
+        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de elementos.')
+      )
+      imgs.after(div)
+      div.modal('show')
+      return
+    }
+
+    div.append(
+      $('<div></div>').attr('class', 'header').html('Foto')
+    ).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')
+    $('#add_image #resultado').html('')
+    $('#add_image #resultado').append(
+      $('<div></div>').attr('class', 'ui active loader')
+    )
+    let data = new FormData(form[0])
+    let url = imagenes.url + '/evento/' + imagenes.evento + '/image/add'
+    let fallo = () => {
+      $('#add_image #resultado').html('')
+      $('#add_image #resultado').append(
+        $('<div></div>').attr('class', 'ui negative message')
+          .append($('<i></i>').attr('class', 'inline close icon'))
+          .append('<p>No se pudo agregar.</p>')
+      )
+      $('#add_image #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 = imagenes.url + '/evento/' + imagenes.evento + '/image/delete'
+    $.post(url, {media: media}, (output) => {
+      if (output.estado) {
+        window.location.reload()
+      }
+    })
+  }
+}
+var videos = {
+  videos: [],
+  url: '',
+  evento: '',
+  setup: () => {
+    $('#agregar_video').css('cursor', 'pointer').click(() => {
+      videos.add()
+    })
+    $('#videos .trash.icon').css('cursor', 'pointer').click(function() {
+      let i = $(this).attr('data-media')
+      videos.deleteVideo(i)
+    })
+  },
+  buildForm: () => {
+    let form = new Elem('form', {
+      class: 'ui form',
+      id: 'add_video',
+      method: 'post',
+      enctype: 'multipart/form-data',
+      action: videos.url + '/evento/' + videos.evento + '/video/add'
+    }).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: 'video[]', 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')
+          )
+        )
+      )
+    )
+    return form.build()
+  },
+  add: () => {
+    var vds = $('#videos')
+    var div = vds.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 + videos.videos.length >= 12) {
+      div.append(
+        $('<div></div>').attr('class', 'header').html('Video')
+      ).append(
+        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de elementos.')
+      )
+      vds.after(div)
+      div.modal('show')
+      return
+    }
+
+    div.append(
+      $('<div></div>').attr('class', 'header').html('Video')
+    ).append(
+      $('<div></div>').attr('class', 'content').append(videos.buildForm())
+    )
+    vds.after(div)
+    div.modal('show')
+    div.find('form .button').click((e) => {
+      div.find('form').submit()
+    })
+    /*div.find('form').submit((e) => {
+      e.preventDefault()
+      videos.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 = imagenes.url + '/evento/' + imagenes.evento + '/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()
+      }
+    })
+  },*/
+  deleteVideo: (i) => {
+    let media = videos.videos[i]
+    let url = videos.url + '/evento/' + videos.evento + '/video/delete'
+    $.post(url, {media: media}, (output) => {
+      if (output.estado) {
+        window.location.reload()
+      }
+    })
+  }
+}

public/assets/scripts/home.js

@@ -0,0 +1,189 @@
+const clientes = {
+  clientes: [],
+  current: 0,
+  rows: 2,
+  cols: 6,
+  decreaseClientes: function() {
+    $('#img_clientes').find('.row').find('.column:last-child').remove()
+    clientes.current -= clientes.rows
+    if (clientes.current < - clientes.cols * clientes.rows) {
+      clientes.current = clientes.clientes.length - (clientes.cols - 1) * clientes.rows
+    }
+    n = clientes.current
+    if (n < 0) {
+      n = clientes.clientes.length + n
+    }
+    $('#img_clientes').find('.row:first-child').prepend(
+      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n])
+    )
+    $('#img_clientes').find('.row:last-child').prepend(
+      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n + 1])
+    )
+  },
+  increaseClientes: function() {
+    $('#img_clientes').find('.row').find('.column:first-child').remove()
+    clientes.current += 2
+    if (clientes.current > clientes.clientes.length - clientes.cols * clientes.rows) {
+      clientes.current = - (clientes.cols - 1) * clientes.rows
+    }
+    $('#img_clientes').find('.row:first-child').append(
+      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + (clientes.cols - 1) * clientes.rows])
+    )
+    $('#img_clientes').find('.row:last-child').append(
+      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + clientes.cols * clientes.rows - 1])
+    )
+  },
+  setup: function() {
+    $('.ci .icon').css('cursor', 'pointer').click(function() {
+      if ($(this).attr('class').indexOf('left') != -1) {
+        clientes.decreaseClientes()
+        return
+      }
+      clientes.increaseClientes()
+    })
+  }
+}
+const eventos = {
+  eventos: [],
+  current_tab: 'none',
+  base_url: '',
+  changeEventos: (filter) => {
+    let grid = $('#eventos_cards')
+    grid.html('')
+    $.each(eventos.eventos, function(i, el) {
+      if (filter != 'none' && el.servicio != filter) {
+        return
+      }
+      grid.append(
+        $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
+          $('<div></div>').attr('class', 'ui basic segment').append(
+            $('<a></a>').attr('href', eventos.base_url + '/evento/' + i).append(
+              $('<div></div>').attr('class', 'ui image').append(el.image)
+            ).append(
+              $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
+                $('<br />')
+              ).append(el.empresa)
+            )
+          )
+        )
+      )
+    })
+  },
+  changeTab: (filter) => {
+    $('.servicio.active').removeClass('active')
+    $(".servicio[data-filter='" + filter + "']").addClass('active')
+    eventos.current_tab = filter
+  },
+  resizeThumbs: () => {
+    let thumbs = $('#eventos_cards .image img')
+    thumbs.each((i, el) => {
+      let src = $(el).attr('src')
+      if (src == '#') {
+        return
+      }
+      let w = el.width
+      let h = el.height
+      let parent = $(el).parent()
+      let r = w / h
+      if (r > 1) {
+        $(el).height(parent.height())
+        $(el).width(parent.height() * r)
+      } else {
+        $(el).width(parent.width())
+        $(el).height(parent.width() / r)
+      }
+    })
+  },
+  setup: () => {
+    eventos.resizeThumbs()
+    $('.servicio').click(function(e) {
+      e.preventDefault()
+      let filter = $(this).attr('data-filter')
+      if (filter == eventos.current_tab) {
+        return
+      }
+      eventos.changeTab(filter)
+      eventos.changeEventos(filter)
+    })
+  }
+}
+const testimonios = {
+  testimonios: [],
+  current_testimonio: 0,
+  cambiar: (id) => {
+    if (id == testimonios.current_testimonio) {
+      return
+    }
+    $('#testimonio').html('').append(
+      $('<p></p>').html(testimonios.testimonios[id].contenido)
+    ).append(
+      $('<div></div>').attr('class', 'ui header').html(testimonios.testimonios[id].emisor)
+    )
+    $('#marcador').find(".icon[data-id='" + testimonios.current_testimonio + "']").addClass('outline')
+    $('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
+    $('#marcador').find('.icon.outline').css('cursor', 'pointer')
+    $('#marcador').find('.icon:not(.outline)').css('cursor', 'default')
+    testimonios.current_testimonio = id
+  },
+  setup: () => {
+    $('#marcador').find('.icon').click(function() {
+      let id = $(this).attr('data-id')
+      testimonios.cambiar(id)
+    })
+    $('#marcador').find('.icon.outline').css('cursor', 'pointer')
+  }
+}
+const galeria = {
+  id: '',
+  galeria_id: '',
+  galeria: [],
+  base_url: '',
+  setup: function() {
+    $('.servicio').click((e) => {
+      this.changeTab(e.target)
+    })
+  },
+  changeTab: function(tab) {
+    this.drawTabs(tab)
+    $(this.galeria_id).html('')
+    const servicio = $(tab).attr('data-filter')
+    const grid = $(this.galeria_id)
+    $.each(this.galeria, (i, el) => {
+      if (servicio != 'none' && el.servicio != servicio) {
+        return
+      }
+      grid.append(this.drawCard(i, el))
+    })
+  },
+  drawTabs: function(active) {
+    $(this.id).find('.servicio.active').removeClass('active')
+    $(active).addClass('active')
+  },
+  drawCard: function(key, item) {
+    /*
+    <div class="eight wide tablet four wide computer column">
+      <div class="ui basic segment">
+        <a href="{{$urls->base}}/evento/{{$i}}">
+          <div class="ui image">
+            {!!$evento->imagen!!}
+          </div>
+          <div class="ui center aligned header">
+            {{$evento->titulo}}
+            <br />
+            {{$evento->empresa}}
+          </div>
+        </a>
+      </div>
+    </div>
+    */
+   return $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
+     $('<div></div>').attr('class', 'ui basic segment').append(
+       $('<a></a>').attr('href', this.base_url + '/evento/' + key).append(
+         $('<div></div>').attr('class', 'ui image').html(item.image)
+       ).append(
+         $('<div></div>').attr('class', 'ui center aligned header').html(item.titulo + '<br />' + item.empresa)
+       )
+     )
+   )
+  }
+}

public/assets/styles/evento.css

@@ -3,6 +3,11 @@
   padding-top: 3.5rem;
   padding-bottom: 3.5rem;
 }
-.image {
+#thumbs .image {
   width: 100% !important;
+  height: 7rem;
+  overflow: hidden;
+}
+#thumbs .image img {
+  max-width: none !important;
 }

public/assets/styles/eventos.css

@@ -0,0 +1,16 @@
+#eventos {
+  background-color: #e6e7e8;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+#eventos .column {
+  padding-top: 0;
+  padding-bottom: 0rem;
+}
+#eventos .contenido {
+  padding-top: 1rem;
+  padding-bottom: 5rem;
+}
+#eventos .placeholder {
+  height: 100%;
+}

public/assets/styles/galeria.css

@@ -0,0 +1,13 @@
+#galeria {
+  background-color: #e6e7e8;
+  padding-top: 3.5rem;
+  padding-bottom: 3.5rem;
+}
+#thumbs .image {
+  width: 100% !important;
+  height: 7rem;
+  overflow: hidden;
+}
+#thumbs .image img {
+  max-width: none !important;
+}

public/assets/styles/home.css

@@ -38,7 +38,7 @@
 }
 #nosotros .column {
   padding-top: 0;
-  padding-bottom: 0;
+  padding-bottom: 0rem;
 }
 #nosotros .contenido {
   padding-top: 5rem;
@@ -79,34 +79,45 @@
   color: white !important;
 }
 
-#eventos {
+#galeria {
   background-color: #e6e7e8;
   padding-top: 3rem;
   padding-bottom: 5rem;
 }
-#eventos .segment {
+#galeria .segment {
   background-color: white;
   padding: 0;
 }
-#eventos .segment .image {
+#galeria .bottom.attached.segment {
+  padding-top: 1rem !important;
+}
+#galeria .segment .image {
   height: 14rem;
+  width: 100%;
   overflow: hidden;
 }
-#eventos .segment .image img {
-  height: 100%;
+#galeria .segment .image img {
   max-width: none !important;
 }
-#eventos .segment .header {
+#galeria .segment .header {
   margin-top: 0;
   padding-top: 1rem;
   height: 7rem;
 }
 
-#contacto {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
+#servdeportivos {
+  background-color: #e6e7e8;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
 }
-#contacto #map {
-  /*margin-top: 3rem;*/
+#servdeportivos .column {
+  padding-top: 0;
+  padding-bottom: 0rem;
+}
+#servdeportivos .contenido {
+  padding-top: 1rem;
+  padding-bottom: 5rem;
+}
+#servdeportivos .placeholder {
   height: 100%;
 }

public/assets/styles/main.css

@@ -20,6 +20,15 @@ button.inverted {
   box-shadow: none !important;
 }
 
+#contacto {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+#contacto #map {
+  /*margin-top: 3rem;*/
+  height: 100%;
+}
+
 footer {
   flex: none;
   color: white;

public/assets/styles/serviciosyproyectos.css

@@ -0,0 +1,16 @@
+#serviciosyproyectos {
+  background-color: #e6e7e8;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+#serviciosyproyectos .column {
+  padding-top: 0;
+  padding-bottom: 0rem;
+}
+#serviciosyproyectos .contenido {
+  padding-top: 1rem;
+  padding-bottom: 5rem;
+}
+#serviciosyproyectos .placeholder {
+  height: 100%;
+}

resources/data/eventos.yml

@@ -131,7 +131,7 @@
     nos
 - 
   titulo: 2da Corrida Familiar Inclusiva
-  empresa: DIMERC
+  empresa: Dimerc
   servicio: Eventos Recreativos
   descripcion: >
     Lorem ipsum dolor sit amet, consectetur
@@ -140,7 +140,7 @@
     aliqua. Ut enim ad minim veniam, quis
     nos
 - 
-  titulo: Dia de la Familia
+  titulo: Dia de la Familia 2018
   empresa: BUPA
   servicio: Eventos Recreativos
   descripcion: >
@@ -150,8 +150,8 @@
     aliqua. Ut enim ad minim veniam, quis
     nos
 - 
-  titulo: Fiestas Patrias
-  empresa: CONSORCIO
+  titulo: 4° Colonia de Invierno 2019
+  empresa: Dimerc
   servicio: Eventos Recreativos
   descripcion: >
     Lorem ipsum dolor sit amet, consectetur
@@ -160,8 +160,88 @@
     aliqua. Ut enim ad minim veniam, quis
     nos
 - 
-  titulo: Pausas Activas
-  empresa: DIMEIGGS
+  titulo: Día de la Familia 2019
+  empresa: BUPA
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Día de la Familia 2019
+  empresa: Cruz Blaca
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Navidad 2019
+  empresa: Colegio Monte Olivo
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Navidad 2019
+  empresa: Dimerc
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Vacaciones de verano 2020
+  empresa: AZA
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Invierno Entretenido 2019
+  empresa: Gildemeister
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Paseo Laboratorio fresenius 2018
+  empresa: Kabi
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Vacaciones de verano 2020
+  empresa: Consorcio
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Verano entretenido 2019
+  empresa: Gildemeister
   servicio: Eventos Recreativos
   descripcion: >
     Lorem ipsum dolor sit amet, consectetur

resources/data/galeria.yml

@@ -0,0 +1,251 @@
+---
+- 
+  titulo: Activación Olimpiadas del Seguro 2019
+  empresa: Consorcio
+  servicio: Eventos Calidad de Vida
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Día del niño 2017
+  empresa: Fresenius Kabi
+  servicio: Eventos Calidad de Vida
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Fiestras patrias 2019
+  empresa: Consorcio
+  servicio: Eventos Calidad de Vida
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Olimpiadas del Seguro 2019
+  empresa: Intervención Chilena Consolidada
+  servicio: Eventos Calidad de Vida
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Pausas Activas 2018
+  empresa: Dimeiggs
+  servicio: Eventos Calidad de Vida
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Campeonato baby Futbol 2018
+  empresa: AZA
+  servicio: Eventos Deportivos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Campeonato Futbol Varones 2019
+  empresa: Chilena Consolidada
+  servicio: Eventos Deportivos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Campeonato Voleibol 2019
+  empresa: Dimerc
+  servicio: Eventos Deportivos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Campeonato Futbolito 2017
+  empresa: Dimerc
+  servicio: Eventos Deportivos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Final Nacional Campeonato Futbolito 2012
+  empresa: Gildemeister
+  servicio: Eventos Deportivos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Futbol Varones senior 2019
+  empresa: Olimpiadas del Seguro
+  servicio: Eventos Deportivos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Liga Consumidores
+  empresa: ""
+  servicio: Eventos Deportivos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Liga Futbar
+  empresa: ""
+  servicio: Eventos Deportivos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: 2da Corrida Familiar Inclusiva
+  empresa: Dimerc
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Dia de la Familia 2018
+  empresa: BUPA
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: 4° Colonia de Invierno 2019
+  empresa: Dimerc
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Día de la Familia 2019
+  empresa: BUPA
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Día de la Familia 2019
+  empresa: Cruz Blaca
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Navidad 2019
+  empresa: Colegio Monte Olivo
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Navidad 2019
+  empresa: Dimerc
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Vacaciones de verano 2020
+  empresa: AZA
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Invierno Entretenido 2019
+  empresa: Gildemeister
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Paseo Laboratorio fresenius 2018
+  empresa: Kabi
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Vacaciones de verano 2020
+  empresa: Consorcio
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos
+- 
+  titulo: Verano entretenido 2019
+  empresa: Gildemeister
+  servicio: Eventos Recreativos
+  descripcion: >
+    Lorem ipsum dolor sit amet, consectetur
+    adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis
+    nos

resources/data/resumen.yml

@@ -0,0 +1,12 @@
+- titulo: Objetivo
+  imagen: eventos_calidad_de_vida.jpg
+  contenido: "<b>Organización y gestión de eventos deportivos</b>, talleres y actividades que contribuyan a la mejora de la salud, la comunicación, entretención y la superación personal."
+- titulo: Experiencia
+  imagen: eventos_deportivos.jpg
+  contenido: "Empresa con más de <b>15 años</b> de experiencia en la <b>gestión y organización de eventos deportivos.</b>"
+- titulo: Formación
+  imagen: eventos_recreativos.jpg
+  contenido: "Empresa con un equipo de profesionales altamente cualificados en el sector de la <b>organización de eventos</b> y con una gran implicación en cada proyecto que realizamos."
+- titulo: Tecnología
+  imagen: eventos_recreativos.jpg
+  contenido: "Total Sport aprovecha y saca el máximo partido a todo tipo de <b>innovaciones tecnológicas al servicio de la gestión de eventos</b> y de la docencia"

resources/data/servicios.yml

@@ -1,9 +1,3 @@
 - titulo: Eventos Calidad de Vida
-  imagen: eventos_calidad_de_vida.jpg
-  contenido: "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut"
 - titulo: Eventos Deportivos
-  imagen: eventos_deportivos.jpg
-  contenido: "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut"
 - titulo: Eventos Recreativos
-  imagen: eventos_recreativos.jpg
-  contenido: "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut"

resources/routes/web/admin/eventos.php

@@ -1,17 +0,0 @@
-<?php
-use ProVM\TotalSport\Common\Controller\Web\Admin\Eventos;
-
-$app->group('/eventos', function($app) {
-  $app->group('/add', function($app) {
-    $app->get('[/]', [Eventos::class, 'add']);
-    $app->post('[/]', [Eventos::class, 'do_add']);
-  });
-  $app->get('[/]', Eventos::class);
-});
-$app->group('/evento/{evento}', function($app) {
-  $app->post('/edit', [Eventos::class, 'edit']);
-  $app->post('/add', [Eventos::class, 'addImage']);
-  $app->get('/delete', [Eventos::class, 'delete']);
-  $app->post('/image/delete', [Eventos::class, 'deleteImage']);
-  $app->get('[/]', [Eventos::class, 'show']);
-});

resources/routes/web/admin/galeria.php

@@ -0,0 +1,23 @@
+<?php
+use ProVM\TotalSport\Common\Controller\Web\Admin\Galeria;
+
+$app->group('/galeria', function($app) {
+  $app->group('/add', function($app) {
+    $app->get('[/]', [Galeria::class, 'add']);
+    $app->post('[/]', [Galeria::class, 'do_add']);
+  });
+  $app->get('[/]', Galeria::class);
+});
+$app->group('/evento/{evento}', function($app) {
+  $app->post('/edit', [Galeria::class, 'edit']);
+  $app->get('/delete', [Galeria::class, 'delete']);
+  $app->group('/image', function($app) {
+    $app->post('/add', [Galeria::class, 'addImage']);
+    $app->post('/delete', [Galeria::class, 'deleteImage']);
+  });
+  $app->group('/video', function($app) {
+    $app->post('/add', [Galeria::class, 'addVideo']);
+    $app->post('/delete', [Galeria::class, 'deleteImage']);
+  });
+  $app->get('[/]', [Galeria::class, 'show']);
+});

resources/routes/web/eventos.php

@@ -1,6 +1,12 @@
 <?php
 use ProVM\TotalSport\Common\Controller\Web\Eventos;
 
-$app->group('/evento/{evento}', function($app) {
-  $app->get('[/]', Eventos::class);
+$app->group('/eventos', function($app) {
+  $app->get('/bienestar', [Eventos::class, 'bienestar']);
+  $app->get('/carreras', [Eventos::class, 'carreras']);
+  $app->get('/deportivos', [Eventos::class, 'deportivos']);
+  $app->get('/ligas', [Eventos::class, 'ligas']);
+  $app->get('/team', [Eventos::class, 'team']);
 });
+
+//$app->get('/servicios/deportivos', [Servicios::class, 'deportivos']);

resources/routes/web/galeria.php

@@ -0,0 +1,6 @@
+<?php
+use ProVM\TotalSport\Common\Controller\Web\Galeria;
+
+$app->group('/evento/{evento}', function($app) {
+  $app->get('[/]', Galeria::class);
+});

resources/routes/web/servicios.php

@@ -0,0 +1,9 @@
+<?php
+use ProVM\TotalSport\Common\Controller\Web\Servicios;
+
+$app->group('/servicios', function($app) {
+  $app->get('/deportivos', [Servicios::class, 'deportivos']);
+  $app->get('/animacion', [Servicios::class, 'animacion']);
+  $app->get('/arriendos', [Servicios::class, 'arriendos']);
+  $app->get('/culturales', [Servicios::class, 'culturales']);
+});

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

@@ -1,267 +0,0 @@
-@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

resources/views/admin/galeria.blade.php

@@ -3,7 +3,7 @@
 @section('page_content')
   <div class="ui container">
     <div class="ui header">
-      Eventos
+      Galeria
     </div>
     <table class="ui collapsing table">
       <thead>
@@ -23,17 +23,17 @@
         </tr>
       </thead>
       <tbody>
-        @foreach ($eventos as $i => $evento)
+        @foreach ($galeria as $i => $evento)
           <tr>
             <td>
               {{($evento->empresa != '') ? implode(', ', [$evento->titulo, $evento->empresa]) : $evento->titulo}}
             </td>
-            <td>
+            <td class="center aligned">
               <a href="{{$urls->admin}}/evento/{{$i}}">
                 <i class="edit icon"></i>
               </a>
             </td>
-            <td>
+            <td class="center aligned">
               <a href="{{$urls->admin}}/evento/{{$i}}/delete">
                 <i class="trash icon"></i>
               </a>

resources/views/admin/galeria/add.blade.php

@@ -11,12 +11,12 @@
         <div class="row">
           <div class="two wide column">
             <div class="ui header">
-              Titulo
+              Título
             </div>
           </div>
           <div class="ten wide column">
             <div class="ui fluid input">
-              <input type="text" name="titulo" value="{{$evento->titulo}}" />
+              <input type="text" name="titulo" />
             </div>
           </div>
         </div>
@@ -28,14 +28,14 @@
           </div>
           <div class="six wide column">
             <div class="ui fluid input">
-              <input type="text" name="empresa" value="{{$evento->empresa}}" />
+              <input type="text" name="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}}" />
+              <input type="hidden" name="servicio" />
               <i class="dropdown icon"></i>
               <div class="default text">Servicio</div>
               <div class="menu">
@@ -49,12 +49,12 @@
         <div class="row">
           <div class="two wide column">
             <div class="ui header">
-              Descripcion
+              Descripción
             </div>
           </div>
           <div class="eight wide column">
             <div class="ui fluid input">
-              <textarea name="descripcion">{{$evento->descripcion}}</textarea>
+              <textarea name="descripcion"></textarea>
             </div>
           </div>
         </div>
@@ -68,10 +68,6 @@
   </div>
 @endsection
 
-@push('scripts')
-  <script type="text/javascript">
-    $(document).ready(() => {
-      $('#servicio').dropdown()
-    })
-  </script>
+@push('readyjs')
+  $('#servicio').dropdown()
 @endpush

resources/views/admin/galeria/show.blade.php

@@ -0,0 +1,184 @@
+@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/galeria.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

resources/views/admin/layout/scripts.blade.php

@@ -5,3 +5,9 @@
 @endif
 
 @stack('scripts')
+
+<script type="text/javascript">
+  $(document).ready(() => {
+    @stack('readyjs')
+  })
+</script>

resources/views/evento.blade.php

@@ -1,7 +1,7 @@
 @extends('layout.base')
 
 @section('page_content')
-  <div id="evento">
+  <div id="galeria">
     <div class="ui container">
       <div class="ui two columns stackable grid">
         <div class="column">
@@ -28,7 +28,7 @@
           <p>
             {{$evento->descripcion}}
           </p>
-          <div class="ui four column grid">
+          <div class="ui four column grid" id="thumbs">
             @if ($imagenes !== false)
               @foreach (array_values($imagenes) as $i => $imagen)
                 <div class="column">
@@ -50,22 +50,42 @@
 @endsection
 
 @push('styles')
-  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/evento.css" />
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/galeria.css" />
 @endpush
 
-@push('scripts')
-  <script type="text/javascript">
-    var media = [
-      @foreach ($imagenes as $media)
-        '{!!$media->media->html!!}',
-      @endforeach
-    ]
-    $(document).ready(function() {
-      $('.imagen').css('cursor', 'pointer').click(function() {
-        var id = $(this).attr('data-id')
-        var src = media[id]
-        $('#seleccionada').html(src)
-      })
-    })
-  </script>
+@push('readyjs')
+  let media = [
+    @foreach ($imagenes as $media)
+      '{!!$media->media->html!!}',
+    @endforeach
+  ]
+  let thumbs = $('#thumbs .image img')
+  thumbs.each((i, el) => {
+    let src = $(el).attr('src')
+    if (src == '#') {
+      return
+    }
+    let w = el.width
+    let h = el.height
+    let parent = $(el).parent()
+    let r = w / h
+    if (r > 1) {
+      $(el).height(parent.height())
+      $(el).width(parent.height() * r)
+    } else {
+      $(el).width(parent.width())
+      $(el).height(parent.width() / r)
+    }
+  })
+  $('.imagen').css('cursor', 'pointer').click(function() {
+    var id = $(this).attr('data-id')
+    var src = media[id]
+    $('#seleccionada').html(src)
+    if (src.indexOf('<img') < 0) {
+      $('#seleccionada').removeClass('image').addClass('embed')
+      $('#seleccionada').find('video').width($('#seleccionada').width())
+    } else {
+      $('#seleccionada').removeClass('embed').addClass('image')
+    }
+  })
 @endpush

resources/views/eventos.blade.php

@@ -0,0 +1,25 @@
+@extends("layout.base")
+
+@section("page_content")
+  <div id="eventos">
+    <div class="ui container">
+      <div class="ui stackable two columns grid">
+        <div class="column">
+          <div class="ui image">
+            <img src="{{$urls->images}}/equipo.jpg" />
+          </div>
+        </div>
+        <div class="column contenido">
+          <div class="ui large header">
+            @yield('eventos_title')
+          </div>
+          @yield('eventos_content')
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/serviciosyproyectos.css" />
+@endpush

resources/views/eventos/bienestar.blade.php

@@ -0,0 +1,60 @@
+@extends("eventos")
+
+@section("eventos_title")
+  ORGANIZACIÓN PROGRAMA DE SALUD Y BIENESTAR LABORAL
+@endsection
+
+@section('eventos_content')
+<p>
+  El <b>Programa de Salud y Bienestar Laboral</b>, es una organización interna de la empresa que ofrece a los
+  empleados la posibilidad de disfrutar del <b>deporte y de la actividad física en la empresa</b>, con sus
+  compañeros de trabajo. Es una unidad integral de <b>gestión deportiva</b>, que no se limita exclusivamente a
+  la coordinación y desarrollo de las <b>actividades físicas y deportivas</b> de un colectivo, sino que además,
+  constituye un auténtico centro de actividad, atención, formación y asesoramiento, de todo lo relacionado
+  con la <b>salud, la forma física, el deporte y la nutrición</b>.
+</p>
+<p>
+  La organización del <b>Programa de Salud y Bienestar Laboral</b> trata de transmitir una filosofía de vida, para
+  que el empleado obtenga mejores rendimientos tanto en su vida profesional como en la personal. El objetivo
+  esencial el <b>fomento de la salud</b> y de los hábitos saludables de los empleados, para mejorar su motivación,
+  rendimiento y así transformar la compaña en una <b>empresa saludable</b>.
+</p>
+<h3>Beneficios del Programa de Salud y Bienestar Laboral</h3>
+<p>
+  Cuando una empresa decide implementar un programa de bienestar laboral y actividad física, se transforma en una
+  Empresa Saludable, obteniendo los siguientes beneficios:
+  <ul>
+    <li>Mejora la imagen de la empresa entre los empleados.</li>
+    <li>Fidelización y motivación de los empleados.</li>
+    <li>Incremento del sentimiento de pertenencia a la empresa.</li>
+    <li>Mejora la comunicación, las relaciones personales y el compañerismo.</li>
+    <li>Aumentan los beneficios para la salud, con un mayor bienestar y equilibrio personal.</li>
+    <li>Elimina la monotonía del día a día, aumentando el redimiendo y reduciendo el absentismo laboral.</li>
+    <li>Estimula valores como el esfuerzo, superación, rendimiento y concentración, ayudando a liberar tensiones.</li>
+  </ul>
+</p>
+<h3>Programa de Bienestar Laboral Como Herramienta de Comunicación</h3>
+<p>
+  El <b>programa de salud en la empresa</b> es una herramienta magnifica de comunicación interna, a través de la cual,
+  los empleados se relacionan con otros compañeros de la empresa, sin la cual sería muy difícil que ocurra.
+</p>
+<p>
+  Además es un factor de fidelización del empleado, en donde se consigue que los empleados se <b>sientan empresa</b> y
+  estén <b>orgullosos de ella – orgullo de pertenencia.</b>
+</p>
+<h3>Total Sport como especialista en Programas de Salud y Bienestar Laboral </h3>
+<p>
+  <b>Total Sport se encarga de toda la gestión del Programa:</b> buscar profesores, equipamientos, plataforma web, subir la
+  información y todo el material deportivo necesario. Continuamente personal de la organización se desplaza hasta las
+  instalaciones deportivas para seguir el buen funcionamiento de las actividades y poder resolver cualquier anomalía.
+</p>
+<p>
+  <b>Entrenamos el sistema inmunológico de tus empleados.</b> A través de nuestro <b>Programa de Salud y Bienestar Laboral</b> y
+  canalizando las actividades en tres secciones esenciales, como son la actividad física, la nutrición y el bienestar
+  emocional, conseguimos que tus empleados eleven su sistema inmune.
+</p>
+<p>
+  Le garantizamos nuestra ilusión y esfuerzo en el proyecto, para conseguir el bienestar de los participantes, que <b>se
+  sientan empresa y estén orgullosos de ella.</b>
+</p>
+@endsection

resources/views/eventos/carreras.blade.php

@@ -0,0 +1,58 @@
+@extends("eventos")
+
+@section("eventos_title")
+  EMPRESA DE ORGANIZACIÓN DE CARRERAS POPULARES
+@endsection
+
+@section('eventos_content')
+<p>
+  <b>Total Sport es una empresa especializada organización de carreras populares</b> pequeñas, medianas y grandes,
+  <b>tanto en Santiago como a nivel nacional</b>. La organización de una <b>carrera popular</b> es un evento integrador que
+  ofrece un valor añadido a la institución, a los patrocinadores y a la empresa que la organiza.
+</p>
+<p>
+  Las carreras son eventos sociales y desenfadados, pero realmente ocultan una gran dificultad técnica en su
+  gestión. Por ello, cuando iniciamos cualquier proyecto, muchos de nuestros clientes se sorprenden por la
+  complejidad y multiplicidad de aspectos diferentes que deben manejarse simultáneamente en la <b>organización de
+  la carrera popular.</b>
+</p>
+
+<h3>Modalidades En La Organización De Carreras Populares</h3>
+<p>
+  En Total Sport contamos con la trayectoria y la red necesaria para ofrecerles a nuestros clientes una <b>carrera
+  popular entretenida</b>, en la que la <b>organización recaiga sobre nosotros</b>, para que el cliente se olvide de toda
+  preocupación y pueda disfrutar del evento de una forma agradable y desenfadada.
+</p>
+<p>
+  Sea cual sea el tipo de carrera popular, puede confiar en nosotros ya que tenemos una amplia experiencia como <b>empresa
+    de organización de carreras populares</b>. Nos encargamos de todos los detalles para que sea todo un éxito.
+    Desarrollamos carreras populares de cualquier modalidad: <b>5k, 10k, Maratón, Media Maratón, Duatlón, Triatlón…</b>
+</p>
+<p>
+  Organizamos carreras populares para municipalidades, empresas, colegios, asociaciones, clubes deportivos, centros
+  educativos y particulares.
+</p>
+<p>
+  Contratar una <b>empresa de organización de carreras populares</b>, nunca fue tan sencillo, pide <b>presupuesto sin compromiso.</b>
+</p>
+
+<h3>Servicio Integral De Organización De La Carrera Popular</h3>
+<p>
+  <b>Somos una empresa</b> que nos ocupamos de todo lo necesario en la gestión de la carrera, para que sea un evento de éxito. Estos son
+  alguno de los servicios que ofrecemos:
+</p>
+<ul>
+  <li>Elaboración de la web de inscripciones <b>con todos los servicios para el corredor y comunicación global.</b></li>
+  <li>Feria del corredor, solicitudes de recorridos y planteamiento del mejor recorrido.</li>
+  <li>Cronometraje, dorsales, chips, publicación de resultados, fotografías, vídeos de meta y entrega de trofeos.</li>
+  <li>Ambulancia y seguro de accidentes para todos los participantes.</li>
+  <li>Megafonía, carpas, vallas y todo lo necesario para la buena organización de su carrera. </li>
+</ul>
+<p>
+  Si quieres desarrollar un evento de éxito, con gran impacto en los medios y con una participación elevada, la organización
+  de una carrera popular es una buena opción.
+</p>
+<p>
+  Para ello puedes contar con nosotros como <b>empresa de organización de carreras populares.</b>
+</p>
+@endsection

resources/views/eventos/deportivos.blade.php

@@ -0,0 +1,25 @@
+@extends("eventos")
+
+@section("eventos_title")
+  EVENTOS DEPORTIVOS
+@endsection
+
+@section('eventos_content')
+<p>
+  La <b>organización de eventos deportivos</b> son la especialidad de <b>Total Sport</b>. Ofrecemos un producto llave en mano,
+  donde nos encargamos de la totalidad de las facetas de la organización, de modo que la empresa contratante no
+  tenga que dedicar recursos humanos ni materiales.
+</p>
+<p>
+  Somos especialistas en <b>eventos al aire libre</b> y tenemos una dilatada experiencia en diferentes deportes y en
+  todas sus modalidades: Futbol, Futbolito, Voleibol, Tenis,, Atletismo, Mountain Bike, Cicloturismo, etc. Eventos
+  populares y sociales, etc. A lo largo de estos años hemos <b>organizado eventos</b> de todas las categorías, desde
+  pruebas escolares hasta campeonatos nacionales.
+</p>
+<p>
+  Para <b>Total Sport</b>, todo proyecto deportivo es bienvenido. Nos gusta lo que hacemos y por eso, cualquier propuesta
+  es una nueva oportunidad para que nuestro entusiasmo y hacer profesional se traduzca en un evento de éxito para
+  usted y sus invitados. Gracias a nuestro recorrido en este sector, podemos servir los más exigentes y detallados
+  planes, o podemos hacer realidad una idea incipiente.
+</p>
+@endsection

resources/views/eventos/ligas.blade.php

@@ -0,0 +1,27 @@
+@extends("eventos")
+
+@section("eventos_title")
+  LIGAS DE EMPRESA
+@endsection
+
+@section('eventos_content')
+<p>
+  Total Sport organiza competiciones deportivas de todas las disciplinas entre departamentos de la empresa
+  o con otras. Este tipo de eventos da un valor a su empresa y propician momentos de interacción entre los
+  trabajadores en un ambiente más distendido y familiar. Las <b>ligas de empresa</b> ofrecen un punto de encuentro
+  y un proyecto en común, son una herramienta ideal para potenciar la motivación de los colaboradores y
+  mejorar el clima laboral.
+</p>
+<p>
+  El personal técnico de <b>Total Sport</b> se ocupa de toda la <b>gestión y organización la liga</b>, realizando la difusión
+  entre los trabajadores, reservando las instalaciones necesarias, las inscripciones, informando de los resultados
+  y convocatorias para disputar los partidos. Los <b>torneos deportivos</b> más solicitados con las empresas que
+  trabajamos son:
+</p>
+<ul>
+  <li>Ligas de Fútbol, Fútbolito, Baby Futbol y Voleibol.</li>
+  <li>Torneos de Tenis.</li>
+  <li>Torneos de Padel.</li>
+  <li>Clases y torneos de Golf.</li>
+</ul>
+@endsection

resources/views/eventos/team.blade.php

@@ -0,0 +1,57 @@
+@extends("eventos")
+
+@section("eventos_title")
+  ORGANIZACIÓN DE ACTIVIDADES DE TEAM BUILDING
+@endsection
+
+@section('eventos_content')
+<p>
+  Desde <b>Total Sport</b> sabemos de la importancia que significa generar confianza en los trabajadores. Nuestro
+  equipo de <b>actividades de Team Building</b> desarrollará acciones concretas para fomentar la gestión de los
+  equipos de tu empresa. Actividades de alta implicación para desarrollar el compañerismo, acciones formativas
+  para perfilar el espíritu de equipo dentro de las organizaciones. Coaching experiencial, que sin duda
+  ayudarán a tu empresa en la resolución de problemas, al desarrollo de la adaptabilidad y el compromiso desde
+  nuevos enfoques.
+</p>
+<p>
+  Ofrecemos una gama de <b>actividades de Team Building</b> participativas y estructuradas realizadas para mejorar el
+  rendimiento de los equipos de trabajo de tu organización y su capacidad para trabajar juntos de forma efectiva.
+  Hoy en día es necesario realizar <b>eventos de team building</b> con el objetivo de mejorar el clima laboral y aumentar
+  el rendimiento de su plantilla y para ello no hay nada mejor que unir deporte y salud en su ambiente de trabajo.
+</p>
+<h3>Beneficios de las Actividades de Team Building</h3>
+<p>
+  Las <b>actividades de Team Building</b> de <b>Total Sport</b>, ofrece a los trabajadores de tu empresa las herramientas y
+  actividades precisas para elevar el nivel de resultados, satisfacción, cohesión y motivación de sus integrantes.
+  Nuestro objetivo: ayudarte a conseguir equipos integrados y motivados hacia un objetivo común y productivo.
+  Construir equipo (Team Building) sólido, flexible y motivado es una de las principales prioridades que tienen las
+  empresas actuales.
+</p>
+<p>
+  Te proponemos una amplia variedad de <b>actividades de Team Building</b>, tanto outdoor como Indoor.
+  Los beneficios que obtenemos con este tipo de actividades son:
+</p>
+<ul>
+  <li>Mejora de la cohesión.</li>
+  <li>Mejora de las relaciones inter-personales.</li>
+  <li>Aumento de la motivación y la autoestima.</li>
+  <li>Fomento de los hábitos saludables.</li>
+</ul>
+<h3>Servicios Incluidos en las Actividades de Team Building</h3>
+<p>
+  Ideamos, diseñamos y desarrollamos nuestros propias <b>actividades de team building para empresas</b>, por lo que
+  las que aparecen aquí son sólo una muestra de nuestro amplio catálogo. Si deseas consultarlo o combinar algunas
+  de las actividades, adaptándolas a tus gustos y objetivos, no dudes en consultarnos. Nuestro objetivo es tu
+  satisfacción. Como un simple ejemplo, las actividades que te podemos ofrecer son:
+</p>
+<ul>
+  <li>Evento de Masterchef</li>
+  <li>Formula Team</li>
+  <li>Juegos Medievales</li>
+  <li>Gymkhana cultural</li>
+  <li>Family day de empresa</li>
+  <li>Team Building con Drones</li>
+  <li>Paint ball y barbacoa</li>
+  <li>Y muchas más</li>
+</ul>
+@endsection

resources/views/home.blade.php

@@ -7,10 +7,13 @@
   @include('home.nosotros')
   @include('home.clientes')
   @include('home.testimonios')
-  @include('home.eventos')
-  @include('home.contacto')
+  @include('home.galeria')
 @endsection
 
 @push('styles')
   <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/home.css" />
 @endpush
+
+@push('scripts')
+  <script type="text/javascript" src="{{$urls->scripts}}/home.js"></script>
+@endpush

resources/views/home/banner.blade.php

@@ -16,7 +16,7 @@
       <div class="row">
         <div class="three wide column">
           <button class="ui fluid huge inverted brand basic button" style="font-weight: 900;">
-            DESCARGA
+            CONTÁCTANOS
           </button>
         </div>
       </div>

resources/views/home/clientes.blade.php

@@ -34,54 +34,11 @@
   </div>
 </div>
 
-@push('scripts')
-  <script type="text/javascript">
-    var clientes = [
-      @foreach ($clientes as $cliente)
-        '{!!$cliente!!}',
-      @endforeach
-    ]
-    var current = 0
-    var rows = 2
-    var cols = 6
-    function decreaseClientes() {
-      $('#img_clientes').find('.row').find('.column:last-child').remove()
-      current -= rows
-      if (current < - cols * rows) {
-        current = clientes.length - (cols - 1) * rows
-      }
-      n = current
-      if (n < 0) {
-        n = clientes.length + n
-      }
-      $('#img_clientes').find('.row:first-child').prepend(
-        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n])
-      )
-      $('#img_clientes').find('.row:last-child').prepend(
-        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n + 1])
-      )
-    }
-    function increaseClientes() {
-      $('#img_clientes').find('.row').find('.column:first-child').remove()
-      current += 2
-      if (current > clientes.length - cols * rows) {
-        current = - (cols - 1) * rows
-      }
-      $('#img_clientes').find('.row:first-child').append(
-        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + (cols - 1) * rows])
-      )
-      $('#img_clientes').find('.row:last-child').append(
-        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + cols * rows - 1])
-      )
-    }
-    $(document).ready(function() {
-      $('.ci .icon').css('cursor', 'pointer').click(function() {
-        if ($(this).attr('class').indexOf('left') != -1) {
-          decreaseClientes()
-          return
-        }
-        increaseClientes()
-      })
-    })
-  </script>
+@push('readyjs')
+  clientes.clientes = [
+    @foreach ($clientes as $cliente)
+      '{!!$cliente!!}',
+    @endforeach
+  ]
+  clientes.setup()
 @endpush

resources/views/home/eventos.blade.php

@@ -1,96 +0,0 @@
-<div id="eventos">
-  <div class="ui container">
-    <div class="ui center aligned huge header">
-      EVENTOS
-    </div>
-    <div class="ui centered grid">
-      <div class="center aligned column">
-        <div class="ui tabular stackable compact menu">
-          <a class="active item servicio" data-filter="none">Todos</a>
-          @foreach ($servicios as $i => $servicio)
-            <a class="item servicio" data-filter="{{$servicio->titulo}}">{{$servicio->titulo}}</a>
-          @endforeach
-        </div>
-      </div>
-    </div>
-    <div class="ui center aligned grid" id="eventos_cards">
-      @foreach ($eventos as $i => $evento)
-        <div class="eight wide tablet four wide computer column">
-          <div class="ui basic segment">
-            <a href="{{$urls->base}}/evento/{{$i}}">
-              <div class="ui image">
-                {!!$evento->imagen!!}
-              </div>
-              <div class="ui center aligned header">
-                {{$evento->titulo}}
-                <br />
-                {{$evento->empresa}}
-              </div>
-            </a>
-          </div>
-        </div>
-      @endforeach
-    </div>
-  </div>
-</div>
-
-@push('scripts')
-  <script type="text/javascript">
-    var eventos = {
-      eventos: [
-        @foreach ($eventos as $evento)
-          {
-            titulo: '{{$evento->titulo}}',
-            image: '{!!$evento->imagen!!}',
-            empresa: '{{$evento->empresa}}',
-            servicio: '{{$evento->servicio}}'
-          },
-        @endforeach
-      ],
-      current_tab: 'none',
-      changeEventos: (filter) => {
-        var grid = $('#eventos_cards')
-        grid.html('')
-        $.each(eventos.eventos, function(i, el) {
-          if (filter != 'none' && el.servicio != filter) {
-            return
-          }
-          grid.append(
-            $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
-              $('<div></div>').attr('class', 'ui basic segment').append(
-                $('<a></a>').attr('href', '{{$urls->base}}/evento/' + i).append(
-                  $('<div></div>').attr('class', 'ui image').append(
-                    $('<img />').attr('src', el.image)
-                  )
-                ).append(
-                  $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
-                    $('<br />')
-                  ).append(el.empresa)
-                )
-              )
-            )
-          )
-        })
-      },
-      changeTab: (filter) => {
-        $('.servicio.active').removeClass('active')
-        $(".servicio[data-filter='" + filter + "']").addClass('active')
-        eventos.current_tab = filter
-      },
-      setup: () => {
-        $('.servicio').click(function(e) {
-          e.preventDefault()
-          var filter = $(this).attr('data-filter')
-          if (filter == eventos.current_tab) {
-            return
-          }
-          eventos.changeTab(filter)
-          eventos.changeEventos(filter)
-        })
-      }
-    }
-    $(document).ready(function() {
-      eventos.setup()
-    })
-  </script>
-@endpush

resources/views/home/galeria.blade.php

@@ -0,0 +1,54 @@
+<div id="galeria">
+  <div class="ui container">
+    <div class="ui center aligned huge header">
+      GALERÍA
+    </div>
+    <div class="ui centered grid">
+      <div class="center aligned column">
+        <div class="ui tabular stackable compact menu">
+          <a class="active item servicio" data-filter="none">Todos</a>
+          @foreach ($servicios as $i => $servicio)
+            <a class="item servicio" data-filter="{{$servicio->titulo}}">{{$servicio->titulo}}</a>
+          @endforeach
+        </div>
+      </div>
+    </div>
+    <div class="ui bottom attached segment">
+      <div class="ui center aligned grid" id="galeria_cards">
+        @foreach ($galeria as $i => $evento)
+          <div class="eight wide tablet four wide computer column">
+            <div class="ui basic segment">
+              <a href="{{$urls->base}}/evento/{{$i}}">
+                <div class="ui image">
+                  {!!$evento->imagen!!}
+                </div>
+                <div class="ui center aligned header">
+                  {{$evento->titulo}}
+                  <br />
+                  {{$evento->empresa}}
+                </div>
+              </a>
+            </div>
+          </div>
+        @endforeach
+      </div>
+    </div>
+  </div>
+</div>
+
+@push('readyjs')
+  galeria.id = '#galeria'
+  galeria.galeria_id = '#galeria_cards'
+  galeria.galeria = [
+    @foreach ($galeria as $evento)
+      {
+        titulo: '{{$evento->titulo}}',
+        image: '{!!$evento->imagen!!}',
+        empresa: '{{$evento->empresa}}',
+        servicio: '{{$evento->servicio}}'
+      },
+    @endforeach
+  ]
+  galeria.base_url = '{{$urls->base}}'
+  galeria.setup()
+@endpush

resources/views/home/nosotros.blade.php

@@ -8,15 +8,17 @@
       </div>
       <div class="column contenido">
         <div class="ui large header">
-          NOSOTROS
+          EMPRESA DE ORGANIZACIÓN DE EVENTOS
         </div>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-          nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-          officia deserunt mollit anim id est laborum.
-        </p>
+          Total Sport con sede en Santiago es una empresa dedicada a la organización y gestión de eventos.
+          Con más de 15 años de experiencia, trabajamos siempre en función de las necesidades de nuestros
+          clientes, asegurándonos de obtener una máxima satisfacción. Ofrecemos todo tipo de servicios en
+          la organización de eventos deportivos, recreativos y socioculturales: gestión de torneos, Team
+          Building, vacaciones y campamentos de invierno y verano para hijos de trabajadores, organización
+          de carreras y cicletadas populares, ligas de empresa, conciertos, programas de salud empresarial,
+          cumpleaños, organización del día de la familia, talleres y mucho más.
+        <p>
       </div>
     </div>
   </div>

resources/views/home/servicios.blade.php

@@ -1,17 +1,16 @@
 <div class="ui container" id="servicios">
   <div class="ui center aligned huge header">
-    SERVICIOS
+    TOTAL SPORT
   </div>
   <div class="ui center aligned grid">
     <div class="twelve wide column">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+  Empresa del <b>sector del marketing</b> dedicada a la <b>organización y gestión de eventos deportivos, recreativos y culturales.</b>
     </div>
     <div class="row">
-      <div class="twelve wide column">
+      <div class="fourteen wide column">
         <div class="ui center aligned stackable grid">
-          <div class="three columns row">
-            @foreach ($servicios as $servicio)
+          <div class="four columns row">
+            @foreach ($resumen as $servicio)
               <div class="column">
                 <div class="ui basic card">
                   <div class="image">
@@ -22,7 +21,7 @@ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                       {{$servicio->titulo}}
                     </div>
                     <div class="description">
-                      {{$servicio->contenido}}
+                      {!!$servicio->contenido!!}
                     </div>
                   </div>
                 </div>

resources/views/home/testimonios.blade.php

@@ -22,38 +22,14 @@
   </div>
 </div>
 
-@push('scripts')
-  <script type="text/javascript">
-    var testimonios = [
-      @foreach ($testimonios as $testimonio)
-        {
-          contenido: '{{$testimonio->contenido}}',
-          emisor: '{{$testimonio->emisor}}'
-        },
-      @endforeach
-    ]
-    var current_testimonio = 0
-    function cambiar(id) {
-      if (id == current_testimonio) {
-        return
-      }
-      $('#testimonio').html('').append(
-        $('<p></p>').html(testimonios[id].contenido)
-      ).append(
-        $('<div></div>').attr('class', 'ui header').html(testimonios[id].emisor)
-      )
-      $('#marcador').find(".icon[data-id='" + current_testimonio + "']").addClass('outline')
-      $('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
-      $('#marcador').find('.icon.outline').css('cursor', 'pointer')
-      $('#marcador').find('.icon:not(.outline)').css('cursor', 'default')
-      current_testimonio = id
-    }
-    $(document).ready(function() {
-      $('#marcador').find('.icon').click(function() {
-        var id = $(this).attr('data-id')
-        cambiar(id)
-      })
-      $('#marcador').find('.icon.outline').css('cursor', 'pointer')
-    })
-  </script>
+@push('readyjs')
+  testimonios.testimonios = [
+    @foreach ($testimonios as $testimonio)
+      {
+        contenido: '{{$testimonio->contenido}}',
+        emisor: '{{$testimonio->emisor}}'
+      },
+    @endforeach
+  ]
+  testimonios.setup()
 @endpush

resources/views/layout/contacto.blade.php

@@ -32,24 +32,20 @@
   </div>
 </div>
 
-@push('scripts')
-  <script type="text/javascript">
-    $(document).ready(function() {
-      $('#formulario_contacto').submit(function(e) {
-        e.preventDefault()
+@push('readyjs')
+  $('#formulario_contacto').submit(function(e) {
+    e.preventDefault()
 
-        var nombre = $(this).find("[name='nombre']").val()
-        var telefono = $(this).find("[name='telefono']").val()
-        var email = $(this).find("[name='email']").val()
-        var mensaje = $(this).find("[name='mensaje']").val()
+    var nombre = $(this).find("[name='nombre']").val()
+    var telefono = $(this).find("[name='telefono']").val()
+    var email = $(this).find("[name='email']").val()
+    var mensaje = $(this).find("[name='mensaje']").val()
 
-        $.post('{{$urls->base}}/contacto', {nombre: nombre, telefono: telefono, email: email, mensaje: mensaje}, function(data) {
-          console.debug(data)
-        }, 'json')
+    $.post('{{$urls->base}}/contacto', {nombre: nombre, telefono: telefono, email: email, mensaje: mensaje}, function(data) {
+      console.debug(data)
+    }, 'json')
 
-        return false
-      })
-      $('#map').embed()
-    })
-  </script>
+    return false
+  })
+  $('#map').embed()
 @endpush

resources/views/layout/footer.blade.php

@@ -1,4 +1,5 @@
 <footer class="ui fixed">
+@include("layout.contacto")
   <div class="dark-grey">
     <div class="ui inverted container main">
       <div class="ui stackable grid">

resources/views/layout/menu.blade.php

@@ -1,16 +1,36 @@
 <nav class="ui massive stackable center aligned text three item grey menu">
   <div class="left three item menu">
-    <a class="item" href="{{$urls->base}}#servicios">Servicios</a>
     <a class="item" href="{{$urls->base}}/#nosotros">Nosotros</a>
-    <a class="item" href="{{$urls->base}}/#clientes">Clientes</a>
+    <div class="item ui simple dropdown">
+      <a class="item" href="{{$urls->base}}#servicios">Servicios</a>
+      <div class="menu">
+        <a class="item" href="{{$urls->base}}/servicios/deportivos">Deportivos</a>
+        <a class="item" href="{{$urls->base}}/servicios/culturales">Socioculturales<a>
+        <a class="item" href="{{$urls->base}}/servicios/animacion">Animación</a>
+        <a class="item" href="{{$urls->base}}/servicios/arriendos">Arriendo o Compra</a>
+      </div>
+    </div>
+    <div class="item ui simple dropdown">
+     <a class="item" href="{{$urls->base}}/#eventos">Eventos</a>
+     <div class="menu">
+       <a class="item" href="{{$urls->base}}/eventos/deportivos">Deportivos</a>
+       <a class="item" href="{{$urls->base}}/eventos/bienestar">Programa de Salud Laboral</a>
+       <a class="item" href="{{$urls->base}}/eventos/ligas">Ligas de empresa</a>
+       <a class="item" href="{{$urls->base}}/eventos/team">Team Building</a>
+       <a class="item" href="{{$urls->base}}/eventos/carreras">Carreras Populares</a>
+     </div>
+    </div>
   </div>
+
   <a class="item" href="{{$urls->base}}">
     <div class="ui header" id="page_logo">
-      Total<span class="brand">Sport</span>
+      Total <span class="brand">Sport</span>
     </div>
   </a>
-  <div class="right two item menu">
-    <a class="item" href="{{$urls->base}}/#eventos">Eventos</a>
+
+  <div class="right three item menu">
+    <a class="item" href="{{$urls->base}}/#galeria">Galería</a>
+    <a class="item" href="{{$urls->base}}/#clientes">Clientes</a>
     <a class="item" href="{{$urls->base}}/#contacto">Contacto</a>
   </div>
 </nav>

resources/views/layout/scripts.blade.php

@@ -5,3 +5,9 @@
 @endif
 
 @stack('scripts')
+
+<script type="text/javascript">
+  $(document).ready(() => {
+    @stack('readyjs')
+  })
+</script>

resources/views/servicios.blade.php

@@ -0,0 +1,25 @@
+@extends("layout.base")
+
+@section("page_content")
+  <div id="serviciosyproyectos">
+    <div class="ui container">
+      <div class="ui stackable two columns grid">
+        <div class="column">
+          <div class="ui image">
+            <img src="{{$urls->images}}/equipo.jpg" />
+          </div>
+        </div>
+        <div class="column contenido">
+          <div class="ui large header">
+            @yield('servicios_title')
+          </div>
+          @yield('servicios_content')
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/serviciosyproyectos.css" />
+@endpush

resources/views/servicios/animacion.blade.php

@@ -0,0 +1,27 @@
+@extends("servicios")
+
+@section("servicios_title")
+  SERVICIOS DE ANIMACIÓN
+@endsection
+
+@section('servicios_content')
+    <p>
+      Para ofrecer los mejores servicios de animación, Total Sport cuenta con una extensa red de recursos, <b>técnicos,
+      monitores, animadores, promotores, presentadores </b> para todo tipo de actividades y celebraciones artistas, equipos
+      de fotografía, audiovisuales, sonido e iluminación, decoraciones…
+    </p>
+    <p>
+      Tenemos la posibilidad de <b>programar y gestionar todo tipo de eventos, </b> programas y actividades con total garantía
+      e implicación. Personal especializado y con experiencia se encarga del estudio, diseño, comercialización y
+      desarrollo del mismo.
+    </p>
+    <h3>Servicios y eventos de animación </h3>
+    <ul>
+      <li><b>Animación de Celebraciones:</b> bodas, bautizos, cumpleaños, comuniones…</li>
+      <li><b>Animaciones Infantiles: </b> inflables, magos, mimos, payasos, zanquistas, malabaristas, cuentacuentos, etc.</li>
+      <li>Espectáculos y Shows: <b>música en directo, </b> artistas, humoristas, personajes infiltrados, etc.</li>
+      <li>Pasacalles y desfiles de animación.</li>
+      <li><b>Concentraciones deportivas, campañas electorales</b></li>
+      <li>Fiestas populares: parques recreativos, macroeventos gastronómicos, mercados de época, discomóvil… </li>
+    </ul>
+@endsection

resources/views/servicios/arriendo.blade.php

@@ -0,0 +1,19 @@
+@extends("servicios")
+
+@section('servicios_title')
+  ARRIENDO Y COMPRA DE CARPAS Y JUEGOS INFLABLES
+@endsection
+
+@section("servicios_content")
+    <p>
+      En <b>Total Sport</b> como especialista en la <b>organización de eventos</b> a nivel nacional, disponemos de servicio de
+      <b>arriendo o compra de carpas y juegos inflables </b> con gran variedad de modelos y medidas. Todas son <b>carpas y juegos</b>
+      de gran calidad y certificadas para todo tipo de eventos.
+    </p>
+    <p>
+      Nuestro equipo de <b>arriendo de carpas y juegos inflables</b> está especializado en el transporte, montaje, instalación
+      y desmontaje, dejándolo todo listo para para que su evento sea un éxito.
+      Además como especialistas en la <b>organización de eventos,</b> podemos ofrecerle propuesta de todo lo que necesite:
+      climatización, tarima, moqueta, grupo electrógeno, sonido, iluminación…
+    </p>
+@endsection

resources/views/servicios/culturales.blade.php

@@ -0,0 +1,28 @@
+@extends('servicios')
+
+@section('servicios_title')
+  SERVICIOS SOCIOCULTURALES
+@endsection
+
+@section("servicios_content")
+<p>
+  Total Sport ofrece todo tipo de servicios socioculturales, a nivel cultural, social y educativo.
+  Te ofrecemos una amplia cantidad de servicios, desde servicios sociales para distintos tipos de
+  colectivos como mayores, menores, personas en riesgo de exclusión social, personas con discapacidad.
+  Servicios relacionados con el ámbito cultural como talleres culturales, personal de gestión
+  cultural o de apoyo.
+</p>
+  <h3>Servicios culturales</h3>
+    <ul>
+      <li>Servicios técnicos en Teatros, Auditorios y Palacios de Congresos.</li>
+      <li>Técnicos para todo tipo de <b>talleres culturales.</b></li>
+      <li>Organización y apoyo en <b>eventos culturales.</b></li>
+    </ul>
+  <h3>Servicios sociales</h3>
+    <ul>
+      <li>Servicios en Residencias y Centros de Día para Mayores.</li>
+      <li>Servicios en Centros Ocupacionales y <b>Asociaciones de Personas con Discapacidad.</b></li>
+      <li>Servicio de <b>Ayuda a Domicilio.</b></li>
+      <li>Talleres, Campamentos y otro tipo de Actividades para Centros de Menores.</li>
+    </ul>
+@endsection

resources/views/servicios/deportivos.blade.php

@@ -0,0 +1,33 @@
+@extends("servicios")
+
+@section("servicios_title")
+  SERVICIOS DEPORTIVOS
+@endsection
+
+@section('servicios_content')
+<p>
+  Total Sport ofrece la prestación de todo tipo de <b>servicios deportivos</b>, actividades deportivas
+  y gestión integral de instalaciones deportivas. Contamos con la experiencia, la tecnología y
+  el conocimiento necesario para prestar todo tipo de <b>servicios deportivos</b> con total garantía
+  de calidad.
+</p>
+<h3>Servicios deportivos</h3>
+<ul>
+  <li>Personal especializado para todo tipo de <b>servicios dentro de la instalación deportiva.</b></li>
+  <li>Técnicos deportivos para todo tipo de actividades y modalidades.</li>
+  <li>Actividades Deportivas Extraescolares.</li>
+  <li>Consultoría deportiva especializada.</li>
+  <li><b>Gestión de servicios</b> deportivos.</li>
+  <li>Gestión integral de <b>instalaciones deportivas.</b></li>
+  <li>Organización y gestión de eventos deportivos.</li>
+</ul>
+<h3>Productos deportivos</h3>
+<ul>
+  <li>Ligas de interempresa.(futbol, futbolito, voleibol, basquetbol).</li>
+  <li>Organización de Carreras populares.</li>
+  <li>Torneos de tenis, padel, squash y tenis de mesa para empresas.</li>
+  <li>Eventos de presentación y de marca para empresas.</li>
+  <li>Personal de apoyo en Eventos.</li>
+  <li>Arriendo de material para Eventos.</li>
+</ul>
+@endsection