<section class="location-row">
    <h1 id="location">@lang('translations.findOutLocations')</h1>
    <div class="content-container stick-content">
        <div class="grid9 list">
            <?php $first = true; ?>
            @foreach($locations as $location)
                <div class="list-item {{$location->code_name}} @if($first) active @endif"
                     style="width: {{100/sizeof($locations)}}%;" data-click-key="{{$location->code_name}}">
                    <?php $first = false; ?>
                    <div class="placeholder">
                        <p>
                            {{$location->menu}}
                            <span></span>
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="content-container" id="locationSend">
        <div class="choose-location">
            <p>
                @lang('translations.chooseActivity')
            </p>
            <div class="arrow"></div>
        </div>
        <div class="grid9 list nonStick">
            <?php $first = true; ?>
            @foreach($locations as $location)
                <div class="list-item {{$location->code_name}} @if($first) active @endif"
                     style="width: {{100/sizeof($locations)}}%;" data-click-key="{{$location->code_name}}">
                    <?php $first = false; ?>
                    <div class="placeholder">
                        <div class="icon-holder">
                            <div class="icon"></div>
                        </div>
                        <p>
                            {{$location->menu}}
                            <span></span>
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="clear"></div>
    </div>

    <div class="location-buttons">
        <?php $first = true; ?>
        @foreach($locations as $location)
            @if(isset($location->prevLocation))
                <div class="prev-icon-location {{$location->code_name}}"
                     data-click-key="{{$location->prevLocation}}">
                    <div class="icon {{$location->prevLocation}}"><span></span></div>
                    <div class="arrow"><span></span></div>
                </div>
            @endif

            @if(isset($location->nextLocation))
                <div class="next-icon-location {{$location->code_name}} @if($first) active @endif"
                     data-click-key="{{$location->nextLocation}}">
                    <div class="icon {{$location->nextLocation}}"><span></span></div>
                    <div class="arrow"><span></span></div>
                </div>
            @endif
            <?php $first = false; ?>
        @endforeach
    </div>

    <article class="locations">
        <?php $first = true; ?>
        @foreach($locations as $location)


            <div class="{{$location->code_name}}-location location @if($first) active @endif">
                <div class="left-block">
                    <h2>{{$location->name}}</h2>
                    {{$location->description}}
                    @if(isset($location->nextLocation))
                    <p class="read-more"
                       data-click-key="{{$location->nextLocation}}">@lang('translations.readMore') {{ $location->nextLocationName }} </p>
                    @else
                        <p class="read-more"
                           data-click-key="{{$locations[0]->code_name}}">@lang('translations.readMore') {{ $locations[0]->menu }} </p>
                    @endif
                </div>
                <div class="right-block">
                    <div class="header">
                        <div class="placeholder">
                            <div class="icon {{$location->code_name}}"></div>
                            <h4>{{$location->streamer}}</h4>
                        </div>
                    </div>
                    <div class="list-check">
                        {{$location->list}}
                    </div>
                    @if($location->code_name == 'weekDay')
                        <div class="price multi-options">
                            <p><strong class="night-type">weekdagen</strong><br/>
                                <strong>€ {{$location->price}}</strong> <span>/ per nacht</span></p>
                        </div>
                        <div class="price multi-options">
                            <p><strong class="night-type">vrijdag / zaterdag</strong><br/>
                                <strong>€ 120</strong> <span>/ per nacht</span></p>
                        </div>
                    @else
                        <div class="price">
                            <p><span>vanaf</span> <strong>€ {{$location->price}}</strong></p>
                        </div>
                    @endif
                    <div class="reserve">
                        <a href="#contact"
                           class="internalLink">@lang('translations.reserveWord') {{$location->menu}}</a>
                    </div>


                </div>
                <div class="clear"></div>
                @if(isset($location->images) && count($location->images) === 1)
                    <div class="image-container" style="background-image: url('{{$location->images[0]->large_image_url}}')">

                    </div>
                @else

                    <div class="image-container image-container--special" style="position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start">
                        @foreach($location->images as $image)
                        <div class="location-small-image" style=" position: relative">
                            <div style="padding-top: 100%; width: 100%; height: 0;">
                            </div>
                            <div class="image-inner" style="background-image: url('{{$image->medium_image_url}}'); position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-size: cover; background-position: center;"></div>
                        </div>
                            @endforeach
                    </div>

                    <style>
                        .location-small-image {
                            width:24%;
                        }
                        .image-container--special {
                            height:360px;

                        }
                        @media screen and (max-width: 680px) {
                            .image-container--special {
                                flex-wrap: wrap;
                                max-height: none;
                                height:450px !important;
                                align-items: stretch !important;
                            }
                            .image-container--special .location-small-image{
                                width: 49%;
                                margin-bottom: 2%;
                            }
                        }
                    </style>

                @endif
            </div>
            <?php $first = false; ?>
        @endforeach
    </article>


</section>