@extends('layouts.app')

@section('content')

<!-- Home slide -->
<div class="home-slide5 slide-fullscreen owl-carousel nav-style4 nav-center-center" data-animateout="fadeOut" data-animatein="fadeIn" data-items="1" data-nav="true" data-dots="false" data-loop="true" data-autoplay="true">
    <div class="item-slide full-height" data-background="/qrwebsite/public/images/slides/1.jpg"></div>
    <div class="item-slide full-height" data-background="/qrwebsite/public/images/slides/2.jpg"></div>
    <div class="item-slide full-height" data-background="/qrwebsite/public/images/slides/3.jpg"></div>
</div>

@if(!$dress_collection->isEmpty())
    

<div class="margin-top-70">
    <div class="container">
        <div class="section-title style8 text-center margin-bottom-40">
            <h3>Featured Dresses</h3>
        </div>

        <div id="carousel-dresses" class="carousel slide" data-ride="carousel">

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">

                @foreach($dress_collection->chunk(3) as $index => $dress_chunk)
                <div class="item {{ $index == 0 ? 'active' : null }}">

                    <div class="row">

                        @foreach($dress_chunk as $dress)

                        @if(!@empty($dress_images[$dress->style_number][0]))

                        <div class="col-xs-4 dress-item">
                            <a href="/qrwebsite/public/dresses/{{ $dress->style_number }}" class="thumbnail dress-images">
                                <img src="{{ $dress_images[$dress->style_number][0] }}" alt="Style {{ $dress->style_number }} Front" class="dress-image dress-image-front">
                                @if(!@empty($dress_images[$dress->style_number][1]))
                                <img src="{{ $dress_images[$dress->style_number][1] }}" alt="Style {{ $dress->style_number }} Back" class="dress-image dress-image-back">
                                @endif
                            </a>

                            <h3 class="text-center dress-style-number"><a href="/qrwebsite/public/dresses/{{ $dress->style_number }}">Style {{ $dress->style_number }}</a></h3>

                        </div>

                        @endif

                        @endforeach

                    </div>
                </div>
                @endforeach

            </div>

        </div>

        <div class="row margin-top-20">
            <div class="col-xs-4">
                <a href="#carousel-dresses" class="btn btn-default" role="button" data-slide="prev"><i class="fa fa-chevron-left"></i> <span class="hidden-xs">Previous</span></a>
            </div>
            <div class="col-xs-4 text-center">
                <a href="/dresses" class="btn btn-default">
                    <span class="hidden-xs">View Entire Collection</span>
                    <span class="visible-xs-inline">View All</span>
                </a>
            </div>
            <div class="col-xs-4 text-right">
                <a href="#carousel-dresses" class="btn btn-default" role="button" data-slide="next"><span class="hidden-xs">Next</span> <i class="fa fa-chevron-right"></i></a>
            </div>
        </div>

    </div>
</div>

<div class="margin-top-70">

    <span class="line"></span>
</div>


@endif
    
    
<div class="container">
    <div class="margin-top-70">
        <div class="row">
            <div class="col-sm-2 col-sm-offset-2 text-right">
                <img class="margin-top-20 img-responsive" src="/qrwebsite/public/images/logo/logo_shadow.png" alt="">
            </div>
            <div class="col-sm-7">
                <blockquote class="lead">Welcome to the world of Ana Sofia &amp; Quince Royale, where we celebrate ourselves so others will follow!</blockquote>
            </div>
        </div>
    </div>
</div>
<div class="block-paralax5 bg-parallax">
    <div class="container">
        <div class="head">
            <h3 class="title">Join Our Mailing List</h3>
        </div>
        <div class="col-lg-offset-2 col-sm-12 col-lg-8">
            <div class="block-newletter style3">
                <div class="form">
                    <div class="newletter-wapper">
                        <form action="/mailing-list" method="post" class="newletter">

                            {{ csrf_field() }}

                            <input class="email-text" type="text" value="" name="email" placeholder="Your email address here...">
                            <input type="button" value="SIGNUP" class="button">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection