@extends('layouts.frontend')

@section('ogp')
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ request()->url() }}">
    <meta property="og:image" content="{{ asset($product->thumbnail ?? $options->image) }}">
    <meta property="og:title" content="{{ $product->post->title }}">
    <meta property="og:description" content="{{ $product->post->excerpt }}">
@endsection

@section('title', $product->post->title)

@section('content')
    <article id="product">
        <div class="breadcrumb">
            <div class="container d-flex align-items-center">
                <a href="{{ url('/') }}">Inicio</a>
                <span>@yield('title')</span>
            </div>
        </div>
        <section>
            <div class="container">
                <div class="row row-grid">
                    <div class="col-md-6">
                        <div class="row row-grid">
                            @foreach($product->images as $medium)
                                <div class="col-{{ $loop->first ? 12 : 4 }}">
                                    <a href="{{ asset($medium->post->image) }}" class="mzoom">
                                        <div class="img-holder img-full">
                                            <img src="{{ asset($medium->thumbnail) }}" alt="" class="cover">
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="product-info">
                            <h2>@yield('title')</h2>
                            <h4>{{ num_format($product->price) }}</h4>
                            <p>{!! nl2br($product->post->excerpt) !!}</p>
                            @if($product->active)
                                {!! Form::open([
                                    'class' => 'cart-add-form'
                                ]) !!}
                                {!! Form::hidden('action', 'add') !!}
                                {!! Form::hidden('product_id', $product->id) !!}
                                <div class="row row-grid align-items-center">
                                    <div class="col-auto">Cantidad:</div>
                                    <div class="col-auto">
                                        <div class="input-number">
                                            <a href="#" class="plus far fa-plus"></a>
                                            <a href="#" class="minus far fa-minus"></a>
                                            <input type="number" name="qty" value="1" min="1" max="{{ $product->stock }}">
                                        </div>
                                    </div>
                                    <div class="col-sm col-12">
                                        <button class="btn" type="submit">
                                            <span>Añadir al carrito</span>
                                            <i class="far fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            @else
                                <p><b>No disponible</b></p>
                            @endif
                            <p>
                                @if($product->sku)
                                    <span class="d-block">SKU: {{ $product->sku }}</span>
                                @endif
                                @if($product->post->categories->count())
                                    <span class="d-block">Categorías: {{ $product->post->categories->implode('title', ', ') }}</span>
                                @endif
                                @if($product->tags)
                                    <span class="d-block">Etiquetas: {{ implode(', ', $product->tags_array) }}</span>
                                @endif
                                @if($product->sizes)
                                    <span class="d-block">Tamaños: {{ implode(', ', $product->sizes_array) }}</span>
                                @endif
                                @if($product->colors)
                                    <span class="d-block">Colores: {{ implode(', ', $product->colors_array) }}</span>
                                @endif
                                @if($product->materials)
                                    <span class="d-block">Materiales: {{ implode(', ', $product->materials_array) }}</span>
                                @endif
                            </p>
                        </div>
                    </div>
                    @if($product->post->content)
                        <div class="col-12 mt-5 product-content">
                            <div class="row row-grid">
                                <div class="col-auto">
                                    <h3>Descripción</h3>
                                </div>
                                <div class="col-sm col-12">
                                    <div class="content-html">
                                        {!! $product->post->content !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
        @if($products->count())
            <section class="related">
                <div class="container">
                    <h2>Productos relacionados</h2>
                    <div class="row-container">
                        <div class="row row-grid justify-content-center">
                            @foreach($products as $product)
                                <div class="col-md-3 col-6">
                                    @include('partials.card')
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        @endif
    </article>
@endsection

@push('scripts')
    <script>
      $(function() {
        $('body').on('submit', '.cart-add-form', function() {
          var $this = $(this);
          $.post('{{ route('cart.action') }}', $this.serialize(), function(response) {
            $this.find('.btn span').text(response.message);
            $this.addClass('btn-cart-toggle');
            $('.cart-count').text(response.count);
            $('.cart-content').html(response.cart);
          }).fail(function(response) {
            alert(response.responseJSON.message);
          });
          return false;
        });
      });
    </script>
@endpush