@extends('layouts.yellow')
@section('content')
<style>
    :root {
        --azul-primario: #2A4E6D;
        --azul-secundario: #3B6EA5;
        --azul-destacado: #4A90E2;
        --azul-suave: #E3F2FD;
    }

    .email-container {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        border-radius: 15px;
        box-shadow: 0 8px 32px rgba(42, 78, 109, 0.1);
    }

    .card-header-custom {
        background: var(--azul-primario) !important;
        color: white !important;
        border-radius: 15px 15px 0 0 !important;
        padding: 1.5rem;
        border-bottom: 3px solid var(--azul-destacado);
    }

    .alert-success-custom {
        background: var(--azul-suave);
        color: var(--azul-primario);
        border: 2px solid var(--azul-destacado);
        border-radius: 12px;
    }

    .email-metadata {
        background: var(--azul-suave);
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .email-body {
        border: 2px solid var(--azul-suave);
        border-radius: 12px;
        padding: 1.5rem;
        min-height: 400px;
    }

    .email-content-container {
        border: 2px solid var(--azul-suave);
        border-radius: 8px;
        padding: 2rem;
        min-height: 400px;
        background: white;
        overflow-wrap: break-word;
        word-wrap: break-word;
        overflow: auto;
        font-family: 'Open Sans Regular', sans-serif;
        color: var(--azul-primario);
        line-height: 1.6;
        font-size: 1rem;
        max-width: 100%;
        position: relative;
    }
    
    /* Estilos para los elementos dentro del contenedor de correo */
    .email-content-container * {
        max-width: 100% !important;
        margin-bottom: 1rem;
        word-break: break-word;
        white-space: normal;
    }
    
    .email-content-container p {
        margin-bottom: 1rem;
        line-height: 1.6;
    }
    
    .email-content-container h1, 
    .email-content-container h2, 
    .email-content-container h3, 
    .email-content-container h4, 
    .email-content-container h5, 
    .email-content-container h6 {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        line-height: 1.4;
    }
    
    .email-content-container ul,
    .email-content-container ol {
        padding-left: 2rem;
        margin-bottom: 1rem;
    }
    
    .email-content-container li {
        margin-bottom: 0.5rem;
    }
    
    .email-content-container img {
        max-width: 100%;
        height: auto;
        margin: 1rem auto;
        display: block;
    }
    
    .email-content-container a {
        color: var(--azul-destacado);
        text-decoration: underline;
    }
    
    .email-content-container table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .email-content-container th,
    .email-content-container td {
        border: 1px solid #ddd;
        padding: 0.75rem;
        text-align: left;
    }
    
    .email-content-container blockquote {
        border-left: 4px solid var(--azul-suave);
        padding-left: 1rem;
        margin-left: 0;
        color: #666;
        font-style: italic;
    }

    textarea {
        width: 100%;
        padding: 1rem;
        border: 2px solid var(--azul-suave);
        border-radius: 8px;
        resize: none;
        transition: all 0.3s ease;
    }

    textarea:focus {
        border-color: var(--azul-destacado);
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    }

    @media (max-width: 768px) {
        .email-container {
            margin: 1rem;
        }
        
        iframe {
            min-height: 300px;
        }
        
        .attachment-item {
            flex: 1 0 100%;
        }
        
        .file-attachment {
            flex-direction: column;
            text-align: center;
        }
        
        .file-icon {
            margin-bottom: 10px;
        }
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            @if(session('success'))
                <div class="alert alert-success-custom alert-dismissible fade show">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
        </div>
    </div>
    
    <div class="row justify-content-center">
        <div class="col-12 col-lg-10 p-3">
            <div class="email-container">
                <div class="card border-0">
                    <div class="card-header card-header-custom">
                        <h2 class="mb-0">{{ __('common-table.titleViewEmailOut') }}</h2>
                    </div>
                    
                    <div class="card-body p-4">
                        <div class="email-metadata">
                            <h3 class="text-azul-primario mb-4">{{ $subject }}</h3>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <h5 class="text-azul-secundario mb-1">{{ __('De:') }}</h5>
                                    <p class="text-azul-primario">{{ $from }}</p>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <h5 class="text-azul-secundario mb-1">{{ __('Fecha:') }}</h5>
                                    <p class="text-azul-primario">{{ $date }}</p>
                                </div>
                            </div>
                        </div>
                        
                        @if(isset($files) && count($files) > 0)
                        <div class="attachment-card p-4 mb-4">
                            <h4 class="text-azul-primario mb-3">
                                <i class="fas fa-paperclip me-2"></i>Archivos Adjuntos
                            </h4>
                            <div class="attachment-container">
                                @foreach ($files as $file)
                                <div class="attachment-item">
                                    <div class="attachment-thumbnail">
                                        @if($file['is_image'])
                                        <div class="image-attachment">
                                            <img src="data:{{ $file['mime'] }};base64,{{ $file['data'] }}" 
                                                alt="{{ $file['name'] }}" 
                                                class="img-fluid mb-2">
                                            <p class="text-azul-primario mb-0 small text-truncate">{{ $file['name'] }}</p>
                                            <a href="data:{{ $file['mime'] }};base64,{{ $file['data'] }}" 
                                               download="{{ $file['name'] }}" 
                                               class="btn btn-sm btn-outline-primary mt-2 w-100">
                                                <i class="fas fa-download me-1"></i> Descargar
                                            </a>
                                        </div>
                                        @else
                                        <div class="file-attachment">
                                            <div class="file-icon">
                                                <i class="{{ getFileIcon($file['name']) }}"></i>
                                            </div>
                                            <div class="file-info">
                                                <p class="file-name text-truncate">{{ $file['name'] }}</p>
                                                <a href="data:{{ $file['mime'] }};base64,{{ $file['data'] }}" 
                                                   download="{{ $file['name'] }}" 
                                                   class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-download me-1"></i> Descargar
                                                </a>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        <div class="email-body">
                            <div class="mb-4">
                                <h5 class="text-azul-secundario mb-3">{{ __('Contenido:') }}</h5>
                                <div class="email-content-container">
                                    {!! $body !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@php
function getFileIcon($filename) {
    $extension = pathinfo($filename, PATHINFO_EXTENSION);
    $iconClass = 'fas fa-file text-secondary';
    
    switch(strtolower($extension)) {
        case 'pdf':
            $iconClass = 'fas fa-file-pdf text-danger';
            break;
        case 'doc':
        case 'docx':
            $iconClass = 'fas fa-file-word text-primary';
            break;
        case 'xls':
        case 'xlsx':
            $iconClass = 'fas fa-file-excel text-success';
            break;
        case 'ppt':
        case 'pptx':
            $iconClass = 'fas fa-file-powerpoint text-warning';
            break;
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
        case 'bmp':
            $iconClass = 'fas fa-file-image text-info';
            break;
        case 'zip':
        case 'rar':
        case '7z':
            $iconClass = 'fas fa-file-archive text-secondary';
            break;
        case 'txt':
            $iconClass = 'fas fa-file-alt text-secondary';
            break;
        case 'mp3':
        case 'wav':
        case 'ogg':
            $iconClass = 'fas fa-file-audio text-primary';
            break;
        case 'mp4':
        case 'avi':
        case 'mov':
            $iconClass = 'fas fa-file-video text-danger';
            break;
        case 'html':
        case 'css':
        case 'js':
            $iconClass = 'fas fa-file-code text-info';
            break;
    }
    
    return $iconClass;
}
@endphp

@endsection

@push('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
    .text-azul-primario { color: var(--azul-primario); }
    .text-azul-secundario { color: var(--azul-secundario); }
    .text-azul-destacado { color: var(--azul-destacado); }
    
    /* Estilos para archivos adjuntos */
    .attachment-card {
        background: var(--azul-suave);
        border-radius: 12px;
        border: 2px solid var(--azul-destacado);
    }
    
    .attachment-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 10px;
    }

    .attachment-item {
        flex: 1 0 300px;
        max-width: 100%;
    }

    .attachment-thumbnail {
        border: 2px solid var(--azul-suave);
        border-radius: 8px;
        padding: 1rem;
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .attachment-thumbnail:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(42, 78, 109, 0.1);
    }

    .file-attachment {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .file-icon {
        font-size: 2rem;
        color: var(--azul-destacado);
        flex-shrink: 0;
    }

    .file-info {
        flex-grow: 1;
        min-width: 0;
    }

    .file-name {
        margin-bottom: 5px;
        font-weight: 500;
        color: var(--azul-primario);
    }

    .image-attachment {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .image-attachment img {
        max-height: 150px;
        object-fit: contain;
        margin-bottom: 10px;
        border-radius: 4px;
    }
</style>
@endpush

@push('scripts')
<script>
    // Script para asegurar que el sidebar funcione correctamente
    document.addEventListener('DOMContentLoaded', function() {
        // Inicializar nuevamente los eventos del sidebar si es necesario
        if (typeof initSidebar === 'function') {
            initSidebar();
        }
        
        // Asegurar que los enlaces del sidebar están activos
        const sidebarLinks = document.querySelectorAll('.nav-aside .nav-link');
        sidebarLinks.forEach(link => {
            link.classList.remove('disabled');
            link.style.pointerEvents = 'auto';
        });
    });
</script>
@endpush