@extends('layouts.dashboard.app')

@section('content')

<div class="container-fulied">
    <nav aria-label="breadcrumb">  
        <ol class="breadcrumb @lang('theme.breadcrumb')" >
            <!-- <li class="breadcrumb-item"><a href="{{ url('/') }}">@lang('breadcrumb.home')</a></li> -->
            <li class="breadcrumb-item active" aria-current="page">Users</li>
        </ol>
        <ol class="breadcrumb py-0 my-0" style="@lang('theme.actionline')">
            <div class="col pl-0"> 
                @if (Auth::user()->can('create', App\Models\User::class))
                    <a href="{{ route('user.create') }}" class="btn ml-0 btn-sm @lang('theme.btn_create') btn-x mb-2 px-3 py-1 font-weight-bold">@lang('common.btn_create')</a>
                @endif
            </div> 
            <div class="col"> 
                <a href="{{ route('user.filter') }}" class="btn btn-sm @lang('theme.btn_reload') btn-x mb-2 ml-2 px-3 py-1 font-weight-bold float-right"><i class="fas fa-sync-alt"></i></a>
                <button type="button" id="reset" name="reset" class="btn @lang('theme.btn_reset') btn-sm btn-x mb-2 ml-2 px-3 py-1 font-weight-bold float-right"><i class="fas fa-redo-alt"></i></button>              
                <button type="button" id="hide_search" class="btn btn-sm @lang('theme.btn_search_card') ml-2 btn-x mb-2 px-3 py-1 font-weight-bold float-right"><i class="fas fa-search"></i></button>              
            </div>
        </ol>
    </nav>
    <div class="container px-4 pt-4 card-search pb-0">
        <div class="card card-shadow sharp-corners card-outline card-info mb-0">
            <div class="card-body py-2">
                <form class="form" method="GET" id="frm_filter" action="{{ route('user.filter') }}">
                    @csrf
                    <div class="filter-search">
                        {{--<button type="submit" class="btn btn-link btn-sm float-right btn-search"><i class="fa fa-search fa-lg pr-2 pb-3 icon-search" ></i></button>--}}
                        <button type="submit" class="btn @lang('theme.btn_search') btn-sm float-right shadow-sm mb-1 mr-1"><i class="fa fa-search fa-lg icon-search" ></i></button>
                    </div>
                    <div class="row mr-4">
                        <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
                            <div class="input-group input-group-sm py-1">
                                <input type="text" class="form-control"  placeholder="Name" name="name" id="name" value="{{$selection['name']}}">
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                            <div class="input-group input-group-sm py-1">
                                <input type="text" class="form-control"  placeholder="Code" name="code" id="code" value="{{$selection['code']}}">
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                            <div class="input-group input-group-sm py-1">
                                <input type="text" class="form-control"  placeholder="ID" name="username" id="username" value="{{$selection['username']}}">
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                            <div class="input-group input-group-sm py-1">
                                <select class="form-control form-control-sm" name="status" id="status">
                                    <option value="*" disabled>@lang('farm.lbl_filter_status')</option>
                                        @foreach (App\Models\Comm::getStatuses() as $key=>$value)
                                            <option value="{{$key}}" {{$selection['status'] == $key ? 'selected' : ''}}>{{$value}}</option>
                                        @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </form>  
            </div>
        </div>
    </div>
    <div class="container-fulied row py-4 px-4">
        <div class="col">
            <div class="table-responsive">
                <table id="filtertbl"  class="table table-hover table-bb table-sm">
                    <thead>
                        <tr class = "">
                            <th scope="col" class="" style="min-width:20px;"></th>
                            <th scope="col" class="" style="min-width:150px;">Name</th>
                            <th scope="col" class="" style="min-width:150px;">Code</th>
                            <th scope="col" class="" style="min-width:150px;">ID</th>
                            <th scope="col" class="" style="min-width:150px;">Type</th>
                            <th scope="col" class="" style="min-width:150px;">Status</th>                       
                        </tr>
                    </thead>
                    <tbody style="@lang('theme.tbl-bottom')">
                        @foreach ($users as $user)
                            <tr>
                                @if (Auth::user()->can('show', $user))
                                    <td><a class="@lang('theme.link')" href="{{ route('user.show', [$user->id]) }}"><i class="fas fa-eye"></i></a></td>
                                @else
                                    <td><i class="fas fa-eye pr-2 @lang('theme.link-disabled')"></i></td>
                                @endif 
                                <td>{{$user->name}}</td>
                                <td>{{$user->code}}</td>
                                <td>{{$user->username}}</td>
                                <td>{{$user->usertype}}</td>
                                <td>{{$user->status}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {!! $users->appends(Request::except('page'))->links('pagination::bootstrap-5') !!}
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        $("#reset").click(function(){
            //$("#frm_filter").trigger("reset");
            //document.getElementById('frm_filter').reset();
            $("#frm_filter").get(0).reset();
        }); 
    });

    $(function () {
        $('#filtertbl').DataTable({
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "info": false,
        "autoWidth": false,
        "responsive": false,
        });
    });
   
</script>
@endsection