@extends('layouts.app')

@push('styles')
<style>
    .emoji-toolbar {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .btn-emoji {
        padding: 8px 12px;
        background: var(--card-bg);
        border: 2px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-primary);
    }

    .btn-emoji:hover {
        border-color: var(--primary-color);
        background: var(--primary-color);
        color: white;
        transform: translateY(-1px);
    }

    .emoji-picker {
        background: var(--card-bg);
        border: 2px solid var(--border-color);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        display: none;
        box-shadow: var(--shadow-md);
    }

    .emoji-picker.show {
        display: block;
        animation: slideDown 0.2s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .emoji-picker-header {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 12px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .emoji-categories {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .emoji-category {
        padding: 6px 12px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-secondary);
    }

    .emoji-category:hover,
    .emoji-category.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

    .emoji-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 8px;
        max-height: 200px;
        overflow-y: auto;
        padding: 8px;
        background: white;
        border-radius: 8px;
    }

    .emoji-item {
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        padding: 8px;
        border-radius: 6px;
        transition: all 0.2s;
        user-select: none;
    }

    .emoji-item:hover {
        background: var(--primary-color);
        transform: scale(1.2);
    }

    .btn-close-emoji {
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        color: var(--text-secondary);
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }

    .btn-close-emoji:hover {
        background: var(--border-color);
    }

    .example-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 20px;
    }

    .example-card h6 {
        color: white;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .example-content {
        background: rgba(255, 255, 255, 0.9);
        color: #333;
        padding: 12px;
        border-radius: 8px;
        font-family: 'Consolas', monospace;
        font-size: 13px;
        white-space: pre-wrap;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4">
    <!-- Header -->
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('affiliate-footers.index') }}">Textos de Rodapé</a></li>
                <li class="breadcrumb-item active">Novo Texto</li>
            </ol>
        </nav>
        <h1 class="h3 mb-1">➕ Criar Novo Texto de Rodapé</h1>
        <p class="text-muted mb-0">Adicione um texto personalizado para ser exibido nos links de afiliados</p>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Form Card -->
            <div class="card shadow-sm border-0">
                <div class="card-body p-4">
                    <form action="{{ route('affiliate-footers.store') }}" method="POST">
                        @csrf

                        <!-- Título -->
                        <div class="mb-4">
                            <label for="title" class="form-label fw-semibold">
                                <i class="bi bi-tag me-2"></i>Título / Descrição *
                            </label>
                            <input type="text" 
                                   class="form-control form-control-lg @error('title') is-invalid @enderror" 
                                   id="title" 
                                   name="title" 
                                   value="{{ old('title') }}"
                                   placeholder="Ex: Convite para grupo Whatsapp"
                                   required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Identificação interna (não é exibida para o usuário)</small>
                        </div>

                        <!-- Conteúdo com Emoji Picker -->
                        <div class="mb-4">
                            <label for="content" class="form-label fw-semibold">
                                <i class="bi bi-pencil me-2"></i>Conteúdo do Texto *
                            </label>
                            
                            <!-- Emoji Toolbar -->
                            <div class="emoji-toolbar">
                                <button type="button" class="btn-emoji" onclick="toggleEmojiPicker()">
                                    😀 Adicionar Emojis
                                </button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('🔥')">🔥</button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('⚡')">⚡</button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('💥')">💥</button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('🎯')">🎯</button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('✨')">✨</button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('🎉')">🎉</button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('💰')">💰</button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('🛒')">🛒</button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('⭐')">⭐</button>
                                <button type="button" class="btn-emoji" onclick="insertQuickEmoji('👉')">👉</button>
                            </div>

                            <!-- Emoji Picker -->
                            <div class="emoji-picker" id="emojiPicker">
                                <div class="emoji-picker-header">
                                    <span>Selecione um Emoji</span>
                                    <button type="button" class="btn-close-emoji" onclick="toggleEmojiPicker()">✕</button>
                                </div>
                                
                                <div class="emoji-categories">
                                    <button type="button" class="emoji-category active" onclick="showEmojiCategory('popular')">🔥 Popular</button>
                                    <button type="button" class="emoji-category" onclick="showEmojiCategory('faces')">😀 Rostos</button>
                                    <button type="button" class="emoji-category" onclick="showEmojiCategory('symbols')">💯 Símbolos</button>
                                    <button type="button" class="emoji-category" onclick="showEmojiCategory('objects')">🎁 Objetos</button>
                                    <button type="button" class="emoji-category" onclick="showEmojiCategory('nature')">🌟 Natureza</button>
                                </div>
                                
                                <div class="emoji-grid" id="emojiGrid">
                                    <!-- Emojis serão inseridos aqui via JavaScript -->
                                </div>
                            </div>

                            <textarea class="form-control @error('content') is-invalid @enderror" 
                                      id="footer-content" 
                                      name="content" 
                                      rows="8" 
                                      style="font-family: 'Consolas', monospace; font-size: 14px;"
                                      placeholder="Digite o texto que será exibido...&#10;&#10;Você pode usar:&#10;- Emojis 😀🔥⭐&#10;- Quebras de linha&#10;- Links"
                                      required>{{ old('content') }}</textarea>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">
                                <i class="bi bi-info-circle me-1"></i>
                                Este texto será exibido após o link do produto. Você pode usar emojis e quebras de linha.
                            </small>
                        </div>

                        <!-- Plataforma -->
                        <div class="mb-4">
                            <label for="platform" class="form-label fw-semibold">
                                <i class="bi bi-shop me-2"></i>Plataforma *
                            </label>
                            <select class="form-select form-select-lg @error('platform') is-invalid @enderror" 
                                    id="platform" 
                                    name="platform" 
                                    required>
                                <option value="">Selecione...</option>
                                @foreach($platforms as $key => $name)
                                    <option value="{{ $key }}" {{ old('platform') == $key ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('platform')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="alert alert-info mt-2 mb-0">
                                <small>
                                    <strong>Todas as Plataformas:</strong> Será exibido em Amazon, Mercado Livre, Shopee, etc.<br>
                                    <strong>Específica:</strong> Será exibido apenas na plataforma selecionada.
                                </small>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Ordem -->
                            <div class="col-md-6 mb-4">
                                <label for="order" class="form-label fw-semibold">
                                    <i class="bi bi-sort-numeric-down me-2"></i>Ordem de Exibição
                                </label>
                                <input type="number" 
                                       class="form-control form-control-lg @error('order') is-invalid @enderror" 
                                       id="order" 
                                       name="order" 
                                       value="{{ old('order', 0) }}"
                                       min="0">
                                @error('order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Menor número = exibido primeiro</small>
                            </div>

                            <!-- Ativo -->
                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-semibold d-block">
                                    <i class="bi bi-toggle-on me-2"></i>Status
                                </label>
                                <div class="form-check form-switch" style="font-size: 1.2rem; padding-top: 0.5rem;">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           role="switch"
                                           id="active" 
                                           name="active" 
                                           value="1" 
                                           {{ old('active', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="active">
                                        <strong>Ativo</strong> - Texto será exibido nos links
                                    </label>
                                </div>
                                <small class="text-muted">Você pode desativar temporariamente sem excluir</small>
                            </div>
                        </div>

                        <!-- Buttons -->
                        <hr class="my-4">
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary btn-lg px-4">
                                <i class="bi bi-check-circle me-2"></i>Salvar Texto
                            </button>
                            <a href="{{ route('affiliate-footers.index') }}" class="btn btn-outline-secondary btn-lg px-4">
                                <i class="bi bi-x-circle me-2"></i>Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar com exemplos -->
        <div class="col-lg-4">
            <div class="example-card mb-3">
                <h5 class="mb-3"><i class="bi bi-lightbulb me-2"></i>Exemplos</h5>
                
                <h6 class="mt-3">Texto Geral:</h6>
                <div class="example-content mb-3">🔍 Grupos de Whatsapp e Telegram:
https://minhaurl.com</div>

                <h6 class="mt-3">Texto Amazon (Prime):</h6>
                <div class="example-content mb-3">⭐ Se torne Prime e aproveite frete grátis!
👉 https://amazon.com.br/prime</div>

                <h6 class="mt-3">Texto Mercado Livre:</h6>
                <div class="example-content">💎 Seja Meli+ e ganhe benefícios exclusivos!
https://mercadolivre.com.br/meli+</div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="card-title"><i class="bi bi-info-circle me-2"></i>Dicas</h6>
                    <ul class="list-unstyled small mb-0">
                        <li class="mb-2">✅ Use textos curtos e diretos</li>
                        <li class="mb-2">✅ Inclua emojis para chamar atenção</li>
                        <li class="mb-2">✅ Ordem 1-10: Textos prioritários</li>
                        <li class="mb-2">✅ Ordem 90-99: Textos gerais</li>
                        <li>✅ Teste antes de ativar</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Emoji Picker Functionality
    const emojiCategories = {
        popular: ['🔥', '⚡', '💥', '🎯', '✨', '🎉', '💰', '🛒', '❤️', '👍', '🎁', '🚀', '💎', '🌟', '⭐', '✅', '❗', '💪', '👏', '🤩', '😍', '🥳', '💯', '🔝', '📢'],
        faces: ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔'],
        symbols: ['💯', '💢', '💬', '💭', '💤', '💮', '💰', '💱', '💲', '💳', '💴', '💵', '💶', '💷', '💸', '💹', '🔔', '🔕', '🔖', '🔗', '🔘', '🔙', '🔚', '🔛', '🔜', '🔝', '✅', '✔️', '❌', '❎', '➕', '➖', '➗', '➰', '➿'],
        objects: ['🎁', '🎀', '🎂', '🎃', '🎄', '🎅', '🎆', '🎇', '🎈', '🎉', '🎊', '🎋', '🎌', '🎍', '🎎', '🎏', '🎐', '🎑', '🎒', '🎓', '⚽', '⚾', '🏀', '🏈', '🎾', '🎱', '🎳', '🏏', '🏑', '🏒', '🏓', '🎯', '🎰', '🎲', '🎮', '🎸', '🎹', '🎺', '🎻', '🎼'],
        nature: ['🌟', '⭐', '🌠', '🌌', '⛅', '🌤️', '🌥️', '🌦️', '🌧️', '🌨️', '🌩️', '🌪️', '🌫️', '🌬️', '🌀', '🌈', '🌂', '☂️', '☔', '⛱️', '⚡', '❄️', '☃️', '⛄', '☄️', '🔥', '💧', '🌊', '🎄', '🌲', '🌳', '🌴', '🌵', '🌾', '🌿']
    };

    let currentCategory = 'popular';

    function showEmojiCategory(category) {
        currentCategory = category;
        const emojis = emojiCategories[category] || emojiCategories.popular;
        const grid = document.getElementById('emojiGrid');
        
        grid.innerHTML = emojis.map(emoji => 
            `<span class="emoji-item" onclick="insertEmoji('${emoji}')" title="${emoji}">${emoji}</span>`
        ).join('');
        
        document.querySelectorAll('.emoji-category').forEach(btn => {
            btn.classList.remove('active');
        });
        event.target.classList.add('active');
    }

    function toggleEmojiPicker() {
        const picker = document.getElementById('emojiPicker');
        const isVisible = picker.classList.contains('show');
        
        if (!isVisible) {
            showEmojiCategory('popular');
            picker.classList.add('show');
        } else {
            picker.classList.remove('show');
        }
    }

    function insertQuickEmoji(emoji) {
        insertEmoji(emoji);
    }

    function insertEmoji(emoji) {
        const textarea = document.getElementById('footer-content');
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const text = textarea.value;
        
        const before = text.substring(0, start);
        const after = text.substring(end, text.length);
        textarea.value = before + emoji + after;
        
        const newPosition = start + emoji.length;
        textarea.selectionStart = newPosition;
        textarea.selectionEnd = newPosition;
        textarea.focus();
    }

    document.addEventListener('DOMContentLoaded', function() {
        showEmojiCategory('popular');
    });

    document.addEventListener('click', function(event) {
        const picker = document.getElementById('emojiPicker');
        const emojiButton = event.target.closest('.btn-emoji');
        const insidePicker = event.target.closest('.emoji-picker');
        
        if (!emojiButton && !insidePicker && picker.classList.contains('show')) {
            picker.classList.remove('show');
        }
    });
</script>
@endsection