@extends('layouts.home')
@section('content')
    <main class="container py-4" id="productDetail">
        <div class="row g-5">
            <!-- Product Images -->
            <div class="col-lg-6">
                <div class="product-images">
                    <div class="main-image-container position-relative">
                        @if($product->image)
                            <img src="{{ asset('storage/products/' . $product->image) }}" alt="{{ $product->name }}"
                                class="main-product-image">
                        @else
                            <img src="{{ asset('/assets/img/no-product.png') }}"
                                    alt="{{ $product->name }}" class="main-product-image">
                        @endif
                        
                        @php
                            $discount = 0;
                            if ($product->discount_price && $product->price > $product->discount_price) {
                                $discount = round(
                                    (($product->price - $product->discount_price) / $product->price) * 100,
                                );
                            }
                        @endphp
                        @if ($discount)
                            <div class="save-badge">{{ $discount }}% OFF</div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Product Info -->
            <div class="col-lg-6">
                <div class="product-info">
                    <div class="product-category">
                        <i class="fas fa-tag me-1"></i>
                        {{ $product->category?->name }}
                    </div>

                    <h1 class="product-title">{{ $product->name }}</h1>

                    <div class="product-pricing">
                        @if ($discount)
                            <span class="current-price">{{ $product->discount_price }}
                                @if ($config->currancy)
                                    ({{ $config->currancy }})
                                @endif
                            </span>
                            <span class="original-price">{{ $product->price }}
                                @if ($config->currancy)
                                    ({{ $config->currancy }})
                                @endif
                            </span>
                            <div class="savings">Save {{ $product->price - $product->discount_price }}
                                @if ($config->currancy)
                                    ({{ $config->currancy }})
                                @endif
                            </div>
                        @else
                            <span class="product-price">{{ $product->price }} @if ($config->currancy)
                                    ({{ $config->currancy }})
                                @endif
                            </span>
                        @endif

                    </div>

                    <div class="product-description">
                        <p>{{ $product->description }}</p>
                    </div>

                    @if ($product->is_stock_available)
                        <div class="stock-badge" style="font-size: 13px">
                            <i class="fas fa-check-circle me-2"></i>
                            In Stock
                        </div>
                    @else
                        <div class="stock-badge out-of-stock" style="font-size: 13px">
                            <i class="fas fa-times-circle me-2"></i>
                            Out of Stock
                        </div>
                    @endif

                    <form action="{{ route('cart.add-single-page', $product->id) }}" method="post">
                        @csrf
                        <div class="quantity-section">
                            <label for="quantity" class="form-label">Quantity:</label>
                            <div class="quantity-selector">
                                <button type="button" class="quantity-btn" onclick="changeQuantity(-1)">-</button>
                                <input type="number" id="quantity" value="1" min="1" max="10"
                                    name="qty" class="quantity-input">
                                <button type="button" class="quantity-btn" onclick="changeQuantity(1)">+</button>
                            </div>
                        </div>

                        <div class="action-buttons">
                            <div class="">
                                <button type="submit" class="btn-add-cart">
                                    <i class="fas fa-shopping-cart me-2"></i>Add to Cart
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="product-features">
                        <div class="feature-item">
                            <i class="fas fa-truck text-harvest-green"></i>
                            <span>Free shipping on orders over $50</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-leaf text-harvest-green"></i>
                            <span>100% Organic & Natural</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-shield-alt text-harvest-green"></i>
                            <span>30-day money-back guarantee</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
        function changeQuantity(delta) {
            const input = document.getElementById('quantity');
            let currentValue = parseInt(input.value);
            const min = parseInt(input.min);
            const max = parseInt(input.max);

            if (isNaN(currentValue)) {
                currentValue = min;
            }

            let newValue = currentValue + delta;
            if (newValue < min) newValue = min;
            if (newValue > max) newValue = max;

            input.value = newValue;
        }
    </script>

@endsection