@extends('layouts.app')

@section('meta')
    @if (!isset($activeCategory))
        <meta name="description" content="Explore stunning free 4K iPhone wallpapers: nature, flowers, abstract, black, anime, animals & more. Refresh your screen with breathtaking visuals! Download now!">
        
        <!-- Open Graph meta tags -->
        <meta property="og:title" content="Stunning 4K Wallpapers | Free Downloads for Every Screen">
        <meta property="og:description" content="Explore a vast collection of breathtaking wallpapers, including nature, anime, abstract, black, flowers, space, and animals. Download high-quality 4K wallpapers for free and refresh your screen today!">
        <meta property="og:image" content="https://walldrops.io/assets/img/app_preview.jpg">
        <meta property="og:url" content="https://walldrops.io">
        <meta property="og:type" content="website">
        <meta property="og:locale" content="en_US">
        
        <title>{{ config('app.name', 'Walldrops') }} | 4K Wallpapers</title>
        <link rel="canonical" href="https://walldrops.io/" />
    @else
        <meta name="description" content="Explore iphone {{$activeCategory}} wallpapers in stunning 4K! Discover vibrant designs & Find the perfect {{$activeCategory}} wallpaper for iphone. Download free!">
        
        <!-- Open Graph meta tags -->
        <meta property="og:title" content="{{ config('app.name', 'Walldrops') }} | 4K {{$activeCategory}} Wallpapers">
        <meta property="og:description" content="Explore {{$activeCategory}} wallpapers in stunning 4K! Discover vibrant designs & Find the perfect {{$activeCategory}} wallpaper. Download free!">
        <meta property="og:image" content="https://walldrops.io/assets/img/app_preview.jpg">
        <meta property="og:url" content="https://walldrops.io/{{ \Request::path() }}">
        <meta property="og:type" content="website">
        <meta property="og:locale" content="en_US">
        
        <title>{{ config('app.name', 'Walldrops') }} | iPhone {{$activeCategory}} Wallpapers</title>
        <link rel="canonical" href="https://walldrops.io/{{ \Request::path() }}" />
    @endif
@endsection

@section('structure')
    <script type="application/ld+json">
        {
            "@context":"https://schema.org",
            "@graph": [
                {
                    "@type":"WebPage",
                    "@id":"https://walldrops.io/",
                    "url":"https://walldrops.io/",
                    "name":"4K Wallpapers - Walldrops",
                    "isPartOf":{
                        "@id":"https://walldrops.io/#website"
                    },
                    "primaryImageOfPage":{
                        "@id":"https://walldrops.io/#primaryimage"
                    },
                    "image":{
                        "@id":"https://walldrops.io/#primaryimage"
                    },
                    "thumbnailUrl":"https://walldrops.io/assets/img/app_preview.jpg",
                    "datePublished":"2024-12-23T14:08:31+00:00",
                    "dateModified":"2024-12-23T14:08:31+00:00",
                    "breadcrumb":{
                        "@id":"https://walldrops.io/#breadcrumb"
                    },
                    "inLanguage":"en-US",
                    "potentialAction":[
                        {
                        "@type":"ReadAction",
                        "target":[
                            "https://walldrops.io/"
                        ]
                        }
                    ]
                },
                {
                    "@type":"ImageObject",
                    "inLanguage":"en-US",
                    "@id":"https://walldrops.io/#primaryimage",
                    "url":"https://walldrops.io/assets/img/app_preview.jpg",
                    "contentUrl":"https://walldrops.io/assets/img/app_preview.jpg",
                    "width":1200,
                    "height":630,
                    "caption":"Walldrops"
                },
                {
                    "@type":"BreadcrumbList",
                    "@id":"https://walldrops.io/#breadcrumb",
                    "itemListElement":[
                        {
                        "@type":"ListItem",
                        "position":1,
                        "name":"Home",
                        "item":"https://walldrops.io"
                        }
                    ]
                },
                {
                    "@type":"WebSite",
                    "@id":"https://walldrops.io/#website",
                    "url":"https://walldrops.io/",
                    "name":"Walldrops",
                    "description":"Discover a stunning collection of free black wallpapers",
                    "publisher":{
                        "@id":"https://walldrops.io/#organization"
                    },
                    "potentialAction":[
                        {
                        "@type":"SearchAction",
                        "target":{
                            "@type":"EntryPoint",
                            "urlTemplate":"https://walldrops.io/?page={page}"
                        },
                        "query-input": [
                            {
                                "@type": "PropertyValueSpecification",
                                "valueRequired": true,
                                "valuePattern": "^[0-9]+$",
                                "valueName": "page",
                                "defaultValue": "1"
                            }
                        ]
                        }
                    ],
                    "inLanguage":"en-US"
                },
                {
                    "@type":"ImageObject",
                    "inLanguage":"en-US",
                    "@id":"https://walldrops.io/#local-main-organization-logo",
                    "url":"https://walldrops.io/assets/img/walldrops-logo.png",
                    "contentUrl":"https://walldrops.io/assets/img/walldrops-logo.png",
                    "width":5293,
                    "height":1430,
                    "caption":"Walldrops"
                }
            ]
        }
    </script>
@endsection

@section('content')
    <section class="mt-4 mb-5">
        <div class="container mb-4">
            <h1 class="font-weight-bold title">{{ isset($activeCategory) ? $activeCategory : 'Explore' }} Wallpapers</h1>
            <div class="row">
                <nav class="navbar navbar-expand navbar-light pl-2 pr-2 overflow-x-auto">
                    <ul class="navbar-nav">
                        @foreach ($categories as $category)
                            <li class="nav-item">
                                <a class="nav-link @if ($activeId == $category->id)active @endif" href="{{ route('category.wallpaper', ['category' => strtolower($category->name), 'id' => $category->id]) }}">{{ $category->name }}</a>
                            </li>
                        @endforeach
                    </ul>
                </nav>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="card-columns">
                    @foreach ($wallpapers as $wallpaper)
                        <div class="card card-pin">
                            <img class="card-img" src="{{ $wallpaper->thumbnail }}" alt="{{ $wallpaper->title }}">

                            <!--<div class="overlay" onclick="window.location.href='{{ route('view', ['category' => strtolower($wallpaper->category->name), 'title' => str_replace(' ', '-', strtolower($wallpaper->title)), 'id' => $wallpaper->id]) }}'">-->
                            <a class="overlay" href="{{ route('view', ['category' => strtolower($wallpaper->category->name), 'title' => str_replace(' ', '-', strtolower($wallpaper->title)), 'id' => $wallpaper->id]) }}">
                                <h2 class="card-title title">{{ $wallpaper->title }}</h2>
                                
                                <div class="more">
                                    <i class="fa fa-download" aria-hidden="true"></i> Downloads ({{ $wallpaper->downloads }})
                                </div>
                            </a>
                            <!--</div>-->
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center mt-4">
            {{ $wallpapers->links() }}
        </div>
    </section>
@endsection