@extends('layouts.adminlte')
@section('title', 'Nuova Email')
@section('page_title', 'Composizione Email')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-edit mr-2"></i>Nuova Email</h3>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('email.send') }}" id="emailForm">
                    @csrf

                    <div class="form-group">
                        <label>Destinatari *</label>
                        <div class="mb-2">
                            <select name="destinatario_tipo" id="destinatario_tipo" class="form-control" onchange="toggleDestinatari()">
                                <option value="manuale">Email Manuale</option>
                                <option value="individui">Singoli Individui</option>
                                <option value="gruppo">Membri di un Gruppo</option>
                                <option value="mailing_list">Mailing List</option>
                            </select>
                        </div>

                        <div id="manual-input" class="destinatari-section">
                            <input type="text" name="to" id="to_manual" class="form-control" 
                                   placeholder="destinatario@email.it" value="{{ $prefill['to'] ?? '' }}">
                        </div>

                        <div id="individui-input" class="destinatari-section" style="display: none;">
                            <select name="individui[]" id="individui-select" class="form-control" multiple size="5">
                                @foreach($individui as $ind)
                                <option value="{{ $ind->id }}">{{ $ind->cognito }} {{ $ind->nome }} ({{ $ind->email_primaria ?? 'senza email' }})</option>
                                @endforeach
                            </select>
                            <small class="text-muted">Tieni premuto Ctrl per selezionare più individui</small>
                        </div>

                        <div id="gruppo-input" class="destinatari-section" style="display: none;">
                            <select name="gruppo_id" id="gruppo-select" class="form-control mb-2" onchange="loadGruppiContatti()">
                                <option value="">Seleziona gruppo...</option>
                                @foreach($gruppi as $gruppo)
                                <option value="{{ $gruppo->id }}">{{ $gruppo->nome }}</option>
                                @endforeach
                            </select>
                            <div id="gruppo-contatti" class="border rounded p-2" style="max-height: 150px; overflow-y: auto;">
                                <em class="text-muted">Seleziona un gruppo per vedere i contatti</em>
                            </div>
                        </div>

                        <div id="mailing-list-input" class="destinatari-section" style="display: none;">
                            <select name="mailing_list_id" id="mailing-list-select" class="form-control">
                                <option value="">Seleziona mailing list...</option>
                                @foreach($mailingLists as $list)
                                <option value="{{ $list->id }}">{{ $list->nome }} ({{ $list->contatti->count() }} contatti)</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="subject">Oggetto *</label>
                        <input type="text" name="subject" id="subject" class="form-control" 
                               value="{{ $prefill['subject'] ?? '' }}" required>
                    </div>

                    <div class="form-group">
                        <label for="body">Messaggio *</label>
                        <textarea name="body" id="body" class="form-control" rows="15" required>{{ $prefill['body'] ?? '' }}</textarea>
                    </div>

                    <div class="form-group">
                        <label>Allegati</label>
                        <div class="border rounded p-3 bg-light">
                            <label class="btn btn-sm btn-success mb-0">
                                <i class="fas fa-upload mr-1"></i> Carica file
                                <input type="file" name="allegati[]" multiple class="d-none">
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane mr-1"></i> Invia
                        </button>
                        <button type="button" class="btn btn-secondary ml-2" onclick="saveDraft()">
                            <i class="fas fa-save mr-1"></i> Salva Bozze
                        </button>
                        <a href="{{ route('email.index') }}" class="btn btn-default ml-2">
                            Annulla
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function toggleDestinatari() {
    const tipo = document.getElementById('destinatario_tipo').value;
    
    document.querySelectorAll('.destinatari-section').forEach(el => el.style.display = 'none');
    
    if (tipo === 'manuale') {
        document.getElementById('manual-input').style.display = 'block';
    } else if (tipo === 'individui') {
        document.getElementById('individui-input').style.display = 'block';
    } else if (tipo === 'gruppo') {
        document.getElementById('gruppo-input').style.display = 'block';
    } else if (tipo === 'mailing_list') {
        document.getElementById('mailing-list-input').style.display = 'block';
    }
}

function loadGruppiContatti() {
    const gruppoId = document.getElementById('gruppo-select').value;
    const container = document.getElementById('gruppo-contatti');
    
    if (!gruppoId) {
        container.innerHTML = '<em class="text-muted">Seleziona un gruppo per vedere i contatti</em>';
        return;
    }

    fetch('/gruppi/' + gruppoId + '/individui-email')
        .then(response => response.json())
        .then(data => {
            if (data.length === 0) {
                container.innerHTML = '<em class="text-muted">Nessun contatto email nel gruppo</em>';
                return;
            }
            
            let html = '';
            data.forEach(ind => {
                if (ind.email) {
                    html += `<div class="form-check">
                        <input class="form-check-input" type="checkbox" name="gruppo_emails[]" value="${ind.email}" id="email-${ind.id}">
                        <label class="form-check-label" for="email-${ind.id}">${ind.cogname} ${ind.nome} - ${ind.email}</label>
                    </div>`;
                }
            });
            container.innerHTML = html || '<em class="text-muted">Nessun contatto email nel gruppo</em>';
        });
}

function saveDraft() {
    const form = document.getElementById('emailForm');
    const formData = new FormData(form);
    
    fetch('{{ route('email.draft') }}', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        alert('Bozza salvata!');
    });
}
</script>
@endsection