@extends('layouts.admin')

@section('page-title', trans('app.users'))

@section('content')


<div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h4><a href="javascript:history.back()" style="color: black;"><i class="icon-arrow-left52 mr-2"></i></a> <span class="font-weight-semibold">@lang('app.users')</span></h4>
            {{--<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>--}}
        </div>
    </div>
</div>

<div class="content">

    @include('partials.messages')
    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title">Customers Summary</h5>
        </div>
        <div class="card-body">
            <div class="d-sm-flex align-items-sm-center justify-content-sm-between flex-sm-wrap">
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h5 class="font-weight-semibold mb-0">38,289 <span class="text-success font-size-sm font-weight-normal"><i class="icon-arrow-up12"></i> (+16.2%)</span></h5>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-muted">May 12, 12:30 am</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h5 class="font-weight-semibold mb-0">38,289 <span class="text-success font-size-sm font-weight-normal"><i class="icon-arrow-up12"></i> (+16.2%)</span></h5>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-muted">May 12, 12:30 am</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h5 class="font-weight-semibold mb-0">38,289 <span class="text-success font-size-sm font-weight-normal"><i class="icon-arrow-up12"></i> (+16.2%)</span></h5>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-muted">May 12, 12:30 am</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3 mb-sm-0">
                    <div>
                        <h5 class="font-weight-semibold mb-0">38,289 <span class="text-success font-size-sm font-weight-normal"><i class="icon-arrow-up12"></i> (+16.2%)</span></h5>
                        <span class="badge badge-mark border-success mr-1"></span> <span class="text-muted">May 12, 12:30 am</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title">All Customers</h5>
            <div class="header-elements">
                <div class="list-icons">
                    <a class="list-icons-item" data-action="collapse"></a>
                    <a class="list-icons-item" data-action="reload"></a>
                    <a class="list-icons-item" data-action="remove"></a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row header-controls">
                <div class="col-md-6">
                    <a href="{{ route('user.create') }}" class="btn btn-success" id="add-user">
                        <i class="icon-plus-circle2"></i>
                        @lang('app.new_customer')
                    </a>
                </div>
                <div class="col-md-6">

                </div>
                {{--<form method="GET" action="" accept-charset="UTF-8" id="users-form">
                    <div class="col-md-2">
                        {!! Form::select('status', $statuses, Input::get('status'), ['id' => 'status', 'class' => 'form-control']) !!}
                    </div>
                    <div class="col-md-3">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" name="search" value="{{ Input::get('search') }}" placeholder="@lang('app.search_for_users')">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="submit" id="search-users-btn">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                                @if (Input::has('search') && Input::get('search') != '')
                                    <a href="{{ route('user.list') }}" class="btn btn-danger" type="button" >
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </a>
                                @endif
                            </span>
                        </div>
                    </div>
                </form>--}}
            </div>


            <table class="table datatable-button-html5-columns" id="client-table">
                <thead>
                    <th></th>
                    <th>#</th>
                    <th>@lang('app.company')</th>
                    <th>@lang('app.full_name')</th>
                    <th>@lang('app.email')</th>
                    <th>@lang('app.phone')</th>
                    <th>@lang('app.status')</th>
                    <th>@lang('app.groups')</th>
                    <th>@lang('app.created_at')</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

</div>
@stop

@section('scripts')
    <script>

        $(document).ready(function () {
            $('#client-table').DataTable({
                buttons: {
                    buttons: [
                        {
                            extend: 'copyHtml5',
                            className: 'btn btn-light',
                            /*exportOptions: {
                                columns: [ 0, ':visible' ]
                            }*/
                        },
                        {
                            extend: 'excelHtml5',
                            className: 'btn btn-light',
                            /*exportOptions: {
                                columns: ':visible'
                            }*/
                        },
                        {
                            extend: 'pdfHtml5',
                            className: 'btn btn-light',
                            /*exportOptions: {
                                columns: [0, 1, 2, 5]
                            }*/
                        },
                        {
                            extend: 'print',
                            text: '<i class="icon-printer mr-2"></i> Print',
                            className: 'btn btn-light'
                        },
                        {
                            extend: 'colvis',
                            text: '<i class="icon-three-bars"></i>',
                            className: 'btn bg-blue btn-icon dropdown-toggle'
                        }
                    ]
                },
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                "language":
                    {
                        "processing": "<i class='fa fa-refresh fa-spin'></i> &nbsp; Loading...",
                    },
                'ajax': {
                    'url':'{{ url('/clients/postGetClientData') }}',
                    'data' : {'_token':'{{  csrf_token() }}'}
                },
                'drawCallback': function( settings, json ) {
                    onInitTable();
                },
                'columns': [
                    {
                        "title" : "<label class='form-check-label'><input type='checkbox' class='form-check-input-styled th-checkbox' data-fouc></label>",
                        "data": 'id',
                        "render": function(data, type, row) {
                            if (type === 'display') {
                                return "<label class='form-check-label'><input type='checkbox' class='form-check-input-styled td-checkbox' name='tick[]' value='"+data+"' /></label>";
                            }
                            return data;
                        },
                        "className": "td-select-checkbox",
                        orderable : false,
                        searchable : false,
                    },
                    { data: 'id' },
                    { data: 'company' },
                    { data: 'fullname' },
                    { data: 'email'},
                    { data: 'phonenumber' },
                    { data: 'active' },
                    { data: 'group_ids' },
                    { data: 'created_at' },
                ],
                'order': [[1, 'asc']]
            });
        });
        
        function  onInitTable() {
            $('.form-check-input-styled').uniform();

            $('.th-checkbox').on('change',function () {
                $('.td-checkbox').prop('checked',$(this).prop('checked'));
                $('.form-check-input-styled').uniform();
            })

            $('.td-checkbox').on('change',function () {
                if($(this).prop('checked') != 'checked')
                    $('.th-checkbox').prop('checked','');
                $('.form-check-input-styled').uniform();
            })

            $('.dataTables_length select').select2({
                minimumResultsForSearch: Infinity,
                dropdownAutoWidth: true,
                width: 'auto'
            });

            var elems = Array.prototype.slice.call(document.querySelectorAll('.form-check-input-switchery'));
            elems.forEach(function(html) {
                var switchery = new Switchery(html);
            });
        }
    </script>
@stop