@extends('layout')

@section('content')
<div class="background-image">
    <div class="square-container">
        <a href="{{ route('netflix') }}" class="back">
            <img src="{{ asset('images/back.png') }}" alt="Atrás">
        </a>
        <img src="{{ asset('images/logo.png') }}" alt="Logo" class="logo">
        <h2>Consulta de correo electrónico</h2>

        @empty(!$emails)
        <div class="email-container">
            <div class="email-list">
                @foreach ($emails as $email)
                <span data-id="#email-{{ $loop->index }}" class="email-item">
                    <h3>{{ $email['subject'] }}</h3>
                    <p>{{ date('d/m/Y H:i', strtotime($email['date'])) }}</p>
                </span>
                <div id="email-{{ $loop->index }}" class="email-content" style="background: #FFF; padding:20px; color:#333; display:none;">
                    {!! $email['body'] !!}
                </div>
                @endforeach
            </div>
            <div id="email-content">

            </div>
        </div>
        @else
        <div style="background: #FFF; padding:20px; color:#333;">
            No se encontraron correos con los criterios especificados.
        </div>
        @endif
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
    .email-container {
        display: flex;
        width: 100%;
    }

    .email-list {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
        margin-right: 48px;
    }

    #email-content {
        background: #FFF;
        border-radius: 12px;
        height: 400px;
        overflow-y: scroll;
    }

    .email-item {
        display: block;
        cursor: pointer;
        padding: 8px 36px 8px 12px;
        border-radius: 12px;
        background-color: transparent;
        color: white;
        text-decoration: none;
        margin-bottom: 10px;
        transition: background-color 0.3s ease;
    }

    .email-item:hover {
        background-color: #1F4779;
    }

    .email-item.active {
        background-color: #1F4779;
    }

    @media (max-width: 768px) {
        .email-container {
            display: block;
        }
        .email-item h3,.email-item p{padding:0;margin:0;}
        .email-list{margin:auto;width: 95%;}
        #email-content{height: auto;width:95%;margin:auto;}
        #email-content *{max-width: 100% !important;}
    }
</style>
<script>
    $('.email-item').on('click', function() {
        let t = $(this);
        let id = t.data('id');
        let html = $(id).html();
        $('.email-item').removeClass('active');
        t.addClass('active');
        $('#email-content').html(html);
    });
    $('.email-item:first-child').addClass('active');
    $('#email-content').html($('#email-0').html());
</script>
@endsection