@extends('layouts.app')

@section('meta')
    <meta name="description" content="Free Download {{$wallpaper->title}}, iPhone {{ $wallpaper->category->name }} wallpaper in high-quality 4K resolution.">

    <title>{{ config('app.name', 'Walldrops') }} | iPhone {{ $wallpaper->category->name }} Wallpapers - {{ $wallpaper->title }}</title>

    <!-- Open Graph meta tags -->
    <meta property="og:title" content="{{ config('app.name', 'Walldrops') }} | {{ $wallpaper->category->name }} - {{ $wallpaper->title }}">
    <meta property="og:description" content="Download {{$wallpaper->title}}, {{ $wallpaper->category->name }} wallpaper in high-quality 4K resolution for free.">
    <meta property="og:image" content="{{ $wallpaper->thumbnail }}">
    <meta property="og:url" content="https://walldrops.io/{{ \Request::path() }}">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="en_US">

    <link rel="canonical" href="https://walldrops.io/{{ \Request::path() }}" />
@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":"ListItem",
                        "position":2,
                        "name":"{{ $wallpaper->title }}",
                        "item":"https://walldrops.io/{{ \Request::path() }}"
                        }
                    ]
                },
                {
                    "@type":"WebSite",
                    "@id":"https://walldrops.io/#website",
                    "url":"https://walldrops.io/",
                    "name":"Walldrops",
                    "description":"Discover a stunning collection of free iphone {{ $wallpaper->category->name }} wallpapers",
                    "publisher":{
                        "@id":"https://walldrops.io/#organization"
                    },
                    "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="bg-gray200 pt-5 pb-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-7">
                    <article class="card no-aspect">
                        <img class="card-img-top mb-2" src="{{ $wallpaper->thumbnail }}" alt="{{ $wallpaper->title }}">
                        
                        <div class="card-body">
                            <h1 class="card-title display-4 text-left">{{ $wallpaper->title }} <span>(<span class="downloads">{{ $wallpaper->downloads }}</span> downloads)</span></h1>
                            
                            <p>
                                {{ $wallpaper->description }}
                            </p>

                            <button type="button" class="btn btn-warning" id="downloadButton">
                                Download Wallpaper
                            </button>

                            <br/>
                            <br/>

                            <div class="d-flex tags">
                                @foreach (explode(',', $wallpaper->tags) as $tag)
                                    <small class="d-block">
                                        <a class="btn btn-sm btn-gray200" href="#{{ $tag }}">{{ $tag }}</a>
                                    </small>
                                @endforeach
                                
                                <small class="d-block">
                                    <a class="btn btn-sm btn-gray200" href="#iphone {{ $wallpaper->category->name }} wallpaper">iphone {{ $wallpaper->category->name }} wallpaper</a>
                                </small>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>

        <div class="container-fluid mt-5">
            <div class="row">
                <h5 class="font-weight-bold">Similar Wallpapers</h5>
                <div class="card-columns">
                    @foreach ($similarWallpapers as $similarWallpaper)
                        <div class="card card-pin">
                            <img class="card-img" src="{{ $similarWallpaper->thumbnail }}" alt="{{ $similarWallpaper->title }}">

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

    <div class="modal fade" id="downloadModal" tabindex="-1" role="dialog" aria-labelledby="downloadModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="downloadModalLabel">Download Walldrops App</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fa fa-close" aria-hidden="true"></i></span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img src="{{ asset('assets/img/app_preview.jpg') }}" alt="Wallpaper Preview" class="img-fluid rounded mb-3">

                    <img src="{{ asset('assets/img/loader.svg') }}" class="loader download-indicator" alt="Loading Indicator" />

                    <p class="download-indicator">
                        Your file is being downloading!
                    </p>

                    <p class="text-left">
                        Access thousands of exclusive wallpapers, <strong>without ads or interruptions!</strong>
                        Download our app today for the ultimate experience.
                    </p>
                    <div class="mt-3 d-flex app-links">
                        <a href="https://play.google.com/store/apps/details?id=com.walldrops.walldrops" target="_blank">
                            <img src="{{ asset('assets/img/google-play.svg') }}" alt="Walldrops Google Play Link" />
                        </a>

                        <a href="https://apps.apple.com/us/app/walldrops-4k-wallpapers/id6472579040" target="_blank">
                            <img src="{{ asset('assets/img/appstore.svg') }}" alt="Walldrops App Store Link" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-js')
    <script>
        document.getElementById('downloadButton').addEventListener('click', function () {
            $('#downloadModal').modal('show');

            const imageUrl = '{{ $wallpaper->original_file }}';
            const downloadUrl = '{{ route("download", ["id" => $wallpaper->id]) }}';
            const fileName = '{{ str_replace(" ", "-", strtolower($wallpaper->title)) }}.jpg';

            const downloads = {{ $wallpaper->downloads + 1 }}

            $('.downloads').text(downloads)

            fetch(downloadUrl)

            fetch(imageUrl)
            .then(response => response.blob())
            .then(blob => {
                const blobUrl = URL.createObjectURL(blob);

                const anchor = document.createElement('a');
                anchor.href = blobUrl;
                anchor.download = fileName;
                document.body.appendChild(anchor);
                anchor.click();
                document.body.removeChild(anchor);

                URL.revokeObjectURL(blobUrl);

                $('.download-indicator').hide()
            })
            .catch(error => {
                console.error('Error downloading the image:', error);
                alert('Failed to download the image.');
            });
        });
    </script>
@endsection