@extends('layouts.appPage')
@section('content')


    @foreach($Page->sections()->where('active', true)->get() as $section)
        @if($section->type == 'background_video')
            <video autoplay muted loop style="width: 100%;">
                <source src="{{ $section->sectionContent->first()->raw }}" type="video/mp4">
                Your browser does not support HTML5 video.
            </video>
        @elseif($section->type == 'insert')
            @if($section->sectionContent->first()->padding == 1)
                <div class="container-fluid bg-white">
                    <div class="d-flex justify-content-center p-4">
                        {!! $section->sectionContent->first()->raw !!}
                    </div>
                </div>
            @else
                {!! $section->sectionContent->first()->raw !!}
            @endif
        @elseif($section->type == 'swiper')
            <swiper-sample :sections="{{ $section->collectionSection->count()>0?$section->collectionSection->toJson():"[{$section->toJson()}]" }}"></swiper-sample>
        @elseif($section->type == 'newsletter')
            <section class="newsletter pt-5 pb-5" style="height: 500px; background-image: url({{ $section->background_image }});-webkit-background-size: cover;background-size: cover;" id="newsletter">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="section-head wow fadeInDown animated" data-wow-offset="10">
                                <h1>Boletin informativo</h1>
                                <p>Complete su dirección de correo electrónico para recibir actualizaciones mensuales</p>
                                <span class="underline"></span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12 form">
                            <div id="contact">

                                <form method="post" action="{{ route('saveNewsletter') }}" name="contactform">
                                    @csrf
                                    <fieldset class="row">

                                        <div class="col-md-6 offset-2">
                                            <input name="email" type="text" class="form-control form-control-lg" id="email" value="" placeholder="Por favor, introduzca su dirección de correo electrónico" />
                                        </div>
                                        <div class="col-md-2">
                                            <button type="submit" class="btn btn-outline-light btn-lg btn-block" id="submit" value="Submit">
                                                <i class="fa fa-envelope"></i>
                                                Subscribe
                                            </button>
                                        </div>

                                    </fieldset>

                                </form>

                                <div class="tex-center">
                                    <div id="message"></div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @elseif($section->type == 'carousel')
            <div class="carousel-airmall pt-5 pb-5">
                <div class="container">
                    <carousel
                        :autoplay="true" :items="1" :nav="false"
                        :navText='["anterior","siguiente"]'>
                        @foreach($section->sectionContent()->orderBy('order')->where('active', true)->get() as $sectionContent)
                            @if($sectionContent->url_to)
                                <a href="{{$sectionContent->url_to}}"><img src="{{ $sectionContent->raw }}"></a>
                            @else
                                <img src="{{ $sectionContent->raw }}">
                            @endif
                        @endforeach
                    </carousel>
                </div>
            </div>
            {{--<section class="features pt-5 pb-5" style="min-height: 300px;">
                <div class="container">
                    <h1>{{ $section->name }}</h1>
                    <p><span class="font-weight-light">{{ $section->detail }}</span></p>
                </div>
            </section>--}}
        @elseif($section->type == 'title')
            <div style="background-image: url({{ $section->background_image }});-webkit-background-size: cover;background-size: cover; background-position: 0% 10%;">
                <div class="container-fluid" style="background-color: {{ $section->background_color }};">
                    <div class="container">
                        @if($section->header_image)
                            <center class="d-block d-sm-none"><img height="180" src="{{ $section->header_image }}" alt="nivel"></center>
                            <center class="d-none d-sm-block"><img src="{{ $section->header_image }}" alt="nivel"></center>
                        @else
                            <div class="d-block d-sm-none" style="height: 150px;"></div>
                            <div class="d-none d-sm-block" style="height: 350px;"></div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="container-fluid" style="background-color: {{ $section->background_color_2 }};">
                <div class="container pt-3 bt-3">
                    <center class="d-block d-sm-none" style="color: white; font-size: 20px;"><b>{{ $section->name }}</b></center>
                    <center class="d-none d-sm-block" style="color: white; font-size: 50px;"><b>{{ $section->name }}</b></center>
                </div>
            </div>
            {{--<section class="features" style="min-height: 160px;">
                <div class="container">
                    <h1 style="margin-bottom: 0px;"><b>{{ $section->name }}</b></h1>
                    <span class="underline"></span>
                    <p><span class="font-weight-light">{{ $section->detail }}</span></p>
                </div>
            </section>--}}
        @elseif($section->type == 'gridview')
            <div class="{{ $section->full_width?'container-fluid':'container' }} mt-5">
                <masonry
                    :cols="{default: 4, 1000: 3, 700: 1, 400: 1}"
                    :gutter="{default: '30px', 700: '15px'}"
                >
                    @foreach($section->sectionContent()->orderBy('order')->where('active', true)->get() as $sectionContent)
                        <div class="mb-4">
                            @if($sectionContent->isImage())
                                <a href="{{$sectionContent->url_to}}">
                                    <img src="{{ $sectionContent->raw }}" alt="" class="img-fluid">
                                </a>
                            @elseif($sectionContent->isFacebook())
                                {{--{!! $sectionContent->raw !!}--}}

                                <iframe
                                    src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fairmall.ec%2Fvideos%2F{{ $sectionContent->getCodeFacebook() }}%2F&show_text=false&width=100%"
                                    width="100%"
                                    style="border:none;overflow:hidden"
                                    scrolling="no"
                                    frameborder="0"
                                    allowfullscreen="true"
                                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
                                    allowFullScreen="true"></iframe>
                            @else
                                <video-embed src="{{ $sectionContent->raw }}"></video-embed>
                            @endif
                        </div>
                    @endforeach
                </masonry>
            </div>
        @else
            <section class="features pt-5 pb-5" style="min-height: 300px;">
                <div class="container">
                    <h1>{{ $section->name }}</h1>
                    <p><span class="font-weight-light">{{ $section->detail }}</span></p>
                </div>
            </section>
        @endif
        {{--<div style="background-image: url({{ $section->background_image }});-webkit-background-size: cover;background-size: cover; background-position: 0% 10%;">
            <section id="section_{{$section->id}}" style="background-color: {{$section->background_color}};">
                <div style="position: relative; height: 50px; top: -90px; left: 10px">
                    <img src="{{ $section->header_image }}" alt="nivel" height="75">
                </div>
                <div class="container">
                    <div class="row">
                        <a href="{{route('sectionSku', ['sku' => $section->sku])}}" style="color: #ffffff; text-decoration: underline;">
                            <div class="col-md-12">
                                <div class="section-head wow fadeIn animated" data-wow-offset="10" data-wow-duration="1.5s">
                                    <big class="visible-xs"><b>{{$section->name}}</b></big>
                                    <h1 class="hidden-xs">{{$section->name}}</h1>
                                    <p>{{$section->detail}}</p>
                                    <span class="underline"></span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </section>
        </div>--}}
    @endforeach
@endsection