@extends('layouts.adminlte.adminlte')

@section('title')
    Users
@endsection

@section('content_header')
    @parent
    <h1 align="center">Users</h1>
    @php
        $n_agents = \App\Models\User::where('user_type', 'agent')->where('banned', false)->count();
        $n_managers = \App\Models\User::where('user_type', 'manager')->where('banned', false)->count();
        $n_sellers = \App\Models\User::where('user_type', 'seller')->where('banned', false)->count();
    @endphp

    @if(auth()->user()->user_type == 'admin')
        <h1 align="center" style="font-size: 1.4rem;">{{$n_agents}} agents, {{$n_managers}} managers, {{$n_sellers}} sellers</h1>
    @endif
@endsection

@section('table')
    <div class="box">
        <div class="box-body">
            <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                <div id="table_wrapper" class="resp-table row">
                    <div class="center">
                        <table id="users_table" class="resp-table table-striped small table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                            <thead>
                            <tr role="row">
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-sort="ascending">ID</th>
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-sort="ascending">Name</th>
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1">E-mail</th>
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1">User type</th>
                                @if (auth()->user()->user_type == 'admin')
                                    <th class="sorting" tabindex="0" rowspan="1" colspan="1">Added by</th>
                                @endif
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1">Banned</th>
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1">Telegram</th>
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1">Wechat</th>
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1">Sheet</th>
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1">API key</th>
                                @if (auth()->user()->user_type == "admin")
                                    <th class="sorting" tabindex="0" rowspan="1" colspan="1"></th>
                                @endif
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1"></th>
                                <th class="sorting" tabindex="0" rowspan="1" colspan="1"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($users as $user)
                                @if ($user->id != auth()->user()->id)
                                    <tr>
                                        <td class="sorting_1">{{$user->id}}</td>
                                        <td class="sorting_1">{{$user->name}}</td>
                                        <td class="sorting_1">{{$user->email}}</td>
                                        <td class="sorting_1">{{ucfirst($user->user_type)}}</td>
                                        @if (auth()->user()->user_type == 'admin')
                                                                                            <td class="sorting_1">{{$added_by ? $added_by->name : ''}}</td>
                                        @endif
                                        <td>
                                            @if($user->banned)
                                                <img title="banned" src="/banned.png" width="40">
                                            @endif
                                        </td>
                                        <td>
                                            @if ($user->telegram_username)
                                                <span style="color:#15aabf;">
                                                <a href="https://t.me/{{$user->telegram_username}}">
                                                    <i class="fab fa-telegram fa-3x"></i>
                                                    <p>{{"@$user->telegram_username"}}</p>
                                                </a>
                                            </span>
                                            @endif
                                        </td>
                                        <td>{{$user->wechat}}</td>
                                        <td>
                                            @if (in_array($user->user_type, ['manager', 'seller', 'agent']) && isset($user->spreadsheet['id']))
                                                <a style="display:table-cell;" href="{{"https://docs.google.com/spreadsheets/d/" . $user->spreadsheet['id']}}" target="_blank">
                                                    <img src="/sheets.png" style="width: 40px;">
                                                </a>
                                            @endif
                                        </td>
                                        <td>
                                            <button class="btn btn-info" type="button" onclick="showAPIKey('{{$user->spreadsheet['key']}}')">
                                                <i class="fas fa-key"></i>
                                            </button>
                                        </td>
                                        @if (in_array(auth()->user()->user_type, ["admin"]))
                                            <td><a title="Reset password" href="/user/{{$user->id}}/reset_password" class="btn btn-info"><i class="fas fa-redo"></i></a></td>
                                        @endif
                                        <td><a title="Edit user {{$user->name}}" href="/user/{{$user->id}}/edit" class="btn btn-info"><i class="fas fa-user-edit"></i></a></td>
                                        <td>
                                            {!!Form::open(['action' => ['App\Http\Controllers\CustomUsersController@destroy', $user->id], 'method' => 'POST'])!!}
                                            {{Form::hidden('_method', 'DELETE')}}
                                            {{Form::submit($user->banned ? 'UNBAN' : 'BAN', ['class' => 'btn btn-danger'])}}
                                            {!!Form::close()!!}
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    @yield('table')
@endsection

@section('js')
    @parent
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function showAPIKey (key) {
            Swal.fire({
                title: 'API key',
                input: 'text',
                inputValue: key,
                customClass: 'keyclass'
            }).disableInput()
        }
    </script>

    <script>
        $(document).ready(function() {
            $('#users_table').DataTable({
                stateSave: true,
                "stateDuration": -1,
                "pageLength": 50,
                "lengthMenu": [50, 100, 150, 200],
                "bLengthChange": true,
                "initComplete": function(settings, json) {
                    //console.log('DataTable initialization complete.');
                },
                "drawCallback": function(settings) {
                    //console.log('DataTable draw callback.');
                }
            });
        });
    </script>
@stop

@section('css')
    @parent
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>

    <style>
        .keyclass input {
            text-align:center;
        }

        td {
            white-space:nowrap;
            vertical-align: middle !important;
        }
        thead, tbody {
            text-align: center;
        }
        .resp-table {
            display: block;
            width: auto;
            margin: auto;
            overflow-x: auto;
        }
        .center {
            margin-left: auto;
            margin-right: auto;
        }

        #table_wrapper::-webkit-scrollbar {
            display: none;
        }
        #table_wrapper {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
    </style>
@stop