{{--

Footer: Found at the bottom of every page
We want our content to stay focused in the center area,
but we also want to align some of the items vertically.
Therefor we use a flexable-layout inside a contained-layout.

1: Small hack: Because the footer in on every page,
we here added the id to keep track of the grid-size.
This is used in our drip animation.

--}}

<footer class="main">

    {{--
        Keep the content focused in the center area
        1: This element is also used to calculate drip-width
    --}}
    <div class="contained-layout menu">

        {{-- Centered content on a 12-column grid --}}
        <div class="col-12 centered">

            {{--
                Create a flexable layout for better alignment opportunities
            --}}
            <div class="grid-row">
                <div class="logo-container grid-col">
                    <a class="logo" href="/"></a>
                </div>

                {{-- Middle section --}}
                <div class="menu-container grid-col">
                    <h4>menu</h4>
                    <ul>
                        @foreach(\Config::get('site.footer_navigation') as $navItem)
                            @if(!empty($links) && !empty($links->{$navItem}))
                                <li class=" @if(!empty($page) && $page->code_name == $navItem) active @endif ">
                                    <a href="/@if($navItem != 'home'){{$links->{$navItem}->route}}@endif">{{$links->{$navItem}->name}}</a>
                                </li>
                            @endif
                        @endforeach
                        <li class=" @if(\Route::getCurrentRoute() && \Route::getCurrentRoute()->uri == 'offerte') active @endif">
                            <a href="/offerte">
                                Offerte
                            </a>
                        </li>
                    </ul>
                </div>

                {{-- Right section --}}
                <div class="cat-container grid-col">
                    @if(!empty($categoryTree))
                        <h4>aanbod</h4>
                        <ul>
                            @foreach($categoryTree[0]->getChildren() as $catItem)
                                <li class="@if(!empty($page) && $page->code_name == $catItem->node->code_name) active @endif ">
                                    <a href="/aanbod/{{$catItem->node->translation->name}}">{{$catItem->node->translation->name}}</a>
                                </li>
                            @endforeach
                            <li class="@if(!empty($page) && $page->code_name == $links->transportservice->node->code_name) active @endif ">
                                <a href="/{{$links->transportservice->route}}">{{$links->transportservice->name}}</a>
                            </li>
                            <li>
                                <a href="/verhuur">Verhuur</a>
                            </li>
                        </ul>
                    @endif
                </div>
                <div class="contact-container grid-col">
                    <h4>contact</h4>
                    <p>
                        {{ \Config::get('business.address') }}<br/>
                        {{ \Config::get('business.zip') }} {{ \Config::get('business.city') }}<br/>
                        <a href="tel:{{ \Config::get('business.phone_call') }}">{{ \Config::get('business.phone_display') }}</a>
                        <a href="mailto:{{ \Config::get('business.email') }}">{{ \Config::get('business.email') }}</a>
                    </p>
                </div>

                <div class="ref-container grid-col">
                    <h4>referenties</h4>
                    <ul class="refs">
                        @if(!empty($links))
                            @foreach(\Config::get('site.references') as $key => $catItem)
                                {{-- TODO: fix this --}}
                                <li class="ref-{{$key+5}}">
                                    <a href="/{{$links->references->route}}"><span class="ref-holder"></span></a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>

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

    <div class="contained-layout subfooter">

        {{-- Centered content on a 12-column grid --}}
        <div class="col-12 centered">
            <div class="grid-row">
                <div class="logo-container grid-col"></div>
                <div class="menu-container grid-col">
                    <a href="/sitemap">sitemap</a>
                </div>
                <div class="cat-container grid-col">
                    <a href="/disclaimer">disclaimer</a>
                </div>
                <div class="contact-container grid-col">
                    <a href="/algemene-voorwaarden">algemene voorwaarden</a>
                </div>
                <div class="ref-container grid-col">
                    <a class="komma" href="https://www.komma.pro">Website ontwikkeld door <span></span></a>
                </div>
            </div>
        </div>
    </div>


</footer>