@extends('layouts.master')
@section('content')
@include('partials.containers-header')
<div class="row">
    <div class="col-12">
        @include('partials.messages_display')
        <div class="card" id="list">
            <div class="card-header {{config('adminlte.bg-card-header', 'bg-grey-gradient')}}" style="min-height: 5em">
                <div class="row">
                    <div class="col-md-3">
                        <h4>@lang('Perspective')</h4>
                    </div>
                    <div class="col-md-7" style="text-align: left" id="listaction">
                        @include('partials.index-buttons',[
                            'model' => 'perspective',
                            'btns'  => 'n'
                        ])
                    </div>
                    <div class="col-md-2" style="max-height: 2.5em" id="paginator">
                        @if (count($records) > 0)
                            {!! $records->links() !!}
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="table table-hover table-sm">
                    <thead class="thead-light">
                        <th width="80px" id="name">@lang('Name')</th>
                        <th width="80px" id="order">@lang('Order')</th>
                        <th width="80px" id="color">@lang('Color')</th>
                        <th width="80px" style="text-align: center" id="appears">@lang('How it appears')</th>
                        <th width="100px" style="text-align: center" id="itemactions">@lang('Action')</th>
                    </thead>
                    <tbody>
                    @foreach($records as $record)
                        <tr>
                            <td>{{$record->name}}</td>
                            <td>{{$record->order}}</td>
                            <td>{{$record->color_name}}</td>
                            <td style="text-align: center">
                                <div class="btn btn-sm bg-{{$record->bg_color}}">@lang('In this way')</div>
                            </td>
                            <td style="text-align: center">
                                @include('partials.actions-buttons',[
                                    'model'   => $record->data['model'],
                                    'id'      => $record->id,
                                    'trashed' => false
                                ])
                            </td>
                        </tr>
                        @include('partials.modal_delete',$record->data)
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@include('partials.containers-footer')
@endsection

@section('search')
    {{--@include('admin.perspective.search')--}}
@endsection

@section('javascript')
<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 Perspectives to work on')}}!!"
            },
            {
                element: '#list',
                intro: "{{__('Perspective list')}}",
                // position: 'up'
            },
            {
                element: '#listaction',
                intro: "{{__('General actions you can take')}}",
                // position: 'up'
            },
            {
                element: '#name',
                intro: "{{__('Name of the Perspective')}}",
                // position: 'up'
            },
            {
                element: '#order',
                intro: "{{__('The order which one the Perspective appears in the Strategic Map')}}",
                // position: 'up'
            },
            {
                element: '#color',
                intro: "{{__('The color in which one the Perspective appears in the Map.  The KPIs related to the Perspective also appears in this color')}}",
                // position: 'up'
            },
            {
                element: '#appears',
                intro: "{{__('You will see the Perspective in this way either in the Map or in the Indicators list')}}",
                // position: 'up'
            },
            {
                element: '#itemactions',
                intro: "{{__('Specific actions you can take on every record')}}",
                // position: 'up'
            },
        ]
    });

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