@extends('dashboard.layouts.main')
@section('content')
<style>
    select.form-control {
        color: black;
    }

    #progressContainer {
        width: 100%;
        max-width: 600px;
        margin: 20px auto;
        text-align: center;
    }

    #progressBar {
        width: 100%;
        height: 25px;
    }

    #progressText {
        margin-top: 10px;
        font-size: 16px;
        font-weight: bold;
    }

    .loader {
        border: 16px solid transparent;
        border-top: 16px solid blue;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .table-striped tbody tr:nth-child(odd) {
        background-color: #f9f9f9;
    }

    .table-striped tbody tr:nth-child(even) {
        background-color: #ffffff;
    }
/* Modal Overlay */
.custom-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1050;
    }
    /* Modal Container */
    .custom-modal {
      background: #fff;
      border-radius: 0.3rem;
      width: 90%;
      max-width: 600px;
      overflow: hidden;
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
      animation: fadeIn 0.3s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    /* Tab Content - Hide by default */
    .custom-tab-content {
      display: none;
    }
    .custom-tab-content.active {
      display: block;
    }
    .badges {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }
    .badge {
      display: inline-block;
      padding: 5px 10px 5px;
      border-radius: 12px;
      font-size: 0.8em;
      color: #fff;
    }
    .badge.primary { background: linear-gradient(to right, #da8cff, #9a55ff) !important;; }

  </style>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">            
            <div class="card-header">
                <h4>Email Details</h4> 
                <h4>{{ $email_attachment->email_address }}</h4> 
            </div>
            <!-- Tab Navigation (using Bootstrap nav classes) -->
            <ul class="nav nav-tabs" id="customTabNav">
            <li class="nav-item">
                <a href="#" class="nav-link active" data-tab="correspondences">Correspondences</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" data-tab="attachments">Attachments</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" data-tab="recipients">Recipients</a>
            </li>
            </ul>
            <!-- Tab Content -->
            <div class="pt-3">
                <div id="correspondences" class="custom-tab-content active">
                    @if(count($emails))
                        <div class="list-group">
                            @foreach($emails as $email)
                                <div class="list-group-item">
                                    <p>
                                        <strong>From:</strong> {{ implode(', ', $email['from']) }}<br>
                                        <strong>To:</strong> {{ is_array($email['to']) ? implode(', ', $email['to']) : $email['to'] }}<br>
                                        <strong>Date:</strong> {{ $email['date_time'] }}
                                    </p>

                                    <h5>{{ $email['subject'] }} @if(count($email['attachment']))<i class="mdi mdi-attachment"> </i>@endif</h5>
                                    <p>
                                        <strong>Body:</strong> {{ $email['bodyText'] }}
                                        @foreach($email['attachment'] as $attachment)
                                            <p>{{$attachment['filename']}}</p>
                                        @endforeach
                                    </p>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p>No emails found.</p>
                    @endif
                </div>
                <div id="attachments" class="custom-tab-content">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>DATE & TIME</th>
                                <th>FILE TYPE</th>
                                <th>FILE SIZE</th>
                                <th>USED</th>
                                <th>FILE NAME</th>
                            </tr>
                        </thead>
                        <tbody>
                        @if($email_attachment->attachments->count())
                            @foreach($email_attachment->attachments as $attach)
                                <tr>
                                    <td>{{ $attach->date_time }}</td>
                                    <td>{{ $attach->type }}</td>
                                    <td>{{ $attach->size }}</td>
                                    <td>{{ storage_percentage($attach->size, auth()->user()->total_storage) }}</td>
                                    <td>{{ $attach->attachment_name }}</td>
                                </tr>
                            @endforeach
                        @else
                            <tr><td colspan="5">No attachments found.</td></tr>
                        @endif  
                        </tbody>
                    </table>
                </div>
                <div id="recipients" class="custom-tab-content">
                    <div class="card">
                        <div class="card-body">
                            <h5>To:</h5>
                            @if(count($recipients['to']))
                                @foreach($recipients['to'] as $recipient)
                                    <span class="mr-1 rounded-full bg-primary px-1 text-xs text-white">{{ $recipient }}</span>
                                @endforeach
                            @else
                                <span class="mr-1 rounded-full bg-secondary px-1 text-xs text-white">None</span>
                            @endif
                            <h5>CC:</h5>
                            @if(count($recipients['cc']))
                                @foreach($recipients['cc'] as $recipient)
                                    <span class="badge rounded-pill text-bg-info">{{ $recipient }}</span>
                                @endforeach
                            @else
                                <span class="mr-1 rounded-full bg-secondary px-1 text-xs text-white">None</span>
                            @endif
                            <h5>BCC:</h5>
                            @if(count($recipients['bcc']))
                                @foreach($recipients['bcc'] as $recipient)
                                    <span class="mr-1 rounded-full bg-secondary px-1 text-xs text-white">{{ $recipient }}</span>
                                @endforeach
                            @else
                                <span class="mr-1 rounded-full bg-secondary px-1 text-xs text-white">None</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>        
</div>


  <script>
    // Get elements
    const tabLinks = document.querySelectorAll('#customTabNav .nav-link');
    const tabContents = document.querySelectorAll('.custom-tab-content');
    
    // Tab switching functionality
    tabLinks.forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        // Remove active state from all tabs and content
        tabLinks.forEach(l => l.classList.remove('active'));
        tabContents.forEach(c => c.classList.remove('active'));
        
        // Activate clicked tab and corresponding content
        this.classList.add('active');
        const targetTab = this.getAttribute('data-tab');
        document.getElementById(targetTab).classList.add('active');
      });
    });
  </script>



<script src="{{asset('assets/vendors/js/jquery.min.js')}}"></script>

    
@endsection