@extends('layouts.adminlte')
@section('title', 'Email - ' . ucfirst($folder))
@section('page_title', 'Email')

@php
$currentFolder = $folders->firstWhere('type', $folder);
@endphp

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-envelope mr-2"></i>Email</h3>
        <div class="card-tools">
            <div class="btn-group mr-2">
                @foreach($folders as $f)
                <a href="{{ route('email.index', $f->type) }}" 
                   class="btn btn-xs {{ $folder === $f->type ? 'btn-primary' : 'btn-default' }}">
                    <i class="fas {{ $f->icon }}"></i>
                    {{ $f->name }}
                    @if($f->type === 'inbox' && $messages->where('is_read', false)->count() > 0)
                    <span class="badge badge-light">{{ $messages->where('is_read', false)->count() }}</span>
                    @endif
                </a>
                @endforeach
            </div>
            <a href="{{ route('email.compose') }}" class="btn btn-success btn-xs">
                <i class="fas fa-plus"></i> Nuova Email
            </a>
            <button class="btn btn-primary btn-xs" onclick="syncEmails()" id="syncBtn">
                <i class="fas fa-sync"></i> Ricevi/Invia
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="card-header pb-0">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="form-inline">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="selectAll" onchange="toggleAll(this)">
                            <label class="custom-control-label" for="selectAll">Seleziona tutto</label>
                        </div>
                        <span class="ml-3 text-muted" id="selectedCount">0 selezionati</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-group input-group-sm float-right" style="width: 220px;">
                        <select class="form-control" id="bulkAction">
                            <option value="">Azioni di massa...</option>
                            @if($folder !== 'trash')
                            <option value="mark_read">Marca come letto</option>
                            <option value="mark_unread">Marca come non letto</option>
                            <option value="star">Aggiungi a preferiti</option>
                            <option value="unstar">Rimuovi da preferiti</option>
                            <option value="move_trash">Sposta nel cestino</option>
                            @else
                            <option value="empty_trash">Svuota cestino</option>
                            @endif
                        </select>
                        <div class="input-group-append">
                            <button class="btn btn-secondary" type="button" onclick="executeBulkAction()">Applica</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th style="width: 30px;"></th>
                        <th style="width: 30px;"></th>
                        <th style="width: 150px;">
                            @php $sort = request('sort'); $dir = request('direction'); @endphp
                            @if($folder === 'sent' || $folder === 'inviate')
                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'to_email', 'direction' => $sort === 'to_email' && $dir === 'asc' ? 'desc' : 'asc']) }}" class="text-dark text-decoration-none">
                                    Destinatario {!! $sort === 'to_email' ? ($dir === 'asc' ? '▲' : '▼') : '' !!}
                                </a>
                            @else
                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'from_email', 'direction' => $sort === 'from_email' && $dir === 'asc' ? 'desc' : 'asc']) }}" class="text-dark text-decoration-none">
                                    Mittente {!! $sort === 'from_email' ? ($dir === 'asc' ? '▲' : '▼') : '' !!}
                                </a>
                            @endif
                        </th>
                        <th>
                            <a href="{{ request()->fullUrlWithQuery(['sort' => 'subject', 'direction' => $sort === 'subject' && $dir === 'asc' ? 'desc' : 'asc']) }}" class="text-dark text-decoration-none">
                                Oggetto {!! $sort === 'subject' ? ($dir === 'asc' ? '▲' : '▼') : '' !!}
                            </a>
                        </th>
                        <th style="width: 120px;">
                            <a href="{{ request()->fullUrlWithQuery(['sort' => 'received_at', 'direction' => $sort === 'received_at' && $dir === 'asc' ? 'desc' : 'asc']) }}" class="text-dark text-decoration-none">
                                Data {!! $sort === 'received_at' ? ($dir === 'asc' ? '▲' : '▼') : '' !!}
                            </a>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($messages as $message)
                    <tr class="{{ $message->is_read ? '' : 'font-weight-bold' }}">
                        <td style="width: 30px;" onclick="event.stopPropagation()">
                            <input type="checkbox" class="email-checkbox" value="{{ $message->id }}" onchange="updateCount()">
                        </td>
                        <td style="width: 30px;" onclick="event.stopPropagation(); window.location='{{ route('email.show', [$folder, $message->id]) }}'">
                            @if($message->is_starred)
                            <i class="fas fa-star text-warning"></i>
                            @endif
                        </td>
                        <td onclick="window.location='{{ route('email.show', [$folder, $message->id]) }}'">
                            {{ $message->is_sent ? 'A: ' . $message->to_email : ($message->from_name ?: $message->from_email) }}
                        </td>
                        <td onclick="window.location='{{ route('email.show', [$folder, $message->id]) }}'">
                            {{ $message->subject ?? '(senza oggetto)' }}
                        </td>
                        <td>
                            @if($message->received_at)
                                {{ $message->received_at->format('d/m/Y') }}
                            @elseif($message->sent_at)
                                {{ $message->sent_at->format('d/m/Y') }}
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">
                            <i class="fas fa-inbox fa-2x mb-2"></i>
                            <p>Nessuna email</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer d-flex justify-content-between align-items-center">
        <div>
            <form method="GET" class="form-inline" id="perPageForm">
                <label class="mr-2 small">Righe per pagina:</label>
                <select name="perPage" class="form-control form-control-sm" onchange="this.form.submit()" style="width: auto;">
                    @foreach([10, 20, 25, 50, 100] as $p)
                        <option value="{{ $p }}" {{ (int) request('perPage', 20) === $p ? 'selected' : '' }}>{{ $p }}</option>
                    @endforeach
                </select>
                @foreach(request()->except(['perPage', 'page']) as $key => $value)
                    @if(is_array($value))
                        @foreach($value as $v)
                            <input type="hidden" name="{{ $key }}[]" value="{{ $v }}">
                        @endforeach
                    @else
                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                    @endif
                @endforeach
            </form>
        </div>
        <div>
            {{ $messages->links('vendor.pagination.simple-bootstrap-4') }}
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
/* Bootstrap 4 Pagination override */
.pagination {
    display: flex !important;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    margin: 0;
    justify-content: center;
}

.page-item {
    display: inline-block;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    text-decoration: none;
    font-size: 0.875rem;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

.page-link:hover {
    color: #0056b3;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/* Icons as text characters */
.pagination .page-link::before,
.pagination .page-link::after {
    display: none;
}
</style>
@endpush

@if($syncInterval > 0 && $folder === 'inbox')
@push('scripts')
<script>
let syncInterval = {{ $syncInterval * 60 * 1000 }};
let syncTimeout;

function autoSync() {
    fetch('{{ url('email/sync/quick') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    }).then(() => {
        console.log('Auto sync completed');
    }).catch(() => {
        console.log('Auto sync failed');
    });
}

function startAutoSync() {
    if (syncInterval > 0) {
        syncTimeout = setInterval(autoSync, syncInterval);
    }
}

function stopAutoSync() {
    if (syncTimeout) {
        clearInterval(syncTimeout);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    startAutoSync();
    
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            stopAutoSync();
        } else {
            startAutoSync();
        }
    });
});
</script>
@endpush
@endif

@section('scripts')
<script>
function toggleAll(checkbox) {
    const checkboxes = document.querySelectorAll('.email-checkbox');
    checkboxes.forEach(function(cb) {
        cb.checked = checkbox.checked;
    });
    updateCount();
}

function updateCount() {
    const checkboxes = document.querySelectorAll('.email-checkbox:checked');
    document.getElementById('selectedCount').textContent = checkboxes.length + ' selezionati';
}

function executeBulkAction() {
    const select = document.getElementById('bulkAction');
    const action = select.value;
    if (!action) {
        alert('Seleziona un\'azione');
        return;
    }
    
    if (action === 'empty_trash') {
        if (!confirm('Sei sicuro di voler svuotare il cestino? Questa azione non è reversibile.')) {
            return;
        }
    }
    
    const checkboxes = document.querySelectorAll('.email-checkbox:checked');
    if (action !== 'empty_trash' && checkboxes.length === 0) {
        alert('Seleziona almeno una email');
        return;
    }
    
    let ids = [];
    if (action !== 'empty_trash') {
        ids = Array.from(checkboxes).map(function(cb) {
            return cb.value;
        });
    }
    
    fetch('{{ route('email.bulk') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ ids: ids, action: action })
    }).then(function(response) {
        return response.json();
    }).then(function(data) {
        if (data.success) {
            // Reset checkboxes before reload to avoid ghost selection
            document.querySelectorAll('.email-checkbox').forEach(function(cb) {
                cb.checked = false;
            });
            document.getElementById('selectAll').checked = false;
            updateCount();
            window.location.href = window.location.href;
        } else {
            alert(data.message || 'Errore');
        }
    }).catch(function() {
        alert('Errore');
    });
}

function syncEmails() {
    const btn = document.getElementById('syncBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sincronizzazione...';
    
    fetch('{{ url('email/sync/quick') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    }).then(function(response) {
        return response.json();
    }).then(function(data) {
        if (data.success) {
            location.reload();
        } else {
            alert(data.message || 'Errore durante la sincronizzazione');
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-sync"></i> Ricevi/Invia';
        }
    }).catch(function(error) {
        alert('Errore di connessione');
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-sync"></i> Ricevi/Invia';
    });
}
</script>
@endsection