@if(!empty( $index['popup-main'] ))

    <div class="modal fade popup-main" id="event-main" tabindex="-1" role="dialog" aria-labelledby="RegisterAgentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sl" role="document">
            <div class="modal-content" style="background-image: url('{{asset($index['popup-main']['bg'])}}')">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        @if(!empty($index['popup-main']['bg-button-close']))
                            <img src="{{$index['popup-main']['bg-button-close']}}" width="36">
                        @else
                            <span aria-hidden="true">&times;</span>
                        @endif
                    </button>
                </div>
                <div class="modal-body">
                    <div class="text-center">

                        <div id="event-main-slide" class="carousel slide" data-ride="carousel">

                            <div class="carousel-inner">
                                @if(!empty($index['popup-main']['img']) && count($index['popup-main']['img'])>0)
                                    @php($key = 0)
                                    @foreach($index['popup-main']['img'] as $img)
                                        <div class="carousel-item {{$key==0?'active':''}}">
                                            <img src="{{asset($img)}}">
                                        </div>
                                        @php($key = 1)
                                    @endforeach

                                    @if(count($index['popup-main']['img'])>1)
                                        <a class="carousel-control-prev" href="#event-main-slide" role="button" data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="carousel-control-next" href="#event-main-slide" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    @endif
                                @endif
                            </div>

                        </div>

                    </div>
                </div>
                <div class="modal-footer d-block text-center">
                    <a href="{{$index['popup-main']['link-button']}}">
                        @if(!empty($index['popup-main']['bg-button']))
                            <button class="btn btn-primary" style="background: url({{$index['popup-main']['bg-button']}})">{{$index['popup-main']['title-button']}}</button>
                        @else
                            <button class="btn btn-primary" >{{$index['popup-main']['title-button']}}</button>
                        @endif

                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(window).on('load',function(){
            var delayMs = 500;

            setTimeout(function(){
                $('#event-main').modal('show');
            }, delayMs);
        });
    </script>

@endif