@extends('layouts.backBase')

@section('css')
{!! HTML::style('//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css') !!}
{!! HTML::style('css/back/panel.css') !!}
{!! HTML::style('css/back/dataTable.css') !!}
@stop

@section('body')
{!! HTML::script('js/back/custom.js') !!}
@stop

@section('content')
<h3>Listado de categorías.</h3>
<hr>
<table class="table hover order-column compact" id="panelTable">
   <thead>
      <tr>
         <td>
            Nombre
         </td>
         <td>
            Imagen
         </td>
         <td>
            Acciones
         </td>
      </tr>
   </thead>
   <tbody>
      @foreach ($catList as $cat)
      <tr>
         <td>
            {{ $cat->getName() }}
         </td>
         <td>
            @if ( $cat->getImage() )
            <img class="image-for-viewer" title="Click para ver imagen a tamaño original" data-toggle="tooltip" data-placement="top" style="max-height: 50px;" class="img-responsive" src="{{ asset($cat->getImage()) }}">
            @else
            Sin foto
            @endif
         </td>
         <td data-sort="{{ $cat->getActive() }}" style="text-align: center">
            @if ( $cat->getActive() )
            <button type="button" class="btn btn-xs btn-success btn-flat">
               <i data-toggle="tooltip" data-placement="top" title="Visible en la web" class="fa fa-thumbs-o-up"></i>
            </button>
            @else
            <button type="button" class="btn btn-xs btn-danger btn-flat">
               <i data-toggle="tooltip" data-placement="top" title="No visible en la web" class="fa fa-thumbs-o-down"></i>
            </button>
            @endif
            <a class="action" href="{{ route('panel/social/cat/edit',[ 'id' =>  $cat->getId()]) }}" data-toggle="tooltip" data-placement="top" title="Editar este elemento">
               <button type="button" class="btn btn-xs btn-default btn-flat">
                  <i class="fa fa-pencil"></i>
               </button>
            </a>
            <button type="button" data-toggle="modal" data-product_id="{{ $cat->getId() }}" data-product_name="{{ $cat->getName() }}" class="btn btn-xs btn-default btn-flat" data-target="#confirmDelete">
               <span data-toggle="tooltip" data-placement="top" title="Borrar este elemento">
                  <i class="fa fa-trash"></i>
               </span>
            </button>
         </td>
      </tr>
      @endforeach
   </tbody>
</table>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="confirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Borrar Lugar</h4>
         </div>
         <div class="modal-body">
            ¿ Seguro que desea borrar la categoría: <span id="mName"></span> ?
         </div>
         <div class="modal-footer">
            {!! Form::open(array('route'=>'panel/social/cat/remove', 'method'=>'POST')) !!}
            <input type="hidden" name="removeId" id="removeId">
            <button type="submit" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Sí, borrar este elemento">Borrar</button>
            <span>
               <button type="button" data-toggle="tooltip" data-placement="top" title="Cerrar y no borrar nada" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </span>
            </form>

         </div>
      </div>
   </div>
</div>
@stop

@section('scripts')
{!! HTML::script('//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js') !!}
<script>
   $(document).ready(function () {
      $('#panelTable').dataTable({
         "lengthMenu": [[10, 20, -1], [10, 20, "Todo"]],
         "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Spanish.json"
         },
         "columns": [
            null,
            {"width": "13%"},
            {"width": "10%"}
         ]
      });
      //triggered when modal is about to be shown
      $('#confirmDelete').on('show.bs.modal', function (e) {
         //get data-id attribute of the clicked element
         var productId = $(e.relatedTarget).data('product_id');
         var productName = $(e.relatedTarget).data('product_name');
         $("#confirmDelete #mName").html(productName);
         $("#confirmDelete #removeId").val(productId);//e.g. 'domainname/products/' + productId
      });
   });
</script>
@stop