@extends('layouts.public')

@section('title', 'Головна')

@section('content')
    {{-- Акційні товари --}}
    <div class="container-lg card-body">
        <div class="main-products">
            <h2 id="action-product" class="product-main text-secondary text-danger">Акційні товари</h2>
        </div>

        @if(!$saleProducts->isEmpty())
            <div class="card-container d-flex justify-content-center flex-wrap" id="products-container">
                @foreach ($saleProducts as $product)
                    @php
                        switch($product->currency) {
                            case 'USD':
                                $currencySymbol = '$';
                                break;
                            case 'EUR':
                                $currencySymbol = '€';
                                break;
                            default:
                                $currencySymbol = '₴';
                        }
                    @endphp
                    <div class="card m-2">
                        <a href="{{ route('public.products.show', $product) }}" class="text-dark text-decoration-none">
                            <div class="card-content">
                                @if ($product->image)
                                    <img class="image-main" src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}">
                                @else
                                    <div class="image-main bg-light d-flex align-items-center justify-content-center" style="height:200px;">
                                        <span class="text-muted">Нет изображения</span>
                                    </div>
                                @endif
                                <h6 class="text-center mt-3">{{ $product->name }}</h6>

                                @if($product->price && $product->new_price)
                                    <strike>
                                        <p class="text-center text-danger price-card">
                                            {{ number_format($product->price, 0, '.', ' ') }} {{ $currencySymbol }}
                                        </p>
                                    </strike>
                                    <p class="text-center text-danger price-card">
                                        {{ number_format($product->new_price, 0, '.', ' ') }} {{ $currencySymbol }}
                                    </p>
                                @else
                                    <p class="text-center text-danger price-card">
                                        {{ number_format($product->price ?? $product->new_price, 0, '.', ' ') }} {{ $currencySymbol }}
                                    </p>
                                @endif
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Популярні товари --}}
    <div class="container-lg card-body">
        <div id="popular-product" class="main-products">
            <h2 class="product-main text-secondary">Популярні товари</h2>
        </div>

        @if(!$popularProducts->isEmpty())
            <div class="card-container d-flex justify-content-center flex-wrap" id="products-container">
                @foreach ($popularProducts as $product)
                    @php
                        switch($product->currency) {
                            case 'USD':
                                $currencySymbol = '$';
                                break;
                            case 'EUR':
                                $currencySymbol = '€';
                                break;
                            default:
                                $currencySymbol = '₴';
                        }
                    @endphp
                    <div class="card m-2">
                        <a href="{{ route('public.products.show', $product) }}" class="text-dark text-decoration-none">
                            <div class="card-content">
                                @if ($product->image)
                                    <img class="image-main" src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}">
                                @else
                                    <div class="image-main bg-light d-flex align-items-center justify-content-center" style="height:200px;">
                                        <span class="text-muted">Нет изображения</span>
                                    </div>
                                @endif
                                <h6 class="text-center mt-3">{{ $product->name }}</h6>

                                @if($product->new_price)
                                    <strike>
                                        <p class="text-center text-danger price-card">
                                            {{ number_format($product->price, 0, '.', ' ') }} {{ $currencySymbol }}
                                        </p>
                                    </strike>
                                    <p class="text-center text-danger price-card">
                                        {{ number_format($product->new_price, 0, '.', ' ') }} {{ $currencySymbol }}
                                    </p>
                                @else
                                    <p class="text-center text-danger price-card">
                                        {{ number_format($product->price, 0, '.', ' ') }} {{ $currencySymbol }}
                                    </p>
                                @endif
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endsection