@extends(auth()->user()->hasRole('Company') ? 'wallet.layouts.master' : 'dashboard.layouts.master')
@section('title', 'Email - ' . ($currentFolder ?? 'Inbox'))
@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-row {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.75rem 1rem; border-bottom: 1px solid var(--bs-border-color);
        transition: background 0.1s; cursor: pointer; text-decoration: none; color: inherit;
    }
    .email-row:hover { background: rgba(115,103,240,0.05); color: inherit; }
    .email-row.unread { font-weight: 600; }
    .email-row.unread .email-subject { color: var(--bs-heading-color); }
    .email-from { width: 200px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
    .email-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--bs-secondary-color); }
    .email-date { width: 130px; flex-shrink: 0; text-align: right; font-size: 0.8rem; color: var(--bs-secondary-color); }
    .email-attach { width: 24px; flex-shrink: 0; color: var(--bs-secondary-color); }

    .email-pagination { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--bs-secondary-color); }
    .email-pagination a { color: var(--bs-primary); text-decoration: none; padding: 0.35rem 0.75rem; border-radius: 0.375rem; border: 1px solid var(--bs-border-color); }
    .email-pagination a:hover { background: rgba(115,103,240,0.1); }
    .email-pagination .disabled { opacity: 0.4; pointer-events: none; }

    .email-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
    .email-search { display: flex; align-items: center; gap: 0.5rem; flex: 1; max-width: 350px; }
    .email-search input {
        flex: 1; padding: 0.4rem 0.75rem; border: 1px solid var(--bs-border-color);
        border-radius: 0.375rem; background: var(--bs-body-bg); color: var(--bs-body-color);
        font-size: 0.875rem; outline: none;
    }
    .email-search input:focus { border-color: var(--bs-primary); }

    @media (max-width: 768px) {
        .email-layout { flex-direction: column; }
        .email-sidebar { width: 100%; }
        .email-from { width: 120px; }
        .email-date { width: 80px; }
    }
</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">{{ auth()->user()->hasRole('Company') ? 'Email Support' : '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 List --}}
        <div class="email-main">
            <div class="card shadow-none">
                <div class="email-toolbar">
                    <form method="GET" action="{{ route('email.folder', ['folder' => $encodedFolder]) }}" class="email-search">
                        <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Search by subject...">
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="ri ri-search-line"></i>
                        </button>
                        @if($search)
                            <a href="{{ route('email.folder', ['folder' => $encodedFolder]) }}" class="btn btn-sm btn-outline-secondary">Clear</a>
                        @endif
                    </form>
                    <div class="text-muted" style="font-size:0.75rem;">
                        {{ $total }} {{ Str::plural('email', $total) }}
                    </div>
                </div>

                <div class="card-body p-0">
                    @forelse($emails as $email)
                        <a href="{{ route('email.show', ['folder' => $encodedFolder, 'uid' => $email['uid']]) }}"
                           class="email-row {{ $email['seen'] ? '' : 'unread' }}">
                            <div class="email-from" title="{{ $email['from_email'] }}">
                                {{ $email['from_name'] ?: $email['from_email'] }}
                            </div>
                            <div class="email-attach">
                                @if($email['has_attachments'])
                                    <i class="ri ri-attachment-line" style="font-size:1rem;"></i>
                                @endif
                            </div>
                            <div class="email-subject">{{ $email['subject'] }}</div>
                            <div class="email-date">
                                @if($email['date'])
                                    {{ $email['date']->format('M d, Y H:i') }}
                                @endif
                            </div>
                        </a>
                    @empty
                        <div class="text-center py-5 text-muted">
                            <i class="ri ri-mail-line" style="font-size:3rem; opacity:0.3;"></i>
                            <p class="mt-2">No emails found.</p>
                        </div>
                    @endforelse
                </div>

                @if($totalPages > 1)
                    <div class="email-pagination">
                        <span>Page {{ $page }} of {{ $totalPages }}</span>
                        <div class="d-flex gap-2">
                            <a href="{{ route('email.folder', ['folder' => $encodedFolder, 'page' => $page - 1, 'search' => $search]) }}"
                               class="{{ $page <= 1 ? 'disabled' : '' }}">Previous</a>
                            <a href="{{ route('email.folder', ['folder' => $encodedFolder, 'page' => $page + 1, 'search' => $search]) }}"
                               class="{{ $page >= $totalPages ? 'disabled' : '' }}">Next</a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script>
    $(document).ready(function () {
        $("#email-page").addClass('active');
    });
</script>
@endsection