@extends('layouts.adminlte')

@section('title', 'Impostazioni')

@section('page_title', 'Impostazioni')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Impostazioni</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-3">
        <div class="card card-secondary">
            <div class="card-header">
                <h3 class="card-title">Sezioni</h3>
            </div>
            <div class="list-group list-group-flush">
                <a href="#applicazione" class="list-group-item list-group-item-action" data-toggle="tab">
                    <i class="nav-icon fas fa-cog mr-2"></i> Applicazione
                </a>
                <a href="#logo" class="list-group-item list-group-item-action" data-toggle="tab">
                    <i class="nav-icon fas fa-image mr-2"></i> Logo
                </a>
                <a href="#tipologie" class="list-group-item list-group-item-action" data-toggle="tab">
                    <i class="nav-icon fas fa-file mr-2"></i> Tipologie Documenti
                </a>
                <a href="#ruoli" class="list-group-item list-group-item-action" data-toggle="tab">
                    <i class="nav-icon fas fa-users-cog mr-2"></i> Tipi di Ruolo
                </a>
                <a href="#tipologie-eventi" class="list-group-item list-group-item-action" data-toggle="tab">
                    <i class="nav-icon fas fa-calendar mr-2"></i> Tipologie Eventi
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="tab-content">
            <div class="tab-pane" id="applicazione">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Configurazione Applicazione</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">Configura il nome e il testo visualizzato dall'applicazione.</p>

                        @if(session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        <form method="POST" action="{{ route('impostazioni.app-settings.save') }}">
                            @csrf
                            @method('POST')
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="nome_applicazione">Nome Applicazione</label>
                                        <input type="text" name="nome_applicazione" id="nome_applicazione" class="form-control" 
                                               value="{{ old('nome_applicazione', $appSettings->nome_applicazione ?? '') }}"
                                               placeholder="es. Glastree">
                                        <small class="text-muted">Nome mostrato nel titolo, sidebar e login</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="nome_organizzazione">Nome Organizzazione</label>
                                        <input type="text" name="nome_organizzazione" id="nome_organizzazione" class="form-control" 
                                               value="{{ old('nome_organizzazione', $appSettings->nome_organizzazione ?? '') }}"
                                               placeholder="es. Parrocchia Santa Maria">
                                        <small class="text-muted">Nome organizzazione mostrato sotto il logo nel login</small>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="footer_text">Testo Footer</label>
                                <input type="text" name="footer_text" id="footer_text" class="form-control" 
                                       value="{{ old('footer_text', $appSettings->footer_text ?? '') }}"
                                       placeholder="es. © 2026 Parrocchia Santa Maria">
                                <small class="text-muted">Lascia vuoto per usare il formato predefinito: © {anno} {nome_applicazione}</small>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="app_version">Versione Applicazione</label>
                                        <input type="text" name="app_version" id="app_version" class="form-control" 
                                               value="{{ old('app_version', $appSettings->app_version ?? '') }}"
                                               placeholder="es. 1.0.0">
                                        <small class="text-muted">Versione mostrata nel footer</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <div class="custom-control custom-switch mt-2">
                                            <input type="checkbox" class="custom-control-input" id="show_version" name="show_version" value="1"
                                                   {{ ($appSettings->show_version ?? false) ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="show_version">Mostra versione nel footer</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="dashboard_welcome">Messaggio di Benvenuto (Dashboard)</label>
                                <textarea name="dashboard_welcome" id="dashboard_welcome" class="form-control" rows="3"
                                          placeholder="Lascia vuoto per usare il messaggio predefinito">{{ old('dashboard_welcome', $appSettings->dashboard_welcome ?? '') }}</textarea>
                                <small class="text-muted">Messaggio mostrato nella dashboard. Lascia vuoto per usare il testo predefinito.</small>
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-1"></i> Salva Impostazioni
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="logo">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Logo</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">Carica il logo dell'applicazione. Verrà visualizzato nella pagina di login e nella sidebar.</p>

                        @if(session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        <form method="POST" action="{{ route('impostazioni.logo.upload') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Logo Grande (pagina login)</label>
                                        <div class="text-center p-3 border rounded bg-light mb-2" style="min-height: 120px;">
                                            @if($appSettings && $appSettings->getLogoPath())
                                                <img src="{{ $appSettings->getLogoPath() }}" alt="Logo" style="max-height: 100px; max-width: 100%;">
                                            @else
                                                <span class="text-muted">Nessun logo caricato</span>
                                            @endif
                                        </div>
                                        <input type="file" name="logo" class="form-control" accept="image/*">
                                        <small class="text-muted">PNG, JPG, GIF, SVG - Max 2MB</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Logo Piccolo (sidebar)</label>
                                        <div class="text-center p-3 border rounded bg-light mb-2" style="min-height: 80px;">
                                            @if($appSettings && $appSettings->getLogoSmallPath())
                                                <img src="{{ $appSettings->getLogoSmallPath() }}" alt="Logo Small" style="max-height: 60px; max-width: 100%;">
                                            @else
                                                <span class="text-muted">Nessun logo caricato</span>
                                            @endif
                                        </div>
                                        <input type="file" name="logo_small" class="form-control" accept="image/*">
                                        <small class="text-muted">PNG, JPG, GIF, SVG - Max 512KB</small>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-1"></i> Salva Logo
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="tab-pane active" id="tipologie">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Tipologie Documenti</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">Gestisci le tipologie disponibili per i documenti caricati nel sistema.</p>

                        @if(session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        @if(session('error'))
                            <div class="alert alert-danger">{{ session('error') }}</div>
                        @endif

                        <div class="mb-3">
                            <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addTipologiaModal">
                                <i class="fas fa-plus"></i> Nuova Tipologia
                            </button>
                        </div>

                        <table class="table table-bordered table-striped" id="tipologie-table">
                            <thead>
                                <tr>
                                    <th style="width: 40px;">Ordine</th>
                                    <th>Nome</th>
                                    <th>Descrizione</th>
                                    <th style="width: 100px;">Stato</th>
                                    <th style="width: 150px;">Azioni</th>
                                </tr>
                            </thead>
                            <tbody id="tipologie-sortable">
                                @foreach($tipologie as $tipologia)
                                <tr data-id="{{ $tipologia->id }}">
                                    <td class="text-center">
                                        <i class="fas fa-arrows-alt handle" style="cursor: grab;"></i>
                                    </td>
                                    <td>
                                        <span class="tipologia-nome">{{ $tipologia->nome }}</span>
                                    </td>
                                    <td>{{ $tipologia->descrizione ?? '-' }}</td>
                                    <td>
                                        @if($tipologia->attiva)
                                            <span class="badge badge-success">Attiva</span>
                                        @else
                                            <span class="badge badge-secondary">Disattivata</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-xs btn-warning" onclick="editTipologia({{ $tipologia->id }}, '{{ addslashes($tipologia->nome) }}', '{{ addslashes($tipologia->descrizione ?? '') }}', {{ $tipologia->attiva ? 'true' : 'false' }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        @if($tipologia->documenti()->count() == 0)
                                            <form method="POST" action="{{ route('impostazioni.tipologie.destroy', $tipologia->id) }}" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Eliminare questa tipologia?')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        @else
                                            <button type="button" class="btn btn-xs btn-danger" disabled title="Documenti associati: {{ $tipologia->documenti()->count() }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="ruoli">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Tipi di Ruolo</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">Gestisci i ruoli che possono essere assegnati agli individui nei gruppi.</p>

                        @if(session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        @if(session('error'))
                            <div class="alert alert-danger">{{ session('error') }}</div>
                        @endif

                        <div class="mb-3">
                            <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addRuoloModal">
                                <i class="fas fa-plus"></i> Nuovo Ruolo
                            </button>
                        </div>

                        <table class="table table-bordered table-striped" id="ruoli-table">
                            <thead>
                                <tr>
                                    <th style="width: 40px;">Ordine</th>
                                    <th>Nome</th>
                                    <th>Descrizione</th>
                                    <th style="width: 100px;">Stato</th>
                                    <th style="width: 150px;">Azioni</th>
                                </tr>
                            </thead>
                            <tbody id="ruoli-sortable">
                                @foreach($ruoli as $ruolo)
                                <tr data-id="{{ $ruolo->id }}">
                                    <td class="text-center">
                                        <i class="fas fa-arrows-alt handle" style="cursor: grab;"></i>
                                    </td>
                                    <td>
                                        <span class="ruolo-nome">{{ $ruolo->nome }}</span>
                                    </td>
                                    <td>{{ $ruolo->descrizione ?? '-' }}</td>
                                    <td>
                                        @if($ruolo->attiva)
                                            <span class="badge badge-success">Attivo</span>
                                        @else
                                            <span class="badge badge-secondary">Disattivato</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-xs btn-warning" onclick="editRuolo({{ $ruolo->id }}, '{{ addslashes($ruolo->nome) }}', '{{ addslashes($ruolo->descrizione ?? '') }}', {{ $ruolo->attiva ? 'true' : 'false' }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        @php $membriCount = $ruolo->getMembriCount() @endphp
                                        @if($membriCount == 0)
                                            <form method="POST" action="{{ route('impostazioni.ruoli.destroy', $ruolo->id) }}" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Eliminare questo ruolo?')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        @else
                                            <button type="button" class="btn btn-xs btn-danger" disabled title="Membri associati: {{ $membriCount }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="tipologie-eventi">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Tipologie Eventi</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">Gestisci le tipologie disponibili per gli eventi del calendario.</p>

                        @if(session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        @if(session('error'))
                            <div class="alert alert-danger">{{ session('error') }}</div>
                        @endif

                        <div class="mb-3">
                            <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addTipologiaEventoModal">
                                <i class="fas fa-plus"></i> Nuova Tipologia
                            </button>
                        </div>

                        <table class="table table-bordered table-striped" id="tipologie-eventi-table">
                            <thead>
                                <tr>
                                    <th style="width: 40px;">Ordine</th>
                                    <th>Nome</th>
                                    <th>Descrizione</th>
                                    <th style="width: 100px;">Stato</th>
                                    <th style="width: 150px;">Azioni</th>
                                </tr>
                            </thead>
                            <tbody id="tipologie-eventi-sortable">
                                @foreach($tipologieEventi as $tipologia)
                                <tr data-id="{{ $tipologia->id }}">
                                    <td class="text-center">
                                        <i class="fas fa-arrows-alt handle" style="cursor: grab;"></i>
                                    </td>
                                    <td>
                                        <span class="tipologia-evento-nome">{{ $tipologia->nome }}</span>
                                    </td>
                                    <td>{{ $tipologia->descrizione ?? '-' }}</td>
                                    <td>
                                        @if($tipologia->attiva)
                                            <span class="badge badge-success">Attiva</span>
                                        @else
                                            <span class="badge badge-secondary">Disattivata</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-xs btn-warning" onclick="editTipologiaEvento({{ $tipologia->id }}, '{{ addslashes($tipologia->nome) }}', '{{ addslashes($tipologia->descrizione ?? '') }}', {{ $tipologia->attiva ? 'true' : 'false' }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        @if($tipologia->eventi()->count() == 0)
                                            <form method="POST" action="{{ route('impostazioni.tipologie-eventi.destroy', $tipologia->id) }}" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Eliminare questa tipologia?')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        @else
                                            <button type="button" class="btn btn-xs btn-danger" disabled title="Eventi associati: {{ $tipologia->eventi()->count() }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addTipologiaModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('impostazioni.tipologie.store') }}">
                @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Nuova Tipologia</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="nome">Nome *</label>
                        <input type="text" name="nome" id="nome" class="form-control" required maxlength="50" placeholder="es. certificato">
                    </div>
                    <div class="form-group">
                        <label for="descrizione">Descrizione</label>
                        <input type="text" name="descrizione" id="descrizione" class="form-control" maxlength="255" placeholder="es. Certificato di formazione">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button>
                    <button type="submit" class="btn btn-primary">Salva</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editTipologiaModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="" id="editTipologiaForm">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" id="edit_tipologia_id">
                <div class="modal-header">
                    <h4 class="modal-title">Modifica Tipologia</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="edit_tipologia_nome">Nome *</label>
                        <input type="text" name="nome" id="edit_tipologia_nome" class="form-control" required maxlength="50">
                    </div>
                    <div class="form-group">
                        <label for="edit_tipologia_descrizione">Descrizione</label>
                        <input type="text" name="descrizione" id="edit_tipologia_descrizione" class="form-control" maxlength="255">
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="edit_tipologia_attiva" name="attiva" value="1">
                            <label class="custom-control-label" for="edit_tipologia_attiva">Attiva</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button>
                    <button type="submit" class="btn btn-primary">Salva</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="addRuoloModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('impostazioni.ruoli.store') }}">
                @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Nuovo Ruolo</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="ruolo_nome">Nome *</label>
                        <input type="text" name="nome" id="ruolo_nome" class="form-control" required maxlength="50" placeholder="es. Catechista">
                    </div>
                    <div class="form-group">
                        <label for="ruolo_descrizione">Descrizione</label>
                        <input type="text" name="descrizione" id="ruolo_descrizione" class="form-control" maxlength="255" placeholder="es. Catechista del gruppo">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button>
                    <button type="submit" class="btn btn-primary">Salva</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editRuoloModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="" id="editRuoloForm">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" id="edit_ruolo_id">
                <div class="modal-header">
                    <h4 class="modal-title">Modifica Ruolo</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="edit_ruolo_nome">Nome *</label>
                        <input type="text" name="nome" id="edit_ruolo_nome" class="form-control" required maxlength="50">
                    </div>
                    <div class="form-group">
                        <label for="edit_ruolo_descrizione">Descrizione</label>
                        <input type="text" name="descrizione" id="edit_ruolo_descrizione" class="form-control" maxlength="255">
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="edit_ruolo_attiva" name="attiva" value="1">
                            <label class="custom-control-label" for="edit_ruolo_attiva">Attivo</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button>
                    <button type="submit" class="btn btn-primary">Salva</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="addTipologiaEventoModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('impostazioni.tipologie-eventi.store') }}">
                @csrf
                <div class="modal-header">
                    <h4 class="modal-title">Nuova Tipologia Evento</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="tipologia_evento_nome">Nome *</label>
                        <input type="text" name="nome" id="tipologia_evento_nome" class="form-control" required maxlength="50" placeholder="es. catechesi">
                    </div>
                    <div class="form-group">
                        <label for="tipologia_evento_descrizione">Descrizione</label>
                        <input type="text" name="descrizione" id="tipologia_evento_descrizione" class="form-control" maxlength="255" placeholder="es. Catechesi">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button>
                    <button type="submit" class="btn btn-primary">Salva</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editTipologiaEventoModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="" id="editTipologiaEventoForm">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" id="edit_tipologia_evento_id">
                <div class="modal-header">
                    <h4 class="modal-title">Modifica Tipologia Evento</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="edit_tipologia_evento_nome">Nome *</label>
                        <input type="text" name="nome" id="edit_tipologia_evento_nome" class="form-control" required maxlength="50">
                    </div>
                    <div class="form-group">
                        <label for="edit_tipologia_evento_descrizione">Descrizione</label>
                        <input type="text" name="descrizione" id="edit_tipologia_evento_descrizione" class="form-control" maxlength="255">
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="edit_tipologia_evento_attiva" name="attiva" value="1">
                            <label class="custom-control-label" for="edit_tipologia_evento_attiva">Attiva</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button>
                    <button type="submit" class="btn btn-primary">Salva</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
function activateTabFromHash() {
    var hash = window.location.hash;
    if (hash) {
        var tabLink = document.querySelector('.list-group a[href="' + hash + '"]');
        if (tabLink) {
            $(tabLink).tab('show');
        }
    }
}

$(document).ready(function() {
    activateTabFromHash();
});

$(window).on('hashchange', function() {
    activateTabFromHash();
});

function editTipologia(id, nome, descrizione, attiva) {
    $('#edit_tipologia_id').val(id);
    $('#edit_tipologia_nome').val(nome);
    $('#edit_tipologia_descrizione').val(descrizione);
    $('#edit_tipologia_attiva').prop('checked', attiva);
    $('#editTipologiaForm').attr('action', '/impostazioni/tipologie/' + id);
    $('#editTipologiaModal').modal('show');
}

function editRuolo(id, nome, descrizione, attiva) {
    $('#edit_ruolo_id').val(id);
    $('#edit_ruolo_nome').val(nome);
    $('#edit_ruolo_descrizione').val(descrizione);
    $('#edit_ruolo_attiva').prop('checked', attiva);
    $('#editRuoloForm').attr('action', '/impostazioni/ruoli/' + id);
    $('#editRuoloModal').modal('show');
}

function editTipologiaEvento(id, nome, descrizione, attiva) {
    $('#edit_tipologia_evento_id').val(id);
    $('#edit_tipologia_evento_nome').val(nome);
    $('#edit_tipologia_evento_descrizione').val(descrizione);
    $('#edit_tipologia_evento_attiva').prop('checked', attiva);
    $('#editTipologiaEventoForm').attr('action', '/impostazioni/tipologie-eventi/' + id);
    $('#editTipologiaEventoModal').modal('show');
}

var sortableTipologie = Sortable.create(document.getElementById('tipologie-sortable'), {
    handle: '.handle',
    animation: 150,
    onEnd: function(evt) {
        var order = [];
        $('#tipologie-sortable tr').each(function() {
            order.push($(this).data('id'));
        });

        fetch('{{ route('impostazioni.tipologie.reorder') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ order: order })
        });
    }
});

var sortableRuoli = Sortable.create(document.getElementById('ruoli-sortable'), {
    handle: '.handle',
    animation: 150,
    onEnd: function(evt) {
        var order = [];
        $('#ruoli-sortable tr').each(function() {
            order.push($(this).data('id'));
        });

        fetch('{{ route('impostazioni.ruoli.reorder') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ order: order })
        });
    }
});

var sortableTipologieEventi = Sortable.create(document.getElementById('tipologie-eventi-sortable'), {
    handle: '.handle',
    animation: 150,
    onEnd: function(evt) {
        var order = [];
        $('#tipologie-eventi-sortable tr').each(function() {
            order.push($(this).data('id'));
        });

        fetch('{{ route('impostazioni.tipologie-eventi.reorder') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ order: order })
        });
    }
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr('href');
    if (target === '#ruoli') {
        sortableRuoli.refresh();
    }
    if (target === '#tipologie-eventi') {
        sortableTipologieEventi.refresh();
    }
});
</script>
@endsection