@extends('layout')

@section('header')
    @include('components.header-inner', ['title' => 'Single Seater Sofa'])
@endsection

@section('content')
    <style>
        .product-card {
            background: #fff;
            border-radius: 18px;
            padding: 18px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .product-left {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
            min-width: 0;
        }

        .discount-badge {
            background: #32CD32;
            padding: 3px 5px;
            color: #fff;
            font-size: 12px;
            border-radius: 5px;
            font-weight: 600;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .product-img {
            width: 100px;
            height: auto;
            flex-shrink: 0;
        }

        .product-info h5 {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .product-info p {
            font-size: 13px;
            margin-bottom: 0;
            color: #555;
        }

        .btn-view {
            white-space: nowrap;
            border: 1.5px solid #FF9999;
            background: #fff;
            padding: 8px 20px;
            border-radius: 10px;
            color: #FF6666;
            font-weight: 600;
            text-decoration: none;
        }

        /* MOBILE RESPONSIVE */
        @media (max-width: 600px) {

            .product-card {
                flex-direction: column;
                align-items: flex-start;
                padding: 15px;
            }

            .product-left {
                width: 100%;
                justify-content: flex-start;
            }

            .product-img {
                width: 85px;
            }

            .product-info h5 {
                font-size: 15px;
            }

            .btn-view {
                width: 100%;
                text-align: center;
                margin-top: 10px;
                padding: 10px 0;
            }
        }
    </style>


    <div class="container mt-5">

        <div class="product-card position-relative">
            <span class="discount-badge">-20%</span>

            <div class="product-left">
                <img src="{{ asset('/assets') }}/web/img/product.png" class="product-img">
                <div class="product-info">
                    <h5>Single Seater Sofa Chair</h5>
                    <p>Product Code : #1234567</p>
                </div>
            </div>

            <a href="#" class="btn-view">View More</a>
        </div>

        <div class="product-card position-relative">
            <span class="discount-badge">-20%</span>

            <div class="product-left">
                <img src="{{ asset('/assets') }}/web/img/product.png" class="product-img">
                <div class="product-info">
                    <h5>Sofa Chair</h5>
                    <p>Product Code : #1234567</p>
                </div>
            </div>

            <a href="#" class="btn-view">View More</a>
        </div>

        <div class="product-card position-relative">
            <span class="discount-badge">-20%</span>

            <div class="product-left">
                <img src="{{ asset('/assets') }}/web/img/product.png" class="product-img">
                <div class="product-info">
                    <h5>Living Room Sofa</h5>
                    <p>Product Code : #1234567</p>
                </div>
            </div>

            <a href="#" class="btn-view">View More</a>
        </div>

    </div>
@endsection