@extends('layouts.app')

@section('title', 'Image Scraper')
@section('meta_description',
    'Free online tool to extract and download all images from any webpage. Save images
    individually or as a ZIP bundle. No software installation required.')

@section('content')
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-4xl mx-auto">
            <div class="text-center space-y-4 mb-10">
                <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Image Scraper</h1>
                <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                    Instantly scrape, view, and download every image from any webpage. Grab them individually or save time
                    with a one-click ZIP bundle.
                </p>
            </div>

            <div class="bg-white/5 border border-white/10 rounded-2xl p-6 mb-8">
                <form action="{{ route('tools.image-scraper.extract') }}" method="POST">
                    @csrf
                    <!-- Honeypot -->
                    <div style="display:none;">
                        <label for="website_hp">Website</label>
                        <input type="text" name="website_hp" id="website_hp">
                    </div>

                    <div class="flex gap-4 flex-col md:flex-row">
                        <div class="flex-grow">
                            <input type="url" name="url"
                                class="w-full px-4 py-3 bg-slate-900 border border-white/10 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-slate-500"
                                placeholder="https://example.com" required
                                value="{{ session('source_url') ?? old('url') }}">
                        </div>
                        <button type="submit"
                            class="px-6 py-3 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-500 transition-colors shadow-lg shadow-blue-500/20">
                            Extract Images
                        </button>
                    </div>
                    @error('url')
                        <p class="text-red-400 mt-2 text-sm">{{ $message }}</p>
                    @enderror
                </form>
            </div>

            @if (session('images'))
                <div class="mb-8 flex flex-col sm:flex-row justify-between items-center gap-4">
                    <h2 class="text-xl font-semibold text-white">Found {{ count(session('images')) }} Images</h2>

                    @if (count(session('images')) > 0)
                        <form action="{{ route('tools.image-scraper.zip') }}" method="POST">
                            @csrf
                            <input type="hidden" name="request_id" value="{{ session('request_id') }}">
                            <button type="submit"
                                class="w-full bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold py-4 px-6 rounded-xl transition-all flex items-center justify-center gap-2 transform active:scale-95 shadow-lg shadow-amber-500/20">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                </svg>
                                <span>Download All as ZIP</span>
                            </button>
                        </form>
                    @endif
                    <a href="{{ route('tools.image-scraper.index') }}"
                        class="text-sm text-slate-400 hover:text-white underline">Extract another URL</a>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    @foreach (session('images') as $image)
                        <div
                            class="bg-white/5 border border-white/10 rounded-xl overflow-hidden hover:border-blue-500/50 transition-colors group">
                            <div
                                class="aspect-square bg-slate-900/50 flex items-center justify-center overflow-hidden relative">
                                <img src="{{ $image['url'] }}" alt="{{ $image['alt'] }}"
                                    class="object-contain w-full h-full p-2" loading="lazy"
                                    onerror="this.src='https://placehold.co/200x200?text=Image+Load+Error'">

                                <!-- Overlay -->
                                <div
                                    class="absolute inset-0 bg-slate-950/80 opacity-0 group-hover:opacity-100 transition-all duration-200 flex flex-col items-center justify-center gap-2">
                                    <a href="{{ route('tools.image-scraper.download', ['url' => $image['url']]) }}"
                                        class="px-4 py-2 bg-white text-slate-900 text-sm rounded-lg font-medium hover:bg-indigo-50 transition-colors"
                                        target="_blank">
                                        Download
                                    </a>
                                    <a href="{{ $image['url'] }}" target="_blank"
                                        class="text-xs text-slate-400 hover:text-white underline">
                                        Open Original
                                    </a>
                                </div>
                            </div>
                            <div class="p-3 text-xs text-slate-400 border-t border-white/5 bg-white/[0.02]">
                                <div class="truncate font-medium text-slate-300"
                                    title="{{ $image['alt'] ?: basename($image['url']) }}">
                                    {{ $image['alt'] ?: basename($image['url']) }}
                                </div>
                                <div class="mt-1 truncate opacity-60">{{ $image['url'] }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            <!-- Info Panel -->
            <div class="mt-16 border-t border-white/10 pt-12 space-y-8">
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h2 class="text-2xl font-bold text-white mb-4">About This Tool</h2>
                        <p class="text-slate-400 leading-relaxed mb-4">
                            The Webpage Image Extractor is a powerful utility designed for developers, designers, and
                            content creators who need to quickly gather visual assets from a website.
                        </p>
                        <p class="text-slate-400 leading-relaxed">
                            Instead of manually right-clicking and saving images one by one, simply paste a URL, and our
                            tool crawls the page to find every image tag. You can preview them in a clean grid and download
                            them individually or grab everything at once with the ZIP download feature.
                        </p>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-white mb-4">Key Features</h3>
                        <ul class="space-y-3 text-slate-400">
                            <li class="flex items-start gap-3">
                                <svg class="w-6 h-6 text-blue-500 shrink-0" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span><strong>Bulk Extraction:</strong> Scrapes all &lt;img&gt; tags from the provided
                                    URL.</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg class="w-6 h-6 text-blue-500 shrink-0" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span><strong>ZIP Download:</strong> Pack all found images into a single ZIP file for easy
                                    storage.</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <svg class="w-6 h-6 text-blue-500 shrink-0" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span><strong>Smart Normalization:</strong> Automatically converts relative URLs (e.g.,
                                    /img/logo.png) into absolute links.</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="bg-blue-500/10 border border-blue-500/20 rounded-xl p-6">
                    <h3 class="text-lg font-semibold text-blue-300 mb-2">Who is this for?</h3>
                    <p class="text-slate-400 text-sm">
                        Perfect for <strong>Web Designers</strong> creating mood boards, <strong>Developers</strong>
                        migrating content, or <strong>Marketers</strong> auditing site assets. Please ensure you have the
                        right to use the images you download.
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Related Tools --}}
    <div class="max-w-4xl mx-auto mt-8 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.metadata-remover') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Metadata
                Remover</a>
            <a href="{{ route('tools.image-watermark') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Image
                Watermark</a>
        </div>
    </div>
@endsection