@extends('adminlte::page')

@section('title', 'Periodos')

@section('plugins.Datatables', true)
@section('plugins.Date-picker', true)

@section('content_header')
    <h1>Periodos</h1>
@stop

@section('content')
    @include('admin.parts.info')
    <div class="card card-dark collapsed-card">
        <div class="card-header" data-card-widget="collapse">
            <h3 class="card-title">Agregar Periodo</h3>
            <div class="card-tools">
                <!-- Collapse Button -->
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
            </div>
        <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-sm-12">
                  <div class="card card-dark card-outline card-outline-tabs">
                    <div class="card-header p-0 border-bottom-0">
                      <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                        <li class="nav-item">
                          <a class="nav-link active" id="custom-tabs-four-manual-tab" data-toggle="pill" href="#custom-tabs-four-manual" role="tab" aria-controls="custom-tabs-four-manual" aria-selected="true">Manualmente</a>
                        </li>
                      </ul>
                    </div>
                    <div class="card-body">
                      <div class="tab-content" id="custom-tabs-four-tabContent">
                        <div class="tab-pane fade show active" id="custom-tabs-four-manual" role="tabpanel" aria-labelledby="custom-tabs-four-manual-tab">
                            <p>(*) Campos obligatorios</p>
                            <form method="POST" action="{{route ('periods.store')}}">
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label>Nombre Asignado al Periodo Académico (*)</label>
                                        <input type="text" class="form-control" id="name" name="name" value="{{old('name')}}" placeholder="Nombre" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Fecha de Inicio (*)</label>
                                        <div class="input-group date" id="reservationdate_start" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate_start" id="data_start" name="data_start" value="{{old('data_start')}}" placeholder="Fecha de Inicio" required>
                                            <div class="input-group-append" data-target="#reservationdate_start" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Fecha de Fin (*)</label>
                                        <div class="input-group date" id="reservationdate_end" data-target-input="nearest">
                                            <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate_end" id="data_end" name="data_end" value="{{old('data_end')}}" placeholder="Fecha de Fin" required>
                                            <div class="input-group-append" data-target="#reservationdate_end" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-dark">Agregar Periodo</button>
                            </form>
                        </div>
                      </div>
                    </div>
                    <!-- /.card -->
                  </div>
                </div>
            </div>       
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Listado de Periodos</h3>
            <div class="card-tools">
                <!-- Maximize Button -->
                <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
            </div>
            <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <table id="example1" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Inicio</th>
                        <th>Fin</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($periods as $period)
                    <tr>
                        <td>
                            @if ($period->state == 1)
                                <span class="badge badge-success">En proceso</span>
                                @else
                                <span class="badge badge-danger">Finalizado</span>
                                @endif
                            {{$period->name}}
                        </td>
                        <td>{{$period->data_start}}</td>
                        <td>{{$period->data_end}}</td>
                        <td>
                            @if ($period->state == 1)
                                <a onclick="return confirm('¿Estás seguro de finalizar este Periodo?')"  href="{{route('periods.state',$period)}}" class="btn btn-danger btn-xs" role="button">FINALIZAR PERIODO</a>
                            @else
                                <a onclick="return confirm('¿Estás seguro de reanudar este Periodo?')"  href="{{route('periods.state',$period)}}" class="btn btn-success btn-xs" role="button">REANUDAR PERIODO</a>
                            @endif
                            <a href="{{route('periods.edit',$period)}}" class="btn btn-outline-primary btn-xs"><i class="far fa-edit">&nbsp;Editar</i></a>
                            <form action="{{ route('periods.destroy',$period)}}" method="post" style="display: inline">
                                @csrf @method('delete')
                                <button class="btn btn-outline-danger btn-xs" onclick="return confirm('¿Estás seguro de eliminar este Periodo?')"><i class="far fa-trash-alt">&nbsp;Eliminar</i></button>  
                            </form>
                            <a href="{{route('periods.show',$period)}}" class="btn btn-outline-info btn-xs"><i class="far fa-eye">&nbsp;Ver</i></a>
                            
                        </td>

                    </tr>
                    @endforeach
                    
                </tbody>
                <tfoot>
                    <tr>
                        <th>Nombre</th>
                        <th>Inicio</th>
                        <th>Fin</th>
                        <th>Acciones</th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
@stop

@section('css')
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
@stop

@section('js')
    <script>
        $(function () {
            $("#example1").DataTable({
                "responsive": true, "lengthChange": false, "autoWidth": false,
                "buttons": [
                    {
                        extend: 'copy', 
                        text: 'Copiar'
                    },
                    {
                        extend: 'csv', 
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'excel', 
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'pdf', 
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: ':visible'
                        },
                        text: 'Imprimir'
                    },
                    {
                        extend: 'colvis',
                        text: 'Columnas visibles' 
                    },
                ],
                /* columnDefs: [ 
                    {
                        targets: -1,
                        visible: false
                    } 
                ], */
                language: {
                    "decimal": "",
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                    "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
                    "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                    "infoPostFix": "",
                    "thousands": ",",
                    "lengthMenu": "Mostrar _MENU_ entradas",
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "search": "Buscar:",
                    "zeroRecords": "Sin resultados encontrados",
                    "paginate": {
                        "first": "Primero",
                        "last": "Ultimo",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');  
            
            $("input[data-bootstrap-switch]").each(function(){
                $(this).bootstrapSwitch('state', $(this).prop('checked'));
            }); 

            //Date range picker
            $('#reservationdate_start').datetimepicker({
                locale: 'es',
                //defaultDate: moment(),
                format: 'YYYY-MM-DD'
            }); 
            //Date range picker
            $('#reservationdate_end').datetimepicker({
                locale: 'es',
                //defaultDate: moment(),
                format: 'YYYY-MM-DD'
            });  
        });
    </script>
@stop