@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" href="{{ asset('assets/styles/vendor/ladda-themeless.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('main-content')
<div class="breadcrumb">
    <h1> @lang('users')</h1>
    @can('user_report')
        <div class="marginLeft20">
            <button type="button" class="btn btn-primary m-1" data-toggle="modal" data-target="#modalUploadUsers">@lang('load_users')</button>
        </div>
    @endcan
    @can('user_create')
    <div class="d-sm-flex positionButtonCreate">
        <span class="m-auto"></span>
        <a class="btn btn-primary mb-sm-0 mb-3 print-invoice"
            href="{{ route('users.create') }}">@lang('create_user')</a>
    </div>
    @endcan
</div>
<div class="separator-breadcrumb border-top"></div>

<section class="contact-list">
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card text-left">
                <div class="card-body">
                    @can('user_showInfoRoot')
                        <div class="form-group float-right" style="width:40%">
                            <input type="text" name="search" id="search" class="form-control" placeholder="Buscar Usuario" />
                        </div>
                    @endcan
                    <div class="table-responsive">
                        <table id="table-list" class="display table " style="width:100%">
                            <thead>
                                <tr>
                                    <th>Usuario ID</th>
                                    <th>@lang('name')</th>
                                    <th>@lang('email')</th>
                                    <th>@lang('document')</th>
                                    <th>@lang('phone')</th>
                                    <th>@lang('roles')</th>
                                    <th>@lang('last_logon')</th>
                                    <th>@lang('actions')</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="d-flex justify-content-center" id="page">

                        </div>
                        <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@can('user_report')
<!-- Verify Modal content -->
<div class="modal fade" id="modalUploadUsers" tabindex="-1" role="dialog" aria-labelledby="modalUploadUsers" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalUploadUsers_title">@lang('load_users')</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group col-md-12">
                        <div class="input-group mb-3">
                            <div class="custom-file">
                                <label class="custom-file-label" for="template_users" aria-describedby="inputGroupFileAddon02">@lang('choose_file')</label>
                                <input type="file" class="custom-file-input" id="template_users" name="template_users">
                            </div>
                        </div>
                        <small id="passwordHelpBlock" class="ul-form__text form-text ">
                            @lang('download_template') <a href="{{ url('/export/template/users') }}">@lang('here')</a>
                        </small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('close')</button>
                <button type="button" class="btn btn-primary ladda-button basic-ladda-button footer-delete-right" data-style="expand-left" id="import_template">@lang('upload_template')</button>
            </div>
        </div>
    </div>
</div>
@endcan
@endsection


@section('page-js')
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<script src="{{asset('assets/js/vendor/spin.min.js')}}"></script>
<script src="{{asset('assets/js/vendor/ladda.js')}}"></script>
<script src="{{ asset('assets/js/tooltip.script.js') }}"></script>
<script src="{{ asset('js/views/users.js') }}"></script>
<script>

    $("#table-list").DataTable({
            order: [],
            pageLength: 10,
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.10.19/i18n/"+ '{{ config("customize.language_tables") }}'
            },
            "bPaginate": false,
            "info": false,
            "filter":false
    });
    $(document).ready(function(){
        fetch_data(1);
        function fetch_data(page, query){
            $.ajax({
            url:"{{ route('user.filter') }}",
            method:'GET',
            data:{page:page, query:query},
            dataType:'json',
            success:function(data){
                $('tbody').html(data.table_data);
                $('#page').html(data.pagination);
            }
            });
        }

        $(document).on('keyup', '#search', function(){
            var query = $('#search').val();
            var page = 1;
            fetch_data(page, query);
        });

        $(document).on('click', '.pagination a', function(event){
            event.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            $('#hidden_page').val(page);
            var query = $('#serach').val();
            $('li').removeClass('active');
                  $(this).parent().addClass('active');
            fetch_data(page, query);
        });
    });
</script>
@endsection