@extends('layouts.app')

@section('content')
<div class="container py-4">
    <h2 class="mb-5 text-center fw-bold" style="color: #2c3e50;">جميع الأقسام</h2>

    @foreach ($categories as $category)
        @if ($category->items->isNotEmpty())
        <div class="category-section mb-5">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3 class="category-title m-0" style="color: #2c3e50; font-size: 1.5rem;">{{ $category->category_name }}</h3>
                <a href="{{ route('category.show', $category->id) }}" class="view-all-btn">
                    عرض الكل
                    <i class="fas fa-arrow-left me-2"></i>
                </a>
            </div>

            <div class="row g-4">
                @foreach ($category->items->take(4) 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>
                @endforeach
            </div>
        </div>
        @endif
    @endforeach
</div>

<style>
.category-section {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

.view-all-btn {
    color: #0d6efd;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(13, 110, 253, 0.1);
}

.view-all-btn:hover {
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
    transform: translateX(-5px);
}

.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;
}

@media (max-width: 768px) {
    .category-section {
        padding: 1rem;
    }

    .img-wrapper {
        height: 250px;
    }

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

    .current-price {
        font-size: 1rem;
    }
}
</style>
@endsection