@extends('dashboard.layouts.app')

@section('title', 'Crear Firewall')
@section('page-title', 'Crear Nuevo Firewall')

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

    @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="margin-bottom: 2rem;">
        <a href="{{ route('firewalls.index') }}" style="padding: 1rem 2rem; background: #6c757d; color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.4rem;">
            <i class="fas fa-arrow-left"></i> Volver a Firewalls
        </a>
    </div>

    <div style="background: white; padding: 3rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
        <h2 style="font-size: 2.4rem; color: #043d13; margin-bottom: 1rem;">
            <i class="fas fa-shield-alt"></i> Crear Grupo de Firewall
        </h2>
        <p style="font-size: 1.4rem; color: #666; margin-bottom: 3rem;">
            Los grupos de firewall contienen reglas que controlan el tráfico de red entrante a tus servidores.
        </p>

        <div style="background: #e7f3ff; border-left: 4px solid #2196F3; padding: 1.5rem; margin-bottom: 3rem; border-radius: 0.5rem;">
            <h3 style="font-size: 1.6rem; color: #043d13; margin-bottom: 0.5rem;">
                <i class="fas fa-info-circle"></i> Información sobre Firewalls
            </h3>
            <ul style="font-size: 1.3rem; color: #666; margin: 0.5rem 0 0 2rem; line-height: 1.8;">
                <li>Primero crea el grupo de firewall con una descripción</li>
                <li>Luego podrás agregar reglas para controlar el tráfico</li>
                <li>Finalmente asigna el firewall a tus servidores</li>
                <li>Un mismo firewall puede aplicarse a múltiples servidores</li>
            </ul>
        </div>

        <form method="POST" action="{{ route('firewalls.store') }}">
            @csrf

            <div style="margin-bottom: 2rem;">
                <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">
                    Descripción *
                </label>
                <input type="text"
                       name="description"
                       required
                       value="{{ old('description') }}"
                       placeholder="ej: Firewall para servidores web"
                       style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                <p style="font-size: 1.3rem; color: #666; margin-top: 0.5rem;">
                    <i class="fas fa-lightbulb"></i> Un nombre descriptivo te ayudará a identificar este firewall
                </p>
            </div>

            <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 3rem;">
                <a href="{{ route('firewalls.index') }}" style="display: inline-block; padding: 1.5rem 3rem; background: #6c757d; color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.6rem;">
                    Cancelar
                </a>
                <button type="submit" style="padding: 1.5rem 3rem; background: linear-gradient(90deg, #043d13, #07941e); color: white; border: none; border-radius: 0.5rem; font-size: 1.6rem; cursor: pointer; font-weight: 600;">
                    <i class="fas fa-check"></i> Crear Firewall
                </button>
            </div>
        </form>
    </div>
</div>
@endsection