@extends('layouts.main')
@section('style')
<style>
    .template-card {
        border: 1px solid rgba(229, 231, 235, 0.3);
        border-radius: 16px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        background: rgba(255, 255, 255, 0.9);
        overflow: hidden;
        box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .template-card:hover {
        border-color: rgba(79, 70, 229, 0.5);
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 25px 30px -5px rgba(79, 70, 229, 0.2), 0 15px 15px -5px rgba(79, 70, 229, 0.1);
        background: rgba(255, 255, 255, 0.95);
    }

    .template-card.selected {
        border-color: #4f46e5;
        border-width: 2px;
        background-color: #f8fafc;
        position: relative;
    }

    .template-card.selected::after {
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        background: #4f46e5;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        animation: scaleIn 0.3s ease;
    }

    .template-preview-wrapper {
        position: relative;
        width: 100%;
        padding-top: 66.67%;
        /* 3:2 Aspect Ratio */
        overflow: hidden;
        background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
        border-bottom: 1px solid rgba(229, 231, 235, 0.2);
    }

    .template-preview {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .template-card:hover .template-preview {
        transform: scale(1.05);
    }

    .template-info {
        padding: 1.75rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 250, 251, 0.8) 100%);
    }

    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 16px 24px;
        background-color: #4f46e5;
        color: white;
        border-radius: 12px;
        opacity: 0;
        visibility: hidden;
        animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
        backdrop-filter: blur(8px);
        transition: opacity 0.3s, visibility 0.3s;
    }

    .notification.show {
        opacity: 1;
        visibility: visible;
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes scaleIn {
        from {
            transform: scale(0);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }
</style>
@endsection

@section('content')
<div class="text-center mb-12">
    <h1 class="text-4xl font-bold mb-3 bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Choose Your Template</h1>
    <p class="text-gray-600 text-lg">Select a premium template to start building your e-commerce website</p>
</div>

<form method="POST" action="{{ route('website.builder.select-template') }}" id="templateForm">
    @csrf
    <div class="row mt-4">
        @foreach($templates as $template)
        <div class="col-md-3">
            <div class="template-card" onclick="selectTemplate('{{ $template['id'] }}')">
                <div class="template-preview-wrapper">
                    <img src="{{ $template['preview'] }}" alt="{{ $template['name'] }}" class="template-preview" style="width: 100%;">
                </div>
                <div class="template-info">
                    <div>
                        <h3 class="text-lg font-semibold mb-1">{{ $template['name'] }}</h3>
                        <p class="text-gray-600 text-sm">{{ $template['description'] }}</p>
                    </div>
                    <div class="mt-4">
                        <span class="text-sm font-semibold text-indigo-600">
                            Select this template
                        </span>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="bg-white/90 p-8 rounded-2xl shadow-lg mb-8 backdrop-blur-sm border border-gray-100">
        <div class="mb-4">
            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Website Name</label>
            <input type="text" name="name" id="name" class="form-control" required
                placeholder="Enter your website name">
        </div>
        <input type="hidden" name="template_type" id="template_type" required>
    </div>

    <div class="text-center">
        <button type="submit" class="btn btn-primary px-10 py-4 text-lg font-semibold rounded-xl shadow-lg transition-all duration-300 hover:shadow-indigo-500/25" id="submitBtn" disabled>
            Continue to Customization
        </button>
    </div>
</form>

<!-- Add notification element -->
<div id="notification" class="notification"></div>

@endsection

@section('script')
<script>
    function selectTemplate(templateId) {
        document.querySelectorAll('.template-card').forEach(card => {
            card.classList.remove('selected');
        });
        const selectedCard = event.currentTarget;
        selectedCard.classList.add('selected');
        document.getElementById('template_type').value = templateId;
        document.getElementById('submitBtn').disabled = false;

        // Show notification
        const templateName = selectedCard.querySelector('h3').textContent;
        const notification = document.getElementById('notification');
        notification.textContent = `You selected: ${templateName}`;
        notification.classList.add('show');

        // Hide notification after 3 seconds
        setTimeout(() => {
            notification.classList.remove('show');
        }, 3000);
    }
</script>
@endsection