@extends('layouts.app')

@section('title', 'Home')

@section('content')
@php
    $heroTitle = $settings?->hero_title ?: 'Online Shopping';
    $heroDescription = $settings?->hero_description ?: 'Discover top-quality products at unbeatable prices. Shop smart with secure checkout and fast delivery.';
    $heroButtonText = $settings?->hero_button_text ?: 'Shop Now';
    $heroButtonUrl = $settings?->hero_button_url ?: route('user.products.index');
    $heroImage = $settings?->hero_image ? asset($settings->hero_image) : asset('assets/img/ecom.png');

    $featuredSectionTitle = $settings?->featured_section_title ?: 'Featured Products';
    $recentSectionTitle = $settings?->recent_section_title ?: 'Recent Products';
    $categoriesSectionTitle = $settings?->categories_section_title ?: 'Popular Categories';
    $featuresSectionTitle = $settings?->features_section_title ?: 'Why Shop With Us';

    $freeShippingAmount = \App\Support\Currency::symbol() . number_format((float) ($settings?->free_shipping_threshold ?? 50), 0);

    $featureShippingTitle = $settings?->feature_shipping_title ?: 'Fast Shipping';
    $featureShippingText = $settings?->feature_shipping_text ?: "Free delivery on orders over {$freeShippingAmount}";
    $featurePaymentTitle = $settings?->feature_payment_title ?: 'Secure Payment';
    $featurePaymentText = $settings?->feature_payment_text ?: '100% secure and encrypted transactions';
    $featureReturnsTitle = $settings?->feature_returns_title ?: 'Easy Returns';
    $featureReturnsText = $settings?->feature_returns_text ?: '30-day money-back guarantee';
    $featureSupportTitle = $settings?->feature_support_title ?: '24/7 Support';
    $featureSupportText = $settings?->feature_support_text ?: 'Dedicated customer support always available';
@endphp

<!-- Hero Section -->
<div class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="display-4 fw-bold mb-4">{{ $heroTitle }}</h1>
                <p class="lead mb-4">{{ $heroDescription }}</p>
                <a href="{{ $heroButtonUrl }}" class="btn btn-warning btn-lg">
                    <i class="bi bi-cart"></i> {{ $heroButtonText }}
                </a>
            </div>
            <div class="col-md-6">
                <img src="{{ $heroImage }}" alt="Welcome" class="img-fluid rounded">
            </div>
        </div>
    </div>
</div>

<!-- Featured Products -->
<div class="container mb-5">
    <div class="row mb-4">
        <div class="col-md-12">
            <h2 class="mb-4">
                {{ $featuredSectionTitle }}
            </h2>
        </div>
    </div>
    <div class="row">
        @forelse($featuredProducts as $product)
            <div class="col-md-3 mb-4">
                <div class="card product-card h-100">
                    <div class="position-relative">
                        <img src="{{ $product->image ? asset('storage/products/' . $product->image) : asset('uploads/no-image.png') }}" class="card-img-top" alt="{{ $product->name }}">
                        @if($product->is_featured)
                            <span class="badge-sale">Featured</span>
                        @endif
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{ substr($product->name, 0, 30) }}</h5>
                        <p class="card-text text-muted">{{ substr($product->description, 0, 60) }}...</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="h5 mb-0 text-primary">{{ \App\Support\Currency::symbol() }}{{ number_format($product->price, 2) }}</span>
                           
                        </div>
                    </div>
                    <div class="card-footer bg-white border-top">
                        <a href="{{ route('user.products.show', $product) }}" class="btn btn-sm btn-primary w-100">
                            View Details
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-info">No featured products available</div>
            </div>
        @endforelse
    </div>
</div>

<!-- Recent Products -->
<div class="container mb-5">
    <div class="row mb-4">
        <div class="col-md-12">
            <h2 class="mb-4">
                {{ $recentSectionTitle }}
            </h2>
        </div>
    </div>
    <div class="row">
        @forelse($recentProducts as $product)
            <div class="col-md-3 mb-4">
                <div class="card product-card h-100">
                    <div class="position-relative">
                        <img src="{{ $product->image ? asset('storage/products/' . $product->image) : asset('uploads/no-image.png') }}" class="card-img-top" alt="{{ $product->name }}">
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{ substr($product->name, 0, 30) }}</h5>
                        <p class="card-text text-muted">{{ substr($product->description, 0, 60) }}...</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="h5 mb-0 text-primary">{{ \App\Support\Currency::symbol() }}{{ number_format($product->price, 2) }}</span>
                         
                        </div>
                    </div>
                    <div class="card-footer bg-white border-top">
                        <a href="{{ route('user.products.show', $product) }}" class="btn btn-sm btn-primary w-100">
                            View Details
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-info">No products available</div>
            </div>
        @endforelse
    </div>
</div>

<!-- Categories Section -->
<div class="bg-light py-5 mb-5">
    <div class="container">
        <h2 class="mb-4">
            <i class="bi bi-tags"></i> {{ $categoriesSectionTitle }}
        </h2>
        <div class="row">
            @forelse($categories as $category)
                <div class="col-md-4 mb-3">
                    <a href="{{ route('frontend.category', $category) }}" class="text-decoration-none">
                        <div class="card category-card" style="border-left: 4px solid #3498db;">
                            <div class="card-body">
                                <h4 class="card-title">{{ $category->name }}</h4>
                                <p class="card-text text-muted">{{ $category->subcategories->count() }} subcategories</p>
                            </div>
                        </div>
                    </a>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-info">No categories available</div>
                </div>
            @endforelse
        </div>
    </div>
</div>

<!-- Features Section -->
<div class="container mb-5">
    <div class="row mb-3">
        <div class="col-md-12">
            <h2 class="mb-4">{{ $featuresSectionTitle }}</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 text-center mb-4">
            <div class="mb-3">
                <i class="bi bi-truck" style="font-size: 2.5rem; color: #3498db;"></i>
            </div>
            <h5>{{ $featureShippingTitle }}</h5>
            <p class="text-muted">{{ $featureShippingText }}</p>
        </div>
        <div class="col-md-3 text-center mb-4">
            <div class="mb-3">
                <i class="bi bi-shield-check" style="font-size: 2.5rem; color: #3498db;"></i>
            </div>
            <h5>{{ $featurePaymentTitle }}</h5>
            <p class="text-muted">{{ $featurePaymentText }}</p>
        </div>
        <div class="col-md-3 text-center mb-4">
            <div class="mb-3">
                <i class="bi bi-arrow-repeat" style="font-size: 2.5rem; color: #3498db;"></i>
            </div>
            <h5>{{ $featureReturnsTitle }}</h5>
            <p class="text-muted">{{ $featureReturnsText }}</p>
        </div>
        <div class="col-md-3 text-center mb-4">
            <div class="mb-3">
                <i class="bi bi-headset" style="font-size: 2.5rem; color: #3498db;"></i>
            </div>
            <h5>{{ $featureSupportTitle }}</h5>
            <p class="text-muted">{{ $featureSupportText }}</p>
        </div>
    </div>
</div>
@endsection