@extends('layouts.adminlte')
@section('title', 'Modifica Mailing List')
@section('page_title', 'Modifica Mailing List')

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-edit mr-2"></i>Modifica Mailing List</h3>
    </div>
    <div class="card-body">
        <form action="{{ url('/mailing-liste/' . $mailingList->id) }}" method="POST" id="ml-form">
            @csrf @method('PUT')
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Nome *</label>
                        <input type="text" name="nome" class="form-control" value="{{ $mailingList->nome }}" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="custom-control custom-checkbox mt-4">
                            <input type="checkbox" class="custom-control-input" id="attiva" name="attiva" value="1" {{ $mailingList->attiva ? 'checked' : '' }}>
                            <label class="custom-control-label" for="attiva">Lista attiva</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>Descrizione</label>
                <textarea name="descrizione" class="form-control" rows="2">{{ $mailingList->descrizione }}</textarea>
            </div>

            <hr>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Seleziona Gruppi</label>
                        <select name="gruppi[]" id="gruppi-select" class="form-control" multiple size="6">
                        </select>
                        <small class="text-muted">Seleziona con Ctrl/Cmd (ogni membro del gruppo sarà aggiunto)</small>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Seleziona Individui</label>
                        <select name="individui[]" id="individui-select" class="form-control" multiple size="6">
                        </select>
                        <small class="text-muted">Seleziona con Ctrl/Cmd</small>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="caricaSelezionati()">
                    <i class="fas fa-search mr-1"></i> Carica contatti
                </button>
                <button type="button" class="btn btn-secondary" onclick="selezionaTutti()">
                    <i class="fas fa-check-square mr-1"></i> Seleziona tutti
                </button>
                <button type="button" class="btn btn-warning" onclick="deselezionaTutti()">
                    <i class="fas fa-square mr-1"></i> Deseleziona tutti
                </button>
            </div>

            <div class="form-group">
                <label>Contatti da includere (<span id="contatti-count">{{ $mailingList->contatti->count() }}</span>)</label>
                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-bordered table-sm">
                        <thead class="thead-light">
                            <tr>
                                <th style="width: 40px;">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="select-all" onchange="toggleSelectAll(this)">
                                        <label class="custom-control-label" for="select-all"></label>
                                    </div>
                                </th>
                                <th>Codice</th>
                                <th>Cognome</th>
                                <th>Nome</th>
                                <th>Email</th>
                                <th>Stato</th>
                                <th style="width: 50px;"></th>
                            </tr>
                        </thead>
                        <tbody id="contatti-tbody">
                            @foreach($mailingList->contatti as $contact)
                            @if($contact->individuo)
                            <tr>
                                <td>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input contatto-checkbox" id="contatto-{{ $contact->id }}" value="{{ $contact->individuo->id }}" data-email="{{ $contact->individuo->contatti->where('tipo', 'email')->first()?->valore }}" checked>
                                        <label class="custom-control-label" for="contatto-{{ $contact->id }}"></label>
                                    </div>
                                </td>
                                <td><span class="badge badge-secondary">{{ $contact->individuo->codice_id }}</span></td>
                                 <td>{{ $contact->individuo->cognome }}</td>
                                <td>{{ $contact->individuo->nome }}</td>
                                <td>{{ $contact->individuo->contatti->where('tipo', 'email')->first()?->valore ?: '-' }}</td>
                                <td>
                                    @if($contact->opt_in)
                                    <span class="badge badge-success">Iscritto</span>
                                    @else
                                    <span class="badge badge-danger">Disiscritto</span>
                                    @endif
                                </td>
                                <td>
                                    <button type="button" class="btn btn-xs btn-outline-danger" onclick="rimuoviContatto(this)">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </td>
                            </tr>
                            @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <small class="text-muted">Deseleziona le righe che non vuoi includere nella lista</small>
            </div>

            <button type="submit" class="btn btn-success">
                <i class="fas fa-save mr-1"></i> Salva
            </button>
            <a href="{{ route('mailing-liste.index') }}" class="btn btn-secondary">Annulla</a>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
let contattiCaricati = [];

document.addEventListener('DOMContentLoaded', function() {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

    fetch('/gruppi/all', {
        credentials: 'include',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        }
    })
        .then(response => {
            if (!response.ok) throw new Error('HTTP ' + response.status);
            return response.json();
        })
        .then(data => {
            const select = document.getElementById('gruppi-select');
            console.log('Gruppi caricati:', data.length);
            data.forEach(function(g) {
                const option = document.createElement('option');
                option.value = g.id;
                option.textContent = g.full_path || g.nome;
                select.appendChild(option);
            });
        })
        .catch(function(err) {
            console.error('Errore gruppi:', err);
        });

    fetch('/individui/all', {
        credentials: 'include',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        }
    })
        .then(response => {
            if (!response.ok) throw new Error('HTTP ' + response.status);
            return response.json();
        })
        .then(data => {
            const select = document.getElementById('individui-select');
            console.log('Individui caricati:', data.length);
            data.forEach(function(ind) {
                const option = document.createElement('option');
                option.value = ind.id;
                 option.textContent = ind.codice_id + ' - ' + ind.cognome + ' ' + ind.nome;
                select.appendChild(option);
            });
        })
        .catch(function(err) {
            console.error('Errore individui:', err);
        });

    contattiCaricati = Array.from(document.querySelectorAll('.contatto-checkbox')).map(cb => ({
        individuo_id: parseInt(cb.value),
        email: cb.dataset.email,
        existing: true
    }));
});

const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

function caricaSelezionati() {
    const gruppiIds = Array.from(document.getElementById('gruppi-select').selectedOptions).map(opt => parseInt(opt.value));
    const individuiIds = Array.from(document.getElementById('individui-select').selectedOptions).map(opt => parseInt(opt.value));

    if (gruppiIds.length === 0 && individuiIds.length === 0) {
        alert('Seleziona almeno un gruppo o un individuo');
        return;
    }

    const promises = [];

    gruppiIds.forEach(function(gruppoId) {
        promises.push(
            fetch('/gruppi/' + gruppoId + '/individui-email', {
                credentials: 'include',
                headers: { 'X-CSRF-TOKEN': csrfToken }
            })
                .then(response => {
                    if (!response.ok) throw new Error('HTTP ' + response.status);
                    return response.json();
                })
                .then(data => {
                    data.forEach(function(ind) {
                        if (ind.emails && ind.emails.length > 0) {
                            if (!contattiCaricati.find(c => c.individuo_id === ind.id)) {
                                contattiCaricati.push({
                                    individuo_id: ind.id,
                                    codice_id: ind.codice_id,
                                    cognome: ind.cogname,
                                    nome: ind.nome,
                                    email: ind.emails[0],
                                    origini: ['Gruppo']
                                });
                            }
                        }
                    });
                })
        );
    });

    if (individuiIds.length > 0) {
        promises.push(
            fetch('/individui/email-list?ids=' + individuiIds.join(','), {
                credentials: 'include',
                headers: { 'X-CSRF-TOKEN': csrfToken }
            })
                .then(response => {
                    if (!response.ok) throw new Error('HTTP ' + response.status);
                    return response.json();
                })
                .then(data => {
                    data.forEach(function(ind) {
                        if (ind.emails && ind.emails.length > 0) {
                            if (!contattiCaricati.find(c => c.individuo_id === ind.id)) {
                                contattiCaricati.push({
                                    individuo_id: ind.id,
                                    codice_id: ind.codice_id,
                                    cognome: ind.cogname,
                                    nome: ind.nome,
                                    email: ind.emails[0],
                                    origini: [' Individuo']
                                });
                            }
                        }
                    });
                })
        );
    }

    Promise.all(promises).then(function() {
        renderContattiTable();
    }).catch(function() {
        alert('Errore caricamento contatti');
    });
}

function renderContattiTable() {
    const tbody = document.getElementById('contatti-tbody');
    tbody.innerHTML = '';

    contattiCaricati.forEach(function(c, index) {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input contatto-checkbox" id="contatto-${index}" value="${c.individuo_id}" data-email="${c.email}" checked>
                    <label class="custom-control-label" for="contatto-${index}"></label>
                </div>
            </td>
            <td><span class="badge badge-secondary">${c.codice_id || ''}</span></td>
            <td>${c.cognome || ''}</td>
            <td>${c.nome || ''}</td>
            <td>${c.email || ''}</td>
            <td><small class="text-muted">${c.origini ? c.origini.join(', ') : 'Esistente'}</small></td>
            <td>
                <button type="button" class="btn btn-xs btn-outline-danger" onclick="rimuoviContatto(this)">
                    <i class="fas fa-times"></i>
                </button>
            </td>
        `;
        tbody.appendChild(tr);
    });

    document.getElementById('contatti-count').textContent = contattiCaricati.length;
}

function rimuoviContatto(btn) {
    btn.closest('tr').remove();
    const count = document.querySelectorAll('.contatto-checkbox').length;
    document.getElementById('contatti-count').textContent = count;
}

function toggleSelectAll(source) {
    document.querySelectorAll('.contatto-checkbox').forEach(function(cb) {
        cb.checked = source.checked;
    });
}

function selezionaTutti() {
    document.querySelectorAll('.contatto-checkbox').forEach(function(cb) {
        cb.checked = true;
    });
    document.getElementById('select-all').checked = true;
}

function deselezionaTutti() {
    document.querySelectorAll('.contatto-checkbox').forEach(function(cb) {
        cb.checked = false;
    });
    document.getElementById('select-all').checked = false;
}

document.getElementById('ml-form').addEventListener('submit', function(e) {
    const selected = [];
    document.querySelectorAll('.contatto-checkbox:checked').forEach(function(cb) {
        selected.push({
            individuo_id: parseInt(cb.value),
            email: cb.dataset.email
        });
    });

    if (selected.length === 0) {
        e.preventDefault();
        alert('Seleziona almeno un contatto con email');
        return;
    }

    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'contatti_json';
    input.value = JSON.stringify(selected);
    this.appendChild(input);
});
</script>
@endsection