@extends('layouts.app')

@section('title', 'Nueva Capacitación')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.hr.dashboard') }}">RRHH</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.hr.trainings.index') }}">Capacitaciones</a></li>
            <li class="breadcrumb-item active">Nueva Capacitación</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-graduation-cap me-2 text-primary"></i>Nueva Capacitación
        </h1>
        <div class="btn-group" role="group">
            <a href="{{ route('admin.hr.trainings.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <!-- Formulario -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-edit me-2 text-primary"></i>Información de la Capacitación
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.hr.trainings.store') }}" method="POST">
                        @csrf
                        
                        <div class="row g-3">
                            <!-- Nombre de la Capacitación -->
                            <div class="col-md-12">
                                <label for="name" class="form-label">
                                    Nombre de la Capacitación <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name') }}" 
                                       placeholder="Ej: Curso de Seguridad Industrial" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Descripción -->
                            <div class="col-md-12">
                                <label for="description" class="form-label">Descripción</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="3" 
                                          placeholder="Descripción detallada de la capacitación...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Tipo y Proveedor -->
                            <div class="col-md-6">
                                <label for="type" class="form-label">
                                    Tipo de Capacitación <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('type') is-invalid @enderror" 
                                        id="type" name="type" required>
                                    <option value="">Seleccionar tipo...</option>
                                    <option value="internal" {{ old('type') == 'internal' ? 'selected' : '' }}>Interna</option>
                                    <option value="external" {{ old('type') == 'external' ? 'selected' : '' }}>Externa</option>
                                    <option value="online" {{ old('type') == 'online' ? 'selected' : '' }}>En Línea</option>
                                    <option value="certification" {{ old('type') == 'certification' ? 'selected' : '' }}>Certificación</option>
                                </select>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="provider" class="form-label">Proveedor/Instructor</label>
                                <input type="text" class="form-control @error('provider') is-invalid @enderror" 
                                       id="provider" name="provider" value="{{ old('provider') }}" 
                                       placeholder="Nombre del proveedor o instructor">
                                @error('provider')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Fechas -->
                            <div class="col-md-6">
                                <label for="start_date" class="form-label">Fecha de Inicio</label>
                                <input type="datetime-local" class="form-control @error('start_date') is-invalid @enderror" 
                                       id="start_date" name="start_date" value="{{ old('start_date') }}">
                                @error('start_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="end_date" class="form-label">Fecha de Fin</label>
                                <input type="datetime-local" class="form-control @error('end_date') is-invalid @enderror" 
                                       id="end_date" name="end_date" value="{{ old('end_date') }}">
                                @error('end_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Costo y Moneda -->
                            <div class="col-md-6">
                                <label for="cost" class="form-label">Costo</label>
                                <div class="input-group">
                                    <input type="number" class="form-control @error('cost') is-invalid @enderror" 
                                           id="cost" name="cost" value="{{ old('cost') }}" 
                                           step="0.01" min="0" placeholder="0.00">
                                    <select class="form-select @error('currency') is-invalid @enderror" 
                                            id="currency" name="currency" style="max-width: 100px;">
                                        <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>USD</option>
                                        <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>EUR</option>
                                        <option value="COP" {{ old('currency') == 'COP' ? 'selected' : '' }}>COP</option>
                                        <option value="MXN" {{ old('currency') == 'MXN' ? 'selected' : '' }}>MXN</option>
                                    </select>
                                </div>
                                @error('cost')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @error('currency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="max_participants" class="form-label">Máximo de Participantes</label>
                                <input type="number" class="form-control @error('max_participants') is-invalid @enderror" 
                                       id="max_participants" name="max_participants" value="{{ old('max_participants') }}" 
                                       min="1" placeholder="Sin límite">
                                @error('max_participants')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Requisitos -->
                            <div class="col-md-12">
                                <label for="requirements" class="form-label">Requisitos</label>
                                <textarea class="form-control @error('requirements') is-invalid @enderror" 
                                          id="requirements" name="requirements" rows="3" 
                                          placeholder="Requisitos previos para participar en la capacitación...">{{ old('requirements') }}</textarea>
                                @error('requirements')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Botones -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('admin.hr.trainings.index') }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-1"></i>Cancelar
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-1"></i>Guardar Capacitación
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Panel de Ayuda -->
        <div class="col-lg-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-info-circle me-2 text-info"></i>Información Útil
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="text-primary">Tipos de Capacitación:</h6>
                        <ul class="list-unstyled small">
                            <li><span class="badge bg-primary me-1">Interna</span> Capacitación interna de la empresa</li>
                            <li><span class="badge bg-info me-1">Externa</span> Capacitación con proveedor externo</li>
                            <li><span class="badge bg-success me-1">En Línea</span> Capacitación virtual/online</li>
                            <li><span class="badge bg-warning me-1">Certificación</span> Capacitación con certificación</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-primary">Consejos:</h6>
                        <ul class="list-unstyled small text-muted">
                            <li>• Usa nombres descriptivos y claros</li>
                            <li>• Especifica bien los requisitos previos</li>
                            <li>• Establece un límite de participantes si es necesario</li>
                            <li>• Incluye toda la información de contacto del proveedor</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Validación de fechas
    const startDateInput = document.getElementById('start_date');
    const endDateInput = document.getElementById('end_date');
    
    startDateInput.addEventListener('change', function() {
        if (this.value) {
            endDateInput.min = this.value;
        }
    });
    
    endDateInput.addEventListener('change', function() {
        if (this.value && startDateInput.value) {
            if (new Date(this.value) <= new Date(startDateInput.value)) {
                this.setCustomValidity('La fecha de fin debe ser posterior a la fecha de inicio');
            } else {
                this.setCustomValidity('');
            }
        }
    });
});
</script>
@endpush