@extends('layouts.adminlte')
@section('title', 'Nuovo Gruppo')
@section('page_title', 'Nuovo Gruppo')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap4-theme@1.0.0/dist/select2-bootstrap4.min.css" rel="stylesheet" />
<style>
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    color: #333;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
    height: 28px !important;
    min-height: 28px !important;
    width: auto !important;
    min-width: 30px;
    border: none !important;
    background: transparent !important;
    margin: 0;
    padding: 0 4px;
}
</style>
@endpush

@section('content')
<form action="/gruppi" method="POST">
    @csrf
    <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-folder mr-2"></i>Dati Gruppo</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>Nome *</label>
                        <input type="text" name="nome" class="form-control @error('nome') is-invalid @enderror" value="{{ old('nome') }}" required>
                        @error('nome')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label>Anno Fondazione</label>
                        <input type="number" name="anno_fondazione" class="form-control @error('anno_fondazione') is-invalid @enderror"
                               value="{{ old('anno_fondazione') }}" min="1800" max="{{ date('Y') + 1 }}" step="1">
                        @error('anno_fondazione')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label>Gruppo Padre</label>
                        <select name="parent_id" class="form-control">
                            <option value="">Nessuno (gruppo radice)</option>
                            @foreach($allGruppi as $g)
                                <option value="{{ $g->id }}" {{ old('parent_id') == $g->id || ($selectedParent && $selectedParent->id == $g->id) ? 'selected' : '' }}>
                                    {{ $g->full_path }}
                                </option>
                            @endforeach
                        </select>
                        @if($selectedParent)
                            <small class="form-text text-muted">
                                Verrà creato come sottogruppo di: <strong>{{ $selectedParent->nome }}</strong>
                            </small>
                        @endif
                    </div>
                    <div class="form-group">
                        <label>Diocesi</label>
                        <select name="diocesi_ids[]" class="form-control select2-multi" multiple style="width: 100%;">
                            @foreach($diocesi as $d)
                            <option value="{{ $d->id }}" {{ in_array($d->id, old('diocesi_ids', [])) ? 'selected' : '' }}>{{ $d->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Responsabili</label>
                        <select name="responsabile_ids[]" class="form-control" multiple size="4" id="responsabile-select">
                            <option value="">-- Nessuno --</option>
                        </select>
                        <small class="text-muted">Ctrl+click per selezionare più responsabili</small>
                    </div>
                    <div class="form-group">
                        <label>Descrizione</label>
                        <textarea name="descrizione" class="form-control" rows="3">{{ old('descrizione') }}</textarea>
                    </div>
                </div>
            </div>
        </div>
        <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>Luogo Incontro</h3></div>
                <div class="card-body">
                    <div class="form-group">
                        <label>Indirizzo</label>
                        <input type="text" name="indirizzo_incontro" class="form-control" value="{{ old('indirizzo_incontro') }}">
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label>CAP</label>
                            <input type="text" name="cap_incontro" class="form-control" value="{{ old('cap_incontro') }}">
                        </div>
                        <div class="form-group col-md-5">
                            <label>Città</label>
                            <input type="text" name="città_incontro" class="form-control" value="{{ old('città_incontro') }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>Provincia</label>
                            <input type="text" name="sigla_provincia_incontro" class="form-control" maxlength="2" value="{{ old('sigla_provincia_incontro') }}">
                        </div>
                    </div>
                    <div class="form-group mb-0">
                        <label>URL Mappa</label>
                        <input type="url" name="mappa_posizione" class="form-control" value="{{ old('mappa_posizione') }}" placeholder="https://...">
                    </div>
                </div>
            </div>
        </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 del Gruppo</h3>
            <button type="button" class="btn btn-xs btn-success float-right" onclick="aggiungiContatto()">
                <i class="fas fa-plus mr-1"></i> Aggiungi Contatto
            </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: 40%;">Valore</th>
                        <th style="width: 25%;">Etichetta</th>
                        <th style="width: 80px;">Primario</th>
                        <th style="width: 50px;"></th>
                    </tr>
                </thead>
                <tbody id="contatti-tbody">
                </tbody>
            </table>
            <div id="no-contatti-msg" class="text-center text-muted py-4">
                <p class="mb-0">Nessun contatto. Clicca su "Aggiungi Contatto" per iniziare.</p>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-users mr-2"></i>Membri</h3>
            <button type="button" class="btn btn-xs btn-success float-right" onclick="aggiungiMembro()">
                <i class="fas fa-plus mr-1"></i> Aggiungi Membro
            </button>
        </div>
        <div class="card-body p-0">
            <table class="table table-bordered mb-0" id="membri-table">
                <thead class="thead-light">
                    <tr>
                        <th style="width: 30%;">Individuo</th>
                        <th>Codice</th>
                        <th>Contatti</th>
                        <th style="width: 20%;">Ruolo</th>
                        <th style="width: 100px;">Data Adesione</th>
                        <th style="width: 50px;"></th>
                    </tr>
                </thead>
                <tbody id="membri-tbody">
                </tbody>
            </table>
            <div id="no-membri-msg" class="text-center text-muted py-4">
                <p class="mb-0">Nessun membro aggiunto. Clicca su "Aggiungi Membro" per iniziare.</p>
            </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' => [], 'label' => 'Etichette'])
        </div>
    </div>

    <div class="mt-3">
        <button type="submit" class="btn btn-success">
            <i class="fas fa-save mr-1"></i> Salva
        </button>
        <a href="/gruppi" class="btn btn-secondary">
            <i class="fas fa-times mr-1"></i> Annulla
        </a>
    </div>
</form>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('.select2-multi').select2({
        theme: 'bootstrap4',
        placeholder: 'Cerca diocesi...',
        width: '100%',
        sorter: function(data) {
            return data.sort(function(a, b) {
                if (a.selected && !b.selected) return -1;
                if (!a.selected && b.selected) return 1;
                return a.text.localeCompare(b.text, 'it');
            });
        },
        language: {
            noResults: function() { return 'Nessuna diocesi trovata'; },
            searching: function() { return 'Ricerca...'; }
        }
    });
});

let contattiIndex = 0;
let membriIndex = 0;
const membriResponsabiliMap = new Map();

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

    const row = document.createElement('tr');
    const idx = contattiIndex;
    row.innerHTML = `
        <td>
            <select name="contatti[${idx}][tipo]" class="form-control" required>
                <option value="">Seleziona...</option>
                <option value="email">Email</option>
                <option value="telefono">Telefono</option>
                <option value="cellulare">Cellulare</option>
            </select>
        </td>
        <td><input type="text" name="contatti[${idx}][valore]" class="form-control" placeholder="Es. info@example.com" required></td>
        <td><input type="text" name="contatti[${idx}][etichetta]" class="form-control" placeholder="Es. Ufficio"></td>
        <td class="text-center">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="contatto-primary-${idx}" name="contatti[${idx}][is_primary]" value="1">
                <label class="custom-control-label" for="contatto-primary-${idx}"></label>
            </div>
        </td>
        <td><button type="button" class="btn btn-danger btn-xs" onclick="rimuoviContatto(this)"><i class="fas fa-trash"></i></button></td>
    `;
    tbody.appendChild(row);
    contattiIndex++;
}

function rimuoviContatto(btn) {
    const row = btn.closest('tr');
    row.remove();
    if (document.getElementById('contatti-tbody').children.length === 0) {
        document.getElementById('no-contatti-msg').style.display = 'block';
    }
}

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

    const row = document.createElement('tr');
    row.innerHTML = `
        <td>
            <select name="individui[${membriIndex}][individuo_id]" class="form-control" onchange="updateMembroInfo(this); updateResponsabiliFromMembri();" required>
                <option value="">Seleziona...</option>
                @foreach($individui as $i)
                    <option value="{{ $i->id }}" data-codice="{{ $i->codice_id }}" data-email="{{ $i->email_primaria }}" data-telefono="{{ $i->telefono_primario }}">
                        {{ $i->cognome }} {{ $i->nome }}
                    </option>
                @endforeach
            </select>
        </td>
        <td><span class="text-muted membro-codice">-</span></td>
        <td><small class="text-muted membro-contatti">-</small></td>
        <td><input type="text" name="individui[${membriIndex}][ruolo_nel_gruppo]" class="form-control" placeholder="Es. Membro"></td>
        <td><input type="date" name="individui[${membriIndex}][data_adesione]" class="form-control"></td>
        <td><button type="button" class="btn btn-danger btn-xs" onclick="rimuoviMembro(this); updateResponsabiliFromMembri();"><i class="fas fa-trash"></i></button></td>
    `;
    tbody.appendChild(row);
    membriIndex++;
}

function updateMembroInfo(select) {
    const row = select.closest('tr');
    const option = select.options[select.selectedIndex];
    const codice = option.dataset.codice || '-';
    const email = option.dataset.email || '';
    const telefono = option.dataset.telefono || '';
    
    row.querySelector('.membro-codice').textContent = codice;
    
    let contatti = [];
    if (email) contatti.push('<span class="text-primary">'+email+'</span>');
    if (telefono) contatti.push('<span class="text-success">'+telefono+'</span>');
    row.querySelector('.membro-contatti').innerHTML = contatti.length ? contatti.join(' | ') : '-';
}

function rimuoviMembro(btn) {
    const row = btn.closest('tr');
    row.remove();
    if (document.getElementById('membri-tbody').children.length === 0) {
        document.getElementById('no-membri-msg').style.display = 'block';
    }
}

function updateResponsabiliFromMembri() {
    const respSelect = document.getElementById('responsabile-select');
    const currentSelected = Array.from(respSelect.selectedOptions).map(o => o.value);
    const tbody = document.getElementById('membri-tbody');
    const rows = tbody.querySelectorAll('tr');
    
    const membroIds = new Set();
    const membroNames = new Map();
    
    rows.forEach(row => {
        const select = row.querySelector('select[name*="individuo_id"]');
        if (select && select.value) {
            membroIds.add(select.value);
            const option = select.options[select.selectedIndex];
            membroNames.set(select.value, option.text);
        }
    });
    
    respSelect.innerHTML = '';
    
    if (membroIds.size === 0) {
        const opt = document.createElement('option');
        opt.value = '';
        opt.textContent = '-- Aggiungi prima dei membri --';
        opt.disabled = true;
        respSelect.appendChild(opt);
    } else {
        membroIds.forEach(id => {
            const opt = document.createElement('option');
            opt.value = id;
            opt.textContent = membroNames.get(id);
            if (currentSelected.includes(id)) opt.selected = true;
            respSelect.appendChild(opt);
        });
    }
}

const respSelect = document.getElementById('responsabile-select');
const individuiList = @json($individui->map(fn($i) => ['id' => $i->id, 'text' => $i->cognome . ' ' . $i->nome]));
const initialResponsabili = @json(old('responsabile_ids', []));

const optPlaceholder = document.createElement('option');
optPlaceholder.value = '';
optPlaceholder.textContent = '-- Aggiungi prima dei membri --';
optPlaceholder.disabled = true;
respSelect.appendChild(optPlaceholder);

initialResponsabili.forEach(id => {
    const match = individuiList.find(i => i.id == id);
    if (match) {
        const opt = document.createElement('option');
        opt.value = match.id;
        opt.textContent = match.text;
        opt.selected = true;
        respSelect.appendChild(opt);
    }
});
</script>
@endsection