@extends('layouts.dashboard')
@section('css')

@endsection

@section('content')
    <div class="app-page-title d-xs-none">
        <div class="page-title-wrapper">
            <div class="col-sm-4">
                <div class="page-title-heading">
                    <div>{{ $title }}
                        <div class="page-title-subheading">
                            {{ $subtitle }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-8">
                <div class="page-header float-right">
                    <nav class="" aria-label=" breadcrumb">
                        <ol class="breadcrumb text-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
                            <li class="active breadcrumb-item" aria-current="page">Usuarios</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    @if (session('message'))
        <div class="alert alert-success alert-dismissable col-lg-4 col-md-12"
            style="text-align: center;margin: auto;margin-bottom: 1rem;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>{{ session('message') }}</strong>
        </div>
    @endif

    @can('users.create')
        <div class="animated fadeIn">
            <!-- /Widgets -->
            <div class="h4 mb-0" style="margin-top: 0px;text-align: end;padding-bottom: 15px;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="{{ route('users.create') }}" class="btn btn-primary">
                    <i class="fa fa-plus"></i>&nbsp;&nbsp; Nuevo usuario&nbsp;&nbsp;
                </a>
            </div>
            <!-- .row -->
        </div>
    @endcan

    @can('users.create')
        <div class="main-card mb-3 card">
            <div class="card-body">
                <div id="example_wrapper" class="dataTables_wrapper dt-bootstrap4">
                    <div class="row">

                        <div class="col-sm-12 col-md-6">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table style="width: 100%;" id="tbl_users"
                                class="table table-hover table-striped table-bordered dataTable dtr-inline" role="grid"
                                aria-describedby="example_info">
                                <thead style="font-size: 14px;">
                                    <tr role="row">
                                        <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 261.2px;" aria-sort="ascending"
                                            aria-label="Name: activate to sort column descending">Nombre</th>

                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 398.2px;" aria-label="Position: activate to sort column ascending">
                                            Apellido paterno</th>

                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 194.2px;" aria-label="Office: activate to sort column ascending">
                                            Apellido materno</th>

                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                            Email</th>
                                        
                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                                style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                                Cancelacion</th>


                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                            Rol</th>


                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                            Acceso a</th>
                                        
                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                            RFC emisor</th>

                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                            Fecha Alta</th>

                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 102.2px;" aria-label="Age: activate to sort column ascending">
                                            Ultima Modificación</th>

                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                            style="width: 194.2px;" aria-label="Start date: activate to sort column ascending">
                                            Acciones</th>
                                    </tr>
                                </thead>
                                <tbody style="font-size: 14px;">
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endcan
    @cannot('users.create')
        @include('errors.bloqueo_funciones')
    @endcannot

@endsection

@section('js')
    <script src="{{ asset('js/users/main.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#tbl_users').DataTable({
                "processing": true,
                "serverSide": true,
                "responsive": true,
                "ajax": base_url + "/users",
                "dataType": "JSON",
                "type": "POST",
                buttons: [
                    { extend: 'copy', className: 'btn buttom_datatables' },
                    { extend: 'excel', className: 'btn buttom_datatables' },
                    { extend: 'colvis', className: 'btn buttom_datatables' },
                ],
                "columns": [{
                        "data": "nombre"
                    },
                    {
                        "data": "ApellidoPaterno"
                    },
                    {
                        "data": "ApellidoMaterno"
                    },
                    {
                        "data": "email"
                    },
                    {
                        "data": "id_cancelacion",
                        render: function(data, type) {
                           if(data=='A'){
                                return 'Activa';
                           }if(data=='C'){
                                return 'Desactivada';
                           }if(data=='M-C'){
                                return 'Mes en curso';
                           }if(data=='U-T'){
                                return 'Último trimestre';
                           }if(data=='A-C'){
                                return 'Año en curso'
                           }
                        },
                    },
                    
                    {
                        "data": "name"
                    },
                    {
                        "data": "mat_suc",
                        render: function(data) {
                            if(data=='M'){
                                return 'Matriz';
                            }else{
                                return 'Sucursal';
                            }
                        }
                    },
                    {
                        "data": "rfc_emisor"
                    },
                    {    
                        "data": "created_at",
                        render: function(data, type) {
                            const MESES = [
                                "enero",
                                "febrero",
                                "marzo",
                                "abril",
                                "mayo",
                                "junio",
                                "julio",
                                "agosto",
                                "septiembre",
                                "octubre",
                                "noviembre",
                                "diciembre",
                            ];
                            let out = '';
                            const fecha = new Date(data);
                            if (type === 'display') {
                                out = '<p><i class="lnr-calendar-full"> </i>' + fecha.getDate() +
                                    ' de ' + MESES[fecha.getMonth()] + ' de ' + fecha
                                    .getFullYear() + '</p><p> <i class="lnr-clock"> </i>' + fecha
                                    .getHours() +
                                    ':' + fecha.getMinutes() + ':' + fecha.getSeconds() + ' ' + (
                                        fecha.getHours() >= 12 ? 'PM' : 'AM') + '</p>';
                            }
                            return out;
                        },
                        "visible": false
                    },
                    {    
                        "data": "updated_at",
                        render: function(data, type) {
                            const MESES = [
                                "enero",
                                "febrero",
                                "marzo",
                                "abril",
                                "mayo",
                                "junio",
                                "julio",
                                "agosto",
                                "septiembre",
                                "octubre",
                                "noviembre",
                                "diciembre",
                            ];
                            let out = '';
                            const fecha = new Date(data);
                            if (type === 'display') {
                                out = '<p><i class="lnr-calendar-full"> </i>' + fecha.getDate() +
                                    ' de ' + MESES[fecha.getMonth()] + ' de ' + fecha
                                    .getFullYear() + '</p><p> <i class="lnr-clock"> </i>' + fecha
                                    .getHours() +
                                    ':' + fecha.getMinutes() + ':' + fecha.getSeconds() + ' ' + (
                                        fecha.getHours() >= 12 ? 'PM' : 'AM') + '</p>';
                            }
                            return out;
                        },
                        "visible": false
                    },
                    {
                        data: 'action',
                        name: 'Acciones',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endsection