@php
    $guide = config('admin.settings_guide')[$id];
    $sid = $id.'_slides' ;
    $is_popup = $guide['type'] ==='popup' ;
    $is_tooltip = $guide['type'] ==='tooltip' ;
@endphp

<a href="javascript:void(0)"
   class="ml-1 small text-muted"
@if($is_popup)
   title="View Guide <i class='fas fa-external-link-alt ml-1'></i>"
   data-toggle="tooltip"
   data-html="true"
@endif
@if($is_tooltip)
   title="{{$guide['content']}}"
   data-toggle="tooltip"
   data-html="true"
@endif
>
    <i class="far fa-question-circle" @if($is_popup) data-toggle="modal" data-target="#{{$id}}"@endif></i>
</a>

@if($is_popup)
    <!-- Modal -->
    <div class="modal fade" id="{{$id}}" tabindex="-1" aria-labelledby="{{$id}}Label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="{{$id}}Label">{{$guide['title']}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div id="{{$sid}}" class="carousel slide" data-ride="carousel" data-wrap="false">
                        @if( count($guide['contents']) > 1)
                        <div class="d-flex justify-content-between pb-3">
                            <button class="btn btn-sm btn-default px-3 mx-1" type="button" data-target="#{{$sid}}" data-slide="prev">
                                <i class="fas fa-angle-left"></i>
                            </button>
                            <ol class="carousel-indicators position-relative p-0 m-0">
                                @foreach($guide['contents'] as $key=> $content)
                                    <li data-target="#{{$sid}}" data-slide-to="{{$key}}" class="bg-secondary {{$loop->first ? 'active':''}}"></li>
                                @endforeach
                            </ol>
                            <button class="btn btn-sm btn-default px-3 mx-1" type="button" data-target="#{{$sid}}" data-slide="next">
                                <i class="fas fa-angle-right mx"></i>
                            </button>
                        </div>
                        @endif
                        <div class="carousel-inner">
                            @foreach($guide['contents'] as $content)
                                <div class="carousel-item {{$loop->first ? 'active':''}}">
                                    @isset($content['title'])<h5 class="text-bold">{{ $content['title'] }}</h5>@endisset
                                    @isset($content['message'])<p>{!! $content['message'] !!}</p>@endisset
                                    @isset($content['image'])<img src="{{$content['image']}}" class="d-block w-100" alt="{{$content['title']}}">@endisset

                                </div>
                            @endforeach
                        </div>

                        @if( count($guide['contents']) > 1)
                        <div class="d-flex justify-content-between pt-3">
                            <button class="btn btn-sm btn-default px-3 mx-1" type="button" data-target="#{{$sid}}" data-slide="prev">
                                <i class="fas fa-angle-left"></i>
                            </button>
                            <ol class="carousel-indicators position-relative p-0 m-0">
                                @foreach($guide['contents'] as $key=> $content)
                                    <li data-target="#{{$sid}}" data-slide-to="{{$key}}" class="bg-secondary {{$loop->first ? 'active':''}}"></li>
                                @endforeach
                            </ol>
                            <button class="btn btn-sm btn-default px-3 mx-1" type="button" data-target="#{{$sid}}" data-slide="next">
                                <i class="fas fa-angle-right mx"></i>
                            </button>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="modal-footer justify-content-end">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endif