@extends('admin.layout')

@section('title', 'Personnaliser le template de l\'événement')
@section('header', 'Personnaliser le template : ' . $event->title)

@section('styles')
<style>
    .template-card {
        border: 2px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        position: relative;
        height: 100%; /* Hauteur dynamique */
        display: flex;
        flex-direction: column;
        margin-bottom: 20px; /* Espace entre les templates */
    }
    
    .template-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .template-card.border-primary {
        border-color: #3490dc;
        box-shadow: 0 0 0 2px rgba(52, 144, 220, 0.5);
    }
    
    .template-preview-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        flex-shrink: 0; /* Empêche l'image de se réduire */
    }
    
    .template-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }
    
    /* Styles pour la zone d'info d'aperçu */
    #previewInfo {
        display: none;
        animation: fadeOut 5s forwards;
        animation-delay: 3s;
    }
    
    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; visibility: hidden; }
    }
    
    .color-palette {
        display: flex;
        margin-bottom: 1rem;
        align-items: center;
        padding: 0.5rem;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .color-palette:hover {
        background-color: #f7f7f7;
    }
    
    .color-palette.selected {
        background-color: #e6f2ff;
    }
    
    .color-preview {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }
    
    .custom-color-pickers {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .color-picker-group {
        flex: 1;
        min-width: 200px;
    }
    
    .preview-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
    
    .template-body {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .template-description {
        flex-grow: 1;
        margin-bottom: 10px;
        color: #6c757d;
    }
    
    .external-link-icon {
        margin-left: 5px;
        font-size: 0.8em;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Personnaliser le template pour : {{ $event->title }}</h3>
                </div>
                <div class="card-body">
                    <!-- Messages d'information -->
                    <div id="previewInfo" class="alert alert-info alert-dismissible fade show d-none" role="alert">
                        <span id="previewInfoText"></span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
                    </div>
                    
                    <form action="{{ route('admin.events.template.update', $event) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <h4 class="mb-4">Choisir un template</h4>
                        
                        <div class="row">
                            @foreach($templates as $template)
                            <div class="col-md-4 mb-4">
                                <div class="template-card {{ $event->template_name == $template['name'] ? 'border-primary' : '' }}">
                                    <div class="form-check position-absolute m-2">
                                        <input class="form-check-input" type="radio" name="template_name" 
                                               id="template-radio-{{ $template['name'] }}" value="{{ $template['name'] }}"
                                               {{ $event->template_name == $template['name'] ? 'checked' : '' }}>
                                    </div>
                                    
                                    <div class="position-relative">
                                        <img src="{{ $template['preview_image'] }}" 
                                             class="template-preview-img img-fluid"
                                             alt="{{ $template['display_name'] }}"
                                             onerror="this.src='{{ asset('TheEvent/assets/img/about-bg.jpg') }}'">
                                        <span class="preview-badge">
                                            <i class="fa fa-eye"></i> Prévisualisable
                                        </span>
                                    </div>
                                    
                                    <div class="template-body">
                                        <h5 class="card-title">{{ $template['display_name'] }}</h5>
                                        <p class="template-description">{{ Str::limit($template['description'], 100) }}</p>
                                        <div class="template-meta small text-muted mb-2">
                                            <div><strong>Auteur:</strong> {{ $template['author'] ?? 'Non spécifié' }}</div>
                                            <div><strong>Version:</strong> {{ $template['version'] ?? '1.0' }}</div>
                                        </div>
                                        <div class="template-actions">
                                            <button type="button" class="btn btn-sm btn-info preview-button" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#previewModal" 
                                                data-template-name="{{ $template['name'] }}"
                                                data-event-id="{{ $event->id }}"
                                                data-preview-url="{{ route('template.preview', ['templateName' => $template['name'], 'event_id' => $event->id]) }}" 
                                                title="Prévisualisation du template">
                                                <i class="fa fa-eye"></i> Aperçu
                                            </button>
                                            <label class="btn btn-sm {{ $event->template_name == $template['name'] ? 'btn-primary' : 'btn-outline-primary' }}" 
                                                for="template-radio-{{ $template['name'] }}">
                                                Sélectionner
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        
                        <!-- Modal pour prévisualiser le template -->
                        <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalTitle" aria-hidden="true">
                            <div class="modal-dialog modal-xl modal-fullscreen-md-down">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="previewModalTitle">Prévisualisation du template</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                                    </div>
                                    <div class="modal-body p-0 position-relative">
                                        <!-- Indicateur de chargement -->
                                        <div id="previewLoading" class="position-absolute top-50 start-50 translate-middle">
                                            <div class="spinner-border text-primary" role="status">
                                                <span class="visually-hidden">Chargement...</span>
                                            </div>
                                            <div class="mt-2 text-center">Chargement du template...</div>
                                        </div>
                                        
                                        <div class="ratio ratio-16x9">
                                            <iframe id="previewFrame" src="" allowfullscreen onload="document.getElementById('previewLoading').style.display = 'none';"></iframe>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                        <a href="#" id="fullScreenLink" class="btn btn-primary" target="_blank">
                                            <i class="fa fa-external-link"></i> Voir en plein écran
                                        </a>
                                        <button type="button" id="selectTemplateBtn" class="btn btn-success" data-template-name="">
                                            <i class="fa fa-check"></i> Sélectionner ce template
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <hr class="my-4">
                        
                        <h4 class="mb-4">Personnaliser les couleurs</h4>

                        <!-- Aperçu des couleurs -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header preview-header" style="background-color: {{ $event->primary_color }}; color: white;">
                                        <h5 class="mb-0">Aperçu des couleurs</h5>
                                    </div>
                                    <div class="card-body preview-container">
                                        <div class="border-element" style="border-left: 5px solid {{ $event->secondary_color }}; padding-left: 10px; margin-bottom: 15px;">
                                            <h6>Titre de section</h6>
                                            <p>Exemple de texte avec <span class="accent-text" style="color: {{ $event->accent_color }};">mise en évidence</span>.</p>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn" style="background-color: {{ $event->primary_color }}; color: white;">Bouton principal</button>
                                            <button type="button" class="btn" style="background-color: {{ $event->secondary_color }}; color: white;">Bouton secondaire</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <h5>Choisir une palette prédéfinie</h5>
                                
                                @foreach($colorPalettes as $key => $palette)
                                <div class="color-palette d-flex align-items-center" 
                                     data-primary="{{ $palette['primary_color'] }}"
                                     data-secondary="{{ $palette['secondary_color'] }}"
                                     data-accent="{{ $palette['accent_color'] }}">
                                    <div class="color-preview" style="background-color: {{ $palette['primary_color'] }}"></div>
                                    <div class="color-preview" style="background-color: {{ $palette['secondary_color'] }}"></div>
                                    <div class="color-preview" style="background-color: {{ $palette['accent_color'] }}"></div>
                                    <div class="ms-3">
                                        <strong>{{ $palette['name'] }}</strong>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            
                            <div class="col-md-6">
                                <h5>Personnaliser les couleurs</h5>
                                
                                <div class="custom-color-pickers">
                                    <div class="color-picker-group mb-3">
                                        <label for="primary_color">Couleur principale</label>
                                        <div class="input-group">
                                            <span class="input-group-text color-preview" id="primary_color-preview" 
                                                  style="background-color: {{ $event->primary_color }}"></span>
                                            <input type="color" class="form-control form-control-color" id="primary_color" name="primary_color" 
                                                   value="{{ $event->primary_color }}" required>
                                        </div>
                                        <small class="form-text text-muted">Utilisée pour les titres et boutons principaux</small>
                                    </div>
                                    
                                    <div class="color-picker-group mb-3">
                                        <label for="secondary_color">Couleur secondaire</label>
                                        <div class="input-group">
                                            <span class="input-group-text color-preview" id="secondary_color-preview" 
                                                  style="background-color: {{ $event->secondary_color }}"></span>
                                            <input type="color" class="form-control form-control-color" id="secondary_color" name="secondary_color" 
                                                   value="{{ $event->secondary_color }}" required>
                                        </div>
                                        <small class="form-text text-muted">Utilisée pour les accents et informations secondaires</small>
                                    </div>
                                    
                                    <div class="color-picker-group mb-3">
                                        <label for="accent_color">Couleur d'accentuation</label>
                                        <div class="input-group">
                                            <span class="input-group-text color-preview" id="accent_color-preview" 
                                                  style="background-color: {{ $event->accent_color }}"></span>
                                            <input type="color" class="form-control form-control-color" id="accent_color" name="accent_color" 
                                                   value="{{ $event->accent_color }}" required>
                                        </div>
                                        <small class="form-text text-muted">Utilisée pour les éléments de contraste et les détails</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <h5>Aperçu</h5>
                                <div class="card p-3 mb-4" id="preview-card">
                                    <div class="preview-header" style="background-color: {{ $event->primary_color }}; padding: 15px; color: white; border-radius: 4px 4px 0 0;">
                                        <h3>Titre de l'événement</h3>
                                        <p>Sous-titre avec la couleur principale</p>
                                    </div>
                                    <div class="preview-content p-3">
                                        <div class="btn mb-3" style="background-color: {{ $event->primary_color }}; color: white;">Bouton principal</div>
                                        <div class="btn mb-3" style="background-color: {{ $event->secondary_color }}; color: white; margin-left: 10px;">Bouton secondaire</div>
                                        <p>Texte normal du contenu. <span style="color: {{ $event->accent_color }}; font-weight: bold;">Ceci est un texte avec la couleur d'accentuation.</span></p>
                                        <div style="border-left: 4px solid {{ $event->secondary_color }}; padding-left: 15px; margin: 15px 0;">
                                            <p>Section avec la couleur secondaire comme bordure.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
                                <a href="{{ route('admin.events.edit', $event) }}" class="btn btn-secondary">Annuler</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gestion de la sélection des templates
        const templateCards = document.querySelectorAll('.template-card');
        
        templateCards.forEach(card => {
            card.addEventListener('click', function(e) {
                // Ne pas déclencher si l'utilisateur a cliqué sur le bouton d'aperçu
                if (e.target.closest('.preview-button')) {
                    return;
                }
                
                // Trouver le radio input dans cette carte et le sélectionner
                const radio = this.querySelector('input[type="radio"]');
                radio.checked = true;
                
                // Mise à jour visuelle
                templateCards.forEach(c => c.classList.remove('border-primary'));
                this.classList.add('border-primary');
                
                // Mettre à jour les boutons
                templateCards.forEach(c => {
                    const btn = c.querySelector('label.btn');
                    btn.classList.remove('btn-primary');
                    btn.classList.add('btn-outline-primary');
                });
                
                const btn = this.querySelector('label.btn');
                btn.classList.remove('btn-outline-primary');
                btn.classList.add('btn-primary');
            });
        });
        
        // Configuration de la modal de prévisualisation
        const previewModal = document.getElementById('previewModal');
        const previewFrame = document.getElementById('previewFrame');
        const fullScreenLink = document.getElementById('fullScreenLink');
        const previewModalTitle = document.getElementById('previewModalTitle');
        const previewButtons = document.querySelectorAll('.preview-button');
        const selectTemplateBtn = document.getElementById('selectTemplateBtn');
        
        // Gestion des boutons d'aperçu
        previewButtons.forEach(button => {
            button.addEventListener('click', function() {
                const previewUrl = this.getAttribute('data-preview-url');
                const templateName = this.getAttribute('data-template-name');
                
                if (previewUrl) {
                    // Afficher l'indicateur de chargement
                    document.getElementById('previewLoading').style.display = 'flex';
                    
                    // Mettre à jour la source de l'iframe
                    previewFrame.src = previewUrl;
                    
                    // Mettre à jour le lien pour l'ouverture en plein écran
                    fullScreenLink.href = previewUrl;
                    
                    // Mettre à jour le titre de la modal
                    if (previewModalTitle) {
                        previewModalTitle.textContent = `Prévisualisation du template: ${templateName}`;
                    }
                    
                    // Configurer le bouton de sélection de template
                    selectTemplateBtn.setAttribute('data-template-name', templateName);
                    
                    // Ouvrir la modal
                    const bsModal = new bootstrap.Modal(previewModal);
                    bsModal.show();
                }
            });
        });
        
        // Gérer le clic sur le bouton "Sélectionner ce template"
        selectTemplateBtn.addEventListener('click', function() {
            const templateName = this.getAttribute('data-template-name');
            const radioButton = document.getElementById(`template-radio-${templateName}`);
            
            if (radioButton) {
                // Sélectionner le bouton radio correspondant au template
                radioButton.checked = true;
                
                // Déclencher l'événement de changement
                const changeEvent = new Event('change');
                radioButton.dispatchEvent(changeEvent);
                
                // Fermer la modal
                const bsModal = bootstrap.Modal.getInstance(previewModal);
                bsModal.hide();
                
                // Faire défiler jusqu'au template sélectionné
                const templateCard = radioButton.closest('.template-card');
                if (templateCard) {
                    templateCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
                
                // Afficher un message de confirmation
                showPreviewInfo(`Le template "${templateName}" a été sélectionné. N'oubliez pas d'enregistrer vos modifications.`);
            }
        });
        
        // Gestion des palettes de couleurs
        const colorPalettes = document.querySelectorAll('.color-palette');
        const primaryColorInput = document.getElementById('primary_color');
        const secondaryColorInput = document.getElementById('secondary_color');
        const accentColorInput = document.getElementById('accent_color');
        
        colorPalettes.forEach(palette => {
            palette.addEventListener('click', function() {
                const primaryColor = this.getAttribute('data-primary');
                const secondaryColor = this.getAttribute('data-secondary');
                const accentColor = this.getAttribute('data-accent');
                
                // Mettre à jour les inputs
                primaryColorInput.value = primaryColor;
                secondaryColorInput.value = secondaryColor;
                accentColorInput.value = accentColor;
                
                // Mettre à jour les aperçus
                document.getElementById('primary_color-preview').style.backgroundColor = primaryColor;
                document.getElementById('secondary_color-preview').style.backgroundColor = secondaryColor;
                document.getElementById('accent_color-preview').style.backgroundColor = accentColor;
                
                // Mettre à jour l'aperçu global
                updatePreview();
                
                // Mettre à jour la classe selected
                colorPalettes.forEach(p => p.classList.remove('selected'));
                this.classList.add('selected');
            });
        });
        
        // Mise à jour de l'aperçu lors de la saisie des couleurs
        [primaryColorInput, secondaryColorInput, accentColorInput].forEach(input => {
            input.addEventListener('input', function() {
                const colorPreviewId = this.id + '-preview';
                document.getElementById(colorPreviewId).style.backgroundColor = this.value;
                updatePreview();
            });
        });
        
        function updatePreview() {
            const primaryColor = primaryColorInput.value;
            const secondaryColor = secondaryColorInput.value;
            const accentColor = accentColorInput.value;
            
            // Mettre à jour l'aperçu avec vérification d'existence des éléments
            const previewHeader = document.querySelector('.preview-header');
            if (previewHeader) previewHeader.style.backgroundColor = primaryColor;
            
            const primaryBtn = document.querySelector('.preview-container .btn:first-child');
            if (primaryBtn) primaryBtn.style.backgroundColor = primaryColor;
            
            const secondaryBtn = document.querySelector('.preview-container .btn:nth-child(2)');
            if (secondaryBtn) secondaryBtn.style.backgroundColor = secondaryColor;
            
            const accentText = document.querySelector('.preview-container .accent-text');
            if (accentText) accentText.style.color = accentColor;
            
            const borderElement = document.querySelector('.preview-container .border-element');
            if (borderElement) borderElement.style.borderLeftColor = secondaryColor;
            
            // Mettre à jour les aperçus des couleurs
            const primaryPreview = document.getElementById('primary_color-preview');
            if (primaryPreview) primaryPreview.style.backgroundColor = primaryColor;
            
            const secondaryPreview = document.getElementById('secondary_color-preview');
            if (secondaryPreview) secondaryPreview.style.backgroundColor = secondaryColor;
            
            const accentPreview = document.getElementById('accent_color-preview');
            if (accentPreview) accentPreview.style.backgroundColor = accentColor;
        }
    });
</script>
<script src="{{ asset('js/template-preview.js') }}"></script>
@endpush