@extends('layouts.app')

@section('title', 'Customize Template')

@section('content')
<!-- Hero Section -->
<section class="hero-section bg-gradient-primary text-white py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="hero-content">
                    <h1 class="hero-title display-4 fw-bold mb-4">Customize your resume style</h1>
                    <p class="hero-subtitle fs-5 mb-4 opacity-90">Choose colors, font, header style and density. Instantly preview your changes and continue to fill your details.</p>
                    <div class="hero-actions">
                        <a href="#customize" class="btn btn-light btn-lg me-3">
                            <i class="bi bi-palette me-2"></i>Start Customizing
                        </a>
                        <a href="{{ route('templates.index') }}" class="btn btn-outline-light btn-lg">
                            <i class="bi bi-arrow-left me-2"></i>Back to Templates
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Customize Section -->
<section id="customize" class="py-5">
    <div class="container">
        <div class="row mb-5">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h1 class="display-6 fw-bold mb-2">Customize: {{ $template->name ?? 'Template' }}</h1>
                        <p class="text-muted fs-5">{{ $template->description ?? 'Professional resume template' }}</p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('templates.index') }}" class="btn btn-outline-secondary btn-lg">
                            <i class="bi bi-arrow-left me-2"></i>Back
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <!-- Customization Options -->
            <div class="col-lg-7">
                <div class="card shadow-sm border-0 rounded-3 options-sticky">
                    <div class="card-body p-4">
                        <div class="row">
                            <!-- Color Presets -->
                            <div class="col-md-7">
                                <h5 class="fw-bold mb-3">
                                    <i class="bi bi-palette me-2"></i>Color Presets
                                </h5>
                                <div class="color-grid">
                                    @foreach($colors as $color)
                                        <div class="color-option" data-color="{{ $color }}" onclick="selectColor('{{ $color }}')">
                                            <div class="color-preview {{ $color }}-theme"></div>
                                            <span class="color-label">{{ ucfirst($color) }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            
                            <!-- Custom Options -->
                            <div class="col-md-5">
                                <h5 class="fw-bold mb-3">
                                    <i class="bi bi-sliders me-2"></i>Custom Options
                                </h5>
                                
                                <!-- Custom Colors -->
                                <div class="mb-4">
                                    <label class="form-label fw-semibold">Primary Color</label>
                                    <input type="color" id="primaryColor" class="form-control form-control-color w-100" value="#3b82f6" onchange="updateCustomColors()">
                                </div>
                                <div class="mb-4">
                                    <label class="form-label fw-semibold">Secondary Color</label>
                                    <input type="color" id="secondaryColor" class="form-control form-control-color w-100" value="#1d4ed8" onchange="updateCustomColors()">
                                </div>
                                
                                <hr class="my-4">
                                
                                <!-- Font Selection -->
                                <div class="mb-4">
                                    <label class="form-label fw-semibold">Font Family</label>
                                    <select id="fontSelect" class="form-select" onchange="updatePreview()">
                                        <option value="inter" selected>Inter (Modern)</option>
                                        <option value="georgia">Georgia (Classic)</option>
                                        <option value="roboto">Roboto (Clean)</option>
                                        <option value="nunito">Nunito (Friendly)</option>
                                    </select>
                                </div>
                                
                                <!-- Header Style -->
                                <div class="mb-4">
                                    <label class="form-label fw-semibold">Header Style</label>
                                    <div class="d-flex flex-column gap-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="headerStyle" id="headerGradient" value="gradient" checked onchange="updatePreview()">
                                            <label class="form-check-label" for="headerGradient">
                                                <i class="bi bi-palette me-1"></i>Gradient
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="headerStyle" id="headerSolid" value="solid" onchange="updatePreview()">
                                            <label class="form-check-label" for="headerSolid">
                                                <i class="bi bi-square-fill me-1"></i>Solid
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="headerStyle" id="headerMinimal" value="minimal" onchange="updatePreview()">
                                            <label class="form-check-label" for="headerMinimal">
                                                <i class="bi bi-dash me-1"></i>Minimal
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Density -->
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Density</label>
                                    <select id="densitySelect" class="form-select" onchange="updatePreview()">
                                        <option value="comfortable" selected>Comfortable</option>
                                        <option value="cozy">Cozy</option>
                                        <option value="compact">Compact</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Live Preview -->
            <div class="col-lg-5">
                <div class="card shadow-sm border-0 rounded-3 preview-sticky">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-3">
                            <i class="bi bi-eye me-2"></i>Live Preview
                        </h5>
                        <div id="colorPreview" class="preview-card {{ strtolower($template->category ?? 'modern') }}-preview">
                            <div class="preview-header">
                                <h6>John Doe</h6>
                                <p>Software Engineer</p>
                            </div>
                            <div class="preview-body">
                                <div class="preview-section">
                                    <h6>Experience</h6>
                                    <p>Senior Developer - Tech Corp</p>
                                </div>
                                <div class="preview-section">
                                    <h6>Education</h6>
                                    <p>BSc Computer Science</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Features Section -->
        <div class="row mt-5">
            <div class="col-12">
                <div class="features-section">
                    <div class="section-header text-center mb-5">
                        <h2 class="display-5 fw-bold">Make it yours</h2>
                        <p class="fs-5 text-muted">Fine-tune typography, density and header style to reflect your personality while staying professional.</p>
                    </div>
                    <div class="row g-4">
                        <div class="col-md-4">
                            <div class="feature-card text-center">
                                <div class="feature-icon mb-3">
                                    <i class="bi bi-type fs-1 text-primary"></i>
                                </div>
                                <h4 class="fw-bold mb-3">Readable Fonts</h4>
                                <p class="text-muted">Pick modern, classic, or clean fonts tuned for screen and print.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-card text-center">
                                <div class="feature-icon mb-3">
                                    <i class="bi bi-palette2 fs-1 text-primary"></i>
                                </div>
                                <h4 class="fw-bold mb-3">Color Presets</h4>
                                <p class="text-muted">Choose a vibrant palette or create a custom gradient in seconds.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-card text-center">
                                <div class="feature-icon mb-3">
                                    <i class="bi bi-layout-text-window fs-1 text-primary"></i>
                                </div>
                                <h4 class="fw-bold mb-3">Header Styles</h4>
                                <p class="text-muted">Solid, gradient, or minimal—set the tone for your resume.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Continue Button -->
                <div class="text-center mt-5">
                    <a id="continueBtn" href="{{ route('resume.build', $template->id ?? $template) }}?color=blue" class="btn btn-primary btn-lg">
                        <i class="bi bi-arrow-right me-2"></i>Continue to Details
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
/* Hero Section */
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Sticky Layout */
.options-sticky {
    position: sticky;
    top: 92px;
    z-index: 2;
}

.preview-sticky {
    position: sticky;
    top: 92px;
}

/* Color Grid */
.color-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.color-option {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.color-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #0d6efd;
}

.color-option.selected {
    border-color: #0d6efd;
    background-color: #f8f9ff;
    box-shadow: 0 10px 30px rgba(13, 110, 253, 0.15);
}

.color-preview {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.color-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
}

/* Color Themes */
.blue-theme { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.green-theme { background: linear-gradient(135deg, #10b981, #059669); }
.purple-theme { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.red-theme { background: linear-gradient(135deg, #ef4444, #dc2626); }
.orange-theme { background: linear-gradient(135deg, #f97316, #ea580c); }
.teal-theme { background: linear-gradient(135deg, #14b8a6, #0d9488); }

/* Preview Card */
.preview-card {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.preview-header {
    padding: 1rem;
    color: white;
    text-align: center;
    transition: all 0.3s ease;
}

.preview-header h6 {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

.preview-header p {
    margin: 0.25rem 0 0 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.preview-body {
    padding: 1rem;
}

.preview-section h6 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-section p {
    font-size: 0.75rem;
    margin: 0;
    color: #6c757d;
}

/* Template Preview Styles */
.modern-preview .preview-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.classic-preview .preview-header { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); }
.minimal-preview .preview-header { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); color: #495057 !important; }
.creative-preview .preview-header { background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); }
.executive-preview .preview-header { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); }

/* Header style variants applied by JS */
.header-style-gradient .preview-header {
    color: #ffffff !important;
}
.header-style-solid .preview-header {
    color: #ffffff !important;
}
.header-style-minimal .preview-header {
    background: #f8f9fa !important;
    color: #495057 !important;
    border-bottom: 1px solid #e9ecef;
}

/* Feature Cards */
.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Form Controls */
.form-control-color {
    height: 50px;
    border-radius: 10px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.form-control-color:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-select {
    border-radius: 10px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Buttons */
.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0b5ed7, #5a32a3);
}

/* Responsive */
@media (max-width: 768px) {
    .color-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-actions .btn {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .color-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
</style>
@endpush

@push('scripts')
<script>
let selectedColor = 'blue';

// Color selection
function selectColor(color) {
    selectedColor = color;
    
    // Update color options
    document.querySelectorAll('.color-option').forEach(option => {
        option.classList.remove('selected');
    });
    
    const selectedOption = document.querySelector(`[data-color="${color}"]`);
    if (selectedOption) {
        selectedOption.classList.add('selected');
    }
    
    // Update preview
    updatePreview();
    
    // Update continue button URL
    updateContinueButton();
}

// Update custom colors
function updateCustomColors() {
    const primaryColor = document.getElementById('primaryColor').value;
    const secondaryColor = document.getElementById('secondaryColor').value;
    
    // Update preview with custom colors
    updatePreview(primaryColor, secondaryColor);
    
    // Update continue button URL
    updateContinueButton();
}

// Update preview
function updatePreview(primary = null, secondary = null) {
    const preview = document.getElementById('colorPreview');
    const header = preview.querySelector('.preview-header');
    const headerStyle = document.querySelector('input[name="headerStyle"]:checked')?.value || 'gradient';
    
    // Reset class modifiers
    preview.classList.remove('header-style-gradient', 'header-style-solid', 'header-style-minimal');

    // Determine gradient string
    const gradients = {
        blue: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
        green: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
        purple: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
        red: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
        orange: 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)',
        teal: 'linear-gradient(135deg, #14b8a6 0%, #0d9488 100%)'
    };

    const gradientValue = primary && secondary
        ? `linear-gradient(135deg, ${primary} 0%, ${secondary} 100%)`
        : (gradients[selectedColor] || gradients.blue);

    // Apply header style
    if (headerStyle === 'minimal') {
        preview.classList.add('header-style-minimal');
        header.style.background = '#f8f9fa';
        header.style.color = '#495057';
    } else if (headerStyle === 'solid') {
        const solidColor = primary || (gradientValue.match(/#([0-9a-fA-F]{6})/)?.[0]) || '#3b82f6';
        preview.classList.add('header-style-solid');
        header.style.background = solidColor;
        header.style.color = '#ffffff';
    } else {
        // gradient
        preview.classList.add('header-style-gradient');
        header.style.background = gradientValue;
        header.style.color = '#ffffff';
    }
    
    // Update font
    const fontSelect = document.getElementById('fontSelect');
    if (fontSelect) {
        preview.style.fontFamily = getFontFamily(fontSelect.value);
    }
    
    // Update density
    const densitySelect = document.getElementById('densitySelect');
    if (densitySelect) {
        updateDensity(densitySelect.value);
    }
}

// Get font family
function getFontFamily(font) {
    const fonts = {
        inter: '"Inter", sans-serif',
        georgia: 'Georgia, serif',
        roboto: '"Roboto", sans-serif',
        nunito: '"Nunito", sans-serif'
    };
    return fonts[font] || fonts.inter;
}

// Update density
function updateDensity(density) {
    const preview = document.getElementById('colorPreview');
    const densities = {
        comfortable: { padding: '1rem', fontSize: '1rem' },
        cozy: { padding: '0.75rem', fontSize: '0.9rem' },
        compact: { padding: '0.5rem', fontSize: '0.8rem' }
    };
    
    const style = densities[density] || densities.comfortable;
    preview.style.padding = style.padding;
    preview.style.fontSize = style.fontSize;
}

// Update continue button URL
function updateContinueButton() {
    const continueBtn = document.getElementById('continueBtn');
    const baseUrl = continueBtn.href.split('?')[0];
    const primaryColor = document.getElementById('primaryColor').value;
    const secondaryColor = document.getElementById('secondaryColor').value;
    const font = document.getElementById('fontSelect').value;
    const headerStyle = document.querySelector('input[name="headerStyle"]:checked').value;
    const density = document.getElementById('densitySelect').value;
    
    const params = new URLSearchParams({
        color: selectedColor,
        primary: primaryColor,
        secondary: secondaryColor,
        font: font,
        header: headerStyle,
        density: density
    });
    
    continueBtn.href = `${baseUrl}?${params.toString()}`;
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Set initial color selection
    selectColor('blue');
    
    // Add event listeners for form controls
    document.getElementById('fontSelect').addEventListener('change', updatePreview);
    document.getElementById('densitySelect').addEventListener('change', updatePreview);
    
    // Add event listeners for header style radios
    document.querySelectorAll('input[name="headerStyle"]').forEach(radio => {
        radio.addEventListener('change', updatePreview);
    });
});
</script>
@endpush