@extends('layouts.system')

@section('meta_title', 'Grupy użytkowników - Użytkownicy')
@section('top_title', 'Grupy użytkowników')


@section('styles')
@endsection

@section('scripts_head')
@endsection

@section('scripts')
@if($userCanCreate || $userCanEdit || $userCanDelete)
    <script>
        const SITE_route = '{{ url('/users/groups') }}';
    </script>
    <script type="text/javascript" src="{{ mix('/js/oneColListManage.js') }}"></script>
@endif
@endsection

@section('content')
    @if($userCanCreate)
        @component('layouts.parts.formBlock')
            @slot('title')
                Dodaj nową grupę
            @endslot
            @slot('content')
                <div id="createElementAlerts"></div>
                <div class="form-group">
                    <label for="addOpt_name">Nazwa</label><br>
                    <input type="text" class="form-control" name="addOpt_name" id="addOpt_name" value="">
                </div>
            @endslot
            @slot('footer')
                <button type="button" class="btn bg-gradient-success float-right" id="createElementBtn">Dodaj</button>
            @endslot
        @endcomponent
    @endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Lista grup użytkowników</h3>
                </div>
                <div class="card-body">
                <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
                    @if($userCanDelete)
                        <div class="row">
                            <div class="col-sm-6 col-md-2">
                                <button type="button" class="btn bg-gradient-danger" id="deleteSelectedOptions"><i class="far fa-trash-alt"></i> Usuń wybrane</button>
                            </div>
                        </div>
                    @endif
                    <br>
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="listTable" class="table table-bordered table-hover dataTable text-sm" role="grid" >
                                <thead>
                                    <tr role="row">
                                        <th>
                                            <div class="icheck-primary d-inline">
                                            <input type="checkbox" id="list_items_select_all" class="checkbox_selectAllRows" data-tbody-id="tbodyList">
                                              <label for="list_items_select_all">
                                              </label>
                                            </div>
                                        </th>
                                        <th>Nazwa</th>
                                        <th>Akcja</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyList">
                                    @foreach($list as $elem)
                                        <tr id="listRow_{{ $elem->id }}">
                                            <td>
                                                <div class="icheck-primary d-inline checkboxWrapper">
                                                    <input type="checkbox" id="list_item_{{ $elem->id }}" value="{{ $elem->id }}">
                                                    <label for="list_item_{{ $elem->id }}"></label>
                                                </div>
                                            </td>
                                            <td class="name">{{ $elem->name }}</td>
                                            <td style="white-space: nowrap;">
                                                @if($userCanEdit)
                                                    <a href="{{ url('/users/groups/'.$elem->id.'/edit') }}">
                                                        <button type="button" class="btn btn-sm btn-warning text-white" title="Edytuj"><i class="fas fa-edit"></i></button>
                                                    </a>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection