@extends('backend.layouts.app')

@section('page-title')
    <div class="d-flex align-items-center">
        <div class="page-title-content">
            <h1 class="page-main-title">Configuración de Semáforos</h1>
        </div>
    </div>
@endsection

@section('title', __('Editar Configuración de Semáforos'))

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-edit"></i> Editar Configuración de Semáforos
                    </h4>
                    <div class="card-header-actions">
                        <a href="{{ route('admin.configuracion.semaforo.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Volver
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.configuracion.semaforo.update') }}">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <!-- Configuración de Registros -->
                            <div class="col-md-6">
                                <div class="card border-left-primary">
                                    <div class="card-header bg-primary text-white">
                                        <h5 class="mb-0">
                                            <i class="fas fa-file-medical"></i> Umbrales de Registros Sanitarios
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <p class="text-muted">Configuración de alertas para vencimientos de registros sanitarios (en meses):</p>
                                        
                                        <div class="form-group">
                                            <label for="REGISTRO_UMBRAL_CRITICO">
                                                <i class="fas fa-circle text-danger"></i> Umbral Crítico (meses)
                                            </label>
                                            <input type="number" 
                                                   class="form-control @error('REGISTRO_UMBRAL_CRITICO') is-invalid @enderror" 
                                                   id="REGISTRO_UMBRAL_CRITICO" 
                                                   name="REGISTRO_UMBRAL_CRITICO" 
                                                   value="{{ old('REGISTRO_UMBRAL_CRITICO', $configuraciones['registro']['critico']->valor) }}"
                                                   min="1" 
                                                   max="24" 
                                                   required>
                                            @error('REGISTRO_UMBRAL_CRITICO')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Productos que vencen en este tiempo o menos se marcarán como críticos.
                                            </small>
                                        </div>

                                        <div class="form-group">
                                            <label for="REGISTRO_UMBRAL_ATENCION">
                                                <i class="fas fa-circle text-warning"></i> Umbral de Atención (meses)
                                            </label>
                                            <input type="number" 
                                                   class="form-control @error('REGISTRO_UMBRAL_ATENCION') is-invalid @enderror" 
                                                   id="REGISTRO_UMBRAL_ATENCION" 
                                                   name="REGISTRO_UMBRAL_ATENCION" 
                                                   value="{{ old('REGISTRO_UMBRAL_ATENCION', $configuraciones['registro']['atencion']->valor) }}"
                                                   min="1" 
                                                   max="24" 
                                                   required>
                                            @error('REGISTRO_UMBRAL_ATENCION')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Productos que vencen en este tiempo o menos se marcarán para atención.
                                            </small>
                                        </div>

                                        <div class="form-group">
                                            <label for="REGISTRO_UMBRAL_VIGILAR">
                                                <i class="fas fa-circle text-success"></i> Umbral de Vigilancia (meses)
                                            </label>
                                            <input type="number" 
                                                   class="form-control @error('REGISTRO_UMBRAL_VIGILAR') is-invalid @enderror" 
                                                   id="REGISTRO_UMBRAL_VIGILAR" 
                                                   name="REGISTRO_UMBRAL_VIGILAR" 
                                                   value="{{ old('REGISTRO_UMBRAL_VIGILAR', $configuraciones['registro']['vigilar']->valor) }}"
                                                   min="1" 
                                                   max="24" 
                                                   required>
                                            @error('REGISTRO_UMBRAL_VIGILAR')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Productos que vencen en este tiempo o menos se marcarán para vigilancia.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Configuración de Trámites -->
                            <div class="col-md-6">
                                <div class="card border-left-info">
                                    <div class="card-header bg-info text-white">
                                        <h5 class="mb-0">
                                            <i class="fas fa-clock"></i> Umbrales de Fechas Planeadas
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <p class="text-muted">Configuración de alertas para fechas planeadas de trámites (en días):</p>
                                        
                                        <div class="form-group">
                                            <label for="TRAMITE_UMBRAL_CRITICO">
                                                <i class="fas fa-circle text-danger"></i> Umbral Crítico (días)
                                            </label>
                                            <input type="number" 
                                                   class="form-control @error('TRAMITE_UMBRAL_CRITICO') is-invalid @enderror" 
                                                   id="TRAMITE_UMBRAL_CRITICO" 
                                                   name="TRAMITE_UMBRAL_CRITICO" 
                                                   value="{{ old('TRAMITE_UMBRAL_CRITICO', $configuraciones['tramite']['critico']->valor) }}"
                                                   min="1" 
                                                   max="365" 
                                                   required>
                                            @error('TRAMITE_UMBRAL_CRITICO')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Trámites con fecha planeada en este tiempo o menos se marcarán como críticos.
                                            </small>
                                        </div>

                                        <div class="form-group">
                                            <label for="TRAMITE_UMBRAL_ATENCION">
                                                <i class="fas fa-circle text-warning"></i> Umbral de Atención (días)
                                            </label>
                                            <input type="number" 
                                                   class="form-control @error('TRAMITE_UMBRAL_ATENCION') is-invalid @enderror" 
                                                   id="TRAMITE_UMBRAL_ATENCION" 
                                                   name="TRAMITE_UMBRAL_ATENCION" 
                                                   value="{{ old('TRAMITE_UMBRAL_ATENCION', $configuraciones['tramite']['atencion']->valor) }}"
                                                   min="1" 
                                                   max="365" 
                                                   required>
                                            @error('TRAMITE_UMBRAL_ATENCION')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Trámites con fecha planeada en este tiempo o menos se marcarán para atención.
                                            </small>
                                        </div>

                                        <div class="form-group">
                                            <label for="TRAMITE_UMBRAL_VIGILAR">
                                                <i class="fas fa-circle text-success"></i> Umbral de Vigilancia (días)
                                            </label>
                                            <input type="number" 
                                                   class="form-control @error('TRAMITE_UMBRAL_VIGILAR') is-invalid @enderror" 
                                                   id="TRAMITE_UMBRAL_VIGILAR" 
                                                   name="TRAMITE_UMBRAL_VIGILAR" 
                                                   value="{{ old('TRAMITE_UMBRAL_VIGILAR', $configuraciones['tramite']['vigilar']->valor) }}"
                                                   min="1" 
                                                   max="365" 
                                                   required>
                                            @error('TRAMITE_UMBRAL_VIGILAR')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Trámites con fecha planeada en este tiempo o menos se marcarán para vigilancia.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Notas importantes -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <h5><i class="fas fa-info-circle"></i> Notas Importantes:</h5>
                                    <ul class="mb-0">
                                        <li>Los valores deben ser progresivos: <strong>Crítico &lt; Atención &lt; Vigilancia</strong></li>
                                        <li>Para registros sanitarios, los valores se configuran en <strong>meses</strong></li>
                                        <li>Para fechas planeadas de trámites, los valores se configuran en <strong>días</strong></li>
                                        <li>Los cambios se aplicarán inmediatamente en el dashboard</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Botones de acción -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Guardar Configuración
                                    </button>
                                    <a href="{{ route('admin.configuracion.semaforo.index') }}" class="btn btn-secondary ml-2">
                                        <i class="fas fa-times"></i> Cancelar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('after-styles')
<style>
    .border-left-primary {
        border-left: 4px solid #007bff !important;
    }
    
    .border-left-info {
        border-left: 4px solid #17a2b8 !important;
    }
    
    .card-header-actions {
        margin-left: auto;
    }
    
    .form-group label {
        font-weight: 600;
    }
    
    .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
</style>
@endpush

@push('after-scripts')
<script>
    // Validación en tiempo real para asegurar que los valores sean progresivos
    document.addEventListener('DOMContentLoaded', function() {
        const registroInputs = {
            critico: document.getElementById('REGISTRO_UMBRAL_CRITICO'),
            atencion: document.getElementById('REGISTRO_UMBRAL_ATENCION'),
            vigilar: document.getElementById('REGISTRO_UMBRAL_VIGILAR')
        };
        
        const tramiteInputs = {
            critico: document.getElementById('TRAMITE_UMBRAL_CRITICO'),
            atencion: document.getElementById('TRAMITE_UMBRAL_ATENCION'),
            vigilar: document.getElementById('TRAMITE_UMBRAL_VIGILAR')
        };
        
        function validateProgression(inputs) {
            const critico = parseInt(inputs.critico.value) || 0;
            const atencion = parseInt(inputs.atencion.value) || 0;
            const vigilar = parseInt(inputs.vigilar.value) || 0;
            
            // Resetear clases
            Object.values(inputs).forEach(input => {
                input.classList.remove('border-danger');
            });
            
            // Validar progresión
            if (critico >= atencion && atencion > 0) {
                inputs.critico.classList.add('border-danger');
                inputs.atencion.classList.add('border-danger');
            }
            
            if (atencion >= vigilar && vigilar > 0) {
                inputs.atencion.classList.add('border-danger');
                inputs.vigilar.classList.add('border-danger');
            }
        }
        
        // Añadir event listeners
        Object.values(registroInputs).forEach(input => {
            input.addEventListener('input', () => validateProgression(registroInputs));
        });
        
        Object.values(tramiteInputs).forEach(input => {
            input.addEventListener('input', () => validateProgression(tramiteInputs));
        });
        
        // Validar al cargar
        validateProgression(registroInputs);
        validateProgression(tramiteInputs);
    });
</script>
@endpush