@extends('layouts_home.header')
@section('content')

<div class="container">
    @if (session('success_message'))
        <div class="alert alert-success">
            {{ session('success_message') }}
        </div>
    @endif

    <section class="py-5">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-6">
                <!-- PRODUCT SLIDER-->
                    <div class="row m-sm-0">
                        <div class="col-sm-2 p-sm-0 order-2 order-sm-1 mt-2 mt-sm-0">
                            <div class="owl-thumbs d-flex flex-row flex-sm-column" data-slider-id="1">
                                <div class="owl-thumb-item flex-fill mb-2 mr-2 mr-sm-0"><img class="w-100" src="{{ Storage::url($productoShow->pr_imagen) }}" alt="{{$productoShow->pr_nombre}}"></div>
                                @forelse ($productoShow->producto_imagen as $image)
                                    <div class="owl-thumb-item flex-fill mb-2 mr-2 mr-sm-0"><img class="w-100" src="{{ Storage::url($image->path) }}" alt="{{$productoShow->pr_nombre}}"></div>
                                @empty
                                    
                                @endforelse
                            </div>
                        </div>
                        <div class="col-sm-10 order-1 order-sm-2">
                            <div class="owl-carousel product-slider" data-slider-id="1">
                                <a class="d-block" href="{{ Storage::url($productoShow->pr_imagen) }}" data-lightbox="product" title="{{$productoShow->pr_nombre}}">
                                    <img class="img-fluid" src="{{ Storage::url($productoShow->pr_imagen) }}" alt="{{$productoShow->pr_nombre}}">
                                </a>
                                @forelse ($productoShow->producto_imagen as $image)
                                <a class="d-block" href="{{ Storage::url($image->path) }}" data-lightbox="product" title="{{$productoShow->pr_nombre}}">
                                    <img class="img-fluid" src="{{ Storage::url($image->path) }}" alt="{{$productoShow->pr_nombre}}">
                                </a>
                                @empty
                                    
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            <!-- PRODUCT DETAILS-->
                <div class="col-lg-6">
                    <h1>{{ $productoShow->pr_nombre }}</h1>
                    <p class="text-muted lead">S/ <span id="price">{{ $productoShow->pr_precio }}</span></p>
                    <p class="text-small mb-4">Descripción del Producto o detalles aquí</p>
                    <div class="row align-items-stretch mb-4">
                        <div class="col-sm-5 pr-sm-0">
                            <div class="border d-flex align-items-center justify-content-between py-1 px-3 bg-white border-white"><span class="small text-uppercase text-gray mr-4 no-select">Cantidad</span>
                            <div class="quantity">
                                <input class="form-control border-0 shadow-0 p-0" type="number" id="cantidad" min="1" value="1">
                            </div>
                            </div>
                        </div>
                        <tienda-add-cart :add="{{ json_encode($productoShow) }}" ></tienda-add-cart>
                    </div>
                    <ul class="list-unstyled small d-inline-block">
                        <li class="px-3 py-2 mb-1 bg-white text-muted"><strong class="text-uppercase text-dark">Categoría:</strong><a class="reset-anchor ml-2" href="#">{{ $productoShow->CategoriasProducto->ct_nombre }}</a></li>
                        <li class="px-3 py-2 mb-1 bg-white text-muted"><strong class="text-uppercase text-dark">Marca:</strong><a class="reset-anchor ml-2" href="#">{{ $productoShow->pr_marca }}</a></li>
                    </ul>
                    <div class="col-md-4">
                        <a onclick="pago_rapido()" data-id={{ $productoShow->id }} id="compra-rapida" class="btn btn-primary btn-block h-100 d-flex align-items-center justify-content-center px-0" role="button">{{ __('Comprar Ahora')}}</a><br/>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="check"/>
                        <label>Acepto los <a href="#">términos y condiciones </a></label>
                    </div>
                </div>
            </div>
            <!-- DETAILS TABS-->
            <ul class="nav nav-tabs border-0" id="myTab" role="tablist">
                <li class="nav-item"><a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a></li>
            </ul>
            <div class="tab-content mb-5" id="myTabContent">
                <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                    <div class="p-4 p-lg-5 bg-white">
                        <h6 class="text-uppercase">Descripción del Producto</h6>
                        <p class="text-muted text-small mb-0">Más detalles ....</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('script')
<!-- Culqi -->
<script type="text/javascript" src="https://checkout.culqi.com/js/v3"></script>
<script type="text/javascript" src="{{ URL::asset('js/pagoRapido.js') }}"></script>
<script src="{{ URL::asset('vendor/lightbox2/js/lightbox.min.js')}} "></script>
<script>
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true
    });

    $('.product-slider').owlCarousel({
        items: 1,
        thumbs: true,
        thumbImage: false,
        thumbsPrerendered: true,
        thumbContainerClass: 'owl-thumbs',
        thumbItemClass: 'owl-thumb-item'
    });
</script>

@endsection