@extends('layouts.pos-po-new.front')
@section('maincontent')
    <section class="global-space-section">
        <div class="container">
            @if (empty($product))
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-danger">
                            Product is removed or does not exist!
                             <a href="javascript:history.back()" class="btn btn-sm btn-danger">Back</a>
                        </div>
                    </div>
                </div>
            @else
                <div class="detai-product-index"> 
                    <div class="detail-product-section">
                        <div class="row">
                            <div class="col-md-4 col-sm-4" >
                                <div class="product-image-panel" style="cursor: pointer;" onclick="toggleGallery();">
                                    <img src="{{ $mainImage }}"
                                        alt="detail-product-index" id="mainPhoto" class="img-responsive">
                                </div>
                                <input type="hidden" name="imgsrc" id="imgsrc" value="{{ $mainImage }}">
                                @php
                                    $selectedCol = '';
                                @endphp
                                @if (sizeof($images) > 0)
                                    <div class="product-thumbs">
                                        @foreach ($images as $colorName => $thumbs)
                                            <div class="clearfix imgThumb color_{{ str_slug($colorName) }}"></div>
                                            @foreach ($thumbs as $thumb)
                                                <img src="{{ $thumb }}"
                                                    class="imgThumb color_{{ str_slug($colorName) }} img-responsive"
                                                    onmouseover="document.getElementById('mainPhoto').src=this.src;"  onclick="toggleGallery();"/>
                                            @endforeach
                                            <div class="clearfix imgThumb color_{{ str_slug($colorName) }}"></div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-8 col-sm-8">
                                <div class="detail-product-section-right-flex">
                                    <h4 style="font-size: 16px;color: #0000009c;">
                                        <span style="vertical-align">{{ $product->article }}-{{ $product->color }}</span>
                                        
                                        <button style="display: inline-block; border: none;" type="button"  onclick="wishlist(0);">
                                            <img src="{{ asset('add-purchage-order/images/wishlist_v2.svg') }}" align="wishlist_v2">
                                        </button>
                                    </h4>                                    
                                    <div class="detail-product-heading-flex">
                                        <h2>{{ $productName }} </h2> 
                                        
                                    </div>
                                    <input type="hidden" name="pname" id="pname" value="{{ $productName }}">
                                    <input type="hidden" name="particle" id="particle" value="{{ $product->article }}">
                                    <input type="hidden" name="pcolor" id="pcolor" value="{{ $product->color }}">
                                    
                                    
                                    <div class="pricing-earn-points-panel">
                                        <h4 class="product-price">