@extends('layouts.fullpage')

@section('content')
    {{--<ul class="actions">
        <li>
            <a class="actions-button" href="#" rel="noopener" @click="addSection">Add section</a>
        </li>
        <li>
            <a class="actions-button" href="#" rel="noopener" @click="removeSection">Remove section</a>
        </li>
        <li>
            <a class="actions-button" href="#" rel="noopener" @click="toggleNavigation">Toggle nav</a>
        </li>
        <li>
            <a class="actions-button" href="#" rel="noopener" @click="toggleScrollbar">Toggle scrollBar</a>
        </li>
        <li>
            <a class="actions-button" href="#" rel="noopener" @click="$refs.fullpage.api.moveSectionDown()">Move down</a>
        </li>
    </ul>--}}
    <full-page ref="fullpage" :options="Object.assign(options, {anchors: {{$IndexPage->sections->pluck('sku')->prepend('index')->toJson()}}, navigationTooltips: {{$IndexPage->sections->pluck('name')->prepend(__('index'))->toJson()}}, sectionsColor: {{$IndexPage->sections->pluck('background_color')->prepend('#000000')->toJson()}}})" id="fullpage">
        <header class="section">
            <video loop muted data-autoplay class="bg-video" src="lamap/video/airmall_present.mp4"></video>
        </header>
        @foreach($IndexPage->sections()->where('active', true)->get() as $section)
            @if(!empty($section->background_image))
                <section
                    class="section"
                    id="section_{{$section->id}}"
                    style="background: url({{ $section->background_image }});background-size: cover; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">
                    <div class="container">
                        <div class="row">
                            {{--<a href="{{route('sectionSku', ['sku' => $section->sku])}}">

                            </a>--}}
                            <div class="col-md-12">
                                <big style="color: #ffffff;" class="visible-xs"><b>{{$section->name}}</b></big>

                                <p>{{$section->detail}}</p>
                            </div>
                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    @foreach($section->sectionContent as $content)
                                        @if($content->mini)
                                            <div class="col-md-{{ $content->width }} {{ !empty($content->offset)?'offset-md-'.$content->offset:'' }}">{!! $content->raw !!}</div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @else
                <section
                    class="section"
                    id="section_{{$section->id}}">
                    <div class="container">
                        <div class="row">
                            {{--<a href="{{route('sectionSku', ['sku' => $section->sku])}}">

                            </a>--}}
                            <div class="col-md-12">
                                <big style="color: #ffffff;" class="visible-xs"><b>{{$section->name}}</b></big>

                                <p>{{$section->detail}}</p>
                            </div>
                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    @foreach($section->sectionContent as $content)
                                        @if($content->mini)
                                            <div class="col-md-{{ $content->width }} {{ !empty($content->offset)?'offset-md-'.$content->offset:'' }}">{!! $content->raw !!}</div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
        @endforeach
        {{--<div class="section">
            First section ...
        </div>
        <div class="section">
            Second section ...
        </div>--}}
    </full-page>
@endsection