@extends('layouts.app')

@section('title', 'Crear Ticket de Soporte')

@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 Ticket de Soporte</h1>
                <a href="{{ route('soporte.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Volver
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('soporte.store') }}" method="POST" id="ticketForm">
                        @csrf
                        
                        <!-- Tabs Navigation -->
                        <ul class="nav nav-tabs" id="ticketTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="cliente-tab" data-bs-toggle="tab" data-bs-target="#cliente" type="button" role="tab">
                                    <i class="fas fa-user"></i> Cliente y Problema
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="detalles-tab" data-bs-toggle="tab" data-bs-target="#detalles" type="button" role="tab">
                                    <i class="fas fa-info-circle"></i> Detalles del Ticket
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="asignacion-tab" data-bs-toggle="tab" data-bs-target="#asignacion" type="button" role="tab">
                                    <i class="fas fa-user-cog"></i> Asignación
                                </button>
                            </li>
                        </ul>

                        <!-- Tabs Content -->
                        <div class="tab-content mt-4" id="ticketTabsContent">
                            
                            <!-- Tab 1: Cliente y Problema -->
                            <div class="tab-pane fade show active" id="cliente" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="cliente_id" class="form-label">Cliente *</label>
                                            <select class="form-select @error('cliente_id') is-invalid @enderror" id="cliente_id" name="cliente_id" required>
                                                <option value="">Seleccione un cliente</option>
                                                @foreach($clientes as $cliente)
                                                    <option value="{{ $cliente->id }}" {{ old('cliente_id') == $cliente->id ? 'selected' : '' }}>
                                                        {{ $cliente->nombre }} {{ $cliente->apellido }} - {{ $cliente->telefono }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('cliente_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="titulo" class="form-label">Título del Problema *</label>
                                            <input type="text" class="form-control @error('titulo') is-invalid @enderror" id="titulo" name="titulo" value="{{ old('titulo') }}" required placeholder="Ej: Problema de conexión a internet">
                                            @error('titulo')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="descripcion" class="form-label">Descripción del Problema *</label>
                                            <textarea class="form-control @error('descripcion') is-invalid @enderror" id="descripcion" name="descripcion" rows="5" required placeholder="Describa detalladamente el problema reportado por el cliente...">{{ old('descripcion') }}</textarea>
                                            @error('descripcion')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Panel de información del cliente -->
                                <div class="card bg-light mt-3" id="cliente-info" style="display: none;">
                                    <div class="card-header">
                                        <h6 class="mb-0"><i class="fas fa-info-circle"></i> Información del Cliente</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row" id="cliente-details">
                                            <!-- Se llenará con JavaScript -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 2: Detalles del Ticket -->
                            <div class="tab-pane fade" id="detalles" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="categoria" class="form-label">Categoría *</label>
                                            <select class="form-select @error('categoria') is-invalid @enderror" id="categoria" name="categoria" required>
                                                <option value="">Seleccione una categoría</option>
                                                <option value="Conectividad" {{ old('categoria') == 'Conectividad' ? 'selected' : '' }}>🌐 Problemas de Conectividad</option>
                                                <option value="Velocidad" {{ old('categoria') == 'Velocidad' ? 'selected' : '' }}>⚡ Problemas de Velocidad</option>
                                                <option value="Instalacion" {{ old('categoria') == 'Instalacion' ? 'selected' : '' }}>🔧 Instalación/Configuración</option>
                                                <option value="Hardware" {{ old('categoria') == 'Hardware' ? 'selected' : '' }}>💻 Problemas de Hardware</option>
                                                <option value="Facturacion" {{ old('categoria') == 'Facturacion' ? 'selected' : '' }}>💰 Pagos/Cobranza</option>
                                                <option value="Soporte_Tecnico" {{ old('categoria') == 'Soporte_Tecnico' ? 'selected' : '' }}>🛠️ Soporte Técnico General</option>
                                                <option value="Cambio_Plan" {{ old('categoria') == 'Cambio_Plan' ? 'selected' : '' }}>📋 Cambio de Plan</option>
                                                <option value="Suspension" {{ old('categoria') == 'Suspension' ? 'selected' : '' }}>⏸️ Suspensión/Reactivación</option>
                                                <option value="Otros" {{ old('categoria') == 'Otros' ? 'selected' : '' }}>📝 Otros</option>
                                            </select>
                                            @error('categoria')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="prioridad" class="form-label">Prioridad *</label>
                                            <select class="form-select @error('prioridad') is-invalid @enderror" id="prioridad" name="prioridad" required>
                                                <option value="">Seleccione prioridad</option>
                                                <option value="baja" {{ old('prioridad') == 'baja' ? 'selected' : '' }}>
                                                    🟢 Baja - Consulta general
                                                </option>
                                                <option value="media" {{ old('prioridad') == 'media' ? 'selected' : '' }}>
                                                    🟡 Media - Problema que afecta el servicio
                                                </option>
                                                <option value="alta" {{ old('prioridad') == 'alta' ? 'selected' : '' }}>
                                                    🟠 Alta - Servicio interrumpido
                                                </option>
                                                <option value="critica" {{ old('prioridad') == 'critica' ? 'selected' : '' }}>
                                                    🔴 Crítica - Sin servicio/Emergencia
                                                </option>
                                            </select>
                                            @error('prioridad')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Información sobre prioridades -->
                                <div class="alert alert-info">
                                    <h6><i class="fas fa-info-circle"></i> Guía de Prioridades:</h6>
                                    <ul class="mb-0">
                                        <li><strong>Baja:</strong> Consultas, dudas, solicitudes no urgentes</li>
                                        <li><strong>Media:</strong> Problemas intermitentes, velocidad reducida</li>
                                        <li><strong>Alta:</strong> Servicio interrumpido, problemas graves</li>
                                        <li><strong>Crítica:</strong> Sin servicio, emergencias, afecta operaciones críticas</li>
                                    </ul>
                                </div>

                                <!-- Plantillas rápidas -->
                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h6 class="mb-0"><i class="fas fa-clipboard-list"></i> Plantillas Rápidas</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <button type="button" class="btn btn-outline-primary btn-sm mb-2" onclick="aplicarPlantilla('Sin conexión a internet')">
                                                    Sin Conexión
                                                </button>
                                                <button type="button" class="btn btn-outline-primary btn-sm mb-2" onclick="aplicarPlantilla('Velocidad lenta de internet')">
                                                    Velocidad Lenta
                                                </button>
                                                <button type="button" class="btn btn-outline-primary btn-sm mb-2" onclick="aplicarPlantilla('Problemas con WiFi')">
                                                    Problemas WiFi
                                                </button>
                                            </div>
                                            <div class="col-md-6">
                                                <button type="button" class="btn btn-outline-primary btn-sm mb-2" onclick="aplicarPlantilla('Instalación nueva')">
                                                    Instalación Nueva
                                                </button>
                                                <button type="button" class="btn btn-outline-primary btn-sm mb-2" onclick="aplicarPlantilla('Cambio de plan')">
                                                    Cambio de Plan
                                                </button>
                                                <button type="button" class="btn btn-outline-primary btn-sm mb-2" onclick="aplicarPlantilla('Consulta de cobranza')">
                                                    Cobranza
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 3: Asignación -->
                            <div class="tab-pane fade" id="asignacion" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="tecnico_id" class="form-label">Asignar a Técnico</label>
                                            <select class="form-select @error('tecnico_id') is-invalid @enderror" id="tecnico_id" name="tecnico_id">
                                                <option value="">Sin asignar (se asignará después)</option>
                                                @foreach($tecnicos as $tecnico)
                                                    <option value="{{ $tecnico->id }}" {{ old('tecnico_id') == $tecnico->id ? 'selected' : '' }}>
                                                        {{ $tecnico->name }} - {{ $tecnico->email }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('tecnico_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">
                                                Si no asigna un técnico ahora, el ticket quedará pendiente de asignación.
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Información sobre técnicos -->
                                @if($tecnicos->count() > 0)
                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h6 class="mb-0"><i class="fas fa-users"></i> Técnicos Disponibles</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            @foreach($tecnicos as $tecnico)
                                            <div class="col-md-6 mb-2">
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-user-cog text-primary me-2"></i>
                                                    <div>
                                                        <strong>{{ $tecnico->name }}</strong><br>
                                                        <small class="text-muted">{{ $tecnico->email }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                @else
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    No hay técnicos disponibles en el sistema. El ticket quedará pendiente de asignación.
                                </div>
                                @endif

                                <!-- Resumen del ticket -->
                                <div class="card mt-4">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0"><i class="fas fa-clipboard-check"></i> Resumen del Ticket</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p><strong>Cliente:</strong> <span id="resumen-cliente">No seleccionado</span></p>
                                                <p><strong>Título:</strong> <span id="resumen-titulo">Sin título</span></p>
                                                <p><strong>Categoría:</strong> <span id="resumen-categoria">Sin categoría</span></p>
                                            </div>
                                            <div class="col-md-6">
                                                <p><strong>Prioridad:</strong> <span id="resumen-prioridad">Sin prioridad</span></p>
                                                <p><strong>Técnico:</strong> <span id="resumen-tecnico">Sin asignar</span></p>
                                                <p><strong>Estado:</strong> <span class="badge bg-warning">Pendiente</span></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Botones de acción -->
                        <div class="d-flex justify-content-between mt-4">
                            <div>
                                <a href="{{ route('soporte.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancelar
                                </a>
                            </div>
                            <div>
                                <button type="button" class="btn btn-outline-primary" id="btnAnterior" style="display: none;">
                                    <i class="fas fa-arrow-left"></i> Anterior
                                </button>
                                <button type="button" class="btn btn-primary" id="btnSiguiente">
                                    Siguiente <i class="fas fa-arrow-right"></i>
                                </button>
                                <button type="submit" class="btn btn-success" id="btnGuardar" style="display: none;">
                                    <i class="fas fa-ticket-alt"></i> Crear Ticket
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = ['cliente', 'detalles', 'asignacion'];
    let currentTab = 0;
    
    const btnAnterior = document.getElementById('btnAnterior');
    const btnSiguiente = document.getElementById('btnSiguiente');
    const btnGuardar = document.getElementById('btnGuardar');
    
    // Elementos del formulario
    const clienteSelect = document.getElementById('cliente_id');
    const tituloInput = document.getElementById('titulo');
    const categoriaSelect = document.getElementById('categoria');
    const prioridadSelect = document.getElementById('prioridad');
    const tecnicoSelect = document.getElementById('tecnico_id');
    
    // Datos de clientes para mostrar información
    const clientes = @json($clientes);
    const tecnicos = @json($tecnicos);
    
    function updateButtons() {
        btnAnterior.style.display = currentTab > 0 ? 'inline-block' : 'none';
        btnSiguiente.style.display = currentTab < tabs.length - 1 ? 'inline-block' : 'none';
        btnGuardar.style.display = currentTab === tabs.length - 1 ? 'inline-block' : 'none';
    }
    
    function actualizarResumen() {
        // Cliente
        const clienteId = clienteSelect.value;
        const cliente = clientes.find(c => c.id == clienteId);
        document.getElementById('resumen-cliente').textContent = cliente ? 
            `${cliente.nombre} ${cliente.apellido}` : 'No seleccionado';
        
        // Título
        document.getElementById('resumen-titulo').textContent = tituloInput.value || 'Sin título';
        
        // Categoría
        const categoriaTexto = categoriaSelect.selectedOptions[0]?.textContent || 'Sin categoría';
        document.getElementById('resumen-categoria').textContent = categoriaTexto;
        
        // Prioridad
        const prioridadTexto = prioridadSelect.selectedOptions[0]?.textContent || 'Sin prioridad';
        document.getElementById('resumen-prioridad').textContent = prioridadTexto;
        
        // Técnico
        const tecnicoId = tecnicoSelect.value;
        const tecnico = tecnicos.find(t => t.id == tecnicoId);
        document.getElementById('resumen-tecnico').textContent = tecnico ? 
            tecnico.name : 'Sin asignar';
    }
    
    function mostrarInfoCliente() {
        const clienteId = clienteSelect.value;
        const cliente = clientes.find(c => c.id == clienteId);
        const infoPanel = document.getElementById('cliente-info');
        const detailsDiv = document.getElementById('cliente-details');
        
        if (cliente) {
            detailsDiv.innerHTML = `
                <div class="col-md-3">
                    <strong>Teléfono:</strong><br>
                    ${cliente.telefono || 'No disponible'}
                </div>
                <div class="col-md-3">
                    <strong>Email:</strong><br>
                    ${cliente.email || 'No disponible'}
                </div>
                <div class="col-md-3">
                    <strong>Dirección:</strong><br>
                    ${cliente.direccion || 'No disponible'}
                </div>
                <div class="col-md-3">
                    <strong>Plan:</strong><br>
                    ${cliente.plan_internet || 'No asignado'}
                </div>
            `;
            infoPanel.style.display = 'block';
        } else {
            infoPanel.style.display = 'none';
        }
    }
    
    function aplicarPlantilla(tipo) {
        const plantillas = {
            'Sin conexión a internet': {
                categoria: 'Conectividad',
                prioridad: 'alta',
                descripcion: 'El cliente reporta que no tiene conexión a internet. Se requiere verificar estado de la conexión y equipos.'
            },
            'Velocidad lenta de internet': {
                categoria: 'Velocidad', 
                prioridad: 'media',
                descripcion: 'El cliente reporta que la velocidad de internet es muy lenta. Se requiere realizar pruebas de velocidad y verificar configuración.'
            },
            'Problemas con WiFi': {
                categoria: 'Hardware',
                prioridad: 'media', 
                descripcion: 'El cliente tiene problemas con la señal WiFi. Se requiere verificar configuración del router y cobertura.'
            },
            'Instalación nueva': {
                categoria: 'Instalacion',
                prioridad: 'media',
                descripcion: 'Solicitud de instalación de nuevo servicio de internet. Coordinar visita técnica.'
            },
            'Cambio de plan': {
                categoria: 'Cambio_Plan',
                prioridad: 'baja',
                descripcion: 'El cliente solicita cambio de plan de internet. Verificar disponibilidad y proceder con el cambio.'
            },
            'Consulta de cobranza': {
                categoria: 'Facturacion',
                prioridad: 'media',
                descripcion: 'El cliente tiene consultas sobre sus pagos. Revisar historial de pagos y aclarar dudas.'
            }
        };
        
        const plantilla = plantillas[tipo];
        if (plantilla) {
            document.getElementById('categoria').value = plantilla.categoria;
            document.getElementById('prioridad').value = plantilla.prioridad;
            document.getElementById('descripcion').value = plantilla.descripcion;
            actualizarResumen();
        }
    }
    
    // Event listeners
    btnSiguiente.addEventListener('click', function() {
        if (currentTab < tabs.length - 1) {
            currentTab++;
            const nextTab = new bootstrap.Tab(document.querySelector(`#${tabs[currentTab]}-tab`));
            nextTab.show();
            updateButtons();
            actualizarResumen();
        }
    });
    
    btnAnterior.addEventListener('click', function() {
        if (currentTab > 0) {
            currentTab--;
            const prevTab = new bootstrap.Tab(document.querySelector(`#${tabs[currentTab]}-tab`));
            prevTab.show();
            updateButtons();
        }
    });
    
    // Escuchar cambios de tab manuales
    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(function(tab) {
        tab.addEventListener('shown.bs.tab', function(e) {
            const targetId = e.target.getAttribute('data-bs-target').replace('#', '');
            currentTab = tabs.indexOf(targetId);
            updateButtons();
            actualizarResumen();
        });
    });
    
    // Actualizar resumen cuando cambien los campos
    clienteSelect.addEventListener('change', function() {
        mostrarInfoCliente();
        actualizarResumen();
    });
    
    tituloInput.addEventListener('input', actualizarResumen);
    categoriaSelect.addEventListener('change', actualizarResumen);
    prioridadSelect.addEventListener('change', actualizarResumen);
    tecnicoSelect.addEventListener('change', actualizarResumen);
    
    // Hacer la función global para los botones de plantilla
    window.aplicarPlantilla = aplicarPlantilla;
    
    updateButtons();
    actualizarResumen();
});
</script>
@endsection