@extends('User.layout')

@section('header')
@include('components.header-inner', ['title' => 'View products',
'backUrl' => route('welcome'),
])
@endsection

@section('content')
<style>
    .input-icon {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #bfbfbf;
        pointer-events: none;
        /* click goes to input */
    }

    .input-group {
        position: relative;
        width: 100%;
        margin: 20px auto;
        /* center the box */
    }

    .input {
        width: 100%;
        padding: 10px 12px 10px 40px;
        /* LEFT space for icon */
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        transition: all 0.3s ease;
    }

    .input:hover {
        border-color: #32CD32;
    }

    .input:focus {
        border-color: #32CD32;
        box-shadow: 0 0 0 3px rgba(50, 205, 50, 0.25);
    }

    .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">
    <form action="{{ route('product_search') }}" method="GET" class="input-group mb-4">

        <div class="input-group">
            <svg class="input-icon"
                xmlns="http://www.w3.org/2000/svg"
                width="18" height="18"
                viewBox="0 0 24 24" fill="none">
                <path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M22 22L20 20"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
            <input type="text" name="keyword" class="input" placeholder="Search" value="{{ $keyword ?? '' }}">
            <button type="submit" style="display:none;"></button>
    </form>
    @if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
    @endif
</div>

@foreach($products as $product)

<div class="product-card position-relative">

    <div class="product-left">
        <img src="{{ $product['image'] }}" class="product-img">
        <div class="product-info">
            <h5>{{ $product['product_name'] }}</h5>
            <p>Product Code : {{ $product['product_id'] }}</p>
        </div>
    </div>

    <a href="{{ route('product_details', $product['id']) }}" class="btn-view">View More</a>
</div>
@endforeach

</div>


<script>
    document.querySelector('.input').addEventListener('input', function() {
        let keyword = this.value.trim();
        let cards = document.querySelectorAll('.product-card');

        cards.forEach(card => {
            let name = card.querySelector('h5').innerText.toLowerCase();
            let code = card.querySelector('p').innerText.toLowerCase();
            if (name.includes(keyword.toLowerCase()) || code.includes(keyword.toLowerCase())) {
                card.style.display = 'flex';
            } else {
                card.style.display = 'none';
            }
        });
    });
</script>
@endsection