@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>
            </div>
        </div>
    </div>

    <div class="content">

        @include('partials.messages')
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">@lang('crm.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>
                            <h4 class="font-weight-semibold mb-0">{{ $userCount['total_clients'] }}</h4>
                            <span class="badge badge-mark border-success mr-1"></span> <span
                                    class="text-muted">@lang('crm.customers_summary_total')</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-sm-0">
                        <div>
                            <h4 class="font-weight-semibold mb-0">{{ $userCount['active_clients'] }} <span
                                        class="text-success font-size-sm font-weight-normal">( {{ $userCount['active_clients_percent'] }}% )</span>
                            </h4>
                            <span class="badge badge-mark border-success mr-1"></span> <span
                                    class="text-success">@lang('crm.active_customers')</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-sm-0">
                        <div>
                            <h4 class="font-weight-semibold mb-0">{{ $userCount['inactive_clients'] }} <span
                                        class="text-danger font-size-sm font-weight-normal">( {{ $userCount['inactive_clients_percent'] }}% )</span>
                            </h4>
                            <span class="badge badge-mark border-danger mr-1"></span> <span
                                    class="text-danger">@lang('crm.inactive_active_customers')</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-sm-0">
                        <div>
                            <h4 class="font-weight-semibold mb-0">{{ $userCount['active_contacts'] }}<span
                                        class="text-success font-size-sm font-weight-normal"> ( {{ $userCount['active_contacts_percent'] }}% )</span>
                            </h4>
                            <span class="badge badge-mark border-success mr-1"></span> <span
                                    class="text-success">@lang('crm.customers_summary_active')</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-sm-0">
                        <div>
                            <h4 class="font-weight-semibold mb-0">{{ $userCount['inactive_contacts'] }}<span
                                        class="text-danger font-size-sm font-weight-normal">( {{ $userCount['inactive_contacts_percent'] }}% )</span>
                            </h4>
                            <span class="badge badge-mark border-danger mr-1"></span> <span
                                    class="text-danger">@lang('crm.customers_summary_inactive')</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3 mb-sm-0">
                        <div>
                            <h4 class="font-weight-semibold mb-0">{{ $userCount['today_login'] }}</h4>
                            <span class="badge badge-mark border-muted mr-1"></span> <span
                                    class="text-muted">@lang('crm.customers_summary_logged_in_today')</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">
                        @if(admin_permission('client.edit'))
                        <a href="{{ route('clients.create') }}" class="btn btn-success" id="add-user">
                            <i class="icon-plus-circle2"></i>
                            @lang('app.new_customer')
                        </a>
<!--                        <a href="javascript:export_clients()" class="btn btn-secondary" id="export-user">
                            <i class="icon-file-download"></i>
                            Export Clients
                        </a>
                        <a href="javascript:import_clients()" class="btn btn-primary" id="import-user">
                            <i class="icon-file-upload"></i>
                            Import Clients
                        </a>-->
                        @endif
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>


                <table class="table" 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.created_at')</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

                <form class="d-none" id="export-form" method="POST" action="{{ route('clients.export') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="ids" id="ids" value="">
                </form>

                <form class="d-none" id="import-form" method="POST" action="{{ route('clients.import') }}" enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="file" class="d-none" name="file" id="file" accept="application/zip">
                </form>
            </div>
        </div>

    </div>

@stop

@section('scripts')
    <script>
        $(document).ready(function () {
            $('#client-table').DataTable({
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                'ajax': {
                    'url': '{{ url('clients/postGetClientData') }}',

                },
                '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: 'created_at'},
                ],
                'order': [[2, 'asc']]
            });
        });

        function activeClicked(cb, client_id) {
            $.ajax({
                type:'POST',
                url:"{{ url('clients/client_change_status') }}",
                data:{
                    client_id:client_id,
                    status: cb.checked,
                },
                success:function(data){
                    if(data.status == 1){
                        successNotify('', data.msg);
                    }else{
                        errorNotify('', data.msg);
                        cb.checked = !cb.checked;
                    }
                },
                error:function (data) {
                    errorNotify('Error', data.responseJSON.message);
                    cb.checked = !cb.checked;
                }
            },'json')
        }

        function export_clients() {
            var ids = [];
            $(".td-checkbox:checked").each(function() {
                ids.push($(this).val());
            });

            if(ids.length == 0){
                infoAlert('Warning','Please select at least one record to export');
                return;
            }

            $('#export-form #ids').val(ids.join(','));
            $('#export-form').submit();

        }

        function import_clients() {
            $('#import-form #file').click();
        }

        $('#import-form #file').on('change', function () {
            $('#import-form').submit();
        })

    </script>
@stop