@extends('master')
@section('content')
<link rel="stylesheet" href="lib/css/bootstrap.css">
<link rel="stylesheet" href="lib/css/select2.min.css"/>
<style type="text/css">
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #607D8B;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.pagination>li {
    display: inline;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #607D8B;
    border-color: #607D8B;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #607D8B;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}    
</style>
<!--begin intro -->
<div id="intro">
  <!--begin header_wrapper -->
  @include('pages.partials.header')
  <!--end header_wrapper -->
</div>
<!--end intro -->
<!--begin newsletter_wrapper -->
<div id="subscribe" class="parallax_wrapper">
  <!--begin newsletter_box -->
  <div class="newsletter_box" style="padding: 25px 0 10px 0!important">
    <h3 class="parallax_title" style="font-size: 1.5rem;">Galería de actividades - CONEDE</h3>
  </div>
  <!--end newsletter_box -->
</div>
<!--end newsletter_wrapper -->
<!--begin section_wrapper -->
<div class="section_wrapper">
  <!--begin section_box -->
  <div class="small_margins p-2">
    <!--begin row -->
    <div class="wrapper">
      <div>
        <section class="section_box small_margins" style="padding-top: 16px;">
            @if(!empty($data))
                @foreach ($data as $i => $item)
                    <h4 style="margin: 0 0 6px 0; color: #607D8B">{{$item->gal_tit}}</h4>
                    <p style="font-size: 16px; margin: 0 0 12px 0">{!!$item->gal_des!!}</p>
                    @if(!empty($item->gal_files))
                    <div class="group-wrap">
                        @foreach (unserialize($item->gal_files) as $gal)
                        <a href="https://conede-media.s3.amazonaws.com/gallery/{{$gal}}" class="yBox" data-ybox-group="group{{$i}}" title="{{$item->gal_tit}}">
                            <img style="margin: 0 10px 10px 0; width: 150px; max-width: 21%" src="https://conede-media.s3.amazonaws.com/gallery/{{$gal}}" alt="{{$item->gal_tit}}" width="150" />
                        </a>
                        @endforeach
                    </div>
                    @endif
                    <br>
                @endforeach
            @endif                    
        </section>
        <div style="text-align: center; width: 100%">
            {{ $data->onEachSide(0)->appends($_GET)->links('vendor.pagination.bootstrap-4') }}
        </div>
      </div>
    </div>
  </div>
  <!--end section_box -->
</div>
<!--end section_wrapper -->
<!--begin contact_wrapper -->
<div id="contact" class="contact_wrapper">
  <!--begin contact_box -->
  <div class="contact_box">
    <i class="fa fa-map-marker fa-4x blue"></i><br>
    <h5 class="contact_title">INFORMES</h5>
    <p class="contact_details">CHICLAYO: Calle Manuel María Izaga 783- 2do piso. </p>
    <p class="contact_details">Celular: 979665496</p>
    <a href="mailto:someone@example.com" class="contact_details">informes@conede.edu.pe</a>
    <a href="/inscripciones" class="button_transparent">Inscribirse</a>
  </div>
  <!--end contact_box -->
</div>
<!--end contact_wrapper -->
@endsection
@section('scripts')
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/modal-popup-ybox/dist/css/yBox.min.css" />
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/modal-popup-ybox/dist/js/yBox.min.js"></script>
@endsection