@extends('layouts.frontend')

@section('content')
    <!-- product section -->
   <section class="product--detail">
            <div class="container">
                <div class="row justify-content-center ">
                    <div class="col-12 ">
                        <ul class="breadcrumb">
                            <li class="crumb"><a href="{{ URL::previous() }}"><i class="fa-solid fa-angles-left"></i></a></li>
                            <li class="crumb"><a href="{{URL::to('/')}}">Home</a></li>
                            <li class="crumb"><a>{{ $product->category->name }}</a></li>
                            <li class="crumb"><span>{{ $product->name }}</span></li>
                        </ul>

                    </div>
                </div>
                <div class="row mt-4 product-detail--info">
                    <div class="col-12 col-lg-7">
                        <div class="product-image-carousels">
                            <div class="thumbnails-slider">
                                @foreach($product->photos as $index =>$photo)
                                    <button class="thumbnail-button" @if($index == 0) aria-current="true"@endif> 
                                        <img src="/storage/{{ $photo->images }}" width="650" height="550" alt="Go to image 1">
                                    </button>
                                @endforeach
                            </div>

                            <div class="main-image-slider">
                                @foreach($product->photos as $index =>$photo)
                                    <figure class="mb-0 @if($index == 0) active @endif">
                                        <img src="/storage/{{ $photo->images }}" width="650" height="550" alt="slide image 1">
                                    </figure>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-5">
                        <h1 class="h3 mb-4">{{ $product->name }}</h2>
                            <h2 class="h2 mb-4">${{ $product->price }}</h2>
                            <p class="m-0 fw-bold" >Condition : <span class="fw-normal">{{ $product->product_condition }}</span></p>
                            <p class="m-0 mt-2 fw-bold" >Available Units : <span class="fw-normal">{{ $product->quantity }}</span></p>
                            @if($product->shipping_cost != 0)
                            <p class="m-0 mt-2 fw-bold" >Shipping Cost : <span class="fw-normal">{{ $product->shipping_cost }}</span></p>
                            @endif
                            @if(!empty($product->dimensions))
                            <p class="m-0 mt-2 fw-bold" >Dimensions : <span class="fw-normal">{{ $product->dimensions.$product->dimensions_unit }}</span></p>
                            @endif
                            @if($product->weight != 0)
                            <p class="m-0 mt-2 fw-bold" >Weight : <span class="fw-normal">{{ $product->weight.$product->weight_unit }}</span></p>
                            @endif
                            @if($product->quantity == 0)
                                <div class="add-cart-button mt-5">
                                    <button type="submit" class="btn btn-primary custom-button add-to-cart-disabled"><i class="flaticon-bag"></i><span>ADD TO CART</span></button>
                                </div>
                            @else
                            <div class="add-cart-button mt-5">
                                <form action="{{ route('cart.store') }}" method="post">
                                    @csrf
                                    <input type="hidden" name="id" value="{{$product->id}}">
                                    <input type="hidden" name="name" value="{{$product->name}}">
                                    <input type="hidden" name="price" value="{{$product->price}}">
                                    <input type="hidden" name="quantity" value="1">
                                    <button type="submit" class="btn btn-primary custom-button"><i class="flaticon-bag"></i><span>ADD TO CART</span></button>
                                </form>
                            </div>
                            @endif
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-12 ">
                        <div class="panel-card">
                            <div class="panel-card--header">
                                <h2 class="h5">Description</h2>
                            </div>
                            <div class="panel-card--body">
                                <h3 class="h5">About this item</h3>
                                <ul class="details">
                                   <li>
                                    {!! $product->description !!}
                                   </li>
                                </ul>
                            </div>
                        </div>

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

    <!-- RELATED PRODUCTS section -->
    <section class="product-section">
            <div class="container">
                <div class="row">
                    <div class="col-12  ">
                        <h2 class="h2 product-title">Similar Products</h2>
                    </div>
                </div>
                <div class="row mt-3" id="product-container">
                        @foreach($relatedProducts as $p) 
                            <div class="col-12 col-lg-2 col-md-3 col-sm-6  mb-5 card border-0 product--item">
                                <div class="card-body p-0">
                                    <div class="product--image position-relative">
                                        <a href="{{ route('single-product', $p->slug) }}">
                                            @if($p->photos->count() > 0)
                                              <figure><img src="/storage/{{ $p->photos->first()->images }} "alt="product " width="210" height="250"></figure>
                                            @else
                                               <figure><img src="{{ asset('frontend/img/no-image.png') }}" alt="product " width="210" height="250"></figure>
                                            @endif
                                        </a>
                                   
                                        <!-- <div class="addT_Cart">
                                            <a href="{{ route('single-product', $p->slug) }}" class="btn btn-primary view_prdt custom-button "><i class="flaticon-bag"></i><span>View Product</span></a> 
                                        </div> -->
                                    </div>
                                    <a class="prdt_nme" href="{{ route('single-product', $p->slug) }}"><h4 class="h6">{{ $p->name }}</h4> </a>
                                    <div class="product--price d-flex">
                                        <h3 class="h4 ">${{ $p->price }}</h3> 
                                        @if($p->orignal_price) <h3 class="h5">${{ $p->orignal_price }}</h3> @endif
                                        
                                    </div>
                                    <p class="available_qty">Available Units: {{$p->quantity}}</p>
                                    @if($p->shipping_cost != 0)
                                    <p class="available_qty">Shipping Cost: {{$p->shipping_cost}}</p> 
                                    @else
                                    <p class="available_qty"><br></p>
                                    @endif 
                                    @if($p->quantity > 0)
                                    <form action="{{ route('cart.store') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="id" value="{{$p->id}}">
                                        <input type="hidden" name="name" value="{{$p->name}}">
                                        <input type="hidden" name="price" value="{{$p->price}}">
                                        <input type="hidden" name="quantity" value="1">
                                        <button type="submit" class="btn btn-primary custom-button"><i class="flaticon-bag"></i><span>ADD TO CART</span></button>
                                    </form>  
                                    @else
                                      <button type="submit" class="btn btn-primary custom-button add-to-cart-disabled"><i class="flaticon-bag"></i><span>ADD TO CART</span></button>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                   </div>
            </div>
        </section>
    <!-- RELATED PRODUCTS section end -->
@endsection