@extends('layouts.app')
<style>
    #users-tbl_length{display:none;}
    #users-tbl th{padding:0.75rem;}
    #users-tbl td{padding:0.75rem;}
</style>
@section('content')
<section class="users">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="text-center">
                        Utilizatori Lista
                    </h4>
                </div>
                <div class="card-body">
                    <form action=""method="get"id="option-form">
                    <div class="row">
                        <div class="col-md-2">
                            <label for="">Optiuni afisare</label>
                            <select  id="limit" class="form-control">
                                
                                <option value="{{$users->count()}}" @if(!isset($_GET['limit'])) selected @endif >Afisez {{$users->count()}} din {{$total_users}}</option>
                                
                                 @if(isset($_GET['limit']))
                                 @if($users->count() ==1)
                                    <option value="1" selected>Afisez 1 dupa cautare</option>
                                 @endif
                                 @if($_GET['limit'] > 10)
                                    <option value="{{round($_GET['limit']/2)}}">Afiseaza {{round($_GET['limit']/2)}} din {{$total_users}}</option>
                                 @endif
                                    @if($_GET['limit']*2  > $total_users)
                                            <option value="{{$total_users}}">Afisez {{$total_users}} din {{$total_users}} </option>
                                    @else
                                            <option value="{{round($_GET['limit']*2)}}">Afisez {{round($_GET['limit']*2)}} din {{$total_users}} </option>
                                    @endif
                            
                                @else 
                                    <option value="{{$users->count()*2}}">Afisez {{$users->count()*2}} din {{$total_users}}</option>
                                @endif
                                <option value="{{$total_users}}">Afiseaza toate</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="">Cautare</label>
                            <input type="text"  id="search" @if(isset($_GET['search'])) value="{{$_GET['search']}}" @endif class="form-control">
                        </div>
                        <div class="col-md-2">
                            <label for="" style="visibility:hidden;">Buton</label>
                            <button class="btn btn-sm btn-info form-control" type="submit"><i class="fa fa-search"></i> Cautare</button>
                        </div>
                        <div class="col-md-2">
                            <label for="" style="visibility:hidden;">Buton</label>
                            <a href="{{route('users-list')}}" class="btn btn-sm btn-danger form-control"><i class="fa fa-undo"></i> Reset</a>
                        </div>
                    </div>
                </form>
                </div>
            </div>
        </div>
        <div class="col-md-12">
           <div class="table-responsive">
                <table class="table table-bordered table-hover" id="users-tbl">
                    <thead>
                        <tr>
                            <th>Agentie</th>
                            <th>Nume</th>
                            <th>Email</th>
                            <th>Rol</th>
                            <th>Optiuni </th>
                        </tr>
                        
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                        <tr>
                            @if($user->myBranch)
                                    <td >{{$user->myBranch->BRANCH}} {{$user->myBranch->NAME}}</td>
                            @else 
                                    <td >Agentie nu a fost gasita</td>
                            @endif
                            <td >{{$user->username}}</td>
                            <td >{{$user->email}}</td>
                            <td >
                                    @if($user->myRole)
                                        @if($user->myRole->role)
                                            {{$user->myRole->role->role_name}}

                                        @else 

                                                Eroare citire rol
                                        @endif
                                    @else 
                                        Employee
                                    @endif
                                    
                            </td>
                            <td style="width:150px;">
                                @if($user->myRole)
                                <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#edit-role-modal{{$user->id}}"><i class="fa fa-edit"></i></button>
                                @else 
                                <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#add-role-modal{{$user->id}}"><i class="fa fa-eye"></i></button>
                                @endif
                            </td>
                        </tr>


                        <!--Manage role modal-->
                        <div class="modal" tabindex="-1" role="dialog" @if($user->myrole) id="edit-role-modal{{$user->id}}" @else id="add-role-modal{{$user->id}}" @endif >
                            <div class="modal-dialog" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5 class="modal-title">@if($user->myrole) <i class="fa fa-edit"></i> {{$user->myrole->role->role_name}}  @else <i class="fa fa-plus"></i> Adauga rol pentru {{$user->username}} @endif </h5>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                  </button>
                                </div>
                                <div class="modal-body">
                                  <form @if($user->myrole) action="{{route('edit-role',$user->id)}}"  @else action="{{route('add-role',$user->id)}}" @endif  @if($user->myrole) id="edit-role{{$user->id}}" @else id="add-role{{$user->id}}" @endif method="post">
                                    @csrf    
                                    <select name="role_id" id="" class="form-control">
                                            @if(!$user->myrole)
                                                <option value="">Alegeti Rol</option>
                                            @endif 


                                            @foreach($roles as $role)
                                                <option value="{{$role->role_id}}" @if($user->myrole) @if($user->myrole->role_id == $role->role_id) selected @endif @endif >{{$role->role_name}}</option>
                                            @endforeach

                                            @if($user->myrole)
                                                <option value="">Employee</option>
                                            @endif
                                        </select>
                                </form>
                                </div>
                                <div class="modal-footer">
                                  <button type="submit" @if($user->myrole) form="edit-role{{$user->id}}" @else form="add-role{{$user->id}}" @endif class="btn btn-primary">Save changes</button>
                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                              </div>
                            </div>
                          </div>

                        <!--Manage  role modal ends -->
                        @endforeach
                    </tbody>
                </table>
           </div>
           @if(!isset($_GET['search']) && !isset($_GET['limit']))
           <div class="card-footer">
                {{$users->links()}}
           </div>
           @endif
        </div>
    </div>


</section>
@endsection
@push('scripts')
<script src="{{URL::to('js/dataplugin/jquery-3.5.1.js')}}"></script>
<script src="{{URL::to('js/dataplugin/jquery.DataTables.js')}}"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
@if(isset($_GET['search']) || isset($_GET['limit']))
@php 
    if(isset($_GET['limit']))
    {
        $limit = $_GET['limit'];
    }
    else 
    {
        $limit = 10;
    }
@endphp
    <script>
        
        $('#users-tbl').DataTable({
            searching:false,
            paging:true,           
            ordering:false,
            "pageLength":{{$limit}},
            
        });
    </script>
@endif
    <script>
        
        $(document).ready(function(){
            var src = $('#search').val();
            if(src !=='')
            {
                $('#search').attr('name','search');
                $('#limit').removeAttr('name');
            }
        });
        $(document).on('change','#limit',function(){
            $('#limit').attr('name','limit');
            $('#option-form').submit();
        });

        $(document).on('keyup','#search',function(){
            var search = $(this).val();
         
            if(search !=='')
            {
                $('#search').attr('name','search');
                $('#limit').removeAttr('name');
            }
            else 
            {
                $('#search').removeAttr('name');
            }
        });

        
    </script>
@endpush