@extends('users/layout')
@section('content')
<!-- Start of Breadcrumbs section -->
<section id="ori-breadcrumbs" class="ori-breadcrumbs-section position-relative" data-background="{{url('template/assets/img/bg/bread-bg.png')}}" style="padding: calc(10px + var(--navbar-height, 70px)) 0 10px; scroll-margin-top: calc(var(--navbar-height, 70px));">
    <div class="container" style="padding-left:8px; padding-right:8px;">
        <div class="ori-breadcrumb-content text-center ul-li">
            <h1 style="
                color: #724b2c; 
                font-weight: 700; 
                text-shadow: 0 1px 2px rgba(0,0,0,0.08);
                font-size: 1.9rem;
                margin: 0 0 8px 0;
                line-height: 1.12;
            ">{{ $mailing->title }}</h1>
        </div>
    </div>
</section>
<!-- End of Breadcrumbs section -->

<section class="py-3 py-md-5">
    <div class="container-fluid container-lg">
        <div class="row justify-content-center">
            <div class="col-12 col-sm-11 col-md-10 col-lg-8 col-xl-7">
                <!-- Container isolé pour le mailing -->
                <div class="mailing-wrapper" style="
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 8px 32px rgba(45, 56, 85, 0.15);
                    overflow-x: auto;
                    overflow-y: visible;
                    border: 2px solid #f8f9fa;
                    margin: 0 auto;
                    max-width: 100%;
                    position: relative;
                ">
                    <!-- Bande décorative en haut -->
                    <div style="
                        height: 4px;
                        background: linear-gradient(90deg, #724b2c 0%, #2a3855 50%, #3D4C6F 100%);
                        border-radius: 12px 12px 0 0;
                    "></div>
                    <!-- Container pour le contenu du mailing -->
                    <div class="mailing-content">
                        <style>
                            .mailing-content {
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif;
                                line-height: 1.6;
                                color: #333;
                                display: block;
                                padding: 20px;
                                margin: 0;
                                background: #ffffff;
                                overflow-x: visible;
                                word-wrap: break-word;
                                max-width: 100%;
                            }
                            
                            /* Préserver les styles inline de Stripo avec Garamond */
                            .mailing-content * {
                                box-sizing: border-box;
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
                            }
                            
                            .mailing-content table {
                                border-collapse: collapse;
                                width: 100% !important;
                                max-width: 100% !important;
                                margin: 0 auto;
                                table-layout: auto !important;
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
                            }
                            
                            .mailing-content td, .mailing-content th {
                                padding: 0 !important;
                                vertical-align: top;
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
                                margin: 0 !important;
                            }
                            
                            .mailing-content img {
                                max-width: 100% !important;
                                width: auto !important;
                                height: auto !important;
                                display: block;
                                margin: 0 auto !important;
                                vertical-align: top;
                                border: 0;
                                outline: none;
                            }
                            
                            .mailing-content p {
                                margin: 16px 0;
                                line-height: 1.7;
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
                                font-size: 16px;
                            }
                            
                            .mailing-content h1, .mailing-content h2, .mailing-content h3, .mailing-content h4 {
                                margin: 20px 0 16px 0;
                                line-height: 1.3;
                                font-weight: bold;
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
                            }
                            
                            .mailing-content h1 {
                                font-size: 2.2em;
                                font-weight: 700;
                            }
                            
                            .mailing-content h2 {
                                font-size: 1.8em;
                                font-weight: 600;
                            }
                            
                            .mailing-content h3 {
                                font-size: 1.5em;
                                font-weight: 600;
                            }
                            
                            .mailing-content a {
                                color: #724b2c;
                                text-decoration: none;
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
                                transition: all 0.3s ease;
                            }
                            
                            .mailing-content a:hover {
                                text-decoration: underline;
                                color: #2a3855;
                            }
                            
                            /* Styles pour les boutons dans le contenu mailing */
                            .mailing-content .btn, .mailing-content button {
                                display: inline-block;
                                padding: 12px 24px;
                                margin: 8px 4px;
                                border: none;
                                border-radius: 8px;
                                cursor: pointer;
                                text-decoration: none;
                                font-weight: 600;
                                text-align: center;
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
                                background: linear-gradient(135deg, #724b2c 0%, #2a3855 100%);
                                color: white !important;
                                transition: all 0.3s ease;
                                box-shadow: 0 4px 12px rgba(114, 75, 44, 0.3);
                            }
                            
                            .mailing-content .btn:hover, .mailing-content button:hover {
                                transform: translateY(-2px);
                                box-shadow: 0 6px 16px rgba(114, 75, 44, 0.4);
                                background: linear-gradient(135deg, #2a3855 0%, #724b2c 100%);
                            }
                            
                            /* Améliorer la lisibilité du texte avec Garamond */
                            .mailing-content strong, .mailing-content b {
                                font-weight: 700;
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
                            }
                            
                            .mailing-content em, .mailing-content i {
                                font-style: italic;
                                font-family: 'Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
                            }
                            
                            /* Responsive design */
                            @media (max-width: 480px) {
                                .mailing-content {
                                    padding: 15px;
                                }
                                .mailing-content table {
                                    font-size: 14px;
                                }
                                .mailing-content p {
                                    font-size: 15px;
                                }
                            }
                            
                            @media (min-width: 481px) and (max-width: 768px) {
                                .mailing-content {
                                    padding: 20px;
                                }
                                .mailing-content p {
                                    font-size: 16px;
                                }
                            }
                            
                            @media (min-width: 769px) {
                                .mailing-content {
                                    padding: 30px;
                                }
                                .mailing-content p {
                                    font-size: 17px;
                                }
                            }
                            
                            /* Assurer que les éléments Stripo s'affichent correctement */
                            .mailing-content .es-wrapper {
                                width: 100% !important;
                                max-width: 100% !important;
                                margin: 0;
                                padding: 0;
                            }
                            
                            .mailing-content .es-content, .mailing-content .es-header, .mailing-content .es-footer {
                                table-layout: auto !important;
                                width: 100% !important;
                                max-width: 100% !important;
                            }
                            
                            .mailing-content .es-content-body {
                                background-color: transparent;
                                width: 100% !important;
                                max-width: 100% !important;
                            }
                            
                            /* Forcer la responsivité sur tous les éléments de largeur fixe */
                            .mailing-content [width] {
                                width: auto !important;
                                max-width: 100% !important;
                            }
                            
                            .mailing-content [style*="width"] {
                                max-width: 100% !important;
                            }
                            
                            /* Correction spécifique pour les cellules de tableau et images */
                            .mailing-content td, .mailing-content th {
                                word-wrap: break-word !important;
                                word-break: break-word !important;
                                overflow-wrap: break-word !important;
                            }
                            
                            /* Supprimer les marges par défaut sur les conteneurs d'images */
                            .mailing-content td img, .mailing-content th img {
                                margin: 0 !important;
                                padding: 0 !important;
                                vertical-align: top !important;
                                border: 0 !important;
                            }
                            
                            /* Forcer l'espacement minimal pour les images dans les tableaux */
                            .mailing-content table td[align="center"] img,
                            .mailing-content table td[style*="text-align: center"] img,
                            .mailing-content table td[style*="text-align:center"] img {
                                margin: 0 auto !important;
                                display: block !important;
                            }
                            
                            /* Éliminer les espaces autour des images Stripo */
                            .mailing-content .es-content img,
                            .mailing-content .es-header img,
                            .mailing-content .es-footer img {
                                margin: 0 !important;
                                padding: 0 !important;
                                line-height: 1 !important;
                            }
                        </style>
                        {!! $mailing->html_content !!}
                    </div>
                </div>
                
                <!-- Boutons d'action -->
                <div class="text-center mt-4 mb-4">
                    <div class="btn-toolbar justify-content-center" role="toolbar">
                        <div class="btn-group me-2" role="group">
                            <a href="{{ url()->previous() }}" class="btn btn-outline-dark" style="
                                border-color: #724b2c;
                                color: #724b2c;
                                font-family: 'Garamond', 'EB Garamond', serif;
                                font-weight: 600;
                                padding: 10px 20px;
                                border-radius: 8px;
                                transition: all 0.3s ease;
                            " onmouseover="this.style.backgroundColor='#724b2c'; this.style.color='white';" 
                               onmouseout="this.style.backgroundColor='transparent'; this.style.color='#724b2c';">
                                <i class="fas fa-arrow-left"></i> Retour
                            </a>
                        </div>
                        
                        <div class="btn-group me-2" role="group">
                            <button onclick="window.print()" class="btn" style="
                                background: linear-gradient(135deg, #2a3855 0%, #3D4C6F 100%);
                                color: white;
                                border: none;
                                font-family: 'Garamond', 'EB Garamond', serif;
                                font-weight: 600;
                                padding: 10px 20px;
                                border-radius: 8px;
                                transition: all 0.3s ease;
                                box-shadow: 0 4px 12px rgba(42, 56, 85, 0.3);
                            " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(42, 56, 85, 0.4)';" 
                               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(42, 56, 85, 0.3)';">
                                <i class="fas fa-print"></i> Imprimer
                            </button>
                        </div>
                        
                        <div class="btn-group" role="group">
                            <button onclick="shareEmail()" class="btn btn-outline-info" style="
                                border-color: #3D4C6F;
                                color: #3D4C6F;
                                font-family: 'Garamond', 'EB Garamond', serif;
                                font-weight: 600;
                                padding: 10px 20px;
                                border-radius: 8px;
                                transition: all 0.3s ease;
                            " onmouseover="this.style.backgroundColor='#3D4C6F'; this.style.color='white';" 
                               onmouseout="this.style.backgroundColor='transparent'; this.style.color='#3D4C6F';">
                                <i class="fas fa-share-alt"></i> Partager
                            </button>
                        </div>
                    </div>
                    
                    <!-- Info sur la publication -->
                    @if($mailing->published_at)
                    <p class="text-muted mt-3 mb-0" style="
                        font-family: 'Garamond', 'EB Garamond', serif;
                        font-style: italic;
                        color: #6c757d;
                        font-size: 14px;
                    ">
                        <i class="fas fa-calendar-alt"></i> 
                        Publié le {{ $mailing->published_at->format('d F Y à H:i') }}
                    </p>
                    @endif
                </div>
                
                <script>
                function shareEmail() {
                    if (navigator.share) {
                        navigator.share({
                            title: '{{ $mailing->title }}',
                            text: 'Découvrez ce mailing : {{ $mailing->title }}',
                            url: window.location.href
                        }).catch(console.error);
                    } else {
                        // Fallback: copier l'URL
                        navigator.clipboard.writeText(window.location.href).then(function() {
                            // Créer une notification stylée
                            showNotification('Lien copié dans le presse-papiers!', 'success');
                        }).catch(function() {
                            // Fallback si clipboard ne fonctionne pas
                            prompt('Copiez ce lien :', window.location.href);
                        });
                    }
                }
                
                function showNotification(message, type) {
                    const notification = document.createElement('div');
                    notification.style.cssText = `
                        position: fixed;
                        top: 20px;
                        right: 20px;
                        z-index: 10000;
                        padding: 15px 20px;
                        border-radius: 8px;
                        color: white;
                        font-family: 'Garamond', 'EB Garamond', serif;
                        font-weight: 600;
                        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                        transition: all 0.3s ease;
                        background: ${type === 'success' ? 'linear-gradient(135deg, #724b2c 0%, #2a3855 100%)' : '#dc3545'};
                    `;
                    notification.textContent = message;
                    document.body.appendChild(notification);
                    
                    setTimeout(() => {
                        notification.style.opacity = '0';
                        notification.style.transform = 'translateX(100%)';
                        setTimeout(() => document.body.removeChild(notification), 300);
                    }, 3000);
                }
                </script>
            </div>
        </div>
    </div>
</section>

@endsection

@push('styles')
<style>
    /* Import Google Fonts pour Garamond */
    @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
    
    /* Améliorations visuelles générales */
    .ori-breadcrumbs-section {
        position: relative;
        overflow: hidden;
    }
    
    .ori-breadcrumbs-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(114, 75, 44, 0.1) 0%, rgba(42, 56, 85, 0.1) 100%);
        z-index: 1;
    }
    
    .ori-breadcrumb-content {
        position: relative;
        z-index: 2;
    }
    
    .breadcrumb a {
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .breadcrumb a:hover {
        text-decoration: underline;
        transform: translateY(-1px);
    }
    
    /* Animation d'apparition du container mailing */
    .mailing-wrapper {
        animation: fadeInUp 0.6s ease-out;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Styles spécifiques pour l'impression */
    @media print {
        /* Masquer les éléments non nécessaires à l'impression */
        .ori-breadcrumbs-section,
        .btn,
        .btn-toolbar,
        nav,
        footer,
        .container-fluid,
        [onclick] {
            display: none !important;
        }
        
        /* Optimiser le layout pour l'impression */
        .mailing-wrapper {
            box-shadow: none !important;
            border: 1px solid #ddd !important;
            margin: 0 !important;
            page-break-inside: avoid;
        }
        
        .mailing-content {
            padding: 20px !important;
            font-size: 12pt !important;
            line-height: 1.4 !important;
        }
        
        .mailing-content h1, .mailing-content h2, .mailing-content h3 {
            page-break-after: avoid;
            margin-top: 0 !important;
        }
        
        .mailing-content p {
            orphans: 3;
            widows: 3;
        }
        
        /* Forcer les couleurs pour l'impression */
        .mailing-content a {
            color: #724b2c !important;
        }
        
        body {
            margin: 0 !important;
            padding: 15px !important;
            background: white !important;
        }
        
        /* Ajouter un en-tête d'impression */
        .mailing-wrapper::before {
            content: "{{ $mailing->title }} - Imprimé le " "{{ now()->format('d/m/Y à H:i') }}";
            display: block;
            text-align: center;
            font-size: 10pt;
            color: #666;
            border-bottom: 1px solid #ddd;
            padding: 10px 0;
            margin-bottom: 20px;
        }
    }
    
    /* Responsive amélioré */
    @media (max-width: 480px) {
        .ori-breadcrumb-content h1 {
            font-size: 1.8rem !important;
        }
        
        .btn-toolbar {
            flex-direction: column;
            gap: 10px;
        }
        
        .btn-group {
            width: 100%;
            margin: 0 !important;
        }
        
        .btn {
            width: 100%;
        }
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        .ori-breadcrumb-content h1 {
            font-size: 2.2rem !important;
        }
        
        .btn-toolbar {
            flex-wrap: wrap;
            gap: 10px;
        }
    }
    
    /* Fix pour les très petits écrans */
    @media (max-width: 320px) {
        .container-fluid {
            padding-left: 5px !important;
            padding-right: 5px !important;
        }
        
        .mailing-wrapper {
            margin: 0 5px !important;
        }
    }
    
    /* Amélioration de l'accessibilité */
    .btn:focus {
        outline: 3px solid rgba(114, 75, 44, 0.5);
        outline-offset: 2px;
    }
    
    /* Styles pour les liens dans les breadcrumbs */
    .breadcrumb-item + .breadcrumb-item::before {
        content: "›";
        color: #724b2c;
        font-weight: bold;
    }
</style>
@endpush