@extends('layouts.master')
@section('content')
@include('partials.containers-header')
<div class="row">
    <div class="col-12">
        @include('partials.messages_display')
        <div class="card">
            <div class="card-header {{config('adminlte.bg-card-header', 'bg-grey-gradient')}}" style="min-height: 5em">
                <div class="row">
                    <div class="col-md-2">
                        <h5>@lang($name.' List')</h4>
                    </div>
                    <div class="col-md-6" style="text-align: left" id="listaction">
                        @include('partials.index-buttons',[
                            'model' => $model,
                            'btns' => 'nes'
                        ])
                    </div>
                    <div class="col-md-4" style="max-height: 2.5em;" id="nave">
                        @if (count($records) > 0)
                            {!! $records->links() !!}
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-body p-0" id="list">
                <div class="table-responsive-sm">
                    <table class="table table-hover table-sm">
                        <thead class="thead-light">
                            <th width="80px" id="name">@lang('Name')</th>
                            <th width="100px" id="slug">@lang('Slug')</th>
                            <th width="100px" id="desc">@lang('Description')</th>
                            <th width="100px" style="text-align: center" id="itemactions">@lang('Action')</th>
                        </thead>
                        <tbody>
                        @foreach($records as $record)
                            {{-- <tr bgcolor="{{$record->trashed() ? 'lightblue' : '' }}"> --}}
                            <tr>
                                <td>{{$record->name}}</td>
                                <td>{{$record->slug}}</td>
                                <td>{{$record->description}}</td>
                                <td style="text-align: center">
                                    @include('partials.actions-buttons',[
                                        'model'   => $record->data['model'],
                                        'id'      => $record->id,
                                        'trashed' => false //$record->trashed()
                                    ])
                                </td>
                            </tr>
                            @include('partials.modal_delete',$record->data)
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@include('partials.containers-footer')
@endsection

@section('search')
    @include('admin.permission.search',[
        'record' => null,
    ])
@endsection

@push('scripts')
<script type="text/javascript">
function startIntro(){
    var intro = introJs();
    intro.setOptions({
        nextLabel: "{{__('Next')}}",
        prevLabel: "{{__('Prev')}}",
        skipLabel: "{{__('Skip')}}",
        doneLabel: "{{__('Done')}}",
        steps: [
            { intro: "{{__('Here you can see the list of Permissions that you can assign to a Role')}}!!" },
            { element: '#crea', intro: "{{__('Use this button to create a new record')}}", },
            { element: '#sear', intro: "{{__('Use this button to search record by criteria')}}", },
            { element: '#expo', intro: "{{__('Use this button to export records in XLS format')}}", },
            { element: '#tras', intro: "{{__('Use this button to show the records have been deleted.  You can recover those records')}}", },
            { element: '#nave', intro: "{{__('Use these buttons to navigate records')}}", },
            { element: '#name', intro: "{{__('Name of the Permission')}}", },
            { element: '#slug', intro: "{{__('Slug of the Permission')}}", },
            { element: '#desc', intro: "{{__('Description of the Permission')}}", },
            { element: '#itemactions', intro: "{{__('Specific actions you can take on every record')}}", },
        ]
    });

    intro.start();
}
</script>
@endpush