82 lines
2.4 KiB
PHP
82 lines
2.4 KiB
PHP
<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="{{$i}}">{{$servicio->titulo}}</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui center aligned grid" id="eventos_cards">
|
|
@foreach ($eventos as $evento)
|
|
<div class="eight wide tablet four wide computer column">
|
|
<div class="ui basic segment">
|
|
{!!$evento->image!!}
|
|
<div class="ui center aligned header">
|
|
{{$evento->titulo}}
|
|
<br />
|
|
{{$evento->empresa}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
var eventos = [
|
|
@foreach ($eventos as $evento)
|
|
{
|
|
titulo: '{{$evento->titulo}}',
|
|
image: '{!!$evento->image!!}',
|
|
empresa: '{{$evento->empresa}}',
|
|
servicio: {{$evento->servicio}}
|
|
},
|
|
@endforeach
|
|
];
|
|
function changeEventos(filter) {
|
|
var grid = $('#eventos_cards')
|
|
grid.html('')
|
|
$.each(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(el.image).append(
|
|
$('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
|
|
$('<br />')
|
|
).append(el.empresa)
|
|
)
|
|
)
|
|
)
|
|
})
|
|
}
|
|
var current_tab = 'none'
|
|
function changeTab(filter) {
|
|
$('.servicio.active').removeClass('active')
|
|
$(".servicio[data-filter='" + filter + "']").addClass('active')
|
|
current_tab = filter
|
|
}
|
|
$(document).ready(function() {
|
|
$('.servicio').click(function(e) {
|
|
e.preventDefault()
|
|
var filter = $(this).attr('data-filter')
|
|
if (filter == current_tab) {
|
|
return
|
|
}
|
|
changeTab(filter)
|
|
changeEventos(filter)
|
|
})
|
|
})
|
|
</script>
|
|
@endpush
|