@extends('template.master')

@section('page_styles')
{{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="{{ asset('css/layout/account.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">
@stop

@section('content')
    @include('company.edit_page')

<div class="container-fluid account-page">
    <!-- Begin Page Header-->
    <div class="row">
        <div class="page-header">
            <div class="d-flex align-items-center">
                <h2 class="page-header-title">Users</h2>

            </div>
        </div>
    </div>
    <!-- End Page Header -->

    <!--Tabs started-->

    <div class="card new-card">
        <div class="card-title">
            <h1>Manage Users</h1>
        </div>
        <div class="card-content">
                @if ($errors->any())
                <div class="alert alert-danger tab-user tab-user-3" style="width: 100%;">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @elseif ($error)
                <div class="alert alert-danger tab-user tab-user-3" style="width: 100%;">
                    <ul>
                        <li>{{ $error }}</li>
                    </ul>
                </div>
                @elseif ($success)
                <div class="alert alert-success tab-user tab-user-3" style="width: 100%;">
                    <ul>
                        <li>{{ $success }}</li>
                    </ul>
                </div>
                @endif
            <div class="manage-user">
                <a href="javascript: void(0)" class="btn btn-square btn-outline-success" data-toggle="modal" data-target="#edit-modal-page" onclick="javascript: addUser()"><i class="la la-plus-circle"></i>&nbsp; Add User</a>
                <div class="float-right mb-3">
                    <div class="styled-checkbox">
                        <input type="checkbox" name="checkbox" id="check-1">
                        <label for="check-1">Toggle Archived User</label>
                    </div>
                </div>

                <br/><br/>
                <div class="widget has-shadow">
                    <div class="widget-header bordered no-actions d-flex align-items-center">
                        <h4>User List</h4>
                    </div>
                    <div class="widget-body">
                        <table id="users-tbl" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th style="width: 10%">Profile Picture</th>
                                    <th style="width: 30%">Name</th>
                                    <th style="width: 20%">Email</th>
                                    <th style="width: 10%">Company</th>
                                    <th style="width: 10%">Role</th>
                                    <th style="width: 10%">Phone</th>
                                    <th style="width: 10%">Skype</th>
                                    <th style="width: 10%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(!empty($users))

                                    @foreach($users as $key => $value)
                                        <tr data-status="{{ $value->deleted_at }}" 
                                             id="user-tbl-{{$value->id}}">
                                            <td style="text-align: center;">
                                                @if($value->avatar)
                                                <img id="profilePicture" src="{{ asset('uploads/avatar/'.$value->avatar) }}" style="width: 50px; height: 50px; border-radius: 50px;" alt="your image" />
                                                @else
                                                <img src="{{ asset('img/defaultuser.png') }}" style="width: 50px; height: 50px; border-radius: 50px;" alt="..." class="avatar rounded-circle">
                                                @endif
                                            </td>
                                            <td>{{ $value->name }}</td>
                                            <td>{{ $value->email }}</td>
                                            <td>{{ @$value->company->name }}</td>
                                            <td>
                                                @if($value->role_id == 2 || $value->role_id == 1)
                                                    Manager
                                                @elseif($value->role_id == 3)
                                                    Member
                                                @endif
                                            </td>
                                            {{-- <td>{{ $value->nickname }}</td> --}}
                                            <td>{{ $value->phone }}</td>
                                            <td>{{ $value->skype }}</td>
                                            <td>
                                                @if(empty($value->deleted_at))

                                                    <div class="btn-group" role="group" aria-label="Actions">
                                                        <a href="javascript: void(0)" class="btn mb-2 btn-primary" data-toggle="modal" data-target="#edit-modal-page" onclick="javascript: editUser({{$value->id}}, '{{trim($value->name)}}', '{{trim($value->email)}}', '{{trim($value->phone)}}', '{{$value->role_id}}', '{{trim($value->skype)}}', '{{$value->company_id}}')"><i class="la la-edit"></i>&nbsp; EDIT</a>
                                                        @if(auth()->user()->id != $value->id)
                                                        <button type="button" class="btn mb-2 btn-danger" onclick="javascript: deleteUser({{$value->id}})">
                                                            <i class="la la-trash"></i>&nbsp; DELETE</button>
                                                        @endif
                                                    </div>

                                                @else

                                                <div class="btn-group" role="group" aria-label="Actions">
                                                    <button type="button" class="btn mb-2 btn-warning" onclick="javascript: restoreUser({{$value->id}})">
                                                        <i class="la la-rotate-right"></i>&nbsp; RESTORE</button>
                                                </div>

                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach

                                @endif
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th style="width: 10%">Profile Picture</th>
                                    <th style="width: 30%">Name</th>
                                    <th style="width: 20%">Email</th>
                                    <th style="width: 10%">Company</th>
                                    <th style="width: 10%">Role</th>
                                    <th style="width: 10%">Phone</th>
                                    <th style="width: 10%">Skype</th>
                                    <th style="width: 10%">Actions</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Tabs End-->

<!-- End Row -->

</div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
<script src="{{ asset('page_assets/accounts/js/page.js')}}"></script>
<script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>
<!--CUSTOM SCRIPTS-->

<script type="text/javascript">

    $(document).ready(function() {
        var table = $('#users-tbl').DataTable();

        // Hide / Show Tickets
        $('#check-1').click(function(){
            $.fn.dataTable.ext.search.pop();
            table.draw();

            if($(this).prop("checked") == true){
                $.fn.dataTable.ext.search.push(
                  function(settings, data, dataIndex) {
                      return $(table.row(dataIndex).node()).attr('data-status') != '';
                    }
                );
            }
            else{
                $.fn.dataTable.ext.search.push(
                  function(settings, data, dataIndex) {
                      return $(table.row(dataIndex).node()).attr('data-status') == '';
                    }
                );
            }
            table.draw();
        });

        // Tweaks
        setTimeout(function(){ $('#check-1').click(); $('#check-1').click(); }, 500);

    });

    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }


    function addUser()
    {
        $('.user_id').val(0);  
        $('.user_id').val('');
        $('#name').val('');
        $('#email').val('');
        $('#phone').val('');
        $('#nickname').val('');
        $('#skype').val(''); 
    }

    function editUser(id, name, email, phone, role_id, skype, cid)
    {
        $('.user_id').val(id);
        $('.company_id_slct').val(cid);
        $('#company_id').val(cid);
        $('#name').val(name);
        $('#email').val(email);
        $('#phone').val(phone);
        $('#role').val(role_id);
        $('#skype').val(skype);
    }

    function submit()
    {
        $('#userForm').submit();
    }


    function deleteUser(id)
    {
        if (confirm('Are you sure you want to delete this user?')) {
            var data = {
                "_token": "{{ csrf_token() }}"
            };

            $.ajax({
                type: 'DELETE',
                url: 'account/profile/' + id,
                data: data,
                dataType: 'json',
                success: function(resp) {
                    $('#user-tbl-'+id).remove();
                    location.reload();
                },
                error: function(xhr, status, error) {
                    
                }

            });
        }
    }

    function restoreUser(id)
    {
        if (confirm('Are you sure you want to RESTORE this user?')) {
            var data = {
                "_token": "{{ csrf_token() }}"
            };

            $.ajax({
                type: 'POST',
                url: 'user/restore/' + id,
                data: data,
                dataType: 'json',
                success: function(resp) {
                    $('#user-tr-'+id).remove();
                    location.reload();
                },
                error: function(xhr, status, error) {
                    
                }

            });
        }
    }

    function readCompanyURL(input, name) {
        $('.uploadLogo').hide();

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#' + name).attr('src', e.target.result);
                $('.file-select[select-name=' + name + ']').addClass('has-file');

            }

            reader.readAsDataURL(input.files[0]);
        }

        $('.edit-icon').click(function() {
            $(this).parents('.file-select').removeClass('has-file');
            $(this).parents('.file-select').find('input').val('');
            $('.uploadLogo').show();
        });
    }


    function readURL(input, name) {
        $('.uploadProfilePicture').hide();

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                console.log(e.target.result);
                $('#' + name).attr('src', e.target.result);
                $('.file-select[select-name=' + name + ']').addClass('has-file');

            }

            reader.readAsDataURL(input.files[0]);
        }

        $('.edit-icon').click(function() {
            $(this).parents('.file-select').removeClass('has-file');
            $(this).parents('.file-select').find('input').val('');
            $('.uploadProfilePicture').show();
        });
    }

</script>
@stop