@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 @endif</span>
                        <b>Description</b>
                        <ul>
                            <li>{{$product_info['descryption']}}</li>
    {{--                        <li>Fully assembled! No assembly required</li>--}}
                        </ul>
                        <div class="product_details">
                            <div class="inner">
                                <label>Frame Material</label>
                                <select id="field-21" class="chakra-select css-11x6u1f"><option value="">Wood</option><option>Aluminium</option><option>Carbon</option><option>Steel</option><option>Brasil</option></select>
                            </div>
                            <div class="inner">
                                <label>Color</label>
                                <select id="field-21" class="chakra-select css-11x6u1f"><option>Aluminium</option><option value="">Wood</option><option>Carbon</option><option>Steel</option><option>Brasil</option></select>
                            </div>
                            <div class="inner">
                                <label>Quantity</label>
                                <select id="field-21" class="chakra-select css-11x6u1f"><option>Carbon</option><option value="">Wood</option><option>Aluminium</option><option>Steel</option><option>Brasil</option></select>
                            </div>
                        </div>
                        <button type="button" class="product_checkout add_to_cart" data-id="{{$product_info['id']}}">ADD TO CART</button>
                    </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