@extends('layouts.app')

@section('title', 'Website Templates - BlueSmokeAI')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Website Templates') }}
    </h2>
@endsection

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Templates Header -->
        <div class="text-center mb-12">
            <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                Choose a Template for Your Website
            </h2>
            <p class="mt-4 text-xl text-gray-600">
                Start with a professionally designed template and customize it to fit your brand.
            </p>
        </div>

        <!-- Category Filter -->
        <div class="flex justify-center mb-8">
            <div class="relative bg-gray-100 p-1 rounded-lg inline-flex">
                <button type="button" id="all-templates" class="relative px-4 py-2 rounded-md text-sm font-medium text-gray-900 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white shadow-sm" aria-current="page">
                    All Templates
                </button>
                <button type="button" id="business-templates" class="ml-1 px-4 py-2 rounded-md text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    Business
                </button>
                <button type="button" id="portfolio-templates" class="ml-1 px-4 py-2 rounded-md text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    Portfolio
                </button>
                <button type="button" id="ecommerce-templates" class="ml-1 px-4 py-2 rounded-md text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    E-Commerce
                </button>
                <button type="button" id="blog-templates" class="ml-1 px-4 py-2 rounded-md text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    Blog
                </button>
            </div>
        </div>

        <!-- Templates Grid -->
        <div class="mt-12 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
            <!-- Business Template 1 -->
            <div class="group relative">
                <div class="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden bg-gray-100">
                    <img src="{{ asset('images/templates/business-1.jpg') }}" alt="Business Template 1" class="object-cover object-center">
                    <div class="flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true">
                        <div class="w-full bg-white bg-opacity-75 backdrop-filter backdrop-blur py-2 px-4 rounded-md text-sm font-medium text-gray-900 text-center">
                            Preview
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
                    <h3>Corporate Pro</h3>
                    <p>Business</p>
                </div>
                <p class="mt-1 text-sm text-gray-500">Professional template for corporate websites with modern design.</p>
                <div class="mt-4">
                    <a href="{{ route('websites.create', ['template' => 'business-1']) }}" class="relative flex bg-indigo-600 border border-transparent rounded-md py-2 px-8 items-center justify-center text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full">
                        Use This Template
                    </a>
                </div>
            </div>

            <!-- Portfolio Template 1 -->
            <div class="group relative">
                <div class="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden bg-gray-100">
                    <img src="{{ asset('images/templates/portfolio-1.jpg') }}" alt="Portfolio Template 1" class="object-cover object-center">
                    <div class="flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true">
                        <div class="w-full bg-white bg-opacity-75 backdrop-filter backdrop-blur py-2 px-4 rounded-md text-sm font-medium text-gray-900 text-center">
                            Preview
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
                    <h3>Creative Portfolio</h3>
                    <p>Portfolio</p>
                </div>
                <p class="mt-1 text-sm text-gray-500">Showcase your work with this elegant and minimal portfolio template.</p>
                <div class="mt-4">
                    <a href="{{ route('websites.create', ['template' => 'portfolio-1']) }}" class="relative flex bg-indigo-600 border border-transparent rounded-md py-2 px-8 items-center justify-center text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full">
                        Use This Template
                    </a>
                </div>
            </div>

            <!-- E-Commerce Template 1 -->
            <div class="group relative">
                <div class="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden bg-gray-100">
                    <img src="{{ asset('images/templates/ecommerce-1.jpg') }}" alt="E-Commerce Template 1" class="object-cover object-center">
                    <div class="flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true">
                        <div class="w-full bg-white bg-opacity-75 backdrop-filter backdrop-blur py-2 px-4 rounded-md text-sm font-medium text-gray-900 text-center">
                            Preview
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
                    <h3>Shop Modern</h3>
                    <p>E-Commerce</p>
                </div>
                <p class="mt-1 text-sm text-gray-500">Complete e-commerce solution with product listings and checkout.</p>
                <div class="mt-4">
                    <a href="{{ route('websites.create', ['template' => 'ecommerce-1']) }}" class="relative flex bg-indigo-600 border border-transparent rounded-md py-2 px-8 items-center justify-center text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full">
                        Use This Template
                    </a>
                </div>
            </div>

            <!-- Blog Template 1 -->
            <div class="group relative">
                <div class="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden bg-gray-100">
                    <img src="{{ asset('images/templates/blog-1.jpg') }}" alt="Blog Template 1" class="object-cover object-center">
                    <div class="flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true">
                        <div class="w-full bg-white bg-opacity-75 backdrop-filter backdrop-blur py-2 px-4 rounded-md text-sm font-medium text-gray-900 text-center">
                            Preview
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
                    <h3>Content First</h3>
                    <p>Blog</p>
                </div>
                <p class="mt-1 text-sm text-gray-500">Clean and readable blog template focused on content delivery.</p>
                <div class="mt-4">
                    <a href="{{ route('websites.create', ['template' => 'blog-1']) }}" class="relative flex bg-indigo-600 border border-transparent rounded-md py-2 px-8 items-center justify-center text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full">
                        Use This Template
                    </a>
                </div>
            </div>

            <!-- Business Template 2 -->
            <div class="group relative">
                <div class="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden bg-gray-100">
                    <img src="{{ asset('images/templates/business-2.jpg') }}" alt="Business Template 2" class="object-cover object-center">
                    <div class="flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true">
                        <div class="w-full bg-white bg-opacity-75 backdrop-filter backdrop-blur py-2 px-4 rounded-md text-sm font-medium text-gray-900 text-center">
                            Preview
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
                    <h3>Startup Launch</h3>
                    <p>Business</p>
                </div>
                <p class="mt-1 text-sm text-gray-500">Dynamic template for startups with focus on conversion.</p>
                <div class="mt-4">
                    <a href="{{ route('websites.create', ['template' => 'business-2']) }}" class="relative flex bg-indigo-600 border border-transparent rounded-md py-2 px-8 items-center justify-center text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full">
                        Use This Template
                    </a>
                </div>
            </div>

            <!-- Portfolio Template 2 -->
            <div class="group relative">
                <div class="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden bg-gray-100">
                    <img src="{{ asset('images/templates/portfolio-2.jpg') }}" alt="Portfolio Template 2" class="object-cover object-center">
                    <div class="flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true">
                        <div class="w-full bg-white bg-opacity-75 backdrop-filter backdrop-blur py-2 px-4 rounded-md text-sm font-medium text-gray-900 text-center">
                            Preview
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
                    <h3>Artist Showcase</h3>
                    <p>Portfolio</p>
                </div>
                <p class="mt-1 text-sm text-gray-500">Bold and artistic template for creatives to showcase their work.</p>
                <div class="mt-4">
                    <a href="{{ route('websites.create', ['template' => 'portfolio-2']) }}" class="relative flex bg-indigo-600 border border-transparent rounded-md py-2 px-8 items-center justify-center text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full">
                        Use This Template
                    </a>
                </div>
            </div>
        </div>

        <!-- Custom Website Option -->
        <div class="mt-16 bg-gray-50 rounded-lg p-8 text-center">
            <h3 class="text-2xl font-bold text-gray-900">Need a Custom Website?</h3>
            <p class="mt-4 text-lg text-gray-600">Start from scratch and build your website exactly how you want it.</p>
            <div class="mt-6">
                <a href="{{ route('websites.create') }}" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Create Custom Website
                </a>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Template filtering functionality
    document.addEventListener('DOMContentLoaded', function() {
        const filterButtons = {
            'all-templates': null,
            'business-templates': 'Business',
            'portfolio-templates': 'Portfolio',
            'ecommerce-templates': 'E-Commerce',
            'blog-templates': 'Blog'
        };

        const templates = document.querySelectorAll('.group.relative');
        
        Object.entries(filterButtons).forEach(([buttonId, category]) => {
            const button = document.getElementById(buttonId);
            
            button.addEventListener('click', function() {
                // Update active button styling
                Object.keys(filterButtons).forEach(id => {
                    const btn = document.getElementById(id);
                    if (id === buttonId) {
                        btn.classList.add('bg-white', 'shadow-sm', 'text-gray-900');
                        btn.classList.remove('text-gray-700');
                    } else {
                        btn.classList.remove('bg-white', 'shadow-sm', 'text-gray-900');
                        btn.classList.add('text-gray-700');
                    }
                });
                
                // Filter templates
                templates.forEach(template => {
                    const templateCategory = template.dataset.category;
                    
                    if (category === null || templateCategory === category) {
                        template.classList.remove('hidden');
                    } else {
                        template.classList.add('hidden');
                    }
                });
            });
        });
        
        // Toggle between monthly and annual pricing
        const monthlyToggle = document.getElementById('monthly-toggle');
        const annualToggle = document.getElementById('annual-toggle');
        
        if (monthlyToggle && annualToggle) {
            monthlyToggle.addEventListener('click', function() {
                document.querySelectorAll('[id$="-price-monthly"]').forEach(el => el.classList.remove('hidden'));
                document.querySelectorAll('[id$="-price-annual"]').forEach(el => el.classList.add('hidden'));
                monthlyToggle.classList.add('bg-white', 'shadow-sm', 'text-gray-900');
                monthlyToggle.classList.remove('text-gray-700');
                annualToggle.classList.remove('bg-white', 'shadow-sm', 'text-gray-900');
                annualToggle.classList.add('text-gray-700');
            });
            
            annualToggle.addEventListener('click', function() {
                document.querySelectorAll('[id$="-price-monthly"]').forEach(el => el.classList.add('hidden'));
                document.querySelectorAll('[id$="-price-annual"]').forEach(el => el.classList.remove('hidden'));
                annualToggle.classList.add('bg-white', 'shadow-sm', 'text-gray-900');
                annualToggle.classList.remove('text-gray-700');
                monthlyToggle.classList.remove('bg-white', 'shadow-sm', 'text-gray-900');
                monthlyToggle.classList.add('text-gray-700');
            });
        }
    });
</script>
@endpush