@extends('layouts.app')

@section('title', 'Editar 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">Editar: {{ $training->name }}</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>Editar 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.update', $training) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <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', $training->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', $training->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', $training->type) == 'internal' ? 'selected' : '' }}>Interna</option>
                                    <option value="external" {{ old('type', $training->type) == 'external' ? 'selected' : '' }}>Externa</option>
                                    <option value="online" {{ old('type', $training->type) == 'online' ? 'selected' : '' }}>En Línea</option>
                                    <option value="certification" {{ old('type', $training->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', $training->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', $training->start_date ? $training->start_date->format('Y-m-d\TH:i') : '') }}">
                                @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', $training->end_date ? $training->end_date->format('Y-m-d\TH:i') : '') }}">
                                @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', $training->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', $training->currency) == 'USD' ? 'selected' : '' }}>USD</option>
                                        <option value="EUR" {{ old('currency', $training->currency) == 'EUR' ? 'selected' : '' }}>EUR</option>
                                        <option value="COP" {{ old('currency', $training->currency) == 'COP' ? 'selected' : '' }}>COP</option>
                                        <option value="MXN" {{ old('currency', $training->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', $training->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', $training->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>Actualizar Capacitación
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Panel de Información -->
        <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 Actual
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="text-primary">Estado Actual:</h6>
                        @php
                            $now = now();
                            $startDate = $training->start_date;
                            $endDate = $training->end_date;
                            
                            if (!$startDate) {
                                $status = 'scheduled';
                                $statusColor = 'bg-secondary';
                                $statusText = 'Programada';
                            } elseif ($startDate->isFuture()) {
                                $status = 'upcoming';
                                $statusColor = 'bg-info';
                                $statusText = 'Próxima';
                            } elseif ($startDate->isToday() || ($endDate && $endDate->isFuture())) {
                                $status = 'ongoing';
                                $statusColor = 'bg-warning';
                                $statusText = 'En Curso';
                            } elseif ($endDate && $endDate->isPast()) {
                                $status = 'completed';
                                $statusColor = 'bg-success';
                                $statusText = 'Completada';
                            } else {
                                $status = 'completed';
                                $statusColor = 'bg-success';
                                $statusText = 'Completada';
                            }
                        @endphp
                        <span class="badge {{ $statusColor }} text-white px-2 py-1">
                            {{ $statusText }}
                        </span>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-primary">Fechas:</h6>
                        <ul class="list-unstyled small">
                            <li><strong>Inicio:</strong> {{ $training->start_date ? $training->start_date->format('d/m/Y H:i') : 'No programada' }}</li>
                            <li><strong>Fin:</strong> {{ $training->end_date ? $training->end_date->format('d/m/Y H:i') : 'No programada' }}</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-primary">Costo:</h6>
                        <p class="small">
                            @if($training->cost)
                                {{ number_format($training->cost, 2) }} {{ $training->currency }}
                            @else
                                Gratuito
                            @endif
                        </p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-primary">Participantes:</h6>
                        <p class="small">
                            @if($training->max_participants)
                                Máximo: {{ $training->max_participants }}
                            @else
                                Sin límite
                            @endif
                        </p>
                    </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