@extends('dashboard.layouts.app')

@section('title', 'IPs Reservadas')
@section('page-title', 'Mis IPs Reservadas')

@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;">{{ session('success') }}</div>
    @endif

    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h2 style="font-size: 2rem; color: #043d13;"><i class="fas fa-network-wired"></i> IPs Reservadas</h2>
        <a href="{{ route('reserved-ips.create') }}" style="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 IP Reservada
        </a>
    </div>

    @if(count($reservedIps) === 0)
        <div style="background: white; padding: 4rem; text-align: center; border-radius: 1rem;">
            <i class="fas fa-network-wired" style="font-size: 5rem; color: #ccc; margin-bottom: 1.5rem;"></i>
            <h3 style="font-size: 2rem; color: #666;">No tienes IPs reservadas</h3>
            <p style="font-size: 1.5rem; color: #999; margin-bottom: 2rem;">Las IPs reservadas te permiten tener direcciones IP fijas para tus servidores</p>
        </div>
    @else
        <div style="background: white; border-radius: 1rem; 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;">IP / Subred</th>
                        <th style="padding: 1.5rem; text-align: left;">Tipo</th>
                        <th style="padding: 1.5rem; text-align: left;">Región</th>
                        <th style="padding: 1.5rem; text-align: left;">Estado</th>
                        <th style="padding: 1.5rem; text-align: right;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($reservedIps as $ip)
                        <tr style="border-bottom: 1px solid #eee;">
                            <td style="padding: 1.5rem;"><strong>{{ $ip['subnet'] ?? 'N/A' }}/{{ $ip['subnet_size'] ?? 'N/A' }}</strong></td>
                            <td style="padding: 1.5rem;">{{ strtoupper($ip['ip_type'] ?? 'N/A') }}</td>
                            <td style="padding: 1.5rem;">{{ $ip['region'] ?? 'N/A' }}</td>
                            <td style="padding: 1.5rem;">
                                @if(isset($ip['instance_id']) && $ip['instance_id'])
                                    <span style="padding: 0.5rem 1rem; background: #28a745; color: white; border-radius: 0.3rem;">Asignada</span>
                                @else
                                    <span style="padding: 0.5rem 1rem; background: #6c757d; color: white; border-radius: 0.3rem;">Disponible</span>
                                @endif
                            </td>
                            <td style="padding: 1.5rem; text-align: right;">
                                <a href="{{ route('reserved-ips.show', $ip['id']) }}" style="padding: 0.8rem 1.5rem; background: #17a2b8; color: white; text-decoration: none; border-radius: 0.3rem; margin-right: 0.5rem;"><i class="fas fa-eye"></i> Ver</a>
                                <form method="POST" action="{{ route('reserved-ips.destroy', $ip['id']) }}" style="display: inline;" onsubmit="return confirm('¿Estás seguro?');">
                                    @csrf @method('DELETE')
                                    <button type="submit" style="padding: 0.8rem 1.5rem; background: #dc3545; color: white; border: none; border-radius: 0.3rem; cursor: pointer;"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection