@extends('layouts.app')

@section('link')
    <link rel="stylesheet" href="{{asset('css/dataTables.bootstrap4.min.css')}}" type="text/css" />
    
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">    
    <link href="{{ asset('css/admin_filters.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery.dataTables.yadcf.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">
@endsection

@section('style')
<style>
    .ui-icon::after{
        top:0;
    }
    .ui-icon{
        background: !important;
    }
    
    .dark_bordered_warning{
        vertical-align: baseline;
        padding: 5px 20px;
        margin-bottom: 5px;
    }
    
    .input-sm {
        background: linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
        height: 36px;
        border-radius: 5px;
        border-color: #aaaaaa;
    }
    .chosen-single{
        height: 35px !important;
    }
</style>
@endsection

@section('content')

<div class="row-col">

    <div class="col-sm">
        <div class="padding">
            @include('shared.messages')
            <div class="box">
                <div class="box-header">
                    <div class="pull-right">
                        @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin' || auth()->user()->role->role=='Manufacturer' || auth()->user()->role->role=='Distributor')
                        <a id="AddNewUser" href="{{route('users.create')}}" class="btn btn-sm white w-xs">
                            New User
                        </a>
                        @endif
                    </div>
                    <h2>Users</h2>
                    <small>List of all users</small>
                    <div class="form-inline">
                        <div class="form-group">
                            <div class="input-group">
                                <select class="form-control" id="role" name="role">                                    
                                    <option value="">Role</option>
                                    @foreach($user_roles as $user_role)
                                    <option value="{{$user_role->role}}">{{$user_role->role}}</option>
                                    @endforeach                                    
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div id="first_filters_div" style="display: inline-block; height:40px;"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <button type='button' class='btn btn-warning dark_bordered_warning' onclick="reset_filters();" title='Reset filters' data-toggle='tooltip'>Reset filters</button>
                            </div>
                        </div>
                    </div>
                </div>                
                
                <div class="panel-body">
                    <div id="UsersTableHolder">
                        <table id="myTable" class="table table-hover table-striped table-condensed dataTables-example">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Structure</th>
                                    <th>Email</th>
                                    <th>Type</th>                                    
                                    <th style='text-align:center;'>Actions</th>
                                    <th hidden>Създаден на:</th>
                                </tr>
                            </thead>
                            <tbody>  
                                @foreach($users as $user)
                                <tr style="background-color:{{$user->orbit_user_id==0 ? '#f8a5a5' : 'none'}}">
                                    <td>{{$user->first_name}} {{$user->last_name}}</td>
                                    <td>{{strpos($user->structure, auth()->user()->first_name." ".auth()->user()->last_name)!==false ? substr(substr($user->structure, strpos($user->structure, auth()->user()->first_name." ".auth()->user()->last_name)), 0, -2) : ''}}</td>
                                    <td>{{$user->email}}</td>
                                    <td>{{$user->role->role}}</td>
                                    <td class="text-center" style='text-align:right;padding-right:5px;'>
                                        @if($user->id!=auth()->user()->id)
                                        <a id="Message" href="{{route('messages.create',$user->id)}}" title="Message"><i class="material-icons md-24">messages</i></a>
                                        @endif
                                        <a id="List" href="{{route('devices.index',$user->orbit_account_id)}}" title="Devices"><i class="material-icons md-24">list</i></a>
                                        <a id="View" href="{{route('users.show',$user->id)}}" title="Show"><i class="material-icons md-24">info</i></a>    
                                        @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin' || auth()->user()->role->role=='Manufacturer')
                                        <a id="Edit" href="{{route('users.edit',$user->id )}}" title="Edit"><i class="material-icons md-24">settings</i></a>                                    
                                        <button type="button" class="anchor-btn" onclick="delete_user({{$user->id}})" title="Delete"><i class="material-icons md-24">delete</i></butotn>
                                        @endif
                                    </td>
                                    <td hidden>{{date('y.m.Y',strtotime($user->created_at))}}</td>
                                </tr>   
                                @endforeach
                            </tbody>
                        </table>                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('js/datepicker-bg.js') }}"></script>
<script src="{{ asset('js/chosen.js') }}"></script>
<script src="{{ asset('js/datatables.min.js') }}"></script> 
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script> 
<script src="{{ asset('js/jquery.dataTables.yadcf.js') }}"></script>

<script>
    
    $('#role').chosen();
    
    table = $('.dataTables-example').DataTable({
        "oLanguage": {
            "sSearch": "",
            "sLengthMenu": "_MENU_  <span style='vertical-align:-moz-middle-with-baseline;margin-left:5px;'>Entries per page</span>",  
            

        },
        "aaSorting": [],
        "columnDefs": [
                        { "orderable": false, "targets": 4 }
                      ],
        "initComplete":function(settings, json) {
            $('select[name="myTable_length"]').chosen();
            $('.input-sm').attr('placeholder','Търсене');
            $('div.dataTables_filter input').css({ marginLeft : "0px"});
            this_table = $('.dataTables-example').dataTable();
        },
        "dom" : "fl<'#add_package'>tip",

    });

    yadcf.init(table, [
        {
            column_number: 5,
            filter_type: "range_date",
            date_format: "dd.mm.yyyy",
            filter_delay: 500,
            filter_container_id: "first_filters_div",
            filter_default_label: ['Дата от:','Дата до:'],
            filter_reset_button_text: false
        }
    ]);

    $('#role').on('change',function(){
        if($(this).val()!=''){
            table.column(3).search("^" + $(this).val() + "$", true, false).draw();
        }
        else{
            table.column(3).search('').draw();
        }
    });

    function delete_user(id){
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/ajax_delete_user',
                    type: 'POST',
            data: { 'id' : id},
            beforeSend:function(){
                return confirm("Are you sure you want to delete this User?");
            },
            success: function(response){
                        $("button[data-dismiss=\"modal\"]").click();
                        if(response.warning){
                            alert(response.warning);
                        }
                        else{
                            alert(response.success);
                            location.reload();
                        }
                    }
        });    
    }
    
    function reset_filters(){
        $('.yadcf-filter-range-date').val('');
        $('#role').val('').trigger("chosen:updated").change();        
    }
    
</script>

@endsection