@extends('admin.layout')
@section('title', 'Gestion des serveurs')
@section('content')

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5>Liste des serveurs</h5>
        <a href="{{ route('serveurs.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Nouveau serveur
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="example1">
                <thead>
                    <tr>
                        <th>Code Agence</th>
                        <th>Libellé</th>
                        <th>IP</th>
                        <th>Base de données</th>
                        <th>Port</th>
                        <th>Statut</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($serveurs as $serveur)
                    <tr>
                        <td>{{ $serveur->code_agence }}</td>
                        <td>{{ $serveur->libelle_agence }}</td>
                        <td>{{ $serveur->ip_agence }}</td>
                        <td>{{ $serveur->bd_agence }}</td>
                        <td>{{ $serveur->port }}</td>
                        <td>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input status-toggle"
                                    id="status_{{ $serveur->id }}"
                                    {{ $serveur->status ? 'checked' : '' }}
                                    data-id="{{ $serveur->id }}">
                                <label class="custom-control-label" for="status_{{ $serveur->id }}"></label>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button class="btn btn-info btn-sm test-connection" data-id="{{ $serveur->id }}">
                                    <i class="fas fa-plug"></i>
                                </button>
                                <a href="{{ route('serveurs.edit', $serveur) }}" class="btn btn-warning btn-sm">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="{{ route('serveurs.destroy', $serveur->id) }}" 
                                   class="btn btn-danger btn-sm"
                                   onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce serveur?')">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // DataTable initialization
    $('#serveursTable').DataTable();

    // Test connection
    $('.test-connection').click(function() {
        const serveurId = $(this).data('id');
        const button = $(this);
        
        button.prop('disabled', true);
        
        $.ajax({
            url: `/serveurs/test-connection/${serveurId}`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                Swal.fire({
                    icon: response.success ? 'success' : 'error',
                    title: response.success ? 'Succès' : 'Erreur',
                    text: response.message
                });
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Erreur',
                    text: 'Erreur lors du test de connexion'
                });
            },
            complete: function() {
                button.prop('disabled', false);
            }
        });
    });

    // Toggle status
    $('.status-toggle').change(function() {
        const serveurId = $(this).data('id');
        const checkbox = $(this);
        
        $.ajax({
            url: `/serveurs/toggle-status/${serveurId}`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Succès',
                        text: response.message,
                        timer: 1500
                    });
                } else {
                    checkbox.prop('checked', !checkbox.prop('checked'));
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: response.message
                    });
                }
            },
            error: function() {
                checkbox.prop('checked', !checkbox.prop('checked'));
                Swal.fire({
                    icon: 'error',
                    title: 'Erreur',
                    text: 'Erreur lors du changement de statut'
                });
            }
        });
    });
});
</script>
@endpush