@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="category-header mb-5">
        <h1 class="text-center fw-bold" style="color: #2c3e50;">
            <i class="fas fa-layer-group me-2"></i>
            {{ $category->category_name }}
        </h1>
    </div>

    <div class="row g-4">
        @forelse ($category->items as $item)
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="product-card">
                    <a href="{{ route('product.show', $item->id) }}" class="text-decoration-none">
                        <div class="card h-100 border-0 shadow-sm hover-shadow">
                            <div class="img-wrapper">
                                <img src="{{ asset($item->main_img) }}"
                                     class="card-img-top"
                                     alt="{{ $item->item_name }}">
                            </div>
                            <div class="card-body p-3">
                                <h5 class="product-title">{{ $item->item_name }}</h5>
                                <div class="price-section">
                                    <div class="current-price">{{ number_format($item->new_price) }} IQD</div>
                                    @if(!empty($item->old_price))
                                        <div class="old-price">{{ number_format($item->old_price) }} IQD</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="empty-state text-center py-5">
                    <i class="fas fa-box-open mb-3" style="font-size: 3rem; color: #95a5a6;"></i>
                    <h3 class="text-muted">لا توجد منتجات في هذا القسم</h3>
                    <p class="text-muted">سيتم إضافة منتجات جديدة قريباً</p>
                </div>
            </div>
        @endforelse
    </div>
</div>

<style>
.category-header {
    position: relative;
    padding: 2rem 0;
}

.category-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(to right, #3498db, #2ecc71);
    border-radius: 3px;
}

.product-card {
    height: 100%;
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.img-wrapper {
    height: 300px;
    overflow: hidden;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    padding: 1rem;
}

.product-card:hover .card-img-top {
    transform: scale(1.05);
}

.product-title {
    color: #2c3e50;
    font-size: 1rem;
    margin-bottom: 1rem;
    height: 3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

.price-section {
    text-align: center;
    margin-top: 1rem;
}

.current-price {
    color: #2ecc71;
    font-size: 1.1rem;
    font-weight: 600;
}

.old-price {
    color: #e74c3c;
    text-decoration: line-through;
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.2rem;
}

.hover-shadow {
    transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}

.empty-state {
    background: white;
    border-radius: 15px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
    .img-wrapper {
        height: 250px;
    }

    .product-title {
        font-size: 0.9rem;
        height: 2.7rem;
    }

    .current-price {
        font-size: 1rem;
    }

    .category-header {
        padding: 1.5rem 0;
    }
}
</style>
@endsection