@extends('template.layout')


@section('styles')
    <link href="{{ asset('css/icheck/skins/all.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css') }}" rel="stylesheet" type="text/css"/>
    <style>
        table.dataTable tbody .grayClass {
            background-color: #e7ecf1;
        }
        table.dataTable tbody .grayClass .sorting_1{
            background-color: #e7ecf1 !important;
        }

        .onoffswitch-inner:before {
            content: "Si" !important;
        }
        .onoffswitch-inner:after {
            content: "No" !important;
        }
    </style>
@endsection

@section('content')
    <h1 class="page-title">
        Cita
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title col-12">
            <div class="caption col-md-9">
                Lista de Citas
            </div>

        </div>
        <div class="portlet-body">
            <table class="table table-hover nowrap dataTable dtr-inline" id="tb-cita">
                <thead>
                <tr>
                    <th>Titulo</th>
                    <th>Descripción</th>
                    <th>Alumno</th>
                    <th>Fecha</th>
                    <th>Realizado</th>
                    <th>Opciones</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

        </div>

    </div>
    <div id="editar"></div>
@endsection
@section('scripts')
    <script src="{{asset('plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/moment/moment.min.js')}}" type="text/javascript"></script>
    <script>

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var oTable = $('#tb-cita').DataTable({
            "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"
                }
            },
            processing: true,
            serverSide: true,
            destroy: true,
            responsive:true,
            order: [[ 2, "desc" ]],
            ajax:{
                url: '{{ route('gestion.cita.list.post') }}',
                method: 'POST',
                error: function(error){
                    console.log(error);
                }
            },
            columns:[
                {
                    data:'titulo',
                    name:'titulo'
                },
                {
                    data:'detalle',
                    name:'detalle'
                },
                {
                    data:'alumno',
                    name:'alumno'
                },
                {
                    data:'fecha',
                    name:'fecha',
                    render: function(data,type,row) {
                        return '<td>'+
                                moment(data,'YYYY-MM-DD HH:mm:ss').format("DD/MM/YYYY HH:mm A")
                            +'</td>';
                    }
                },
                {
                    data: 'terminado',
                    name: 'terminado',
                    render: function(data,type,row){
                        var aux = '<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox chk" id="switch_'+row.id+'"'+(data == 1? 'checked="checked"' : '')+'">';

                        return '<div class="onoffswitch">\n' +
                            aux+
                            '       <label class="onoffswitch-label" for="switch_'+row.id+'" style="margin-bottom:0">\n' +
                            '           <span class="onoffswitch-inner"></span>\n' +
                            '           <span class="onoffswitch-switch"></span>\n' +
                            '        </label>\n' +
                            '  </div>'
                    }
                },
                {
                    data:'id',
                    name:'id',
                    render: function(data,type,row){
                        return '<td>'
                            +'<button style="max-width: 250px;" ' +
                            ' class="btn btn-outline btn-circle btn-sm purple editar" data-toggle="modal"  data-id="'+data+'"  >'+
                            '<i class="fa fa-pencil"></i> Editar  </button>'
                            +'<button style="max-width: 250px;" ' +
                            ' class="btn btn-outline btn-circle btn-sm dark eliminar" data-toggle="modal" data-id="'+data+'" >'+
                            '<i class="fa fa-trash"></i> Eliminar  </button>'
                            +'</td>'
                    }

                }
            ],
            createdRow: function( row, data, dataIndex){
                var date = moment(data['fecha'],"YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD");
                if(moment().isSame(date,'d')){
                    $(row).addClass('grayClass');
                }
            }
        });

        $('#lstType').change(function () {
            oTable.draw();
        });

        $('#tb-cita').on('click','.editar', function () {
            var aux = $(this);
            var id = aux.data('id');
            aux.prop('disabled', true);
            aux.blur();
            $.ajax({
                url: "{{ route('gestion.cita.editar.get',['id' => '']) }}"+"/"+id,
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('#editar').html(result).find('.modal').modal({
                        show: true
                    });
                },
                complete: function () {
                    aux.removeAttr("disabled");
                    aux.prop('disabled', false);
                }
            });
            return false;
        });

        $('#tb-cita').on('click','.eliminar', function () {
            var id = $(this).data('id');
            swal({
                    title: '¿Está seguro de eliminar este registro?',
                    text: "Una vez borrada no se podrá recuperar",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí',
                    cancelButtonText: 'Cancelar'
                },
                function (isConfirm) {
                    if (isConfirm) {
                        EliminarResult(id);
                    }
                })
        });

        $('#tb-cita').on('click','.chk',function () {
            var aux = this.id;
            var aux1 = aux.split("_");
            var id = aux1[1];
            $.ajax({
                url: "{{ route('gestion.cita.estado.post') }}",
                type: "POST",
                data:{
                    "id": id
                }
            }).always(function() {
                swal("Se cambio el estado de la cita!");
            });
        });

        function EliminarResult(id) {
            $.ajax({
                url: "{{ route('gestion.cita.eliminar') }}",
                type: "POST",
                data: {
                    id: id
                },
                success: function (result) {
                    if (result) {
                        swal({
                            title: 'Cita eliminada!',
                            text: "El registro se eliminó exitosamente!",
                            type: 'success',
                            showCancelButton: false,
                            showConfirmButton: true,
                            showLoaderOnConfirm: true,
                        })
                        oTable.draw();
                    }
                    else {
                        swal("No se puede eliminar la cita!", "error");
                    }
                }
            });
        }

    </script>

    <!-- App scripts -->
@endsection