@extends('layouts.app')
    
@section('title', 'Dress Style ' . $dress->style_number . ' | Zoey Grey')

@section('content')

    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            


            <nav>
                <ul class="pager">
                    @if(!@empty($previous_dress->style_number))
                        <li class="previous"><a href="/dresses/{{ $previous_dress->style_number }}"><span aria-hidden="true">&larr;</span> Previous</a></li>
                    @endif

                    @if(!@empty($next_dress->style_number))
                        <li class="next"><a href="/dresses/{{ $next_dress->style_number }}">Next <span aria-hidden="true">&rarr;</span></a></li>
                    @endif
                </ul>
            </nav>

            <div class="row">
                <div class="col-sm-4">

                    <h2>Style {{ $dress->style_number }}</h2>

                    <ul class="list-unstyled">

                        <li><strong>Collection:</strong> {{ $dress->collection }}</li>

                        <li><strong>Fabric:</strong> {{ $dress->fabric }}</li>

                        <li><strong>Color:</strong> {{ $dress->color }}</li>

                    </ul>

                </div>
                <div class="col-sm-8">
                    
                    <div class="row">
                        <div class="col-sm-9">
                            <div id="dress-image" class="thumbnail">
                                <img src="{{ $dress_images[0] }}" alt="">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            
                            <div class="row">
                            
                            @foreach($dress_images as $dress_image)
                            <div class="col-xs-4 col-sm-12">
                                <a href="{{ $dress_image }}" class="thumbnail dress-thumbnail">
                                    <img src="{{ $dress_image }}">
                                </a>
                                </div>
                            @endforeach
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

@endsection

@push('scripts')
    
    <script>
    
    $('.dress-thumbnail').on('click', function (e) {
        e.preventDefault();
        $('#dress-image img').attr('src', $(this).attr('href'));
    });
    
    </script>
    
@endpush