@extends('layouts.app')

@section('content')
<div class="container-fluid home-cover">
    <div class="mb-4 position-relative custom-pt-6">
        <div class="container px-5">

            @if ($settings->announcement != '' && $settings->announcement_show == 'all'
                || $settings->announcement != '' && $settings->announcement_show == 'users' && auth()->check())
                <div class="alert alert-{{$settings->type_announcement}} announcements display-none alert-dismissible fade show" role="alert">
                    <h4 class="alert-heading"><i class="bi-megaphone me-2"></i> {{ __('admin.announcements') }}</h4>
                    <p class="update-text">{!! $settings->announcement !!}</p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" id="closeAnnouncements">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            @endif

            <h1 class="display-3 fw-bold text-white">{{ __('seo.welcome_text') }}</h1>
            <p class="col-md-8 fs-4 fw-bold text-white">{{ __('seo.welcome_subtitle') }}</p>
            <form action="{{ url('search') }}" method="get" class="position-relative">
                <i class="bi bi-search btn-search"></i>
                <input class="form-control form-control-lg ps-5 input-search-lg border-0 search-lg" type="text" name="q" autocomplete="off" placeholder="{{__('misc.search')}}" required minlength="3">
            </form>

            @if ($categoryPopular)
                <p class="mt-2 text-white linkCategoryPopular">
                    <strong>{{__('misc.popular_categories')}}</strong> {!! $categoryPopular !!}
                </p>
            @endif

        </div>
    </div>
</div>

<div class="container-fluid py-5 py-large">

    @if ($images->count() != 0)

        @if ($settings->show_images_index == 'featured' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5">
                <h3 class="m-0">{{__('misc.featured_photos')}}</h3>
                <p>{{ __('misc.featured_desc') }}</p>
            </div>

            <!-- FEATURED IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlexFeatured">
                    @foreach($featured as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('featured') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

        @if ($settings->show_images_index == 'latest' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5 @if ($settings->show_images_index == 'both') mt-5 @endif">
                <h3 class="m-0">{{__('misc.recent_photos')}}</h3>
                <p>{{ __('misc.latest_desc') }}</p>
            </div>

            <!-- LATEST IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlex">
                    @foreach($images as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('latest') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

    @else
        <h4 class="text-center">
            <div class="d-block w-100 display-2">
                <i class="bi bi-images"></i>
            </div>
            {{ __('misc.no_images_published') }}
        </h4>

        <div class="w-100 d-block text-center mt-3">
            <a href="{{ url('upload') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                {{ __('users.upload') }}
            </a>
        </div>
    @endif

    @if ($settings->google_adsense && $settings->google_ads_index == 'on' && $settings->google_adsense_index != '')
        <div class="col-md-12 mt-3">
            {!! $settings->google_adsense_index !!}
        </div>
    @endif
</div>

<!-- Add your existing sections for counters, categories etc. -->

@endsection

@section('javascript')
<script type="text/javascript">
    // Initialize flexImages for proper layout
    if (typeof $.fn.flexImages !== 'undefined') {
        $('#imagesFlex').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
        $('#imagesFlexFeatured').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
    }
</script>
@endsection@extends('layouts.app')

@section('content')
<div class="container-fluid home-cover">
    <div class="mb-4 position-relative custom-pt-6">
        <div class="container px-5">

            @if ($settings->announcement != '' && $settings->announcement_show == 'all'
                || $settings->announcement != '' && $settings->announcement_show == 'users' && auth()->check())
                <div class="alert alert-{{$settings->type_announcement}} announcements display-none alert-dismissible fade show" role="alert">
                    <h4 class="alert-heading"><i class="bi-megaphone me-2"></i> {{ __('admin.announcements') }}</h4>
                    <p class="update-text">{!! $settings->announcement !!}</p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" id="closeAnnouncements">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            @endif

            <h1 class="display-3 fw-bold text-white">{{ __('seo.welcome_text') }}</h1>
            <p class="col-md-8 fs-4 fw-bold text-white">{{ __('seo.welcome_subtitle') }}</p>
            <form action="{{ url('search') }}" method="get" class="position-relative">
                <i class="bi bi-search btn-search"></i>
                <input class="form-control form-control-lg ps-5 input-search-lg border-0 search-lg" type="text" name="q" autocomplete="off" placeholder="{{__('misc.search')}}" required minlength="3">
            </form>

            @if ($categoryPopular)
                <p class="mt-2 text-white linkCategoryPopular">
                    <strong>{{__('misc.popular_categories')}}</strong> {!! $categoryPopular !!}
                </p>
            @endif

        </div>
    </div>
</div>

<div class="container-fluid py-5 py-large">

    @if ($images->count() != 0)

        @if ($settings->show_images_index == 'featured' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5">
                <h3 class="m-0">{{__('misc.featured_photos')}}</h3>
                <p>{{ __('misc.featured_desc') }}</p>
            </div>

            <!-- FEATURED IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlexFeatured">
                    @foreach($featured as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('featured') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

        @if ($settings->show_images_index == 'latest' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5 @if ($settings->show_images_index == 'both') mt-5 @endif">
                <h3 class="m-0">{{__('misc.recent_photos')}}</h3>
                <p>{{ __('misc.latest_desc') }}</p>
            </div>

            <!-- LATEST IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlex">
                    @foreach($images as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('latest') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

    @else
        <h4 class="text-center">
            <div class="d-block w-100 display-2">
                <i class="bi bi-images"></i>
            </div>
            {{ __('misc.no_images_published') }}
        </h4>

        <div class="w-100 d-block text-center mt-3">
            <a href="{{ url('upload') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                {{ __('users.upload') }}
            </a>
        </div>
    @endif

    @if ($settings->google_adsense && $settings->google_ads_index == 'on' && $settings->google_adsense_index != '')
        <div class="col-md-12 mt-3">
            {!! $settings->google_adsense_index !!}
        </div>
    @endif
</div>

<!-- Add your existing sections for counters, categories etc. -->

@endsection

@section('javascript')
<script type="text/javascript">
    // Initialize flexImages for proper layout
    if (typeof $.fn.flexImages !== 'undefined') {
        $('#imagesFlex').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
        $('#imagesFlexFeatured').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
    }
</script>
@endsection@extends('layouts.app')

@section('content')
<div class="container-fluid home-cover">
    <div class="mb-4 position-relative custom-pt-6">
        <div class="container px-5">

            @if ($settings->announcement != '' && $settings->announcement_show == 'all'
                || $settings->announcement != '' && $settings->announcement_show == 'users' && auth()->check())
                <div class="alert alert-{{$settings->type_announcement}} announcements display-none alert-dismissible fade show" role="alert">
                    <h4 class="alert-heading"><i class="bi-megaphone me-2"></i> {{ __('admin.announcements') }}</h4>
                    <p class="update-text">{!! $settings->announcement !!}</p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" id="closeAnnouncements">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            @endif

            <h1 class="display-3 fw-bold text-white">{{ __('seo.welcome_text') }}</h1>
            <p class="col-md-8 fs-4 fw-bold text-white">{{ __('seo.welcome_subtitle') }}</p>
            <form action="{{ url('search') }}" method="get" class="position-relative">
                <i class="bi bi-search btn-search"></i>
                <input class="form-control form-control-lg ps-5 input-search-lg border-0 search-lg" type="text" name="q" autocomplete="off" placeholder="{{__('misc.search')}}" required minlength="3">
            </form>

            @if ($categoryPopular)
                <p class="mt-2 text-white linkCategoryPopular">
                    <strong>{{__('misc.popular_categories')}}</strong> {!! $categoryPopular !!}
                </p>
            @endif

        </div>
    </div>
</div>

<div class="container-fluid py-5 py-large">

    @if ($images->count() != 0)

        @if ($settings->show_images_index == 'featured' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5">
                <h3 class="m-0">{{__('misc.featured_photos')}}</h3>
                <p>{{ __('misc.featured_desc') }}</p>
            </div>

            <!-- FEATURED IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlexFeatured">
                    @foreach($featured as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('featured') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

        @if ($settings->show_images_index == 'latest' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5 @if ($settings->show_images_index == 'both') mt-5 @endif">
                <h3 class="m-0">{{__('misc.recent_photos')}}</h3>
                <p>{{ __('misc.latest_desc') }}</p>
            </div>

            <!-- LATEST IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlex">
                    @foreach($images as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('latest') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

    @else
        <h4 class="text-center">
            <div class="d-block w-100 display-2">
                <i class="bi bi-images"></i>
            </div>
            {{ __('misc.no_images_published') }}
        </h4>

        <div class="w-100 d-block text-center mt-3">
            <a href="{{ url('upload') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                {{ __('users.upload') }}
            </a>
        </div>
    @endif

    @if ($settings->google_adsense && $settings->google_ads_index == 'on' && $settings->google_adsense_index != '')
        <div class="col-md-12 mt-3">
            {!! $settings->google_adsense_index !!}
        </div>
    @endif
</div>

<!-- Add your existing sections for counters, categories etc. -->

@endsection

@section('javascript')
<script type="text/javascript">
    // Initialize flexImages for proper layout
    if (typeof $.fn.flexImages !== 'undefined') {
        $('#imagesFlex').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
        $('#imagesFlexFeatured').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
    }
</script>
@endsection@extends('layouts.app')

@section('content')
<div class="container-fluid home-cover">
    <div class="mb-4 position-relative custom-pt-6">
        <div class="container px-5">

            @if ($settings->announcement != '' && $settings->announcement_show == 'all'
                || $settings->announcement != '' && $settings->announcement_show == 'users' && auth()->check())
                <div class="alert alert-{{$settings->type_announcement}} announcements display-none alert-dismissible fade show" role="alert">
                    <h4 class="alert-heading"><i class="bi-megaphone me-2"></i> {{ __('admin.announcements') }}</h4>
                    <p class="update-text">{!! $settings->announcement !!}</p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" id="closeAnnouncements">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            @endif

            <h1 class="display-3 fw-bold text-white">{{ __('seo.welcome_text') }}</h1>
            <p class="col-md-8 fs-4 fw-bold text-white">{{ __('seo.welcome_subtitle') }}</p>
            <form action="{{ url('search') }}" method="get" class="position-relative">
                <i class="bi bi-search btn-search"></i>
                <input class="form-control form-control-lg ps-5 input-search-lg border-0 search-lg" type="text" name="q" autocomplete="off" placeholder="{{__('misc.search')}}" required minlength="3">
            </form>

            @if ($categoryPopular)
                <p class="mt-2 text-white linkCategoryPopular">
                    <strong>{{__('misc.popular_categories')}}</strong> {!! $categoryPopular !!}
                </p>
            @endif

        </div>
    </div>
</div>

<div class="container-fluid py-5 py-large">

    @if ($images->count() != 0)

        @if ($settings->show_images_index == 'featured' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5">
                <h3 class="m-0">{{__('misc.featured_photos')}}</h3>
                <p>{{ __('misc.featured_desc') }}</p>
            </div>

            <!-- FEATURED IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlexFeatured">
                    @foreach($featured as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('featured') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

        @if ($settings->show_images_index == 'latest' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5 @if ($settings->show_images_index == 'both') mt-5 @endif">
                <h3 class="m-0">{{__('misc.recent_photos')}}</h3>
                <p>{{ __('misc.latest_desc') }}</p>
            </div>

            <!-- LATEST IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlex">
                    @foreach($images as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('latest') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

    @else
        <h4 class="text-center">
            <div class="d-block w-100 display-2">
                <i class="bi bi-images"></i>
            </div>
            {{ __('misc.no_images_published') }}
        </h4>

        <div class="w-100 d-block text-center mt-3">
            <a href="{{ url('upload') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                {{ __('users.upload') }}
            </a>
        </div>
    @endif

    @if ($settings->google_adsense && $settings->google_ads_index == 'on' && $settings->google_adsense_index != '')
        <div class="col-md-12 mt-3">
            {!! $settings->google_adsense_index !!}
        </div>
    @endif
</div>

<!-- Add your existing sections for counters, categories etc. -->

@endsection

@section('javascript')
<script type="text/javascript">
    // Initialize flexImages for proper layout
    if (typeof $.fn.flexImages !== 'undefined') {
        $('#imagesFlex').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
        $('#imagesFlexFeatured').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
    }
</script>
@endsection@extends('layouts.app')

@section('content')
<div class="container-fluid home-cover">
    <div class="mb-4 position-relative custom-pt-6">
        <div class="container px-5">

            @if ($settings->announcement != '' && $settings->announcement_show == 'all'
                || $settings->announcement != '' && $settings->announcement_show == 'users' && auth()->check())
                <div class="alert alert-{{$settings->type_announcement}} announcements display-none alert-dismissible fade show" role="alert">
                    <h4 class="alert-heading"><i class="bi-megaphone me-2"></i> {{ __('admin.announcements') }}</h4>
                    <p class="update-text">{!! $settings->announcement !!}</p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" id="closeAnnouncements">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            @endif

            <h1 class="display-3 fw-bold text-white">{{ __('seo.welcome_text') }}</h1>
            <p class="col-md-8 fs-4 fw-bold text-white">{{ __('seo.welcome_subtitle') }}</p>
            <form action="{{ url('search') }}" method="get" class="position-relative">
                <i class="bi bi-search btn-search"></i>
                <input class="form-control form-control-lg ps-5 input-search-lg border-0 search-lg" type="text" name="q" autocomplete="off" placeholder="{{__('misc.search')}}" required minlength="3">
            </form>

            @if ($categoryPopular)
                <p class="mt-2 text-white linkCategoryPopular">
                    <strong>{{__('misc.popular_categories')}}</strong> {!! $categoryPopular !!}
                </p>
            @endif

        </div>
    </div>
</div>

<div class="container-fluid py-5 py-large">

    @if ($images->count() != 0)

        @if ($settings->show_images_index == 'featured' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5">
                <h3 class="m-0">{{__('misc.featured_photos')}}</h3>
                <p>{{ __('misc.featured_desc') }}</p>
            </div>

            <!-- FEATURED IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlexFeatured">
                    @foreach($featured as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('featured') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

        @if ($settings->show_images_index == 'latest' || $settings->show_images_index == 'both')
            <div class="btn-block text-center mb-5 @if ($settings->show_images_index == 'both') mt-5 @endif">
                <h3 class="m-0">{{__('misc.recent_photos')}}</h3>
                <p>{{ __('misc.latest_desc') }}</p>
            </div>

            <!-- LATEST IMAGES GRID -->
            <div class="container">
                <div class="row g-3" id="imagesFlex">
                    @foreach($images as $image)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card h-100 image-card shadow-sm">
                                <a href="{{ url('photo/' . $image->id . '/' . str_slug($image->title ?? 'photo')) }}" class="text-decoration-none">
                                    @if($image->thumbnail)
                                        <img src="{{ Storage::url(config('path.thumbnail').$image->thumbnail) }}" 
                                             class="card-img-top" 
                                             alt="{{ $image->title ?? 'Artwork' }}" 
                                             loading="lazy"
                                             style="height: 200px; object-fit: cover;">
                                    @else
                                        <div class="card-img-top d-flex align-items-center justify-content-center" 
                                             style="height: 200px; background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
                                            <div class="text-center">
                                                <i class="fas fa-image fa-2x mb-2"></i>
                                                <div class="small">{{ $image->title ?? 'No Image' }}</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="card-body">
                                        <h6 class="card-title small mb-1 text-truncate">{{ $image->title ?? 'Untitled' }}</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            @if($image->user && $image->user->avatar)
                                                <img src="{{ url('public/avatar/' . $image->user->avatar) }}" 
                                                     class="rounded-circle me-2" 
                                                     width="20" 
                                                     height="20" 
                                                     alt="{{ $image->user->name ?? 'User' }}">
                                            @else
                                                <div class="rounded-circle bg-secondary me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 20px; height: 20px; font-size: 10px; color: white;">
                                                    {{ strtoupper(substr($image->user->name ?? 'A', 0, 1)) }}
                                                </div>
                                            @endif
                                            <small class="text-muted">by {{ $image->user->name ?? 'Admin' }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            @if($image->price > 0)
                                                <span class="badge bg-primary">${{ number_format($image->price, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Free</span>
                                            @endif
                                            <small class="text-muted">
                                                <i class="fas fa-eye"></i> {{ number_format($image->views ?? 0) }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="w-100 d-block text-center mt-5">
                <a href="{{ url('latest') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                    {{ __('misc.view_all') }}
                </a>
            </div>
        @endif

    @else
        <h4 class="text-center">
            <div class="d-block w-100 display-2">
                <i class="bi bi-images"></i>
            </div>
            {{ __('misc.no_images_published') }}
        </h4>

        <div class="w-100 d-block text-center mt-3">
            <a href="{{ url('upload') }}" class="btn btn-lg btn-main rounded-pill btn-custom px-4 arrow px-5">
                {{ __('users.upload') }}
            </a>
        </div>
    @endif

    @if ($settings->google_adsense && $settings->google_ads_index == 'on' && $settings->google_adsense_index != '')
        <div class="col-md-12 mt-3">
            {!! $settings->google_adsense_index !!}
        </div>
    @endif
</div>

<!-- Add your existing sections for counters, categories etc. -->

@endsection

@section('javascript')
<script type="text/javascript">
    // Initialize flexImages for proper layout
    if (typeof $.fn.flexImages !== 'undefined') {
        $('#imagesFlex').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
        $('#imagesFlexFeatured').flexImages({ rowHeight: 320, maxRows: 8, truncate: true });
    }
</script>
@endsection