@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="search-header text-center mb-5">
        <h2 class="fw-bold" style="color: #2c3e50;">
            <i class="fas fa-search mb-3 d-block" style="font-size: 2rem;"></i>
            نتائج البحث
            @if(request('query'))
                <span class="search-query">"{{ request('query') }}"</span>
            @endif
        </h2>
    </div>

    @if(session('message'))
        <div class="custom-alert warning-alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('message') }}
        </div>
    @endif

    @if(request('query') && $items->isEmpty())
        <div class="empty-state text-center py-5">
            <i class="fas fa-search mb-3" style="font-size: 3rem; color: #95a5a6;"></i>
            <h3 class="text-muted">لا توجد منتجات تطابق البحث "{{ request('query') }}"</h3>
            <p class="text-muted">جرب البحث بكلمات مختلفة</p>
        </div>
    @endif

    @if($items->isNotEmpty())
        <div class="search-results">
            <div class="row g-4">
                @foreach ($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>
                @endforeach
            </div>

            @if(!empty($query) && !is_null($items) && $items instanceof \Illuminate\Pagination\LengthAwarePaginator)
                <div class="pagination-wrapper mt-5">
                    {{ $items->appends(['query' => $query])->links() }}
                </div>
            @endif
        </div>
    @endif
</div>

<style>
.search-header {
    position: relative;
    padding-bottom: 2rem;
}

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

.search-query {
    color: #3498db;
    font-weight: normal;
}

.custom-alert {
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    text-align: center;
    animation: slideDown 0.3s ease;
}

.warning-alert {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

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

.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;
    position: relative;
}

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

.pagination-wrapper {
    display: flex;
    justify-content: center;
}

.pagination-wrapper .pagination {
    margin: 0;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pagination-wrapper .page-item .page-link {
    border: none;
    padding: 0.8rem 1.2rem;
    color: #2c3e50;
    transition: all 0.3s ease;
}

.pagination-wrapper .page-item.active .page-link {
    background: #3498db;
    color: white;
}

.pagination-wrapper .page-item .page-link:hover {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

@keyframes slideDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

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

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

}
</style>
@endsection