{{-- resources/views/admin/themes/exporter.blade.php --}}
@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Theme Exporter</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ route('admin.themes.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Themes
        </a>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Generate New Theme from Website</h5>
            </div>
            <div class="card-body">
                <p class="text-muted">
                    This tool allows you to generate a new theme template from an existing website.
                    Select a "Source Website" that you have already designed. All of its pages and global sections
                    (Header/Footer) will be saved as JSON files into a new theme folder.
                </p>

                <form action="{{ route('admin.themes.generate') }}" method="POST" onsubmit="return confirm('Are you sure you want to generate this theme? This may overwrite existing files if the theme slug already exists.')">
                    @csrf

                    <div class="mb-3">
                        <label for="source_website_id" class="form-label">1. Select Source Website</label>
                        <select class="form-select" id="source_website_id" name="source_website_id" required>
                            <option value="" disabled selected>Choose a website to export from...</option>
                            @foreach($websites as $website)
                                <option value="{{ $website->id }}">{{ $website->name }} ({{ $website->domain }})</option>
                            @endforeach
                        </select>
                        <div class="form-text">This website's pages and global sections will be used as the templates.</div>
                    </div>

                    <div class="mb-3">
                        <label for="theme_name" class="form-label">2. New Theme Name</label>
                        <input type="text" class="form-control" id="theme_name" name="theme_name" placeholder="e.g., Modern Business" required>
                        <div class="form-text">The user-friendly name that will appear in the theme list.</div>
                    </div>

                    <div class="mb-3">
                        <label for="theme_slug" class="form-label">3. New Theme Slug</label>
                        <input type="text" class="form-control" id="theme_slug" name="theme_slug" placeholder="e.g., modern-business" required>
                        <div class="form-text">A unique, URL-friendly identifier. Use lowercase letters, numbers, and dashes only.</div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-gear-wide-connected me-2"></i>Generate Theme Files
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // Simple script to auto-generate the slug from the theme name
    document.getElementById('theme_name').addEventListener('input', function(e) {
        const themeName = e.target.value;
        const themeSlug = themeName.toLowerCase()
            .replace(/\s+/g, '-')       // Replace spaces with -
            .replace(/[^\w\-]+/g, '')   // Remove all non-word chars
            .replace(/\-\-+/g, '-')     // Replace multiple - with single -
            .replace(/^-+/, '')         // Trim - from start of text
            .replace(/-+$/, '');        // Trim - from end of text
        document.getElementById('theme_slug').value = themeSlug;
    });
</script>
@endsection