@extends('frontend.layout.app')
@section('content')
<div class="py-3 py-md-5 bg-light">

        <div class="container">
            <div class="row">
                <div class="col-md-1 mt-3">
                @php
    // Split the photos string into an array
    $photos = $product->photos ? explode(',', $product->photos) : [];
@endphp

<div class="thumb-carousel">
    @foreach($photos as $key => $photo)
        <img
            src="{{ asset('storage/' . $photo) }}"
            class="thumb-img {{ $key == 0 ? 'active' : '' }}"
            onclick="changeMainImage(this)"
        >
    @endforeach
</div>

                </div>
                <div class="col-md-5 mt-3">
                    <div class="bg-white border">
                        <img src={{ asset('/storage/'.$product->thumbnail_img) }} id="mainProductImage" class="w-100" height="500" alt="Img">
                    </div>
                </div>
                <div class="col-md-6 mt-3">
                    <div class="product-view">
                        <h4 class="product-name">
                        {{ $product->name }} 
                        @if($product->current_stock >= 1)
                            <label class="label-stock bg-success">In Stock</label>
                         @else
                            <label class="label-stock bg-danger">Out of Stock</label>
                         @endif
                        </h4>
                        <hr>
                        <div class="row mt-2">
                                <div class="col-sm-2">
                                     <div class="opacity-50 my-2">Orignal Price:</div>
                                </div>
                               <div class="col-sm-10">
                                <span class="original-price" id="orignal_price">{{ number_format($product->unit_price,2) }}</span>
                                @if($product->unit != null)
                                      <span class="original-price">/{{ $product->unit }}</span>
                                 @endif
                                </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-sm-2">
                                     <div class="opacity-50 my-2">Discount Price:</div>
                            </div>
                            @php
                                 $price= $product->unit_price-$product->discount;
                            @endphp
                           <div class="col-sm-10">
                              <span class="selling-price">Rs:</span><span class="selling-price" id="price2">{{ number_format($price,2) }}</span>
                              @if($product->unit != null)
                                                        <span class="selling-price">/{{ $product->unit }}</span>
                                 @endif
                           
                           </div>
                           
                          
                        </div>
                        @php
                        $quan='1';
                        @endphp
                         
                        <form id="option-choice-form" action="{{ route('addtomycart',[$product->id]) }}" method="post">
                            @csrf
                            <input type="hidden" id="id" name="id" value="{{ $product->id }}">
                            <div class="row mt-2">
                                  <div class="col-sm-2">
                                     <div class="opacity-50 my-2">Quantity:</div>
                                   </div>
                                  <div class="col-sm-10">
                                    <div class="input-group">
                                       <span class="btn btn1"> <a class="bi bi-dash" href="javascript:void(0)" onclick="myFunctionminus()"></a></span>
                                       <input type="text" value="{{ $quan ?? 1 }}" id="quantity" name="quantity" class="input-quantity" data-max="{{ $product->stocks->sum('qty') }}" readonly />
                                       <span class="btn btn1"> <a class="bi bi-plus" href="javascript:void(0)" onclick="myFunctionadd()"></a></span>
                                    </div>
                                 </div>
                             </div>

                          <hr>
                          @if ($product->choice_options != null)
                                    @foreach (json_decode($product->choice_options) as $key => $choice)

                                    <div class="row no-gutters">
                                        <div class="col-sm-2">
                                            <div class="opacity-50 my-2">{{ \App\Models\Attribute::find($choice->attribute_id)->name }}:</div>
                                        </div>
                                        <div class="col-sm-10">
                                            <div class="aiz-radio-inline">
                                                @foreach ($choice->values as $key => $value)
                                                <label class="aiz-megabox pl-0 mr-2">
                                                <input
                                                    type="radio"
                                                     name="attribute_id_{{ $choice->attribute_id }}"
                                                     value="{{ $value }}"
                                                     class="variant-option"
                                                     onclick="updateStockBySelection()"
                                                     @if($key == 0) checked @endif >
                                                    <span class="aiz-megabox-elem rounded d-flex align-items-center justify-content-center py-2 px-3 mb-2">
                                                        {{ $value }}
                                                    </span>
                                                </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    @endforeach
                            @endif
                          @if (count(json_decode($product->colors)) > 0)
                                    <div class="row no-gutters">
                                        <div class="col-sm-2">
                                            <div class="opacity-50 my-2">Color:</div>
                                        </div>
                                        <div class="col-sm-10">
                                            <div class="aiz-radio-inline">
                                                @foreach (json_decode($product->colors) as $key => $color)
                                                @php
                                                   $colorObj = \App\Models\Color::where('code', $color)->first();
                                                @endphp
                                                <label class="aiz-megabox pl-0 mr-2" data-toggle="tooltip" data-title="{{ \App\Models\Color::where('code', $color)->first()->name }}">
                                                <input
                                                   type="radio"
                                                    name="color"
                                                    value="{{ \App\Models\Color::where('code', $color)->first()->name }}"
                                                    data-code="{{  \App\Models\Color::where('code', $color)->first()->name }}" 
                                                    class="variant-option"
                                                    onclick="updateStockBySelection()"
                                                 @if($key == 0) checked @endif>
                                                    <span class="aiz-megabox-elem rounded d-flex align-items-center justify-content-center p-1 mb-2">
                                                         <span class="my-box" style="background-color:{{$color}};"></span>
                                                    </span>
                                                </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <hr>
                         @endif

                               
                                
                                <div class="row mt-2">
                                    <div class="col-sm-2">
                                      <div class="opacity-50 my-2">Total Price:</div>
                                    </div>
                                    <div class="col-sm-10">
                                      <span class="selling-price">Rs:</span><span class="selling-price" id="price">{{ number_format($price,2) }}</span>
                                    </div>
                                </div>
                                <div class="mt-2">
                                   <button type="submit" class="btn button1 bi bi-cart">Add To Cart</button>
                                   <button type="button" class="btn button1 bi bi-heart" data-redirect-url="">Add To Wishlist</button>
                                </div>
                                <input type="hidden" id="descount" value="{{ $product->discount }}">
                                <input type="hidden" id="stock_id" name="stock_id">
                                <input type="hidden" id="unitprice" value="{{ $product->unit_price }}">
                                <input type="hidden" id="price1" value="{{ $product->unit_price }}">
                        </form>
                        
                        <div class="mt-3">
                           <div class="card">
                               
                                <div class="card-body">
                                <p> {{ $product->description }}    </p>
                                </div>
                    
                            </div>  
                            
                        </div>

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


 <div class="tab">
  <button class="tablinks" onclick="openCity(event, 'description')">Description</button>
  <button class="tablinks" onclick="openCity(event, 'reviews')">Reviews</button>
</div>

<div id="description" class="tabcontent">
  <h3>{{ $product->name }} </h3>
  <p>{{ $product->long_desc }} </p>
</div>

<div id="reviews" class="tabcontent"> 
    
<span class="fa fa-star ratingchecked"></span>
<span class="fa fa-star ratingchecked"></span>
<span class="fa fa-star ratingchecked"></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
</div>



        </div>
    </div>
   
@endsection