polizia_frascati/resources/views/vpn/management.blade.php

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Gestione Connessione VPN</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                    <li class="breadcrumb-item active">VPN</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Main content -->
<div class="row">
    <!-- Stato VPN -->
    <div class="col-md-6">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-shield-alt"></i> Stato Connessione VPN
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-box">
                            <span class="info-box-icon bg-info" id="vpn-status-icon">
                                <i class="fas fa-question"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">Stato VPN</span>
                                <span class="info-box-number" id="vpn-status-text">Caricamento...</span>
                                <span class="info-box-more" id="vpn-last-update">--</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-center">
                            <button type="button" class="btn btn-success btn-lg" id="connect-vpn-btn">
                                <i class="fas fa-play"></i> Connetti VPN
                            </button>
                            <button type="button" class="btn btn-warning btn-lg mt-2" id="disconnect-vpn-btn">
                                <i class="fas fa-stop"></i> Disconnetti VPN
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Configurazione Credenziali -->
    <div class="col-md-6">
        <div class="card card-warning">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-cog"></i> Configurazione Credenziali
                </h3>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        {{ session('success') }}
                    </div>
                @endif

                <form action="/vpn/update-credentials" method="POST">
                    @csrf
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" class="form-control" id="username" name="username"
                               value="{{ old('username', 'com.cmrmp013.0001') }}" required>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password" name="password"
                               placeholder="Inserisci la password" required>
                    </div>
                    <div class="form-group">
                        <label for="server">Server VPN</label>
                        <input type="text" class="form-control" id="server" name="server"
                               value="{{ old('server', 'anyvpn.ilportaledellautomobilista.it/utentiMCTC') }}" required>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Salva Credenziali
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Log VPN -->
<div class="row mt-4">
    <div class="col-md-12">
        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-file-alt"></i> Log Connessione VPN
                </h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" id="refresh-logs">
                        <i class="fas fa-sync"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Data/Ora</th>
                                <th>Tipo</th>
                                <th>Messaggio</th>
                            </tr>
                        </thead>
                        <tbody id="vpn-logs-table">
                            <tr>
                                <td colspan="3" class="text-center">Caricamento logs...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    $(document).ready(function() {
        // Funzione per aggiornare lo stato VPN
        function updateVpnStatus() {
            $.ajax({
                url: '/vpn/status',
                type: 'GET',
                success: function(data) {
                    const status = data.status;
                    const statusIcon = $('#vpn-status-icon i');
                    const statusText = $('#vpn-status-text');
                    const statusBadge = $('#vpn-status-badge');
                    const lastUpdate = $('#vpn-last-update');

                    // Aggiorna icona e testo in base al stato
                    if (status === 'connected') {
                        statusIcon.removeClass().addClass('fas fa-check');
                        $('#vpn-status-icon').removeClass().addClass('info-box-icon bg-success');
                        statusText.text('Connesso');
                        if (statusBadge.length) statusBadge.removeClass().addClass('badge badge-success right').text('ON');
                    } else if (status === 'disconnected') {
                        statusIcon.removeClass().addClass('fas fa-times');
                        $('#vpn-status-icon').removeClass().addClass('info-box-icon bg-danger');
                        statusText.text('Disconnesso');
                        if (statusBadge.length) statusBadge.removeClass().addClass('badge badge-danger right').text('OFF');
                    } else {
                        statusIcon.removeClass().addClass('fas fa-question');
                        $('#vpn-status-icon').removeClass().addClass('info-box-icon bg-warning');
                        statusText.text('Sconosciuto');
                        if (statusBadge.length) statusBadge.removeClass().addClass('badge badge-warning right').text('?');
                    }

                    if (data.last_update) {
                        lastUpdate.text('Ultimo aggiornamento: ' + new Date(data.last_update).toLocaleString());
                    }
                },
                error: function() {
                    $('#vpn-status-text').text('Errore nel recupero dello stato');
                    const statusBadge = $('#vpn-status-badge');
                    if (statusBadge.length) statusBadge.removeClass().addClass('badge badge-danger right').text('ERR');
                }
            });
        }

        // Funzione per connettere VPN
        $('#connect-vpn-btn').click(function() {
            const btn = $(this);
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Connettendo...');

            $.ajax({
                url: '/vpn/connect',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(data) {
                    if (data.success) {
                        toastr.success('Comando di connessione VPN inviato!');
                        setTimeout(updateVpnStatus, 3000); // Aggiorna lo stato dopo 3 secondi
                    } else {
                        toastr.error('Errore nel lancio della connessione VPN');
                    }
                },
                error: function() {
                    toastr.error('Errore nel lancio della connessione VPN');
                },
                complete: function() {
                    btn.prop('disabled', false).html('<i class="fas fa-play"></i> Connetti VPN');
                }
            });
        });

        // Funzione per disconnettere VPN
        $('#disconnect-vpn-btn').click(function() {
            const btn = $(this);
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Disconnettendo...');

            $.ajax({
                url: '/vpn/disconnect',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(data) {
                    if (data.success) {
                        toastr.success('Comando di disconnessione VPN inviato!');
                        setTimeout(updateVpnStatus, 3000);
                    } else {
                        toastr.error('Errore nella disconnessione VPN');
                    }
                },
                error: function() {
                    toastr.error('Errore nella disconnessione VPN');
                },
                complete: function() {
                    btn.prop('disabled', false).html('<i class="fas fa-stop"></i> Disconnetti VPN');
                }
            });
        });

        // Aggiorna lo stato all'avvio
        updateVpnStatus();

        // Aggiorna lo stato ogni 30 secondi
        setInterval(updateVpnStatus, 30000);
    });
</script>
@endpush