@extends('layouts.app')

@section('title', 'Crear Plan de Internet')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">📶 Crear Plan de Internet</h1>
                <a href="{{ route('planes-internet.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Volver
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8 col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Información del Plan</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('planes-internet.store') }}" method="POST">
                        @csrf
                        
                        <div class="mb-3">
                            <label for="nombre" class="form-label">Nombre del Plan *</label>
                            <input type="text" class="form-control @error('nombre') is-invalid @enderror" 
                                   id="nombre" name="nombre" value="{{ old('nombre') }}" required 
                                   placeholder="Ej: Plan Básico 15MB">
                            @error('nombre')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="descripcion" class="form-label">Descripción *</label>
                            <textarea class="form-control @error('descripcion') is-invalid @enderror" 
                                      id="descripcion" name="descripcion" rows="3" required 
                                      placeholder="Describe las características y beneficios del plan">{{ old('descripcion') }}</textarea>
                            @error('descripcion')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="velocidad_bajada" class="form-label">Velocidad de Bajada (Mbps) *</label>
                                    <input type="number" class="form-control @error('velocidad_bajada') is-invalid @enderror" 
                                           id="velocidad_bajada" name="velocidad_bajada" value="{{ old('velocidad_bajada') }}" 
                                           step="0.1" min="0" required placeholder="10">
                                    @error('velocidad_bajada')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="velocidad_subida" class="form-label">Velocidad de Subida (Mbps) *</label>
                                    <input type="number" class="form-control @error('velocidad_subida') is-invalid @enderror" 
                                           id="velocidad_subida" name="velocidad_subida" value="{{ old('velocidad_subida') }}" 
                                           step="0.1" min="0" required placeholder="5">
                                    @error('velocidad_subida')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="precio" class="form-label">Precio Mensual (Bs) *</label>
                                    <input type="number" class="form-control @error('precio') is-invalid @enderror" 
                                           id="precio" name="precio" value="{{ old('precio') }}" 
                                           step="0.01" min="0" required placeholder="150.00">
                                    @error('precio')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="instalacion" class="form-label">Costo de Instalación (Bs)</label>
                                    <input type="number" class="form-control @error('instalacion') is-invalid @enderror" 
                                           id="instalacion" name="instalacion" value="{{ old('instalacion', 0) }}" 
                                           step="0.01" min="0" placeholder="50.00">
                                    @error('instalacion')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="tipo" class="form-label">Tipo de Plan *</label>
                            <select class="form-select @error('tipo') is-invalid @enderror" id="tipo" name="tipo" required>
                                <option value="">Selecciona el tipo de plan</option>
                                <option value="residencial" {{ old('tipo') == 'residencial' ? 'selected' : '' }}>Residencial</option>
                                <option value="empresarial" {{ old('tipo') == 'empresarial' ? 'selected' : '' }}>Empresarial</option>
                                <option value="corporativo" {{ old('tipo') == 'corporativo' ? 'selected' : '' }}>Corporativo</option>
                            </select>
                            @error('tipo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="activo" name="activo" value="1" 
                                       {{ old('activo', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="activo">
                                    Plan activo (disponible para nuevos clientes)
                                </label>
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="{{ route('planes-internet.index') }}" class="btn btn-secondary me-md-2">
                                <i class="fas fa-times"></i> Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Crear Plan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">💡 Consejos para Crear Planes</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle"></i> Recomendaciones:</h6>
                        <ul class="mb-0">
                            <li><strong>Nombre:</strong> Usa nombres descriptivos que incluyan la velocidad principal</li>
                            <li><strong>Descripción:</strong> Detalla quién es el público objetivo y qué actividades soporta</li>
                            <li><strong>Velocidades:</strong> Considera que la subida suele ser menor que la bajada</li>
                            <li><strong>Precios:</strong> Revisa la competencia y costos operativos</li>
                        </ul>
                    </div>
                    
                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle"></i> Tipos de Planes:</h6>
                        <ul class="mb-0">
                            <li><strong>Residencial:</strong> Para hogares y uso personal</li>
                            <li><strong>Empresarial:</strong> Para pequeñas y medianas empresas</li>
                            <li><strong>Corporativo:</strong> Para grandes empresas con alta demanda</li>
                        </ul>
                    </div>
                    
                    <div class="alert alert-success">
                        <h6><i class="fas fa-lightbulb"></i> Ejemplos de Velocidades:</h6>
                        <ul class="mb-0">
                            <li><strong>Básico:</strong> 10 Mbps bajada / 5 Mbps subida</li>
                            <li><strong>Estándar:</strong> 20 Mbps bajada / 10 Mbps subida</li>
                            <li><strong>Premium:</strong> 50 Mbps bajada / 25 Mbps subida</li>
                            <li><strong>Ultra:</strong> 100 Mbps bajada / 50 Mbps subida</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection