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

@section('content')
<form action="/individui/{{ $individuo->id }}" method="POST" id="main-form">
    @csrf
    @method('PUT')
    <input type="hidden" name="individuo_id" value="{{ $individuo->id }}">
    <input type="hidden" name="_avatar_token" value="{{ csrf_token() }}">
<div class="row">
    <div class="col-md-6">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-user mr-2"></i>Dati Anagrafici</h3>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label>Codice ID</label>
                    <input type="text" class="form-control" value="{{ $individuo->codice_id }}" disabled>
                </div>
                <div class="form-group">
                    <label>Cognome *</label>
                    <input type="text" name="cognome" class="form-control" value="{{ $individuo->cognome }}" required>
                </div>
                <div class="form-group">
                    <label>Nome *</label>
                    <input type="text" name="nome" class="form-control" value="{{ $individuo->nome }}" required>
                </div>
                <div class="form-group">
                    <label>Data di nascita</label>
                    <input type="date" name="data_nascita" class="form-control" value="{{ $individuo->data_nascita?->format('Y-m-d') }}">
                </div>
                <div class="form-group">
                    <label>Genere</label>
                    <select name="genere" class="form-control">
                        <option value="">Seleziona...</option>
                        <option value="M" {{ $individuo->genere === 'M' ? 'selected' : '' }}>Maschio</option>
                        <option value="F" {{ $individuo->genere === 'F' ? 'selected' : '' }}>Femmina</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card card-secondary">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-camera mr-2"></i>Avatar</h3>
            </div>
            <div class="card-body text-center">
                @if($individuo->avatar)
                    <img src="/individui/{{ $individuo->id }}/avatar"
                         alt="Avatar"
                         class="img-thumbnail mb-2"
                         style="max-width: 120px; max-height: 120px; object-fit: cover; border-radius: 50%;">
                    <br>
                    <button type="button" class="btn btn-danger btn-sm" onclick="deleteAvatar()">
                        <i class="fas fa-trash mr-1"></i>Rimuovi
                    </button>
                @else
                    <div class="bg-secondary d-flex align-items-center justify-content-center mb-3"
                         style="width: 120px; height: 120px; margin: 0 auto; border-radius: 50%;">
                        <i class="fas fa-user fa-4x text-white"></i>
                    </div>
                @endif
                <div class="custom-file mb-2">
                    <input type="file" class="custom-file-input" id="avatar-input" name="avatar" accept="image/jpeg,image/png,image/gif">
                    <label class="custom-file-label" for="avatar-input">Scegli immagine...</label>
                </div>
                <button type="button" class="btn btn-primary btn-sm" onclick="uploadAvatar()">
                    <i class="fas fa-upload mr-1"></i>Carica Avatar
                </button>
                <div id="avatar-message" class="mt-2"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-map-marker-alt mr-2"></i>Residenza</h3></div>
            <div class="card-body">
                <div class="form-group">
                    <label>Indirizzo</label>
                    <input type="text" name="indirizzo" class="form-control" value="{{ $individuo->indirizzo }}">
                </div>
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label>CAP</label>
                        <input type="text" name="cap" class="form-control" value="{{ $individuo->cap }}">
                    </div>
                    <div class="form-group col-md-5">
                        <label>Città</label>
                        <input type="text" name="città" class="form-control" value="{{ $individuo->città }}">
                    </div>
                    <div class="form-group col-md-3">
                        <label>Provincia</label>
                        <input type="text" name="sigla_provincia" class="form-control" maxlength="2" value="{{ $individuo->sigla_provincia }}">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-id-card mr-2"></i>Documento di identità</h3></div>
            <div class="card-body">
                <div class="form-group">
                    <label>Tipo documento</label>
                    <select name="tipo_documento" class="form-control">
                        <option value="">Seleziona...</option>
                        <option value="carta_identita" {{ $individuo->tipo_documento === 'carta_identita' ? 'selected' : '' }}>Carta d'Identità</option>
                        <option value="patente" {{ $individuo->tipo_documento === 'patente' ? 'selected' : '' }}>Patente</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Numero documento</label>
                    <input type="text" name="numero_documento" class="form-control" value="{{ $individuo->numero_documento }}">
                </div>
                <div class="form-group">
                    <label>Scadenza documento</label>
                    <input type="date" name="scadenza_documento" class="form-control" value="{{ $individuo->scadenza_documento?->format('Y-m-d') }}">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-sticky-note mr-2"></i>Note</h3></div>
            <div class="card-body">
                <div class="form-group mb-0">
                    <textarea name="note" class="form-control" rows="4">{{ $individuo->note }}</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-tags mr-2"></i>Tag</h3>
    </div>
    <div class="card-body">
        @include('partials._tag-selector', ['selectedTags' => $selectedTags ?? [], 'label' => 'Etichette'])
    </div>
</div>

<div class="card mt-3">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-address-book mr-2"></i>Contatti</h3>
        <button type="button" class="btn btn-xs btn-success float-right" onclick="aggiungiRigaContatto()">
            <i class="fas fa-plus mr-1"></i> Aggiungi
        </button>
    </div>
    <div class="card-body p-0">
            <table class="table table-bordered mb-0" id="contatti-table">
                <thead class="thead-light">
                    <tr>
                        <th style="width: 20%;">Tipo</th>
                        <th style="width: 30%;">Valore</th>
                        <th style="width: 20%;">Etichetta</th>
                        <th style="width: 10%;">Primario</th>
                        <th style="width: 50px;"></th>
                    </tr>
                </thead>
                <tbody id="contatti-tbody">
                    @foreach($individuo->contatti as $contatto)
                    <tr>
                        <td>
                            <select name="contatti[{{ $loop->index }}][tipo]" class="form-control">
                                <option value="telefono" {{ $contatto->tipo === 'telefono' ? 'selected' : '' }}>Telefono</option>
                                <option value="cellulare" {{ $contatto->tipo === 'cellulare' ? 'selected' : '' }}>Cellulare</option>
                                <option value="email" {{ $contatto->tipo === 'email' ? 'selected' : '' }}>Email</option>
                                <option value="fax" {{ $contatto->tipo === 'fax' ? 'selected' : '' }}>Fax</option>
                                <option value="web" {{ $contatto->tipo === 'web' ? 'selected' : '' }}>Web</option>
                                <option value="telegram" {{ $contatto->tipo === 'telegram' ? 'selected' : '' }}>Telegram</option>
                                <option value="whatsapp" {{ $contatto->tipo === 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                                <option value="altro" {{ $contatto->tipo === 'altro' ? 'selected' : '' }}>Altro</option>
                            </select>
                        </td>
                        <td><input type="text" name="contatti[{{ $loop->index }}][valore]" class="form-control" value="{{ $contatto->valore }}"></td>
                        <td><input type="text" name="contatti[{{ $loop->index }}][etichetta]" class="form-control" value="{{ $contatto->etichetta }}"></td>
                        <td class="text-center"><input type="checkbox" name="contatti[{{ $loop->index }}][is_primary]" value="1" {{ $contatto->is_primary ? 'checked' : '' }}></td>
                        <td><button type="button" class="btn btn-danger btn-xs" onclick="this.closest('tr').remove()"><i class="fas fa-trash"></i></button></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @if($individuo->contatti->isEmpty())
            <div id="no-contatti-msg" class="text-center text-muted py-4">
                <p class="mb-0">Nessun contatto. Clicca su "Aggiungi" per aggiungerne uno.</p>
            </div>
            @endif
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-folder mr-2"></i>Gruppi</h3>
            <button type="button" class="btn btn-xs btn-success float-right" onclick="showGruppoForm()">
                <i class="fas fa-plus mr-1"></i> Aggiungi
            </button>
        </div>
        <div class="card-body p-0">
            
            @if($individuo->gruppi->count() > 0)
            <table class="table table-bordered table-hover table-striped mb-0">
                <thead class="thead-light">
                    <tr>
                        <th>Nome</th>
                        <th>Diocesi</th>
                        <th style="width: 130px;">Ruolo</th>
                        <th style="width: 110px;">Data Adesione</th>
                        <th style="width: 80px;">Azioni</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($individuo->gruppi as $gruppo)
                    <tr id="gruppo-row-{{ $gruppo->id }}">
                        <td>
                            <i class="fas fa-folder text-warning mr-1"></i>
                            <a href="/gruppi/{{ $gruppo->id }}">{{ $gruppo->nome }}</a>
                        </td>
                        <td>{{ $gruppo->diocesi?->nome ?: '-' }}</td>
                        <td>
                            @php $ruoliIndividuo = $individuo->getRuoliForGruppo($gruppo->id) @endphp
                            @if($ruoliIndividuo->count() > 0)
                                @foreach($ruoliIndividuo as $ruolo)
                                    <span class="badge badge-info mr-1">{{ $ruolo->nome }}</span>
                                @endforeach
                            @else
                                -
                            @endif
                        </td>
                        <td>{{ $gruppo->pivot->data_adesione ? \Carbon\Carbon::parse($gruppo->pivot->data_adesione)->format('d/m/Y') : '-' }}</td>
                        <td>
                            <button type="button" class="btn btn-xs btn-warning" onclick="editGruppoInline({{ $gruppo->id }})" title="Modifica">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button type="button" class="btn btn-xs btn-danger" onclick="deleteGruppoFromEdit({{ $individuo->id }}, {{ $gruppo->id }})" title="Rimuovi">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    <tr id="gruppo-edit-{{ $gruppo->id }}" style="display:none;">
                        <td colspan="5">
                            <div class="mb-0">
                                <div class="row">
                                    <div class="col-md-4">
                                        <input type="text" class="form-control form-control-sm" value="{{ $gruppo->nome }}" disabled>
                                    </div>
                                    <div class="col-md-3">
                                        <select id="edit-ruoli-{{ $gruppo->id }}" class="form-control form-control-sm" multiple size="3">
                                            @php $selectedRuoliIds = $individuo->getRuoloIdsForGruppo($gruppo->id) @endphp
                                            @foreach(\App\Models\Ruolo::attive() as $ruolo)
                                                <option value="{{ $ruolo->id }}" {{ in_array($ruolo->id, $selectedRuoliIds) ? 'selected' : '' }}>{{ $ruolo->nome }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="date" id="edit-data-{{ $gruppo->id }}" class="form-control form-control-sm" value="{{ $gruppo->pivot->data_adesione }}">
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-xs btn-success" onclick="submitEditGruppo({{ $gruppo->id }})"><i class="fas fa-check mr-1"></i>Salva</button>
                                        <button type="button" class="btn btn-xs btn-secondary" onclick="cancelEditGruppo({{ $gruppo->id }})"><i class="fas fa-times"></i></button>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @else
            <div class="text-center text-muted py-4">
                <i class="fas fa-users fa-2x mb-2"></i>
                <p class="mb-0">Nessun gruppo associato</p>
            </div>
            @endif
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-file mr-2"></i>Documenti</h3>
            <button type="button" class="btn btn-xs btn-success float-right" onclick="showDocumentoForm()">
                <i class="fas fa-plus mr-1"></i> Carica
            </button>
        </div>
        <div class="card-body p-0">
            <div id="documento-add-form" style="display:none;" class="p-3 bg-light border-bottom">
                <div class="mb-0">
                    <div class="row">
                        <div class="col-md-3">
                            <input type="text" id="doc-nome-file" class="form-control form-control-sm" placeholder="Nome documento">
                        </div>
                        <div class="col-md-3">
                            <select id="doc-tipologia" class="form-control form-control-sm">
                                <option value="">Tipologia...</option>
                                <option value="documento">Documento</option>
                                <option value="avatar">Avatar</option>
                                <option value="galleria">Galleria</option>
                                <option value="statuto">Statuto</option>
                                <option value="altro">Altro</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <input type="file" id="doc-file" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-xs btn-success" onclick="submitUploadDocumentoIndividuo()"><i class="fas fa-upload mr-1"></i>Carica</button>
                            <button type="button" class="btn btn-xs btn-secondary" onclick="hideDocumentoForm()"><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            @if($individuo->documenti->count() > 0)
            <table class="table table-bordered table-hover table-striped mb-0">
                <thead class="thead-light">
                    <tr>
                        <th>Nome</th>
                        <th style="width: 120px;">Tipologia</th>
                        <th style="width: 80px;">Dimensione</th>
                        <th style="width: 130px;">Data Upload</th>
                        <th style="width: 80px;">Azioni</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($individuo->documenti as $documento)
                    <tr>
                        <td>
                            <a href="#" onclick="event.preventDefault(); previewDocumento({{ $documento->id }}, '{{ $documento->mime_type }}');">
                                <i class="fas fa-file text-secondary mr-1"></i>
                                {{ $documento->nome_file }}
                            </a>
                        </td>
                        <td>{{ ucfirst(str_replace('_', ' ', $documento->tipologia)) }}</td>
                        <td>{{ number_format($documento->dimensione / 1024, 1) }} KB</td>
                        <td>{{ $documento->created_at->format('d/m/Y') }}</td>
                        <td>
                            @if($documento->file_path)
                                <button type="button" class="btn btn-xs btn-primary" onclick="previewDocumento({{ $documento->id }}, '{{ $documento->mime_type }}')" title="Anteprima">
                                    <i class="fas fa-eye"></i>
                                </button>
                            @endif
                            <button type="button" class="btn btn-xs btn-danger" onclick="deleteDocumentoFromEdit({{ $documento->id }})" title="Elimina">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @else
            <div class="text-center text-muted py-4">
                <i class="fas fa-file fa-2x mb-2"></i>
                <p class="mb-0">Nessun documento</p>
            </div>
            @endif
</div>
</div>

<div class="mt-3 mb-4">
    <button type="button" class="btn btn-success btn-lg" id="save-all-btn" onclick="submitMainForm()">
        <i class="fas fa-save mr-2"></i> Salva Tutte le Modifiche
    </button>
    <a href="/individui/{{ $individuo->id }}" class="btn btn-secondary btn-lg ml-2">
        <i class="fas fa-times mr-1"></i> Annulla
    </a>
</div>
</form>

<div class="card mt-3" id="gruppo-add-card" style="display:none; background-color: #fff3cd; border-color: #ffc107;">
    <div class="card-header bg-warning">
        <h3 class="card-title"><i class="fas fa-folder-plus mr-2"></i>Aggiungi a Gruppo</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <select id="new-gruppo-id" class="form-control form-control-sm">
                    <option value="">Seleziona gruppo...</option>
                    @foreach(\App\Models\Gruppo::orderBy('nome')->get() as $g)
                        @if(!$individuo->gruppi->contains($g->id))
                            <option value="{{ $g->id }}">{{ $g->full_path }}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select id="new-gruppo-ruolo" class="form-control form-control-sm" multiple size="3">
                    @foreach(\App\Models\Ruolo::attive() as $ruolo)
                        <option value="{{ $ruolo->id }}">{{ $ruolo->nome }}</option>
                    @endforeach
                </select>
                <small class="text-muted">Ctrl+click per selezionare più ruoli</small>
            </div>
            <div class="col-md-3">
                <input type="date" id="new-gruppo-data" class="form-control form-control-sm">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-success btn-sm" onclick="submitGruppoForm()">
                    <i class="fas fa-check mr-1"></i> Associa
                </button>
                <button type="button" class="btn btn-secondary btn-sm" onclick="hideGruppoForm()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
</div>

<div class="modal fade" id="previewModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 90vw;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-file mr-2"></i><span id="previewModalTitle">Anteprima</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Chiudi">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center p-0" style="min-height: 400px;">
                <iframe id="previewFrame" src="" style="width: 100%; height: 70vh; border: none;"></iframe>
            </div>
            <div class="modal-footer">
                <a id="previewDownloadBtn" href="#" class="btn btn-primary" download>
                    <i class="fas fa-download mr-1"></i> Scarica
                </a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('All form fields:');
    var form = document.getElementById('main-form');
    var fields = form.querySelectorAll('input, textarea, select');
    fields.forEach(function(f) {
        console.log(f.name + ' [' + f.type + ']: value="' + f.value.substring(0,30) + '" disabled=' + f.disabled);
    });
    
    // Debug note field specifically
    var noteField = form.querySelector('[name="note"]');
    console.log('Note field found:', !!noteField);
    if (noteField) {
        console.log('Note value:', noteField.value);
    }
    
    var saveBtn = document.getElementById('save-btn');
    if (saveBtn) {
        saveBtn.addEventListener('click', function() {
            console.log('=== SAVE CLICKED ===');
            var note = form.querySelector('[name="note"]');
            console.log('Note at save time:', note ? note.value : 'NOT FOUND');
        });
    }
    
    form.addEventListener('submit', function(e) {
        console.log('=== FORM SUBMIT ===');
        var note = form.querySelector('[name="note"]');
        console.log('Note at submit:', note ? note.value : 'NOT FOUND');
        
        var contattiFields = form.querySelectorAll('[name^="contatti"]');
        console.log('Contatti fields count:', contattiFields.length);
        contattiFields.forEach(function(f, i) {
            console.log('Contatto field ' + i + ':', f.name, '=', f.value);
        });
        
        var formData = new FormData(form);
        console.log('FormData contatti:', formData.getAll('contatti'));
    });
});
</script>
<script>
function submitMainForm() {
    var form = document.getElementById('main-form');
    console.log('=== DEBUG SUBMIT ===');
    
    var contattiFields = form.querySelectorAll('[name^="contatti"]');
    console.log('Contatti fields found:', contattiFields.length);
    contattiFields.forEach(function(f, i) {
        console.log('Field ' + i + ': name=' + f.name + ', value=' + f.value);
    });
    
    form.action = '/individui/{{ $individuo->id }}';
    var methodInput = form.querySelector('input[name="_method"]');
    if (!methodInput) {
        var m = document.createElement('input');
        m.type = 'hidden';
        m.name = '_method';
        m.value = 'PUT';
        form.appendChild(m);
    }
    var csrfInput = form.querySelector('input[name="_token"]');
    if (!csrfInput) {
        var c = document.createElement('input');
        c.type = 'hidden';
        c.name = '_token';
        c.value = '{{ csrf_token() }}';
        form.appendChild(c);
    }
    
    var formData = new FormData(form);
    console.log('FormData contatti keys:');
    for (var pair of formData.entries()) {
        if (pair[0].startsWith('contatti')) {
            console.log('  ' + pair[0] + ' = ' + pair[1]);
        }
    }
    
    form.submit();
}

let contattoIndex = {{ $individuo->contatti->count() }};

function aggiungiRigaContatto() {
    const tbody = document.getElementById('contatti-tbody');
    const noMsg = document.getElementById('no-contatti-msg');
    if (noMsg) noMsg.style.display = 'none';

    const row = document.createElement('tr');
    row.innerHTML = `
        <td>
            <select name="contatti[${contattoIndex}][tipo]" class="form-control">
                <option value="">Seleziona...</option>
                <option value="telefono">Telefono</option>
                <option value="cellulare">Cellulare</option>
                <option value="email">Email</option>
                <option value="fax">Fax</option>
                <option value="web">Web</option>
                <option value="telegram">Telegram</option>
                <option value="whatsapp">WhatsApp</option>
                <option value="altro">Altro</option>
            </select>
        </td>
        <td><input type="text" name="contatti[${contattoIndex}][valore]" class="form-control" placeholder="Valore"></td>
        <td><input type="text" name="contatti[${contattoIndex}][etichetta]" class="form-control" placeholder="Etichetta"></td>
        <td class="text-center"><input type="checkbox" name="contatti[${contattoIndex}][is_primary]" value="1"></td>
        <td>
            <button type="button" class="btn btn-success btn-xs" title="Salva" onclick="submitMainForm()">
                <i class="fas fa-save"></i>
            </button>
            <button type="button" class="btn btn-danger btn-xs" title="Elimina" onclick="this.closest('tr').remove()">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    `;
    tbody.appendChild(row);
    contattoIndex++;
}

function showGruppoForm() {
    var card = document.getElementById('gruppo-add-card');
    if (card) {
        card.style.display = 'block';
        card.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}

function hideGruppoForm() {
    var card = document.getElementById('gruppo-add-card');
    if (card) {
        card.style.display = 'none';
    }
}

function submitGruppoForm() {
    var gruppoId = document.getElementById('new-gruppo-id').value;
    var ruoloSelect = document.getElementById('new-gruppo-ruolo');
    var dataAdesione = document.getElementById('new-gruppo-data').value;

    if (!gruppoId) {
        alert('Seleziona un gruppo');
        return;
    }

    var formData = new URLSearchParams();
    formData.append('gruppo_id', gruppoId);
    
    var selectedRuoli = Array.from(ruoloSelect.selectedOptions).map(opt => opt.value).filter(v => v);
    selectedRuoli.forEach(function(ruoloId) {
        formData.append('ruolo_ids[]', ruoloId);
    });
    
    formData.append('data_adesione', dataAdesione);

    fetch('/individui/{{ $individuo->id }}/gruppi', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => { throw new Error(text); });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            hideGruppoForm();
            window.location.reload();
        } else {
            alert(data.error || 'Errore');
        }
    })
    .catch(error => {
        alert('Errore: ' + error.message);
    });
}

function editGruppoInline(id) {
    document.getElementById('gruppo-row-' + id).style.display = 'none';
    document.getElementById('gruppo-edit-' + id).style.display = 'table-row';
}

function cancelEditGruppo(id) {
    document.getElementById('gruppo-row-' + id).style.display = 'table-row';
    document.getElementById('gruppo-edit-' + id).style.display = 'none';
}

function showDocumentoForm() {
    document.getElementById('documento-add-form').style.display = 'block';
}

function hideDocumentoForm() {
    document.getElementById('documento-add-form').style.display = 'none';
}

function previewDocumento(id, mimeType) {
    var previewUrl = '/documenti/' + id + '/preview';
    var downloadUrl = '/documenti/' + id + '/download';

    document.getElementById('previewFrame').src = previewUrl;
    document.getElementById('previewDownloadBtn').href = downloadUrl;
    document.getElementById('previewModalTitle').textContent = 'Anteprima';

    if (mimeType && mimeType.startsWith('image/')) {
        document.getElementById('previewDownloadBtn').style.display = 'inline-block';
    } else {
        document.getElementById('previewDownloadBtn').style.display = 'none';
    }

    $('#previewModal').modal('show');
}

document.getElementById('avatar-input').addEventListener('change', function(e) {
    var fileName = e.target.files[0]?.name || 'Scegli file...';
    e.target.nextElementSibling.textContent = fileName;
});

function uploadAvatar() {
    var input = document.getElementById('avatar-input');
    if (!input.files[0]) {
        document.getElementById('avatar-message').innerHTML = '<span class="text-danger">Seleziona un\'immagine</span>';
        return;
    }

    var formData = new FormData();
    formData.append('avatar', input.files[0]);
    formData.append('_token', '{{ csrf_token() }}');

    document.getElementById('avatar-message').innerHTML = '<span class="text-info"><i class="fas fa-spinner fa-spin"></i> Caricamento...</span>';

    fetch('/individui/{{ $individuo->id }}/avatar', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('avatar-message').innerHTML = '<span class="text-success">Avatar caricato!</span>';
            setTimeout(function() { window.location.reload(); }, 500);
        } else {
            document.getElementById('avatar-message').innerHTML = '<span class="text-danger">' + (data.message || 'Errore') + '</span>';
        }
    })
    .catch(error => {
        document.getElementById('avatar-message').innerHTML = '<span class="text-danger">Errore: ' + error + '</span>';
    });
}

function deleteAvatar() {
    if (!confirm('Rimuovere l\'avatar?')) return;

    fetch('/individui/{{ $individuo->id }}/avatar', {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.reload();
        } else {
            alert(data.message || 'Errore');
        }
    })
.catch(error => {
        alert('Errore: ' + error);
    });
}

function deleteGruppoFromEdit(individuoId, gruppoId) {
    if (!confirm('Rimuovere da questo gruppo?')) return;
    
    fetch('/individui/' + individuoId + '/gruppi/' + gruppoId, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) return response.text().then(text => { throw new Error(text); });
        return response.json();
    })
    .then(data => {
        if (data.success) window.location.reload();
        else alert(data.error || 'Errore');
    })
    .catch(error => alert('Errore: ' + error.message));
}

function submitEditGruppo(gruppoId) {
    var ruoloSelect = document.getElementById('edit-ruoli-' + gruppoId);
    var dataInput = document.getElementById('edit-data-' + gruppoId);
    var formData = new URLSearchParams();
    
    var selectedRuoli = Array.from(ruoloSelect.selectedOptions).map(opt => opt.value).filter(v => v);
    selectedRuoli.forEach(function(ruoloId) {
        formData.append('ruolo_ids[]', ruoloId);
    });
    formData.append('data_adesione', dataInput ? dataInput.value : '');
    
    fetch('/individui/{{ $individuo->id }}/gruppi/' + gruppoId, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: formData.toString()
    })
    .then(response => {
        if (!response.ok) return response.text().then(text => { throw new Error(text); });
        return response.json();
    })
    .then(data => {
        if (data.success) window.location.reload();
        else alert(data.error || 'Errore');
    })
    .catch(error => alert('Errore: ' + error.message));
}

function submitUploadDocumentoIndividuo() {
    var nomeFile = document.getElementById('doc-nome-file');
    var tipologia = document.getElementById('doc-tipologia');
    var fileInput = document.getElementById('doc-file');
    
    if (!nomeFile.value || !tipologia.value || !fileInput.files[0]) {
        alert('Compila tutti i campi');
        return;
    }
    
    var formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('_redirect', '{{ url()->current() }}');
    formData.append('visibilita', 'individuo');
    formData.append('visibilita_target_id', '{{ $individuo->id }}');
    formData.append('visibilita_target_type', 'App\\Models\\Individuo');
    formData.append('nome_file', nomeFile.value);
    formData.append('tipologia', tipologia.value);
    formData.append('file', fileInput.files[0]);
    
    document.getElementById('documento-add-form').querySelector('.btn-success').disabled = true;
    
    fetch('/documenti', {
        method: 'POST',
        body: formData,
        headers: { 'Accept': 'application/json' }
    })
    .then(function() { window.location.reload(); })
    .catch(function() { window.location.reload(); });
}

function deleteDocumentoFromEdit(documentoId) {
    if (!confirm('Eliminare questo documento?')) return;
    
    var formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('_method', 'DELETE');
    formData.append('_redirect', '{{ url()->current() }}');
    
    fetch('/documenti/' + documentoId, {
        method: 'POST',
        body: formData,
        headers: { 'Accept': 'application/json' }
    })
    .then(function() { window.location.reload(); })
    .catch(function() { window.location.reload(); });
}
</script>
@endsection