@extends('dashboard.layouts.app')

@section('title', 'Crear IP Reservada')
@section('page-title', 'Crear Nueva IP Reservada')

@section('content')
<div style="max-width: 900px; margin: 0 auto;">
    <div style="margin-bottom: 2rem;">
        <a href="{{ route('reserved-ips.index') }}" style="padding: 1rem 2rem; background: #6c757d; color: white; text-decoration: none; border-radius: 0.5rem;"><i class="fas fa-arrow-left"></i> Volver</a>
    </div>

    <div style="background: white; padding: 3rem; border-radius: 1rem;">
        <h2 style="font-size: 2.4rem; color: #043d13; margin-bottom: 2rem;"><i class="fas fa-network-wired"></i> Crear IP Reservada</h2>

        <form method="POST" action="{{ route('reserved-ips.store') }}">
            @csrf
            <div style="margin-bottom: 2rem;">
                <label style="display: block; font-size: 1.5rem; margin-bottom: 0.5rem;">Región *</label>
                <select name="region" required style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                    <option value="">Selecciona una región</option>
                    @foreach($regions as $region)
                        <option value="{{ $region['id'] }}">{{ $region['city'] ?? $region['id'] }} ({{ $region['country'] ?? 'N/A' }})</option>
                    @endforeach
                </select>
            </div>

            <div style="margin-bottom: 2rem;">
                <label style="display: block; font-size: 1.5rem; margin-bottom: 0.5rem;">Tipo de IP *</label>
                <select name="ip_type" required style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                    <option value="v4">IPv4</option>
                    <option value="v6">IPv6</option>
                </select>
            </div>

            <div style="margin-bottom: 2rem;">
                <label style="display: block; font-size: 1.5rem; margin-bottom: 0.5rem;">Etiqueta (Opcional)</label>
                <input type="text" name="label" placeholder="ej: IP Producción" style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
            </div>

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