@extends('admin.layout')

@section('title', 'Gestion des templates')
@section('header', 'Gestion des templates')

@section('styles')
<style>
    .template-card {
        border: 2px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }
    
    .template-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .template-preview-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        flex-shrink: 0;
    }
    
    .template-body {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .template-description {
        flex-grow: 1;
        margin-bottom: 10px;
        color: #6c757d;
    }
    
    .template-actions {
        margin-top: auto;
    }
    
    .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;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Templates disponibles</h5>
                    <p class="card-text">Ces templates peuvent être utilisés pour personnaliser l'apparence de vos événements.</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        @forelse($templates as $templateName => $template)
            <div class="col-md-4 col-lg-3 mb-4">
                <div class="template-card">
                    <div class="position-relative">
                        <img src="{{ $template['preview_image'] }}" alt="{{ $template['display_name'] }}" class="template-preview-img">
                        <span class="preview-badge">{{ $template['source'] }}</span>
                    </div>
                    
                    <div class="template-body">
                        <h5 class="card-title">{{ $template['display_name'] }}</h5>
                        <p class="template-description">{{ $template['description'] }}</p>
                        
                        <div class="d-flex justify-content-between align-items-center template-actions">
                            <small class="text-muted">par {{ $template['author'] }}</small>
                            
                            <div>
                                <button type="button" class="btn btn-sm btn-outline-primary preview-button" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#previewModal" 
                                        data-template-name="{{ $templateName }}"
                                        data-template-display-name="{{ $template['display_name'] }}">
                                    <i class="fas fa-eye"></i> Aperçu
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-info">
                    Aucun template disponible actuellement.
                </div>
            </div>
        @endforelse
    </div>
    
    <!-- Modal de prévisualisation -->
    <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-fullscreen-lg-down">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewModalLabel">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">
                    <div class="ratio ratio-16x9">
                        <iframe id="previewFrame" src="" allowfullscreen></iframe>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    <a href="#" id="fullScreenPreview" class="btn btn-primary" target="_blank">
                        Voir en plein écran
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Configurer la modal de prévisualisation
        const previewModal = document.getElementById('previewModal');
        const previewFrame = document.getElementById('previewFrame');
        const fullScreenPreview = document.getElementById('fullScreenPreview');
        const previewModalLabel = document.getElementById('previewModalLabel');
        
        previewModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const templateName = button.getAttribute('data-template-name');
            const templateDisplayName = button.getAttribute('data-template-display-name');
            const previewUrl = `{{ route('template.preview', ['templateName' => '__TEMPLATE__']) }}`.replace('__TEMPLATE__', templateName);
            
            previewFrame.src = previewUrl;
            previewModalLabel.textContent = `Prévisualisation: ${templateDisplayName}`;
            fullScreenPreview.href = previewUrl;
        });
        
        // Réinitialiser l'iframe lorsque la modal est fermée
        previewModal.addEventListener('hidden.bs.modal', function() {
            previewFrame.src = '';
        });
    });
</script>
@endpush
@endsection