@extends('layouts.master')

@section('title', 'Product')

@section('content')

<div class="product">

    <section class="section pb-0">
        <div class="container-custom">
            <div class="row">
                <div class="col-md-4">
                    <p class="product-ref">REF. {{ $product->ref }}</p>
                    <h2 class="title-narziss-md text-lowercase mb-size-sm revealByLetter" data-splitting>{{ $product->name[$locale] }}</h2>
                    
                    <div class="d-flex align-items-center justify-content-between p-relative">
                        {{-- Price --}}
                        @if ( $product->hasDiscount )
                        <p class="text-md text-semibold"><strike>€ {{ $product->price }}</strike> &nbsp; | &nbsp; <b>€ {{ $product->hasDiscount->discount_product_price }}</b></p>
                        @else
                        <p class="text-md text-semibold">€ {{ $product->price }}</p>
                        @endif
                        {{-- Favorite --}}

                        <products-add-wishlist :wishlist="{{ json_encode(Session::get('wishlist')) }}" :product="{{ $product }}" page="product"/>
                    </div>
                    
                    @if ( !empty($product->description[$locale]) ) 
                    <p class="product-description">
                        {!! $product->description[$locale] !!}
                    </p>
                    @endif

                    @if ( !empty($product->specs[$locale]) )
                    <div class="product-accordion">
                        <div class="accordion accordion-flush" id="accordionFlushExample">
                            @foreach ( $product->specs[$locale] as $item ) 
                            <div class="accordion-item">
                               <h2 class="accordion-header" id="flush-headingOne">
                                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                      {{ $item['title'] }}
                                  </button>
                              </h2>
                              <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                  <div class="accordion-body">{!! $item['value'] !!}</div>
                              </div>
                          </div>
                          @endforeach
                      </div>
                  </div>
                  @endif

                  <div class="product-add-to-cart">
                    <products-add-cart classes="btn btn-black btn-block" :product="{{ $product }}"/>
                </div>

                {{-- Info --}}
                <div class="product-info">
                    <div class="d-flex mt-4">
                        <i class="bi bi-truck"></i>
                        <div>
                            <p><b>Envio: 3 a 5 dias úteis.</b></p>
                            <p>Em períodos de saldos e promoções, o prazo de entrega pode ser superior ao habitual.</p>                                                
                        </div>
                    </div>
                    <div class="d-flex mt-4">
                        <i class="bi bi-arrow-counterclockwise"></i>
                        <div>
                            <p><b> Devoluções</b></p>
                            <p>Tens 30 dias para devolver as tuas peças.</p>                                                
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <products-gallery :images="{{ $product->images }}"/>
        </div>
    </section>

    @if ( $product->relateds->count() )
    <section class="container-custom collectionDragSwiper">
        <div class="row">
            <div class="offset-xl-2 col p-relative">
                <h3 class="title-narziss-lg">pode interessar-lhe</h3>
            </div>
        </div>
        <div class="row">
            <div class="offset-xl-1 col">
                <div class="swiper myDragSwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="{{ asset('img/pages/home/almofada_1.jpg') }}" alt="Drag Image"></div>
                        <div class="swiper-slide"><img src="{{ asset('img/pages/home/almofada_2.jpg') }}" alt="Drag Image"></div>
                        <div class="swiper-slide"><img src="{{ asset('img/pages/home/almofada_3.jpg') }}" alt="Drag Image"></div>
                        <div class="swiper-slide"><img src="{{ asset('img/pages/home/almofada_4.jpg') }}" alt="Drag Image"></div>
                    </div>
                    <div class="pagination-wrapper">
                        <div class="myDragSwiper-pagination swiper-pagination progress-black"></div>
                        <div class="myFractionSwiper-pagination fraction-black"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

</div>

@endsection