@extends('dashboard.layouts.app')

@section('title', 'Firewalls')
@section('page-title', 'Mis Firewalls')

@section('content')
<div style="max-width: 1200px; margin: 0 auto;">

    @if (session('success'))
        <div style="background: #d4edda; color: #155724; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; border: 1px solid #c3e6cb;">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div style="background: #f8d7da; color: #721c24; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; border: 1px solid #f5c6cb;">
            @foreach ($errors->all() as $error)
                <p style="margin: 0.5rem 0;">{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h2 style="font-size: 2rem; color: #043d13; margin: 0;">
            <i class="fas fa-shield-alt"></i> Grupos de Firewall
        </h2>
        <a href="{{ route('firewalls.create') }}" style="display: inline-block; padding: 1.5rem 3rem; background: linear-gradient(90deg, #043d13, #07941e); color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600;">
            <i class="fas fa-plus-circle"></i> Crear Firewall
        </a>
    </div>

    @if(count($firewalls) === 0)
        <div style="background: white; padding: 4rem; text-align: center; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
            <i class="fas fa-shield-alt" style="font-size: 5rem; color: #ccc; margin-bottom: 1.5rem;"></i>
            <h3 style="font-size: 2rem; color: #666; margin-bottom: 1rem;">No tienes grupos de firewall</h3>
            <p style="font-size: 1.5rem; color: #999; margin-bottom: 2rem;">Los firewalls te permiten controlar el tráfico de red a tus servidores</p>
            <a href="{{ route('firewalls.create') }}" style="display: inline-block; padding: 1.5rem 3rem; background: linear-gradient(90deg, #043d13, #07941e); color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600;">
                <i class="fas fa-plus-circle"></i> Crear Primer Firewall
            </a>
        </div>
    @else
        <div style="background: white; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden;">
            <table style="width: 100%; border-collapse: collapse;">
                <thead style="background: linear-gradient(90deg, #043d13, #07941e); color: white;">
                    <tr>
                        <th style="padding: 1.5rem; text-align: left; font-size: 1.5rem; font-weight: 600;">Descripción</th>
                        <th style="padding: 1.5rem; text-align: center; font-size: 1.5rem; font-weight: 600;">Reglas</th>
                        <th style="padding: 1.5rem; text-align: center; font-size: 1.5rem; font-weight: 600;">Servidores</th>
                        <th style="padding: 1.5rem; text-align: center; font-size: 1.5rem; font-weight: 600;">Fecha de Creación</th>
                        <th style="padding: 1.5rem; text-align: right; font-size: 1.5rem; font-weight: 600;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($firewalls as $firewall)
                        <tr style="border-bottom: 1px solid #eee;">
                            <td style="padding: 1.5rem; font-size: 1.5rem;">
                                <strong>{{ $firewall['description'] ?? 'Sin descripción' }}</strong>
                            </td>
                            <td style="padding: 1.5rem; text-align: center; font-size: 1.4rem;">
                                <span style="display: inline-block; padding: 0.5rem 1rem; background: #17a2b8; color: white; border-radius: 0.3rem; font-weight: 600;">
                                    {{ $firewall['rule_count'] ?? 0 }}
                                </span>
                            </td>
                            <td style="padding: 1.5rem; text-align: center; font-size: 1.4rem;">
                                <span style="display: inline-block; padding: 0.5rem 1rem; background: #28a745; color: white; border-radius: 0.3rem; font-weight: 600;">
                                    {{ $firewall['instance_count'] ?? 0 }}
                                </span>
                            </td>
                            <td style="padding: 1.5rem; text-align: center; font-size: 1.4rem;">
                                {{ isset($firewall['date_created']) ? \Carbon\Carbon::parse($firewall['date_created'])->format('d/m/Y H:i') : 'N/A' }}
                            </td>
                            <td style="padding: 1.5rem; text-align: right;">
                                <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                                    <a href="{{ route('firewalls.show', $firewall['id']) }}" style="padding: 0.8rem 1.5rem; background: #17a2b8; color: white; text-decoration: none; border-radius: 0.3rem; font-size: 1.4rem;">
                                        <i class="fas fa-eye"></i> Ver
                                    </a>
                                    <form method="POST" action="{{ route('firewalls.destroy', $firewall['id']) }}" style="display: inline;" onsubmit="return confirm('¿Estás seguro de eliminar este firewall?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" style="padding: 0.8rem 1.5rem; background: #dc3545; color: white; border: none; border-radius: 0.3rem; font-size: 1.4rem; cursor: pointer;">
                                            <i class="fas fa-trash"></i> Eliminar
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection