@extends(auth()->user()->hasRole('Company') ? 'wallet.layouts.master' : 'dashboard.layouts.master')
@section('title', $email['subject'])
@section('page-css')
<style>
    .email-layout { display: flex; gap: 1.5rem; min-height: 70vh; }
    .email-sidebar { width: 240px; flex-shrink: 0; }
    .email-main { flex: 1; min-width: 0; }

    .folder-list { list-style: none; padding: 0; margin: 0; }
    .folder-list li a {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.6rem 1rem; border-radius: 0.375rem;
        color: var(--bs-body-color); text-decoration: none;
        transition: all 0.15s; font-size: 0.9rem;
    }
    .folder-list li a:hover { background: rgba(115,103,240,0.08); }
    .folder-list li a.active { background: rgba(115,103,240,0.15); color: var(--bs-primary); font-weight: 600; }
    .folder-list li a i { font-size: 1.2rem; width: 1.5rem; text-align: center; }

    .email-detail-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); }
    .email-detail-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
    .email-detail-from { font-weight: 600; font-size: 0.95rem; }
    .email-detail-to { font-size: 0.8rem; color: var(--bs-secondary-color); margin-top: 0.25rem; }
    .email-detail-date { font-size: 0.8rem; color: var(--bs-secondary-color); white-space: nowrap; }
    .email-detail-body { padding: 1.5rem; }
    .email-body-frame { width: 100%; border: none; min-height: 300px; background: #fff; border-radius: 0.375rem; }
    .email-body-text { color: var(--bs-body-color); line-height: 1.7; word-wrap: break-word; overflow-wrap: break-word; }
    .email-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-top: 1px solid var(--bs-border-color); }
    .email-attachments { padding: 1rem 1.5rem; border-top: 1px solid var(--bs-border-color); }
    .attachment-item {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.4rem 0.75rem; background: rgba(115,103,240,0.08);
        border-radius: 0.375rem; font-size: 0.85rem; margin-right: 0.5rem; margin-bottom: 0.5rem;
        color: var(--bs-body-color); text-decoration: none;
    }
    .attachment-item:hover { background: rgba(115,103,240,0.15); color: var(--bs-primary); }
    .attachment-size { font-size: 0.75rem; color: var(--bs-secondary-color); }

    @media (max-width: 768px) {
        .email-layout { flex-direction: column; }
        .email-sidebar { width: 100%; }
    }
</style>
@endsection
@section('main-content')
<div class="mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0">Email</h4>
        <a href="{{ route('email.compose') }}" class="btn btn-primary d-flex align-items-center gap-1">
            <i class="ri ri-edit-line" style="font-size:1.1rem;"></i> Compose
        </a>
    </div>

    <div class="email-layout">
        {{-- Folder Sidebar --}}
        <div class="email-sidebar">
            <div class="card shadow-none">
                <div class="card-body p-2">
                    <ul class="folder-list">
                        @foreach($folders as $f)
                            @php
                                $encoded = str_replace('/', '---', $f['full_name']);
                                $icon = 'ri-mail-line';
                                $fname = strtolower($f['name']);
                                if ($fname === 'inbox') $icon = 'ri-inbox-line';
                                elseif (str_contains($fname, 'sent')) $icon = 'ri-send-plane-line';
                                elseif (str_contains($fname, 'draft')) $icon = 'ri-draft-line';
                                elseif (str_contains($fname, 'trash')) $icon = 'ri-delete-bin-line';
                                elseif (str_contains($fname, 'junk') || str_contains($fname, 'spam')) $icon = 'ri-spam-line';
                                elseif (str_contains($fname, 'archive')) $icon = 'ri-archive-line';
                            @endphp
                            <li>
                                <a href="{{ route('email.folder', ['folder' => $encoded]) }}"
                                   class="{{ $currentFolder === $f['full_name'] ? 'active' : '' }}">
                                    <i class="ri {{ $icon }}"></i>
                                    {{ $f['name'] }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        {{-- Email Detail --}}
        <div class="email-main">
            <div class="card shadow-none">
                {{-- Back button --}}
                <div class="px-3 pt-3">
                    <a href="{{ route('email.folder', ['folder' => $encodedFolder]) }}" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1">
                        <i class="ri ri-arrow-left-line" style="font-size:1rem;"></i> Back
                    </a>
                </div>

                <div class="email-detail-header">
                    <h5 class="fw-bold mb-3">{{ $email['subject'] }}</h5>
                    <div class="email-detail-meta">
                        <div>
                            <div class="email-detail-from">
                                {{ $email['from_name'] }}
                                <span class="fw-normal text-muted">&lt;{{ $email['from_email'] }}&gt;</span>
                            </div>
                            <div class="email-detail-to">
                                To:
                                @foreach($email['to'] as $to)
                                    {{ $to['name'] }} &lt;{{ $to['email'] }}&gt;{{ !$loop->last ? ',' : '' }}
                                @endforeach
                            </div>
                            @if(!empty($email['cc']))
                                <div class="email-detail-to">
                                    Cc:
                                    @foreach($email['cc'] as $cc)
                                        {{ $cc['name'] }} &lt;{{ $cc['email'] }}&gt;{{ !$loop->last ? ',' : '' }}
                                    @endforeach
                                </div>
                            @endif
                        </div>
                        <div class="email-detail-date">
                            @if($email['date'])
                                {{ $email['date']->format('D, M d, Y \a\t h:i A') }}
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Body --}}
                <div class="email-detail-body">
                    @if($email['has_html'])
                        <iframe class="email-body-frame" id="emailBodyFrame" sandbox="allow-same-origin allow-popups" title="Email message"></iframe>
                    @else
                        <div class="email-body-text">{!! $email['body'] !!}</div>
                    @endif
                </div>

                {{-- Attachments --}}
                @if(!empty($email['attachments']))
                    <div class="email-attachments">
                        <div class="fw-semibold mb-2" style="font-size:0.875rem;">Attachments ({{ count($email['attachments']) }})</div>
                        @foreach($email['attachments'] as $att)
                            <a href="{{ route('email.attachment', ['folder' => $encodedFolder, 'uid' => $email['uid'], 'index' => $att['index']]) }}"
                               class="attachment-item" title="Download {{ $att['name'] }}">
                                <i class="ri ri-attachment-line" style="font-size:1rem;"></i>
                                {{ $att['name'] }}
                                @if($att['size'])
                                    <span class="attachment-size">({{ number_format($att['size'] / 1024, 1) }} KB)</span>
                                @endif
                            </a>
                        @endforeach
                    </div>
                @endif

                {{-- Action Buttons --}}
                <div class="email-actions">
                    <a href="{{ route('email.reply', ['folder' => $encodedFolder, 'uid' => $email['uid']]) }}"
                       class="btn btn-sm btn-primary d-flex align-items-center gap-1">
                        <i class="ri ri-reply-line" style="font-size:1rem;"></i> Reply
                    </a>
                    <a href="{{ route('email.forward', ['folder' => $encodedFolder, 'uid' => $email['uid']]) }}"
                       class="btn btn-sm btn-outline-primary d-flex align-items-center gap-1">
                        <i class="ri ri-share-forward-line" style="font-size:1rem;"></i> Forward
                    </a>
                    <form method="POST" action="{{ route('email.delete', ['folder' => $encodedFolder, 'uid' => $email['uid']]) }}"
                          class="d-inline" onsubmit="return confirm('Are you sure you want to delete this email?')">
                        @csrf
                        <button type="submit" class="btn btn-sm btn-outline-danger d-flex align-items-center gap-1">
                            <i class="ri ri-delete-bin-line" style="font-size:1rem;"></i> Delete
                        </button>
                    </form>

                    {{-- Move dropdown --}}
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"
                                type="button" data-bs-toggle="dropdown">
                            <i class="ri ri-folder-transfer-line" style="font-size:1rem;"></i> Move
                        </button>
                        <ul class="dropdown-menu">
                            @foreach($folders as $f)
                                @if($f['full_name'] !== $currentFolder)
                                    <li>
                                        <form method="POST" action="{{ route('email.move', ['folder' => $encodedFolder, 'uid' => $email['uid']]) }}">
                                            @csrf
                                            <input type="hidden" name="destination" value="{{ $f['full_name'] }}">
                                            <button type="submit" class="dropdown-item">{{ $f['name'] }}</button>
                                        </form>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script>
    $(document).ready(function () {
        $("#email-page").addClass('active');

        var frame = document.getElementById('emailBodyFrame');
        if (frame) {
            var html = {!! json_encode($email['body'], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!};
            function fitFrame() {
                try {
                    var doc = frame.contentDocument;
                    if (!doc || !doc.body) return;
                    var height = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight, 300);
                    frame.style.height = (height + 24) + 'px';
                } catch (e) {}
            }
            frame.addEventListener('load', function () {
                try {
                    var imgs = frame.contentDocument.images;
                    for (var i = 0; i < imgs.length; i++) {
                        imgs[i].addEventListener('load', fitFrame);
                    }
                } catch (e) {}
                fitFrame();
            });
            frame.srcdoc = html;
        }
    });
</script>
@endsection