@extends('layouts.tienda')

@section('content')

<div class="container-fluid tope-imagen">
    <div class="row">
        <div class="col-12 mt-2">
            <div class="d-flex justify-content-center">
                <div class="col-12 col-md-10">
                    <div class="row">
                        
                        @if($imagenes->count() > 0)
                        <div class="col-md-2 col-12 mb-2">
        		            <div class="row">
                                <div class="overflow-auto" style="overflow: auto; width: 100%; height: 300px;">
                                    @foreach($imagenes as $imagen)
                                    <div class="col-md-12 mb-2">
                                        <a href="{{ asset('adicional/'.$imagen->foto) }}" data-fancybox="gallery" data-caption="{{$productos->post_title}}">
                                            <img class="img-fluid" src="{{ asset('adicional/'.$imagen->foto) }}" style="height: 150px; width: 100%; object-fit: cover;">
                                        </a>  
                                    </div>
                                    @endforeach
                                </div>
                            </div>    
        	            </div>
        	            @else
        	            <div class="col-md-2 col-12 mb-2">
        	            </div> 
        	            @endif

        	            <div class="col-md-5 col-12 mb-2 text-center">
                            <a href="{{$productos->guid}}" data-fancybox="gallery" data-caption="{{$productos->post_title}}">
                                <img class="img-fluid" src="{{$productos->guid}}" alt="{{$productos->post_title}}">
                            </a>
        	            </div>

        	            <div class="col-md-5 col-12 mb-2">

        		            <form method="POST" action="{{ route('tienda-externa-save') }}">
                                {{ csrf_field() }} 

        	                    <input type="hidden" name="id" value="{{$productos->ID}}">
                                <input type="hidden" name="cantidad" class="cantidad" value="1">
                                <input type="hidden" name="precio" value="{{ $productos->meta_value }}">

        		                <div class="card">
        			                <div class="card-body border border-info">
        				                <div class="row">

        				                     <div class="col-md-12">
        					                     <div class="form-group">
        						                     <h3>{{ $productos->post_title }}</h3>
        					                     </div>
        				                     </div>
        				                     

        				                     <div class="col-md-12">
        				    	                 <div class="form-group">
        				    		                 <p>{!! $productos->corta !!}</p>
        				    	                 </div>
        				                     </div>

        				                     <div class="col-md-12 mt-2">
        					                     <div class="d-flex justify-content-between">
        						                     <div class="bd-highlight">
        							                     @if($productos->pinged > 0)
                                                             @for($i=1; $i<=$productos->pinged; $i++)
                                                               <i class="fa fa-star text-warning"></i>
                                                             @endfor
                                                         @endif
        						                    </div>
                                                    <div class="bd-highlight"></div>
                                                    <div class="bd-highlight">
                                	                    <h4 class="fs-3">
                                	                    @if ($moneda->mostrar_a_d)
                                                           {{$moneda->simbolo}} {{$productos->meta_value}}
                                                        @else
                                                           {{$productos->meta_value}} {{$moneda->simbolo}}
                                                        @endif 
                                                        </h4>
                                                    </div>
        					                    </div>
        				                    </div>


        				                    <div class="col-md-4 col-12 mt-1">
        					                    <div class="d-flex flex-row bd-highlight">
                                                    <div class="bd-highlight mt-2 text-center" onclick="restar()" style="width: 30px; height:30px; border-radius: 50%; line-height:25px; background:#fff; border: 2px solid #666b6d !important; cursor:pointer;">
                                                        <a class="p-1 text-dark">-</a>
                                                    </div>
                                
                                                    <div class="p-2 mt-1 bd-highlight">
                                                        <p class="cantidad-text">1</p>
                                                    </div>
                                        
                                                    <div class="bd-highlight mt-2 text-center" onclick="sumar()" style="width: 30px; height:30px; border-radius: 50%; line-height:25px; background:#fff; border: 2px solid #666b6d !important; cursor:pointer;">
                                                         <a class="p-1 text-dark">+</a>
                                                    </div>   
                                                </div>
        				                    </div>

        				                    <div class="col-md-4 col-6 mt-2 mb-3">
        					                    <a class="btn btn-danger w-100" href="{{ route('tienda-externa-index') }}" style="border-radius: 20px;">Regresar</a>
        				                    </div>

        				                   <div class="col-md-4 col-6 mt-2 mb-3">
        					                    <button class="btn btn-info w-100" type="submit" style="border-radius: 20px;">Añadir al Carrito</button>
        				                    </div>


        				                   <div class="col-md-12">
        				    	               <div class="d-flex justify-content-between">
        				    		               <div class="bd-highlight">
        				    			               <p class="valor-general fs-4">
                                                       @if ($moneda->mostrar_a_d)
                                                          {{$moneda->simbolo}} {{ $productos->meta_value }}
                                                       @else
                                                          {{ $productos->meta_value }} {{$moneda->simbolo}}
                                                       @endif
                                        
                                                       x 1
                                                       </p>
        				    		               </div>
                                                   <div class="bd-highlight"></div>
                                                   <div class="bd-highlight">
                                    	               <p class="valor-total fs-4">
                                                       @if ($moneda->mostrar_a_d)
                                                           {{$moneda->simbolo}} {{ $productos->meta_value }}
                                                       @else
                                                           {{ $productos->meta_value }} {{$moneda->simbolo}}
                                                       @endif
                                                       </p>
                                                   </div>
        				    	               </div>	
        				                   </div>

        				                   <div class="col-md-12 border-top">
                                    
                                           </div>

                                           <div class="col-md-6 col-6 mt-4 mb-4">
                                    
                                               <h4 class="fs-3"> <strong>Total</strong> </h4>
                                    
                                           </div>
                                
                                           <div class="col-md-6 col-6 mt-4">
                                               <h4 class="text-right fs-3"> 
                                	               <strong class="valor-total">
                                                       @if ($moneda->mostrar_a_d)
                                                           {{$moneda->simbolo}} {{ $productos->meta_value }}
                                                       @else
                                                           {{ $productos->meta_value }} {{$moneda->simbolo}}
                                                       @endif
                                                   </strong> 
                                               </h4>
                                           </div>

        				                </div>
        			                </div>
        		                </div>

        		            </form>

        	            </div>	
            


                        <div class="col-md-12">
    	                    <div class="card">
                                <div class="card-body">
                                    
                                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                           <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Descripción</button>
                                        </li>
                                        
                                        <li class="nav-item" role="presentation">
                                           <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Detalles</button>
                                        </li>
                                        
                                        <li class="nav-item" role="presentation">
                                           <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Comentarios</button>
                                        </li>
                                    </ul>
                                    
                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                            {!! $productos->post_content !!}
                                        </div>
                                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                            {!! $productos->detalles !!}
                                        </div>
                                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                            
                                            @if(Auth::user())
                                            <form method="POST" action="{{ route('tienda-save-comentario') }}">
                                                {{ csrf_field() }} 
                                          
                                                <input type="hidden" name="idproducto" value="{{ $productos->ID }}">
                                          
                                                <div class="col-md-12 mt-2">
                                                    <div class="form-group mb-3">
                                                        <label class="color-gris" for="exampleFormControlTextarea1">Comentario</label>
                                                        <textarea class="form-control" name="comentario" id="exampleFormControlTextarea1" rows="3" required></textarea>
                                                    </div>
                                                </div>
                                       
                                                <div class="col-md-12">
                                                    <div class="d-flex justify-content-center">
                                                        <div class="col-md-4">
                                                            <button type="submit" class="btn btn-info w-100">Aceptar</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                            </form>    
                                            @endif


                                            <div class="col-md-12 mt-4">
                        	                    <div class="row">
                                
                                                @foreach($comentarios as $comen)
                        		                <div class="col-md-4 col-12 mb-2">
                        		                    <div class="media">
                                                        <img src="{{ asset('/fondo/'.$comen->user->avatar) }}" class="rounded-circle mr-3" alt="{{ $comen->user->display_name }}" style="width: 50px; height: 50px;">
                                                        <div class="media-body">
                                                            <h5 class="mb-0 card-title">{{ $comen->user->usercampo->firstname }} {{ $comen->user->usercampo->lastname }}</h5>
                                                            <p class="mb-0 text-dark card-text">{{ $comen->comentario }}</p>
                                                            <p class="mb-0">
                                                                <a href="{{ route('tienda-eliminar-comentario', ['id' => $comen->id]) }}">
                                                                   <i class="fa fa-trash-o text-danger"></i>
                                                                </a>
                                                            </p>
                                                        </div>
                                                    </div>
                        		                </div>
                        		                @endforeach

                        	                    </div>
                                            </div>    
                                        
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
            
                    </div>
                </div>  
            
            </div>  
               
        </div>
    </div>
</div>    

@endsection   


@push('script')
<script>
    
   function sumar(){
     var cantidad = $('.cantidad').val();

     $('.cantidad').val(parseFloat(cantidad) + 1)
     $('.cantidad-text').text(parseFloat(cantidad) + 1)
     $('.valor-total').text(((parseFloat(cantidad) + 1) * '{{$productos->meta_value}}') + '$')
     $('.valor-general').text('{{$productos->meta_value}} $ ' + ' x ' + (parseFloat(cantidad) + 1))
     
   }

   function restar(){
    var cantidad = $('.cantidad').val();
    
    if(cantidad > 1){
     $('.cantidad').val(parseFloat(cantidad) - 1)
     $('.cantidad-text').text(parseFloat(cantidad) - 1)
     $('.valor-total').text(((parseFloat(cantidad) - 1) * '{{$productos->meta_value}}') + '$')
     $('.valor-general').text('{{$productos->meta_value}} $ ' + ' x ' + (parseFloat(cantidad) - 1))
     
    }

   }
</script>
@endpush