@extends('User.layout')

@section('header')
@include('components.header-inner', ['title' => 'Customise Product',
'backUrl' => route('welcome'),


])
@endsection

@section('content')

<style>
    /* CONTAINER */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 15px;
    }

    /* CARD BOX */
    .product-card {
        background: #ffffff;
        border-radius: 14px;
        padding: 12px 8px;
        box-shadow: 0 3px 10px #00000010;
        text-align: center;
    }

    /* IMAGE */
    .product-card img {
        width: 70px;
        height: 70px;
        object-fit: contain;
        margin: 0 auto 8px;
    }

    /* TITLE */
    .product-title {
        font-size: 12px;
        font-weight: 600;
        line-height: 14px;
    }

   
</style>


<div class="product-grid">
    @foreach($products as $product)

    {{-- CARD 1 --}}
    <div class="product-card">
        <a href="{{ route('custom_add_product', $product->id) }}"  style="text-decoration: none; color: inherit;">
            <img src="{{ $product->image ? asset($product->image) : asset('/assets/web/img/product.png') }}" alt="{{ $product->product_name }}">
            <div class="product-title">{{ $product->product_name }}<br>Wood</div>
        </a>
    </div>
    @endforeach



</div>

@endsection