@extends('layouts.frontLayout.front_design')

@section('content')
@php
    use App\Models\Product;
@endphp

<section>
    <div class="container">
        <div class="row">

            @if(Session::has('flash_message_error'))
                <div class="alert alert-danger alert-block" style="background-color: #f2dfd0;">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{!! session('flash_message_error') !!}</strong>
                </div>
            @endif
            @if(Session::has('flash_message_success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{!! session('flash_message_success') !!}</strong>
                </div>
            @endif

            <div class="col-sm-3">
				@include('layouts.frontLayout.front_sidebar')
            </div>

            <div class="col-sm-9 padding-right">
                <div class="product-details"><!--product-details-->
                    <div class="col-sm-5">
                        <div class="view-product">

                            <div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails">
                				<a href="{{ asset('images/backend_images/products/large/' . $productDetails->image) }}">
                                    <img
                                        style="width: 300px; height: 300px;"
                                        class="mainImage"
                                        src="{{ asset('images/backend_images/products/small/' . $productDetails->image) }}"
                                        alt=""
                                    />
                                </a>
                            </div>

                            {{-- <h3>ZOOM</h3> --}}
                        </div>
                        <div id="similar-product" class="carousel slide" data-ride="carousel">

                              <!-- Wrapper for slides -->
                                <div class="carousel-inner">
                                    {{-- <div class="item active"> --}}
                                    <div class="item active thumbnails">
                                        <a
                                            href="{{ asset('images/backend_images/products/large/' . $productDetails->image) }}"
                                            data-standard="{{ asset('images/backend_images/products/small/' . $productDetails->image) }}"
                                        >
                                            <img
                                                class="changeImage"
                                                src="{{ asset('images/backend_images/products/small/' . $productDetails->image) }}"
                                                alt=""
                                                style="width: 80px; cursor: pointer;"
                                            >
                                        </a>
                                        @if (count($productAltImages) > 0)
                                            @foreach ($productAltImages as $altImage)
                                                <a
                                                    href="{{ asset('images/backend_images/products/large/' . $altImage->image) }}"
                                                    data-standard="{{ asset('images/backend_images/products/small/' . $altImage->image) }}"
                                                >
                                                    <img
                                                        class="changeImage"
                                                        src="{{ asset('images/backend_images/products/small/' . $altImage->image) }}"
                                                        alt=""
                                                        style="width: 80px; cursor: pointer;"
                                                    >
                                                </a>
                                            @endforeach
                                        @endif
                                      {{-- <a href=""><img src="{{ asset('images/frontend_images/product-details/similar1.jpg') }}" alt=""></a>
                                      <a href=""><img src="{{ asset('images/frontend_images/product-details/similar2.jpg') }}" alt=""></a>
                                      <a href=""><img src="{{ asset('images/frontend_images/product-details/similar3.jpg') }}" alt=""></a> --}}
                                    </div>
                                    {{-- <div class="item">
                                      <a href=""><img src="{{ asset('images/frontend_images/product-details/similar1.jpg') }}" alt=""></a>
                                      <a href=""><img src="{{ asset('images/frontend_images/product-details/similar2.jpg') }}" alt=""></a>
                                      <a href=""><img src="{{ asset('images/frontend_images/product-details/similar3.jpg') }}" alt=""></a>
                                    </div>
                                    <div class="item">
                                      <a href=""><img src="{{ asset('images/frontend_images/product-details/similar1.jpg') }}" alt=""></a>
                                      <a href=""><img src="{{ asset('images/frontend_images/product-details/similar2.jpg') }}" alt=""></a>
                                      <a href=""><img src="{{ asset('images/frontend_images/product-details/similar3.jpg') }}" alt=""></a>
                                    </div> --}}
                                </div>
                              <!-- Controls -->
                              {{-- <a class="left item-control" href="#similar-product" data-slide="prev">
                                <i class="fa fa-angle-left"></i>
                              </a>
                              <a class="right item-control" href="#similar-product" data-slide="next">
                                <i class="fa fa-angle-right"></i>
                              </a> --}}
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <form
                            name="addtocartForm"
                            id="addtocartForm"
                            method="post"
                            action="{{ route('front.add-cart') }}"
                        >
                            @csrf
                            <input type="hidden" id="product_id" name="product_id" value="{{ $productDetails->id }}">
                            <input type="hidden" id="product_name" name="product_name" value="{{ $productDetails->product_name }}">
                            <input type="hidden" id="product_code" name="product_code" value="{{ $productDetails->product_code }}">
                            <input type="hidden" id="product_color" name="product_color" value="{{ $productDetails->product_color }}">
                            <input type="hidden" id="price" name="price" value="{{ $productDetails->price }}">
                            <input type="hidden" id="image" name="image" value="{{ $productDetails->image }}">
                            <input type="hidden" id="user_email" name="user_email" value="{{ $userEmail }}">
                            <div class="product-information"><!--/product-information-->
                                <div style="text-align: left;">{!! $breadcrumb !!}</div>
                                <div>&nbsp;</div>
            
                                <img src="{{ asset('images/frontend_images/product-details/new.jpg') }}" class="newarrival" alt="" />
                                <h2>{{ $productDetails->product_name }}</h2>
                                <p>Código: {{ $productDetails->product_code }}</p>
                                <p>Color: {{ $productDetails->product_color }}</p>
                                @if (!empty($productDetails->sleeve))
                                    <p>Manga: {{ $productDetails->sleeve }}</p>
                                @endif
                                @if (!empty($productDetails->pattern))
                                    <p>Patrón: {{ $productDetails->pattern }}</p>
                                @endif
                                {{-- <img src="{{ asset('images/backend_images/products/small/' . $productDetails->image) }}" alt="" /> --}}
                                @if (count($productDetails->attributes) > 0)
                                    <p>
                                        <select id="selSize" name="size" style="width: 150px;" required>
                                            <option value="">Seleccione Talla</option>
                                            @foreach ($productDetails->attributes as $sizes)
                                                <option value="{{ $productDetails->id }}|{{ $sizes->size }}">{{ $sizes->size }}</option>
                                            @endforeach
                                        </select>
                                    </p>
                                    <span>
                                        @php
                                            $getCurrencyRates = Product::getCurrencyRates($productDetails->price);
                                        @endphp
                                        <span id="getPrice">
                                            $ {{ $productDetails->price }}<br>
                                            <h2>USD {{ $getCurrencyRates['USD_Rate'] }}</h2>
                                        </span>
                                        <label>Cantidad:</label>
                                        <input type="text" name="quantity" value="1" />
                                        @if ($totalStock > 0)
                                            <button
                                                type="submit"
                                                class="btn btn-fefault cart"
                                                id="cartButton"
                                                name="cartButton"
                                                value="carrito"
                                                style="position: absolute; right: 0;"
                                            >
                                                <i class="fa fa-shopping-cart"></i>
                                                Agregar
                                            </button><br><br>
                                        @endif
                                    </span>

                                    <p>
                                        <button
                                            type="submit"
                                            class="btn btn-fefault cart"
                                            id="wishListButton"
                                            name="wishListButton"
                                            value="deseos"
                                            style="position: absolute; right: 0;"
                                        >
                                            <i class="fa fa-briefcase"></i>
                                            Lista de Deseos
                                        </button>
                                    </p>


                                    <p>
                                        <b>Disponibilidad:</b>
                                        <span id="availability">
                                            @if ($totalStock > 0)
                                                Disponible
                                            @else
                                                No disponible
                                            @endif
                                        </span>
                                    </p>
                                    <p><b>Condición:</b> Nuevo</p>
                                    <p>
                                        <b>Envío:&nbsp;</b>
                                        <input
                                            type="text"
                                            oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');"
                                            onKeyDown="if(this.value.length == 6 && event.keyCode != 8) return false;"
                                            name="pincode"
                                            id="chkPincode"
                                            placeholder="Chequear ZipCode"
                                        >
                                        <button type="button" onclick="return checkPincode();">Ir</button>
                                    </p>
                                    <span id="pincodeResponse"></span>
                                @endif
                            </div><!--/product-information-->
                            <div style="float: left;" class="addthis_inline_share_toolbox_qpns"></div>
                        </form>
                    </div>
                </div><!--/product-details-->

                <div class="category-tab shop-details-tab"><!--category-tab-->
                    <div class="col-sm-12">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#description" data-toggle="tab">Descripción</a></li>
                            <li><a href="#care" data-toggle="tab">Material & Cuidados</a></li>
                            <li><a href="#delivery" data-toggle="tab">Opciones de Envío</a></li>
                            <li><a href="#video" data-toggle="tab">Video del Producto</a></li>
                            {{-- @if (!empty($productDetails->video))
                                <li><a href="#video" data-toggle="tab">Video del Producto</a></li>
                            @endif --}}
                        </ul>
                    </div>
                    <div class="tab-content">
						<div class="tab-pane active in" id="description" >
							<div class="col-sm-12">
								<p>
									@php
										echo nl2br($productDetails->description);
									@endphp
								</p>
							</div>
                        </div>
                        <div class="tab-pane fade" id="care" >
							<div class="col-sm-12">
								<p>
									@php
										echo nl2br($productDetails->care);
									@endphp
								</p>
							</div>
                        </div>
                        <div class="tab-pane fade" id="delivery" >
							<div class="col-sm-12">
								<p>
									{{ "Pago contra Entrega"}}
								</p>
							</div>
                        </div>
                        @if (!empty($productDetails->video))
                            <div class="tab-pane fade" id="video" >
						    	<div class="col-sm-12">
                                    <video width="640" height="480" controls>
                                        <source src="{{ url('videos/' . $productDetails->video) }}" type="video/mp4">
                                    </video>
						    	</div>
                            </div>
                        @else
                            <span><strong><font color='red'>No hay video disponible</font></strong></span>
                        @endif
                    </div>
                </div><!--/category-tab-->

                <div class="recommended_items"><!--recommended_items-->
                    <h2 class="title text-center">Productos Recomendados</h2>

                    <div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            @php
                                $count = 1;
                            @endphp
                            @foreach ($relatedProducts->chunk(3) as $chunk)
                                <div
                                    @if ($count == 1)
                                        class="item active"
                                    @else
                                        class="item"
                                    @endif
                                >
                                    @foreach ($chunk as $item)
                                        <div class="col-sm-4">
                                            <div class="product-image-wrapper">
                                                <div class="single-products">
                                                    <div class="productinfo text-center">
                                                        <img
                                                            style="width: 160px;"
                                                            src="{{ asset('images/backend_images/products/small/' . $item->image) }}"
                                                            alt=""
                                                        />
                                                        <h2>$ {{ $item->price }}</h2>
                                                        <p>{{ $item->product_name }}</p>
                                                        <a href="{{ route('front.product', ['id' => $item->id]) }}">
                                                            <button type="button" class="btn btn-default add-to-cart">
                                                                <i class="fa fa-shopping-cart"></i>
                                                                Agregar
                                                            </button>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                @php
                                    $count++;
                                @endphp
                            @endforeach
                        </div>
                         <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
                            <i class="fa fa-angle-left"></i>
                          </a>
                          <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
                            <i class="fa fa-angle-right"></i>
                          </a>
                    </div>
                </div><!--/recommended_items-->
            </div>
        </div>
    </div>
</section>

@endsection