@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);
    }

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

    .preview-content {
        background: rgba(255, 255, 255, 0.95);
        color: #333;
        padding: 16px;
        border-radius: 8px;
        font-family: 'Consolas', monospace;
        font-size: 14px;
        white-space: pre-wrap;
        word-break: break-word;
        max-height: 300px;
        overflow-y: auto;
    }

    .info-item {
        padding: 8px 0;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

    .info-item:last-child {
        border-bottom: none;
    }
</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">Editar Texto</li>
            </ol>
        </nav>
        <h1 class="h3 mb-1">✏️ Editar Texto de Rodapé</h1>
        <p class="text-muted mb-0">Atualize as informações do texto personalizado</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.update', $affiliateFooter) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <!-- 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', $affiliateFooter->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..."
                                      required>{{ old('content', $affiliateFooter->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>
                                @foreach($platforms as $key => $name)
                                    <option value="{{ $key }}" {{ old('platform', $affiliateFooter->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', $affiliateFooter->order) }}"
                                       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', $affiliateFooter->active) ? '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>Atualizar 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 preview -->
        <div class="col-lg-4">
            <div class="preview-card mb-3">
                <h5 class="mb-3"><i class="bi bi-eye me-2"></i>Preview do Texto</h5>
                <p class="small mb-2 opacity-75">Como o texto aparecerá:</p>
                
                <div class="preview-content">{{ $affiliateFooter->content }}</div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="card-title mb-3"><i class="bi bi-info-circle me-2"></i>Informações</h6>
                    
                    <div class="info-item">
                        <small class="text-muted d-block">Criado em</small>
                        <strong>{{ $affiliateFooter->created_at->format('d/m/Y H:i') }}</strong>
                    </div>
                    
                    <div class="info-item">
                        <small class="text-muted d-block">Atualizado em</small>
                        <strong>{{ $affiliateFooter->updated_at->format('d/m/Y H:i') }}</strong>
                    </div>
                    
                    <div class="info-item">
                        <small class="text-muted d-block">Plataforma</small>
                        <strong>
                            @if($affiliateFooter->platform === 'all')
                                <span class="badge bg-primary">{{ $affiliateFooter->platform_name }}</span>
                            @elseif($affiliateFooter->platform === 'amazon')
                                <span class="badge bg-warning text-dark">Amazon</span>
                            @elseif($affiliateFooter->platform === 'mercadolivre')
                                <span class="badge bg-success">Mercado Livre</span>
                            @else
                                <span class="badge bg-info">{{ $affiliateFooter->platform_name }}</span>
                            @endif
                        </strong>
                    </div>
                    
                    <div class="info-item">
                        <small class="text-muted d-block">Status</small>
                        @if($affiliateFooter->active)
                            <span class="badge bg-success"><i class="bi bi-check-circle"></i> Ativo</span>
                        @else
                            <span class="badge bg-danger"><i class="bi bi-x-circle"></i> Inativo</span>
                        @endif
                    </div>
                </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