@extends('layouts.app')

@section('screen18')
    @if($section->isBlock())
        <div class="screen18" v-if="screen18"></div>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" data-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">

                    </div>
                    <div class="modal-body">
                        <center>
                            <b>Esta sección es solo para mayores de 18 años</b><br>
                            <b>¿Eres mayor de edad?</b>
                        </center>
                    </div>
                    <div class="modal-footer">
                        <button type="button" onclick="window.history.back()" class="btn btn-secondary">No soy mayor de edad</button>
                        <button type="button" class="btn btn-danger" @click="screen18 = false" data-dismiss="modal">Si, soy mayor de edad</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('content')
    <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 class="img-fluid" src="{{ $section->header_image }}" alt="nivel"></center>
                    <center class="d-none d-sm-block"><img class="img-fluid" 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>
    <div class="container">
        <div class="row">
        @foreach($section->sectionContent()->where('active', true)->orderBy('order')->get() as $content)
            @if(!$content->mini && (!empty($content->sectionContract) && !$content->sectionContract->trashed()))
                    @if(empty($content->sectionContract->url_external))
                        <div class="col-md-{{$content->width}} {{ !empty($content->offset)?'offset-md-'.$content->offset:'' }} mt-4">
                            <a href="/shop/{{$content->sectionContract->sku}}" title="{{ $content->sectionContract->name }}" class="text-decoration-none">
                                <div class="card">
                                    <div style="height: 200px; overflow: hidden;">
                                        <img class="img-fluid" src="{{ $content->sectionContract->avatar }}" alt="">
                                    </div>
                                    @if(!empty($content->sectionContract->detail))
                                        <div class="card-body">
                                            <h4 class="text-dark"><b>{{ $content->sectionContract->name }}</b></h4>
                                            <p class="text-muted">
                                                {{$content->sectionContract->detail}}
                                            </p>
                                        </div>
                                    @endif
                                </div>
                            </a>
                        </div>
                    @else
                        <!--tienda vitrina-->
                        <div class="col-md-{{$content->width}} {{ !empty($content->offset)?'offset-md-'.$content->offset:'' }} mt-4">
                            <a href="/showcase/{{$content->sectionContract->sku}}" title="{{ $content->sectionContract->name }}" class="text-decoration-none">
                                <div class="card">
                                    <div style="height: 180px; overflow: hidden;">
                                        <img class="img-fluid" src="{{ $content->sectionContract->avatar }}" alt="">
                                    </div>
                                    @if(!empty($content->sectionContract->detail))
                                        <div class="card-body">
                                            <h4 class="text-dark"><b>{{ $content->sectionContract->name }}</b></h4>
                                            <p class="text-muted">
                                                {{$content->sectionContract->detail}}
                                            </p>
                                        </div>
                                    @endif
                                </div>
                            </a>
                        </div>
                    @endif
            @endif
        @endforeach
        </div>
    </div>
@endsection