@extends('layout')
<link rel="stylesheet" href="{{ asset('spid/vendors/select2/select2.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ asset('spid/vendors/select2/select2-materialize.css') }}" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/css/pages/form-select2.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/css/pages/data-tables.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/vendors/data-tables/css/select.dataTables.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('spid/vendors/data-tables/css/jquery.dataTables.min.css') }}">
@section('title')
    Sesiones
@endsection
@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col s12">
                            <table id="data-table-simple" class="display" style="width: 100%!important;">
                                <thead>
                                    <tr>
                                        <th style="width: 7%">Fecha</th>
                                        <th style="width: 85%">Sesión</th>
                                        <th style="text-align: center; width: 8%" >Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @if(count($registros))
                                    @foreach($registros as $registro)
                                        <tr>
                                            <td  style="text-align: left!important;">{{$registro->fechaEvento}}</td>
                                            <td  style="text-align: left!important;">{{$registro->nombreEvento}}</td>
                                            <td  style="text-align: center!important;">
                                                <a href="{{ route('registros.edit', [$registro->id])}}"><i class="material-icons" title="Activar" style="color: #ff2e0f">check_circle</i></a>
                                                <a href="{{ route('editSesion', [$registro->id])}}"><i class="material-icons" title="Editar" style="color: #ff2e0f; width: 20px;">edit_circle</i></a>
                                                <a onclick="eliminarEvento({{$registro->id}})"><i class="material-icons" title="Eliminar" style="color: #ff2e0f">delete_forever</i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="4"><center>Sin registros</center></td>
                                    </tr>
                                @endif
                                </tbody>
                            </table>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('vendor-script')
    <script src="{{ asset('spid/vendors/data-tables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('spid/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('spid/vendors/data-tables/js/dataTables.select.min.js') }}"></script>
@endsection

@push('scripts')
    <script type="text/javascript">

        $.extend(true, $.fn.dataTable, {
            "sLengthMenu": [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "Todos"]
            ],

            "iDisplayLength": 20,
            "language": {
                "sProcessing": "Procesando...",
                "sLengthMenu": "Mostrar _MENU_ registros",
                "sZeroRecords": "No se encontraron resultados",
                "sEmptyTable": "Ningún dato disponible en esta tabla =(",
                "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix": "",
                "sSearch": "Buscar:",
                "sUrl": "",
                "sInfoThousands": ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst": "Primero",
                    "sLast": "Último",
                    "sNext": "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                },
                "buttons": {
                    "copy": "Copiar",
                    "colvis": "Visibilidad"
                }

            }
        });

        $(document).ready(function () {
            $('#data-table-simple').DataTable();
            $("#data-table-simple").dataTable().fnDestroy();
            $('#data-table-simple').DataTable({"ordering": false,"order": [[ 1, 'desc' ]]});
            // $('select').formSelect();
        });

        function eliminarEvento(id){
            swal({
                title: "¡Atención!",
                text: "¿Esta seguro de eliminar el evento?",
                icon: 'warning',
                dangerMode: true,
                confirmButtonText: 'Eliminar',
                cancelButtonText: 'Cerrar',
            }).then(function (willDelete) {
                if (willDelete) {
                    $.ajax({
                        url: "{{ url('eliminarSesion') }}",
                        type: 'GET',
                        data: {
                            'id': id
                        },
                        success: function(response) {
                            swal({
                                title: "",
                                text: "Evento eliminado satisfactoriamente",
                                icon: 'success',
                                timer: 4000,
                                buttons: false
                            });
                            location.reload();
                        },
                        error: function(xhr, status, error) {
                        }
                    });
                }
            });
        }
    </script>
@endpush