@extends('layouts.admin')

@section('title', 'Détails Email')
@section('page-title', 'Détails Email')

@section('content')
<div class="card">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Détails de l'Email</h5>
        <a href="{{ route('admin.email-logs.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i> Retour à l'historique
        </a>
    </div>
    <div class="card-body">
        <!-- En-tête avec informations principales -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card bg-light border-0">
                    <div class="card-body">
                        <h6 class="card-title text-muted mb-3">
                            <i class="bi bi-person me-2"></i>Destinataire
                        </h6>
                        <div class="d-flex align-items-center">
                            <i class="bi bi-person-circle text-primary me-3 fs-4"></i>
                            <div>
                                <div class="fw-semibold text-dark fs-6">{{ $emailLog->recipient_name ?? 'Non spécifié' }}</div>
                                <div class="text-muted">{{ $emailLog->recipient_email }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card bg-light border-0">
                    <div class="card-body">
                        <h6 class="card-title text-muted mb-3">
                            <i class="bi bi-info-circle me-2"></i>Statut
                        </h6>
                        <div class="d-flex align-items-center">
                            @if($emailLog->status === 'sent')
                                <i class="bi bi-check-circle-fill text-success me-3 fs-4"></i>
                                <div>
                                    <div class="fw-semibold text-success">Envoyé avec succès</div>
                                    <div class="text-muted small">
                                        Le {{ $emailLog->sent_at?->format('d/m/Y à H:i') ?? $emailLog->created_at->format('d/m/Y à H:i') }}
                                    </div>
                                </div>
                            @elseif($emailLog->status === 'failed')
                                <i class="bi bi-x-circle-fill text-danger me-3 fs-4"></i>
                                <div>
                                    <div class="fw-semibold text-danger">Échec de l'envoi</div>
                                    <div class="text-muted small">
                                        Le {{ $emailLog->created_at->format('d/m/Y à H:i') }}
                                    </div>
                                </div>
                            @else
                                <i class="bi bi-clock-fill text-warning me-3 fs-4"></i>
                                <div>
                                    <div class="fw-semibold text-warning">En attente d'envoi</div>
                                    <div class="text-muted small">
                                        Créé le {{ $emailLog->created_at->format('d/m/Y à H:i') }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Colonne principale - Contenu de l'email -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="bi bi-envelope me-2"></i>Contenu de l'Email
                        </h6>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-primary active" onclick="showPreview()">
                                <i class="bi bi-eye me-1"></i>Prévisualisation
                            </button>
                            <button class="btn btn-outline-secondary" onclick="showSource()">
                                <i class="bi bi-code me-1"></i>Code Source
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Informations de base -->
                        <div class="row mb-4">
                            <div class="col-md-8">
                                <label class="form-label text-muted small">Sujet</label>
                                <div class="fw-semibold text-dark fs-6">{{ $emailLog->subject }}</div>
                            </div>
                            @if($emailLog->template_slug)
                            <div class="col-md-4">
                                <label class="form-label text-muted small">Template</label>
                                <div>
                                    <code class="bg-primary bg-opacity-10 text-primary px-2 py-1 rounded small">
                                        {{ $emailLog->template_slug }}
                                    </code>
                                </div>
                            </div>
                            @endif
                        </div>

                        <!-- Prévisualisation de l'email -->
                        <div id="preview-container">
                            <label class="form-label text-muted small mb-3">Aperçu de l'email tel qu'envoyé</label>
                            <div class="border rounded bg-white p-0" style="min-height: 500px; max-height: 600px; overflow-y: auto;">
                                <iframe id="email-preview" srcdoc="{{ htmlspecialchars($emailLog->body) }}" 
                                        class="w-100 h-100 border-0" style="min-height: 500px;"></iframe>
                            </div>
                            <div class="mt-3 text-center">
                                <small class="text-muted">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Cet aperçu montre exactement ce que le destinataire a reçu
                                </small>
                            </div>
                        </div>

                        <!-- Code source de l'email -->
                        <div id="source-container" style="display: none;">
                            <label class="form-label text-muted small mb-3">Code HTML source</label>
                            <div class="border rounded bg-dark text-light p-3" style="max-height: 500px; overflow-y: auto;">
                                <pre class="mb-0"><code class="language-html" id="email-source">{{ $emailLog->body }}</code></pre>
                            </div>
                            <div class="mt-3 text-center">
                                <button class="btn btn-sm btn-outline-light" onclick="copySourceCode()">
                                    <i class="bi bi-clipboard me-1"></i>Copier le code
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Colonne latérale - Informations techniques -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header bg-white">
                        <h6 class="mb-0">
                            <i class="bi bi-gear me-2"></i>Informations techniques
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label text-muted small">ID de l'email</label>
                            <div class="fw-semibold text-dark">#{{ $emailLog->id }}</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label text-muted small">Date de création</label>
                            <div class="fw-semibold">{{ $emailLog->created_at->format('d/m/Y à H:i') }}</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label text-muted small">Dernière mise à jour</label>
                            <div class="fw-semibold">{{ $emailLog->updated_at->format('d/m/Y à H:i') }}</div>
                        </div>

                        @if($emailLog->sent_at)
                        <div class="mb-3">
                            <label class="form-label text-muted small">Date d'envoi</label>
                            <div class="fw-semibold text-success">{{ $emailLog->sent_at->format('d/m/Y à H:i') }}</div>
                        </div>
                        @endif

                        @if($emailLog->error_message)
                        <div class="mb-3">
                            <label class="form-label text-muted small text-danger">Erreur d'envoi</label>
                            <div class="alert alert-danger small mb-0">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                {{ $emailLog->error_message }}
                            </div>
                        </div>
                        @endif

                        <!-- Actions -->
                        <div class="mt-4 pt-3 border-top">
                            <form action="{{ route('admin.email-logs.destroy', $emailLog) }}" method="POST" class="d-inline w-100">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        class="btn btn-outline-danger w-100"
                                        onclick="return confirm('Êtes-vous sûr de vouloir supprimer cet historique d\\'email ? Cette action est irréversible.')">
                                    <i class="bi bi-trash me-2"></i>Supprimer cet historique
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Statistiques d'ouverture (si disponibles) -->
                <div class="card mt-3">
                    <div class="card-header bg-white">
                        <h6 class="mb-0">
                            <i class="bi bi-bar-chart me-2"></i>Statistiques
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="text-center py-3">
                            <i class="bi bi-graph-up text-muted fs-1 opacity-50"></i>
                            <p class="text-muted small mt-2 mb-0">
                                Les statistiques d'ouverture et de clics seront disponibles prochainement
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    border: none;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    border-radius: 12px;
}

.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1rem 1.25rem;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.btn-group .btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: #667eea;
}

#iframe-container {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

#email-source {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.stats-number {
    font-size: 1.5rem;
    font-weight: 600;
    color: #667eea;
}

.stats-label {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
</style>

<script>
function showPreview() {
    document.getElementById('preview-container').style.display = 'block';
    document.getElementById('source-container').style.display = 'none';
    
    // Mettre à jour les boutons
    document.querySelectorAll('.btn-group .btn').forEach(btn => {
        btn.classList.remove('active');
        btn.classList.add('btn-outline-primary', 'btn-outline-secondary');
    });
    event.target.classList.add('active');
    event.target.classList.remove('btn-outline-primary');
}

function showSource() {
    document.getElementById('preview-container').style.display = 'none';
    document.getElementById('source-container').style.display = 'block';
    
    // Mettre à jour les boutons
    document.querySelectorAll('.btn-group .btn').forEach(btn => {
        btn.classList.remove('active');
        btn.classList.add('btn-outline-primary', 'btn-outline-secondary');
    });
    event.target.classList.add('active');
    event.target.classList.remove('btn-outline-secondary');
}

function copySourceCode() {
    const sourceCode = document.getElementById('email-source').textContent;
    navigator.clipboard.writeText(sourceCode).then(() => {
        // Afficher une notification de succès
        const btn = event.target;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check me-1"></i>Copié !';
        btn.classList.remove('btn-outline-light');
        btn.classList.add('btn-success');
        
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-light');
        }, 2000);
    });
}

// Initialiser la page avec la prévisualisation visible
document.addEventListener('DOMContentLoaded', function() {
    showPreview();
});
</script>
@endsection