@extends('layouts.main')

@push('nav_title')
    {{--    <a class="navbar-brand" href="{{route('users')}}">User</a>--}}
    <a class="navbar-brand" href="#">Enzy</a>
@endpush

@section('page_title')



@endsection

@section('profile')

    @include('layouts/profile')

@endsection

@section('side_bar')

    @include('layouts/side_bar')

@endsection

@section('main_div')


        @if($product_info)

            <div class="card_info">

                <h4>Product Details</h4>

                <div class="inner">
                    <div class="product_image">
                        <img src="{{ url('/../../interior.images.local/'.$product_info['image']) }}">
                    </div>
                    <div class="product_data">
                        <h2>{{$product_info['name']}}</h2>
                        <h3><span>Price</span><br> ${{$product_info['price']}}</h3>
                        <span class="availible @if($product_info['quantity'] > 0) in-stock @else out-of-stock @endif">
                            @if($product_info['quantity'] > 0) 
                                <i class="fas fa-check-circle text-success me-1"></i> In Stock 
                            @else 
                                <i class="fas fa-times-circle text-danger me-1"></i> Out of Stock 
                            @endif
                        </span>
                        
                        <div class="product-description mt-4">
                            <h5 class="fw-bold mb-2">Description</h5>
                            <p>{{$product_info['descryption']}}</p>
                        </div>
                        
                        <div class="product_details mt-4">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Size</label>
                                    <select id="size-select" class="form-select">
                                        <option value="S">Small</option>
                                        <option value="M" selected>Medium</option>
                                        <option value="L">Large</option>
                                        <option value="XL">Extra Large</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Quantity</label>
                                    <div class="input-group">
                                        <button class="btn btn-outline-secondary" type="button" id="decrease-quantity">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <input type="number" class="form-control text-center" id="quantity" value="1" min="1" max="{{$product_info['quantity']}}">
                                        <button class="btn btn-outline-secondary" type="button" id="increase-quantity">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button type="button" class="btn btn-primary product_checkout add_to_cart w-100 py-3" data-id="{{$product_info['id']}}">
                                <i class="fas fa-shopping-cart me-2"></i> ADD TO CART
                            </button>
                        </div>
                        
                        <!-- Product Information Tabs -->
                        <div class="product-tabs mt-5">
                            <ul class="nav nav-tabs" id="productTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">Description</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="safety-tab" data-bs-toggle="tab" data-bs-target="#safety" type="button" role="tab" aria-controls="safety" aria-selected="false">Safety & Compliance</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="design-tab" data-bs-toggle="tab" data-bs-target="#design" type="button" role="tab" aria-controls="design" aria-selected="false">Design Features</button>
                                </li>
                            </ul>
                            <div class="tab-content p-3 border border-top-0 rounded-bottom" id="productTabsContent">
                                <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                                    <p>{{$product_info['descryption']}}</p>
                                </div>
                                <div class="tab-pane fade" id="safety" role="tabpanel" aria-labelledby="safety-tab">
                                    <h6 class="fw-bold mb-3">Safety Standards</h6>
                                    <ul>
                                        <li>Meets Australian Safety Standard AS/NZS 4399:2017</li>
                                        <li>UPF 50+ rating for maximum sun protection</li>
                                        <li>Compliant with Ampcontrol safety requirements</li>
                                        <li>High-visibility options available where required</li>
                                    </ul>
                                    
                                    <h6 class="fw-bold mb-3 mt-4">Certifications</h6>
                                    <p>All uniforms are certified for workplace safety and comfort according to industry standards.</p>
                                </div>
                                <div class="tab-pane fade" id="design" role="tabpanel" aria-labelledby="design-tab">
                                    <h6 class="fw-bold mb-3">Design Features</h6>
                                    <ul>
                                        <li>Durable, breathable fabric designed for Australian conditions</li>
                                        <li>Reinforced stitching at stress points for longer wear</li>
                                        <li>Company logo embroidery included</li>
                                        <li>Available in multiple colors with departmental color-coding options</li>
                                        <li>Designed for comfort during extended wear</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        @else
            <div class="alert alert-danger">Product not found.</div>
        @endif

        <h2>Related Products</h2>
        <div class="product-body">

            @foreach($products->take(4) as $product)
                <div class="product_tab">
                    <div class="product-img">
                        <img src="{{ url('/../../interior.images.local/'.$product->image) }}">
                        <div class="add-to-cart">
                            @if($product->quantity > 0)
                                <button class="btn btn-secondary add_to_cart" data-id="{{$product->id}}">Add To
                                    Cart
                                </button>
                            @else
                                <button class="btn btn-secondary add_to_cart" data-id="{{$product->id}}" disabled>
                                    Add To Cart
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="product_content">
                        <h5 class="mb-8"><a href="{{route('card_detail',['id' => $product->id])}}" class="hover-text-main-600">{{$product->name}}</a></h5>
                        <div class="flex-between gap-4 flex-wrap mt-10">
                            <div class="flex-align gap-2">
                                <span class="price"><i class="fa-solid fa-dollar-sign"></i>{{$product->price}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>

        <div class="cart">

            @include('layouts.cart')

        </div>

@endsection