@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">Permissions</li>
        </ol>
        <ol class="breadcrumb py-0 my-0">
            <div class="col pl-0"> 
                @if (Auth::user()->can('create', App\Models\Permission::class))
                    <a 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('permission.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 px-3 py-1 font-weight-bold float-right"><i class="fas fa-redo-alt"></i></button>              
            </div>
        </ol>
    </nav>
    <div class="container pt-4">
        <div class="card card-shadow sharp-corners @lang('theme.card_outline_color')">
            <div class="card-body pb-1 ">
                <form class="form" method="GET" id="frm_filter" action="{{ route('permission.filter') }}">
                    @csrf
                    <div class="row">
                        <div class="col-12 col-sm-10 col-md-9 col-lg-8 col-xl-8">
                            <div class="input-group input-group-sm mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">Name</span>
                                </div>   
                                <input type="text" class="form-control" placeholder="" name="name" id="name" value="{{$selection['name']}}">
                            </div>
                        </div>  
                       
                        <div class="col-12 col-sm-2 col-md-3 col-lg-4 col-xl-4">
                            <button type="submit" class="btn @lang('theme.btn_search') btn-sm float-right"><i class="fa fa-search px-2 py-2" ></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="container-fulied row py-3">
        <div class="col px-4">
            <div class="table-responsive">
                <table id="filtertbl"  class="table table-hover table-sm">
                    <thead>
                        <tr class = "my-table-header">
                            <th scope="col" class="my-table-heading" style="min-width:20px;"></th>
                            <th scope="col" style="min-width:100px;">Name</th>
                                    <th scope="col" style="min-width:460px;">Description</th>
                        </tr>
                    </thead>
                    <tbody style="@lang('theme.tbl-bottom')">
                        @foreach ($permissions as $permission)
                            <tr>
                                @if (Auth::user()->can('show', $permission))
                                    <td><a class="@lang('theme.link')" href="{{ route('permission.show', [$permission->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>{{ $permission->permission_id }}</td>
                                <td>{{ $permission->description }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {!! $permissions->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