@extends('dashboard.layouts.app')

@section('title', 'Detalles de IP Reservada')
@section('page-title', 'Detalles de IP Reservada')

@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="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; margin-bottom: 2rem;">
        <div style="display: flex; justify-content: space-between; align-items: start;">
            <div>
                <h2 style="font-size: 2.4rem; color: #043d13; margin-bottom: 1rem;"><i class="fas fa-network-wired"></i> {{ $reservedIp['subnet'] ?? 'N/A' }}/{{ $reservedIp['subnet_size'] ?? 'N/A' }}</h2>
                <div style="display: flex; gap: 2rem; margin-top: 1.5rem;">
                    <div><span style="color: #666;">Tipo:</span> <strong>{{ strtoupper($reservedIp['ip_type'] ?? 'N/A') }}</strong></div>
                    <div><span style="color: #666;">Región:</span> <strong>{{ $reservedIp['region'] ?? 'N/A' }}</strong></div>
                    <div><span style="color: #666;">Estado:</span>
                        @if(isset($reservedIp['instance_id']) && $reservedIp['instance_id'])
                            <strong style="color: #28a745;">Asignada</strong>
                        @else
                            <strong style="color: #6c757d;">Disponible</strong>
                        @endif
                    </div>
                </div>
            </div>
            <form method="POST" action="{{ route('reserved-ips.destroy', $reservedIp['id']) }}" onsubmit="return confirm('¿Estás seguro?');">
                @csrf @method('DELETE')
                <button type="submit" style="padding: 1rem 2rem; background: #dc3545; color: white; border: none; border-radius: 0.5rem; cursor: pointer;"><i class="fas fa-trash"></i> Eliminar</button>
            </form>
        </div>
    </div>

    <div style="background: white; padding: 3rem; border-radius: 1rem;">
        <h3 style="font-size: 2rem; color: #043d13; margin-bottom: 2rem;"><i class="fas fa-server"></i> Asignación de Servidor</h3>

        @if(isset($reservedIp['instance_id']) && $reservedIp['instance_id'])
            <div style="background: #d4edda; padding: 2rem; border-radius: 0.5rem; margin-bottom: 2rem;">
                <p style="color: #155724; margin-bottom: 1rem;"><strong>IP asignada al servidor:</strong> {{ $reservedIp['instance_id'] }}</p>
                <form method="POST" action="{{ route('reserved-ips.detach', $reservedIp['id']) }}">
                    @csrf
                    <button type="submit" style="padding: 1rem 2rem; background: #ffc107; color: #000; border: none; border-radius: 0.5rem; cursor: pointer;"><i class="fas fa-unlink"></i> Desasignar</button>
                </form>
            </div>
        @else
            @if(count($servers) > 0)
                <form method="POST" action="{{ route('reserved-ips.attach', $reservedIp['id']) }}">
                    @csrf
                    <div style="display: flex; gap: 1rem; align-items: end;">
                        <div style="flex: 1;">
                            <label style="display: block; font-size: 1.4rem; margin-bottom: 0.5rem;">Seleccionar Servidor</label>
                            <select name="server_id" required style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                                <option value="">Selecciona un servidor</option>
                                @foreach($servers as $server)
                                    <option value="{{ $server->vultr_instance_id }}">{{ $server->label ?? $server->vultr_instance_id }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" style="padding: 1.2rem 2rem; background: #28a745; color: white; border: none; border-radius: 0.5rem; cursor: pointer;"><i class="fas fa-link"></i> Asignar</button>
                    </div>
                </form>
            @else
                <div style="background: #f8d7da; padding: 2rem; border-radius: 0.5rem;">
                    <p style="color: #721c24; margin: 0;"><i class="fas fa-exclamation-triangle"></i> No tienes servidores disponibles.</p>
                </div>
            @endif
        @endif
    </div>
</div>
@endsection