@extends('layouts.app')

@section('title', 'الصفحة الرئيسية')

@section('content')
<style>
    .section-title {
        color: #2c3e50;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 2rem;
        position: relative;
        padding-bottom: 0.5rem;
        display: inline-block;
    }
    .section-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60%;
        height: 3px;
        border-radius: 2px;
    }
    .trending .section-title:after {
        background: linear-gradient(to left, #dc3545, #f8b4bc);
    }
    .new-items .section-title:after {
        background: linear-gradient(to left, #f27523, #20c997);
    }
    .item {
        transition: all 0.3s ease;
    }
    .item:hover {
        transform: translateY(-5px);
    }
    .item-card {
        border: none;
        transition: all 0.3s ease;
    }
    .item-card:hover {
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
    .item-title {
        color: #2c3e50;
        font-size: 1.1rem;
        margin: 1rem 0;
        height: 2.4em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .price-new {
        color: #f27523;
        font-weight: 700;
        font-size: 1.2rem;
    }
    .price-old {
        color: #dc3545;
        text-decoration: line-through;
        opacity: 0.8;
        font-size: 1rem;
    }
    .img-container {
        overflow: hidden;
        background: white;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .img-item {
        transition: transform 0.3s ease;
    }
    .img-item:hover {
        transform: scale(1.05);
    }
</style>


    <div class="container">


      <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-indicators">
        @foreach ($slides as $index => $slide)
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ $index }}" class="{{ $index === 0 ? 'active' : '' }}" aria-current="{{ $index === 0 ? 'true' : 'false' }}" aria-label="Slide {{ $index + 1 }}"></button>
        @endforeach
    </div>

    <div class="carousel-inner">
        @foreach ($slides as $index => $slide)
            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                <img src="{{ asset($slide->image) }}" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>{{ $slide->title }}</h5>
                    <p>{{ $slide->description }}</p>
                </div>
            </div>
        @endforeach
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>


    </div>{{-- container --}}




    {{-- start trend --}}

    <br>


    <div class="container trending my-5">
    <h2 class="section-title">الأكثر رواجا</h2>
    <div class="row">
        @foreach ($trend_items as $trend)
        <div class="col-md-3 item" style="min-height: 520px">
            <a href="{{ route('product.show', $trend->id) }}" class="text-decoration-none">
                <div class="item-card shadow rounded-3">
                    <div class="img-container rounded-top-3">
                        <img src="{{ asset($trend->main_img) }}" class="img-item bg-white"
                             style="width: 100%; max-height:300px; object-fit: contain"
                             alt="{{ $trend->item_name }}">
                    </div>
                    <div class="bg-white p-3 rounded-bottom-3" dir="rtl">
                        <h3 class="item-title text-center">{{ $trend->item_name }}</h3>
                        <div class="d-flex justify-content-center gap-2 align-items-center">
                            <span class="price-new">{{ number_format($trend->new_price) }} د.ع</span>
                            @if(!empty($trend->old_price))
                                <span class="price-old">{{ number_format($trend->old_price) }} د.ع</span>
                            @endif
                        </div>
                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>
</div>

<div class="container new-items my-5">
    <h2 class="section-title">أحدث المنتجات</h2>
    <div class="row">
        @foreach ($new_items as $item)
        <div class="col-md-3 item" style="min-height: 520px">
            <a href="{{ route('product.show', $item->id) }}" class="text-decoration-none">
                <div class="item-card shadow rounded-3">
                    <div class="img-container rounded-top-3">
                        <img src="{{ asset($item->main_img) }}" class="img-item bg-white"
                             style="width: 100%; max-height:300px; object-fit: contain"
                             alt="{{ $item->item_name }}">
                    </div>
                    <div class="bg-white p-3 rounded-bottom-3" dir="rtl">
                        <h3 class="item-title text-center">{{ $item->item_name }}</h3>
                        <div class="d-flex justify-content-center gap-2 align-items-center">
                            <span class="price-new">{{ number_format($item->new_price) }} د.ع</span>
                            @if(!empty($item->old_price))
                                <span class="price-old">{{ number_format($item->old_price) }} د.ع</span>
                            @endif
                        </div>
                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>
</div>


@endsection