@extends('site.layouts.app')

@section('title', 'CDS - SISTEMAS')


@section('topbar')
    @include('site.partials.topbar')
@endsection

@section('navbar')
    
<div class="container-fluid py-5">
    <div class="row px-xl-5">
        <div class="col-lg-5 pb-5">
            <div id="product-carousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner border">
                    <div class="carousel-item active">
                        <img class="w-100 h-100" src="{{ asset('images/'.$product->img) }}" alt="Image">
                    </div>
                    <div class="carousel-item">
                        <img class="w-100 h-100" src="{{ asset('images/'.$product->img) }}" alt="Image">
                    </div>
                    <div class="carousel-item">
                        <img class="w-100 h-100" src="{{ asset('images/'.$product->img) }}" alt="Image">
                    </div>
                    <div class="carousel-item">
                        <img class="w-100 h-100" src="{{ asset('images/'.$product->img) }}" alt="Image">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#product-carousel" data-slide="prev">
                    <i class="fa fa-2x fa-angle-left text-dark"></i>
                </a>
                <a class="carousel-control-next" href="#product-carousel" data-slide="next">
                    <i class="fa fa-2x fa-angle-right text-dark"></i>
                </a>
            </div>
        </div>
        
        
        
        
        
        <div class="col-lg-7 pb-5">
            <h3 class="font-weight-semi-bold">{{$product->nome}} {{ $product->category['nome'] }}</h3>
            <div class="d-flex mb-3">
                <div class="text-primary mr-2">
                    <small class="fas fa-star"></small>
                    <small class="fas fa-star"></small>
                    <small class="fas fa-star"></small>
                    <small class="fas fa-star-half-alt"></small>
                    <small class="far fa-star"></small>
                </div>
                <small class="pt-1">(50 Reviews)</small>
            </div>
            <h3 class="font-weight-semi-bold mb-4">{{ $product->preco }}</h3>
            <p class="mb-4">{{ $product->desc }}</p>
             
            <div class="d-flex align-items-center mb-4 pt-2">
                <form action="{{ route('site.addCart', $product->id) }}" method="POST">
                    @csrf()
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <input type="hidden" name="preco" value="{{ $product->preco }}">
                    <div class="input-group quantity mr-3" style="width: 160px;">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-primary btn-minus" >
                            <i class="fa fa-minus"></i> 
                            </button>
                        </div>
                        <input type="number" name="qtd" class="form-control bg-secondary text-center" value="1">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-primary btn-plus">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div><br>
                    <button type="submit" class="btn btn-primary px-3"><i class="fa fa-shopping-cart mr-1"></i> Add ao carrinho</button>
                </form>
            </div>
            <div class="d-flex pt-2">
                <p class="text-dark font-weight-medium mb-0 mr-2">Enviar pelo:</p>
                <div class="d-inline-flex">
                    <a class="text-dark px-2" href="">
                        <i class="fab fa-whatsapp"></i>
                    </a>   
                </div>
            </div>
        </div>
    </div>
    <div class="row px-xl-5">
        <div class="col">
            <div class="nav nav-tabs justify-content-center border-secondary mb-4">
                <a class="nav-item nav-link active" data-toggle="tab" href="#tab-pane-1">Descrição</a>
                <a class="nav-item nav-link" data-toggle="tab" href="#tab-pane-2">Informação</a>
                <a class="nav-item nav-link" data-toggle="tab" href="#tab-pane-3">Visualizações (0)</a>
            </div>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-pane-1">
                    <h4 class="mb-3">Descrição</h4>
                    <p>{{ $product->detalhes }}.</p>
                </div>  
            </div>
        </div>
    </div>
</div>
@endsection
  
 
  

@section('products')
   
@endsection
  

@section('footer')
    @include('site.partials.footer')
@endsection