@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="/css/contents.css" type="text/css">
@endpush

@section('content')
    <div class="container">
        <div class="row mt-5">
            <div class="col-sm-4">
                <div class="card" style="height:100%;">
                    <div class="card-body">
                        <h3>{{ ucfirst($shop->name) }}</h3>
                        <hr>
                        <img class="img-fluid" src="{{ $shop->avatar }}" alt="{{ $shop->avatar }}">
                        <a href="{{ $shop->url_external }}" target="_blank" class="btn btn-primary btn-block text-white mt-2">Ir al sitio web</a>

                        @if ($shop->raw)
                            {!! $shop->raw !!}
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="card" style="height:100%;">
                    <div class="card-body">
                        @if ($shop->long_detail)
                        <div  class="ck-content">
                            {!! $shop->long_detail !!}
                        </div>
                        @else
                            {{ $shop->detail }}
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="mt-4">{!! $products->render() !!}</div>
                <div class="row">
                    @foreach($products as $product)
                        <div class="col-lg-3 col-md-4 col-sm-6 pt-2 pb-4">
                            <div class="card shadow">
                                <a href="{{ route('showProductDetail', ['id' => $product->id]) }}">
                                    <div style="position: relative;">
                                        @if ($product->discount_price > 0)
                                            <img
                                                style="position: absolute; z-index: 20; height: 80px;"
                                                src="/images/apps/assets/promo.png"
                                                class="img-fluid"
                                                alt="promo">
                                        @endif
                                        <img
                                            style="z-index: 10; width: 100%"
                                            src="{{$product->getImagePrincipal()}}" alt="">
                                    </div>
                                </a>
                                <hr>
                                <div class="card-body">
                                    <div style="height: 71px;">
                                        <h5><b>{{ucfirst($product->name)}}</b></h5>
                                    </div>
                                    <div style="height: 62px;">
                                        <p>
                                            {{$product->short_detail}}
                                        </p>
                                    </div>
                                    @if (!$product->is_catalog)
                                        @if ($product->stock > 0)
                                            @if($product->buy_one_click)
                                                <a class="btn btn-primary btn-block" href="{{ $product->getActionOnBuyClick() }}" role="button">{{ $product->getLabelBuyButton() }}</a>
                                            @else
                                                @if($product->children->count()<=0)
                                                    {{--<form action="{{ route('showAddToCart', ['id' => $product->id]) }}" method="post">
                                                        @csrf
                                                        <button class="btn btn-primary btn-md shadow btn-block">
                                                            <span class="spinner-grow spinner-grow-sm d-none" role="status" aria-hidden="true"></span>
                                                            <span class="text-button">{{ $product->getLabelBuyButton() }}</span>
                                                        </button>
                                                    </form>--}}
                                                    <button class="btn btn-primary btn-md shadow btn-block" @click.prevent="addToCart({{ $product->id }}, '{{ $product->name }}')">
                                                        <span class="spinner-grow spinner-grow-sm d-none" role="status" aria-hidden="true"></span>
                                                        <span class="text-button">{{ $product->getLabelBuyButton() }}</span>
                                                    </button>
                                                @else
                                                    <a href="{{ route('showProductDetail', ['id' => $product->id]) }}" class="btn btn-primary btn-block">Ver opciones</a>
                                                @endif
                                            @endif
                                        @else
                                            <button class="btn btn-primary btn-block" disabled>{{ $product->getLabelBuyButton() }}</button>
                                        @endif
                                    @else
                                        <a href="{{ route('showProductDetail', ['id' => $product->id]) }}" class="btn btn-primary btn-block">Información</a>
                                    @endif
                                    {{--<a href="/view-product/{{$product->sku}}/detail"></a>--}}
                                </div>
                                <div class="card-footer">
                                    <small>
                                        <div class="float-left">
                                            <b class="">{!! $product->getShortLabelDistribution() !!}</b>
                                        </div>
                                        <div class="float-right">
                                            @if ($product->price> 0 && $product->discount_price > 0)
                                                <del class="mr-2 text-muted">$@convert($product->discount_price)</del>
                                            @endif
                                            @if ($product->stock > 0)
                                                    @if ($product->children->count() == 1)
                                                        <b>$@convert($product->children->first()->price)</b>
                                                    @elseif($product->children->count() > 1)
                                                        <b>$@convert($product->children->first()->price)</b> - <b>$@convert($product->children()->orderBy('price', 'desc')->first()->price)</b>
                                                    @else
                                                        <b>$@convert($product->price)</b>
                                                    @endif
                                                {{--<b>$@convert($product->price)</b>--}}
                                            @else
                                                <b>{{ __('out of stock') }}</b>
                                            @endif

                                        </div>
                                    </small>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="mt-2">{!! $products->render() !!}</div>
            </div>
        </div>
    </div>
@endsection