@extends('layouts.app')

@section('title', 'Crear Ticket')
@section('page-title', 'Crear Nuevo Ticket')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0">Nuevo Ticket de Soporte</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('tickets.store') }}" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="mb-3">
                        <label for="title" class="form-label required">
                            Título del Ticket
                            <i class="bi bi-info-circle help-icon" 
                               data-bs-toggle="tooltip" 
                               data-bs-placement="right" 
                               title="Escribe un título claro y descriptivo que resuma el problema o solicitud (ej: 'Error al cargar reportes de ventas')"></i>
                        </label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" 
                               id="title" name="title" value="{{ old('title') }}" required 
                               placeholder="Ej: Error al cargar página de reportes">
                        @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label required">
                            Descripción
                            <i class="bi bi-info-circle help-icon" 
                               data-bs-toggle="tooltip" 
                               data-bs-placement="right" 
                               title="Describe el problema en detalle: qué estabas haciendo, qué esperabas que sucediera y qué pasó realmente. Incluye pasos para reproducir el error si es posible"></i>
                        </label>
                        <textarea class="form-control @error('description') is-invalid @enderror" 
                                  id="description" name="description" rows="5" required 
                                  placeholder="Describe detalladamente el problema...">{{ old('description') }}</textarea>
                        <div class="form-text">Incluye toda la información relevante para resolver el caso</div>
                        @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="priority" class="form-label required">
                                Prioridad
                                <i class="bi bi-info-circle help-icon" 
                                   data-bs-toggle="tooltip" 
                                   data-bs-placement="right" 
                                   title="Crítica: Sistema caído o pérdida de datos. Alta: Funcionalidad importante afectada. Media: Problema que tiene workaround. Baja: Mejora o problema menor"></i>
                            </label>
                            <select class="form-select @error('priority') is-invalid @enderror" 
                                    id="priority" name="priority" required>
                                <option value="">Seleccionar...</option>
                                <option value="baja" {{ old('priority') == 'baja' ? 'selected' : '' }}>🟢 Baja - Puede esperar</option>
                                <option value="media" {{ old('priority') == 'media' ? 'selected' : '' }}>🟡 Media - Atención normal</option>
                                <option value="alta" {{ old('priority') == 'alta' ? 'selected' : '' }}>🟠 Alta - Requiere atención pronta</option>
                                <option value="critica" {{ old('priority') == 'critica' ? 'selected' : '' }}>🔴 Crítica - Urgente</option>
                            </select>
                            @error('priority')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="project_id" class="form-label">
                                Proyecto Asociado
                                <i class="bi bi-info-circle help-icon" 
                                   data-bs-toggle="tooltip" 
                                   data-bs-placement="right" 
                                   title="Si el ticket está relacionado con un proyecto específico, selecciónalo aquí. Esto ayuda a organizar y priorizar mejor el trabajo"></i>
                            </label>
                            <select class="form-select @error('project_id') is-invalid @enderror" 
                                    id="project_id" name="project_id">
                                <option value="">Ninguno</option>
                                @foreach($projects as $project)
                                <option value="{{ $project->id }}" 
                                        {{ old('project_id') == $project->id ? 'selected' : '' }}
                                        data-sla-baja="{{ $project->sla_baja }}"
                                        data-sla-media="{{ $project->sla_media }}"
                                        data-sla-alta="{{ $project->sla_alta }}"
                                        data-sla-critica="{{ $project->sla_critica }}">
                                    {{ $project->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('project_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="due_date_display" class="form-label">Fecha Límite Calculada</label>
                        <input type="text" class="form-control bg-light" 
                               id="due_date_display" 
                               value="Se calculará según el SLA del proyecto" 
                               readonly>
                        <input type="hidden" id="due_date" name="due_date" value="">
                        <div class="form-text" id="sla-info">
                            <i class="bi bi-info-circle me-1"></i>La fecha límite se calcula automáticamente según la prioridad y el SLA del proyecto.
                        </div>
                        @error('due_date')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="attachments" class="form-label">
                            Adjuntar Archivos
                            <i class="bi bi-info-circle help-icon" 
                               data-bs-toggle="tooltip" 
                               data-bs-placement="right" 
                               title="Adjunta capturas de pantalla, logs, documentos o cualquier archivo que ayude a entender mejor el problema. Formatos: JPG, PNG, PDF, DOC, XLS, etc."></i>
                        </label>
                        <input type="file" class="form-control @error('attachments') is-invalid @enderror" 
                               id="attachments" name="attachments[]" multiple>
                        <div class="form-text">Puedes seleccionar múltiples archivos a la vez</div>
                        @error('attachments')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        El ticket será creado con estado <strong>"Abierto"</strong> y la <strong>fecha límite se calculará automáticamente</strong> 
                        según el SLA configurado para la prioridad seleccionada. Será asignado automáticamente a un responsable disponible.
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ route('tickets.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-2"></i>Cancelar
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save me-2"></i>Crear Ticket
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .required:after {
        content: " *";
        color: red;
    }
    #sla-info.highlight {
        color: #0d6efd;
        font-weight: 500;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const projectSelect = document.getElementById('project_id');
    const prioritySelect = document.getElementById('priority');
    const dueDateHidden = document.getElementById('due_date');
    const dueDateDisplay = document.getElementById('due_date_display');
    const slaInfo = document.getElementById('sla-info');
    
    function updateSlaInfo() {
        const selectedProject = projectSelect.options[projectSelect.selectedIndex];
        const priority = prioritySelect.value;
        
        if (projectSelect.value && priority) {
            const slaHours = selectedProject.getAttribute(`data-sla-${priority}`);
            
            if (slaHours) {
                const now = new Date();
                const dueDate = new Date(now.getTime() + (slaHours * 60 * 60 * 1000));
                
                // Formato para mostrar al usuario
                const formattedDate = dueDate.toLocaleString('es-ES', {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
                
                // Formato ISO para enviar al servidor (MySQL datetime)
                const isoDate = dueDate.toISOString().slice(0, 19).replace('T', ' ');
                
                const days = Math.floor(slaHours / 24);
                const hours = slaHours % 24;
                let timeText = '';
                if (days > 0) {
                    timeText = `${days} día${days > 1 ? 's' : ''}`;
                    if (hours > 0) timeText += ` y ${hours} hora${hours > 1 ? 's' : ''}`;
                } else {
                    timeText = `${hours} hora${hours > 1 ? 's' : ''}`;
                }
                
                // Actualizar campo visible
                dueDateDisplay.value = `📅 ${formattedDate} (${timeText})`;
                dueDateDisplay.classList.remove('bg-light');
                dueDateDisplay.classList.add('bg-info', 'bg-opacity-10', 'border-info');
                
                // Actualizar campo oculto con formato ISO
                dueDateHidden.value = isoDate;
                
                // Actualizar mensaje informativo
                slaInfo.innerHTML = `<i class="bi bi-check-circle text-success me-1"></i>Fecha límite establecida según SLA de prioridad <strong>${priority}</strong>: ${timeText} desde ahora`;
                slaInfo.classList.add('text-success');
            } else {
                resetSlaInfo();
            }
        } else {
            resetSlaInfo();
        }
    }
    
    function resetSlaInfo() {
        dueDateDisplay.value = 'Seleccione proyecto y prioridad';
        dueDateDisplay.classList.remove('bg-info', 'bg-opacity-10', 'border-info');
        dueDateDisplay.classList.add('bg-light');
        dueDateHidden.value = '';
        slaInfo.innerHTML = '<i class="bi bi-info-circle me-1"></i>La fecha límite se calcula automáticamente según la prioridad y el SLA del proyecto.';
        slaInfo.classList.remove('text-success');
    }
    
    projectSelect.addEventListener('change', updateSlaInfo);
    prioritySelect.addEventListener('change', updateSlaInfo);
    
    // Si hay valores pre-seleccionados (old input), actualizar info
    if (projectSelect.value && prioritySelect.value) {
        updateSlaInfo();
    }
});
</script>
@endpush
@endsection