@section('metatags')
<meta name="description" content="">
<meta property="og:title" content="{{ $product->title }} | C117 - Casual Wear">
<meta property="og:description" content="">
<meta property="og:image" content="">
@stop

@section('title')
{{ $product->title }} | 
@stop


@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            @include('products.partials.breadcrumb')
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-md-8 col-lg-7 product-left-col">
            <div class="product-images">
                @if($product->images->isEmpty())
                <img src="{{ asset('assets/img/default/default.png') }}" class="width-100"/>
                @else
                <ul id="product-images-gallery" class="list-unstyled">
                    @foreach($product->images as $image)
                    <li data-thumb="{{ $image->getThumb() }}" data-src="{{ $image->getLarge() }}">
                        <img src="{{ $image->getCroppa(800, 608) }}" class="width-100"/>
                    </li>
                    @endforeach
                </ul>
                @endif
            </div>
        </div>
        <div class="col-sm-5 col-md-4 col-lg-offset-1 margin-bottom-0">
            <div class="panel product-right-col">
                <div class="panel-body">
                    <h1 class="product-title">
                        @if($category)
                        <small>{{ $category->meta_title }}</small><br/>
                        @endif
                        {{ $product->title }}
                    </h1>
                    <div class="row row-0 product-status">
                        <div class="col-sm-4">
                            <p>
                                <span class="text-muted">Referência:</span><br/>
                                <b>{{ $product->reference }}</b>
                            </p>
                        </div>
                        <div class="col-sm-4">
                            <p>
                                <span class="text-muted">Disponibilidade:</span><br/>
                                <b class="text-green"><i class="fa fa-circle"></i> Em Stock</b>
                            </p>
                        </div>
                    </div>
                    <div class="product-price">
                        <h2 class="margin-top-10">€ {{ $product->price_whole }}<sup>,{{ $product->price_decimal }}</sup></h2>
                    </div>
                    @include('products.partials.product_options')
                </div>
            </div>
            <div class="product-share">
                <ul class="list-inline margin-0 height-25">
                    <li>
                        <a href="http://www.facebook.com/share.php?u={{ Request::fullUrl() }}&title={{ $product->title }}" data-toggle="share" title="facebook">
                            <span class="social-square facebook">
                                <i class="fa fa-facebook-f"></i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="http://twitter.com/home?status={{ $product->title }}+{{ Request::fullUrl() }}" data-toggle="share" title="Twitter" >
                            <span class="social-square twitter">
                                <i class="fa fa-twitter"></i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="https://plus.google.com/share?url={{ Request::fullUrl() }}" data-toggle="share" title="Google +" >
                            <span class="social-square google-plus">
                                <i class="fa fa-google-plus"></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="spacer-30"></div>
    <div class="row">
        <div class="col-sm-9">
            <ul class="nav nav-tabs nav-tabs-products" role="tablist">
                <li role="presentation" class="active">
                    <a href="#description" role="tab" data-toggle="tab">
                        Descrição do Produto
                    </a>
                </li>
                <li role="delivery">
                    <a href="#delivery" role="tab" data-toggle="tab">
                        Entregas e Devoluções
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="description">
                    <div class="row">
                        <div class="col-sm-8">
                            @if($product->description)
                            {!! nl2br($product->description) !!}
                            @else
                            Nenhuma descrição para apresentar.
                            @endif
                        </div>
                        <div class="col-sm-4">
                            <table class="table table-condensed table-clean">
                                <tr>
                                    <td class="bold">Referência</td>
                                    <td>{{ $product->reference }}</td>
                                </tr>
                                @foreach($features as $publicName => $feature)
                                <tr>
                                    <td class="bold">{{ $publicName }}</td>
                                    <td>
                                        @foreach($feature as $item)
                                        {{ $item->name }}<br/> 
                                        @endforeach
                                    </td>
                                </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>

                </div>
                <div role="tabpanel" class="tab-pane fade" id="delivery">
                    Sem informação de entregas e devoluções.
                </div>
            </div>

            <h4 class="text-uppercase margin-top-50 margin-bottom-20">Produtos Relacionados</h4>
            <div class="row row-10 equal-height">
                @include('products.partials.related')
            </div>
            <div class="spacer-30"></div>
        </div>
        <div class="col-sm-3">
            <div class="spacer-35"></div>
            @foreach($highlights as $highlight)
                @if($highlight->url)
                <a href="{{ $highlight->url }}">
                    <img src="{{ asset($highlight->getCroppa(360,230)) }}" class="img-responsive margin-bottom-15"/>
                </a>
                @else
                <img src="{{ asset($highlight->getCroppa(360,230)) }}" class="img-responsive margin-bottom-15"/>
                @endif
            @endforeach
        </div>
    </div>
</div>
@stop


@section('scripts')
<script>
    $(window).load(function () {
        $('#product-images-gallery').lightSlider({
            gallery: true,
            loop: true,
            item: 1,
            thumbItem: 4,
            slideMargin: 0,
            vThumbWidth: 100,
            enableDrag: false,
            currentPagerPosition: 'left',
            thumbsLeft: true,
            vertical: true,
            verticalHeight: 400,
            onSliderLoad: function (el) {
                el.lightGallery({
                    selector: '#imageGallery .lslide'
                });
            }
        });
    });
</script>
@stop