@extends('metronic.base')
@section('title')
    Home
@endsection
@section('extrajs')
    <script type="text/javascript">
        function fun_delete(id) {
            $("#delete_id").val(id);
        }

        function fun_activar(id) {
            $("#usuario_id").val(id);
            $('#activarModal').modal('show');
            console.log(id);
        }

        function fun_desactivar(id) {
            $("#usuariod_id").val(id);
            $('#desactivarModal').modal('show');
            console.log(id);
        }
        $(function() {
            $('#erp-datatable tfoot th:not(:nth-last-child(2)):not(:last-child)').each(function() {
                $(this).html('<input type="text" />');
            });
            var total_columns = $("#erp-datatable thead").find("tr")[0].cells.length

            var initialLoad = false;
            var table = $('#erp-datatable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                scrollX: false,
                autoWidth: false,
                "dom": "<'row'" +
                    "<'col-sm-6 d-flex align-items-center justify-content-start'l>" +
                    "<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
                    ">" +
                    "<'table-responsive'tr>" +
                    "<'row'" +
                    "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
                    "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
                    ">",
                {!! App::isLocale('es')
                    ? "language: {url:'" . asset('metronic/assets/js/es-Es.json') . "'},"
                    : "language: {url:'" . asset('metronic/assets/js/es-Es.json') . "'}," !!}
                initComplete: function() {

                    var i = 0,
                        total_cols_busq = total_columns - 2;
                    this.api().columns().every(function() {
                        if (i < total_cols_busq) {
                            var column = this;
                            $("input", $("#erp-datatable tfoot th")[i])
                                .on('change',
                                    function() { //Se le agrega on change a los inputs de busqueda
                                        column.search($(this).val(), false, false, true).draw();
                                    });
                            i++;
                        }
                    });
                    if (typeof getUrlVars()['search'] !== 'undefined') {
                        var search_val = decodeURIComponent(getUrlVars()['search']);
                        this.api().search(search_val).draw();
                    }
                    table = $('#erp-datatable').DataTable();
                    new $.fn.dataTable.Buttons(table, {
                        name: 'btnCleanSearch',
                        buttons: [{
                            text: '{{ __('Limpiar') }}',
                            action: function(e, dt, node, config){
                                dt.search('').draw();
                            },
                            className: 'btn btn-secondary btnClear mx-2'
                        }]
                    });

                    table
                        .buttons('btnCleanSearch', null)
                        .containers()
                        .insertAfter('.dataTables_filter');
                },
                
                stateSaveParams: function(settings, data) {
                    if (!initialLoad) {
                        //se hacen pequeños los campos de búsqueda
                        var th, total_cols_busq = total_columns - 2;
                        for (i = 0; i < total_cols_busq; i++) {
                            var col_search_val = data.columns[i].search.search;
                            th = $('#erp-datatable tfoot').find('th:nth-child(' + (i + 1) + ')');
                            th.find('input').attr('size', 5);
                            if (col_search_val !== "") {
                                th.find('input').val(col_search_val);
                            }
                        }
                        initialLoad = true;
                    }
                },
                order: [
                    [total_columns - 1, "desc"]
                ],
                ajax: '{!! route('user.index.data') !!}',
                columnDefs: [

                    {
                        targets: [-1],
                        visible: false,
                        searchable: false
                    },
                ],
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'username',
                        name: 'username'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'id',
                        name: 'id'
                    },
                ]
            });

            var dTable = $(".datatable").DataTable();
            $(".dataTables_filter input")
                .unbind()
                .bind("input", function(e) {
                    if (this.value.length >= 3 || e.keyCode == 13) {
                        dTable.search(this.value).draw();
                    }
                    if (this.value == "") {
                        dTable.search("").draw();
                    }
                    return;
                });
        });
    </script>
@endsection
@section('content')
    <div class="col-md-12 mt-3">
        <a href="{{ route('user.registrar') }}" class="btn btn-primary"><i class="ki-outline ki-plus fs-2"></i> Agregar usuario</a>
    </div>

    <br>
    <div class="modal fade" id="desactivarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalTitle"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title d-flex " id="exampleModalLongTitle">
                        <i class="ki-outline ki-dislike fs-2 me-1"></i> 
                         Desactivar usuario
                    </h5>
                    <button type="button" class="btn btn-icon btn-sm btn-active-light-danger ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <i class="ki-outline ki-cross fs-1"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('user.desactivar') }}" method="POST" name="miFormd">
                        @csrf

                        <div class="form-group ">
                            <label for="fecha_entrega">¿Está seguro de desactivar el usuario?</label>
                        </div>
                        <input type="hidden" name="usuariod_id" id="usuariod_id">


                        <div class="modal-footer d-flex justify-content-center">

                            <button id="sbd" type="submit" class="btn btn-danger">
                                <i class='ki-outline ki-dislike fs-2'></i>
                                Aceptar
                            </button>
                            <a href="" class="btn btn-light" data-dismiss="modal">
                                <i class='ki-outline ki-cross-circle fs-2'></i>
                                Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="activarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalTitle"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title" id="exampleModalLongTitle">
                        <i class="ki-outline ki-like fs-2 me-1"></i>
                         Activar usuario
                    </h5>
                    <button type="button" class="btn btn-icon btn-sm btn-active-light-danger ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <i class="ki-outline ki-cross fs-1"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('user.activar') }}" method="POST" name="miForm">
                        @csrf

                        <div class="form-group ">
                            <label for="fecha_entrega">¿Está seguro de activar el usuario?</label>
                        </div>
                        <input type="hidden" name="usuario_id" id="usuario_id">


                        <div class="modal-footer d-flex justify-content-center">

                            <button id="bsa" type="submit" class="btn btn-success">
                                <i class='ki-outline ki-like fs-2'></i>
                                Aceptar
                            </button>
                            <a href="" class="btn btn-light" data-dismiss="modal">
                                <i class='ki-outline ki-cross-circle fs-2'></i>
                                Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    @include('sessions')

    {{-- <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Nombre</th>
                <th scope="col">Correo eléctronico</th>
                <th scope="col">Usuario</th>
                <!-- <th scope="col">Cargo</th>-->
                <th>Roles</th>
                <th scope="col">Acciones</th>
            </tr>
            @foreach ($usuarios as $key => $usuario)
                <tr>
                    <td> {{ $key + 1 }} </td>
                    <td> {{ $usuario->name }} </td>


                    <td> {{ $usuario->email }} </td>
                    <td> {{ $usuario->username }} </td>
                    <!-- <td> {{ $usuario->cargo }} </td>-->
                    <td>{{ $usuario->getRoleNames()[0] ?? 'SIN ROL ASIGNADO' }}</td>

                    <td>
                        <a class="ki-outline ki-eye fs-2x text-primary" title="Mostrar" href="{{ route('user.show', $usuario->id) }}"
                            style="color:gray !important; margin-right: 12px"></a>

                        <a class="ki-outline ki-pencil fs-2x text-dark" title="Editar" href="{{ route('user.edit', $usuario->id) }}"
                            style="margin-right: 5px">
                        </a>

                        <a class="ki-outline ki-lock fs-2x text-info" title="Cambiar clave"
                            href="{{ route('user.updatePassword', $usuario->id) }}"
                            style="margin-right: 5px">
                        </a>

                        <a class="ki-outline ki-cube-2 fs-2x text-primary" title="Bodegas"
                            href="{{ route('user.bodegasUsuario', $usuario->id) }}"
                            style="margin-right: 5px">
                        </a>


                        @if ($usuario->activo == 0)
                            <button title="Activar" data-toggle="modal" data-target="#activarModal" class="fas fa-thumbs-up"
                                type="button"
                                style="color:gray !important; background-color:transparent; border: 0px solid;"
                                onclick="fun_activar('{{ $usuario->id }}')">
                            </button>
                        @endif
                        @if ($usuario->activo == 1)
                            <button title="Desactivar" data-toggle="modal" data-target="#desactivarModal"
                                class="fas fa-thumbs-down" type="button"
                                style="color:gray !important; background-color:transparent; border: 0px solid;"
                                onclick="fun_desactivar('{{ $usuario->id }}')">
                            </button>
                        @endif

                    </td>
                </tr>
            @endforeach
        </thead>
    </table> --}}

    @component('components.table')
        @slot('thead')
            <th>{{ __('Nombre') }}</th>
            <th>{{ __('Correo electrónico') }}</th>
            <th>{{ __('Nombre de usuario') }}</th>
            <th>{{ __('Acción') }}</th>
            <th>{{ __('ID') }}</th>
        @endslot
        @slot('tfoot')
            <th>{{ __('Name') }}</th>
            <th>{{ __('Email') }}</th>
            <th>{{ __('Username') }}</th>
            <th></th>
            <th></th>
        @endslot
    @endcomponent

    <!-- Paginacion de tabla -->
    {{-- <div class="d-flex justify-content-center">
        {{ $usuarios->links() }}
    </div> --}}
    <!-- Fin Paginacion de tabla-->
    <!-- Eliminar Modal -->
    {{--
     <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body align-self-center">
                    <form action="{{ route('user.delete') }}" method="POST">
                        @csrf
                        {{ method_field('DELETE') }}
                        <div style="text-align: center">
                            <br>
                            <i class='fas fa-exclamation-circle' style='font-size:80px;color: gray;'></i>
                            <br>
                            <br>
                            <strong>
                                <h3>¿Estás seguro que deseas eliminar el usuario?</h3>
                            </strong>
                            <strong>Recuerda que NO podrás revertir esta acción</strong>
                            <input type="hidden" id="delete_id" name="delete_id">
                            <input type="hidden" name="user" value="{{ auth()->user()->name }}">
                        </div>
                        <div class="modal-footer d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary">
                                <i class='ki-outline ki-trash fs-2'></i>
                                Eliminar
                            </button>
                            <a href="" class="btn btn-primary" data-dismiss="modal">
                                <i class='ki-outline ki-cross-circle fs-2'></i>
                                Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="modal fade" id="activarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalTitle"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title" id="exampleModalLongTitle">
                        <i class="ki-outline ki-like fs-2 me-1"></i>
                         Activar usuario
                    </h5>
                    <button type="button" class="btn btn-icon btn-sm btn-active-light-danger ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <i class="ki-outline ki-cross fs-1"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('user.activar') }}" method="POST" name="miForm">
                        @csrf

                        <div class="form-group ">
                            <label for="fecha_entrega">¿Está seguro de activar el usuario?</label>
                        </div>
                        <input type="hidden" name="usuario_id" id="usuario_id">


                        <div class="modal-footer d-flex justify-content-center">

                            <button id="bsa" type="submit" class="btn btn-success">
                                <i class='ki-outline ki-like fs-2'></i>
                                Aceptar
                            </button>
                            <a href="" class="btn btn-light" data-dismiss="modal">
                                <i class='ki-outline ki-cross-circle fs-2'></i>
                                Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="desactivarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalTitle"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title" id="exampleModalLongTitle">
                        <i class="ki-outline ki-dislike fs-2 me-1"></i>
                         Desactivar usuario
                    </h5>
                    <button type="button" class="btn btn-icon btn-sm btn-active-light-danger ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <i class="ki-outline ki-cross fs-1"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('user.desactivar') }}" method="POST" name="miFormd">
                        @csrf

                        <div class="form-group ">
                            <label for="fecha_entrega">¿Está seguro de desactivar el usuario?</label>
                        </div>
                        <input type="hidden" name="usuariod_id" id="usuariod_id">


                        <div class="modal-footer d-flex justify-content-center">

                            <button id="sbd" type="submit" class="btn btn-danger">
                                <i class='ki-outline ki-dislike fs-2'></i>
                                Aceptar
                            </button>
                            <a href="" class="btn btn-light" data-dismiss="modal">
                                <i class='ki-outline ki-cross-circle fs-2'></i>
                                Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> --}}
@endsection