@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="h3 mb-0">Soporte Técnico</h2>
                <div class="d-flex gap-2">
                    <a href="{{ route('soporte.mis-tareas') }}" class="btn btn-info">
                        <i class="fas fa-tasks"></i> Mis Tareas
                    </a>
                    <a href="{{ route('soporte.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Nuevo Ticket
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros y búsqueda -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" action="{{ route('soporte.index') }}">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="search" class="form-label">Buscar ticket</label>
                                    <input type="text" class="form-control" id="search" name="search" 
                                           value="{{ request('search') }}" placeholder="Título o descripción">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="estado" class="form-label">Estado</label>
                                    <select class="form-select" id="estado" name="estado">
                                        <option value="">Todos</option>
                                        <option value="pendiente" {{ request('estado') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                        <option value="asignado" {{ request('estado') == 'asignado' ? 'selected' : '' }}>Asignado</option>
                                        <option value="en_proceso" {{ request('estado') == 'en_proceso' ? 'selected' : '' }}>En Proceso</option>
                                        <option value="resuelto" {{ request('estado') == 'resuelto' ? 'selected' : '' }}>Resuelto</option>
                                        <option value="cerrado" {{ request('estado') == 'cerrado' ? 'selected' : '' }}>Cerrado</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="prioridad" class="form-label">Prioridad</label>
                                    <select class="form-select" id="prioridad" name="prioridad">
                                        <option value="">Todas</option>
                                        <option value="baja" {{ request('prioridad') == 'baja' ? 'selected' : '' }}>Baja</option>
                                        <option value="media" {{ request('prioridad') == 'media' ? 'selected' : '' }}>Media</option>
                                        <option value="alta" {{ request('prioridad') == 'alta' ? 'selected' : '' }}>Alta</option>
                                        <option value="urgente" {{ request('prioridad') == 'urgente' ? 'selected' : '' }}>Urgente</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="categoria" class="form-label">Categoría</label>
                                    <select class="form-select" id="categoria" name="categoria">
                                        <option value="">Todas</option>
                                        <option value="Router" {{ request('categoria') == 'Router' ? 'selected' : '' }}>Router</option>
                                        <option value="Switch" {{ request('categoria') == 'Switch' ? 'selected' : '' }}>Switch</option>
                                        <option value="Access Point" {{ request('categoria') == 'Access Point' ? 'selected' : '' }}>Access Point</option>
                                        <option value="Adaptador" {{ request('categoria') == 'Adaptador' ? 'selected' : '' }}>Adaptador</option>
                                        <option value="Configuración" {{ request('categoria') == 'Configuración' ? 'selected' : '' }}>Configuración</option>
                                        <option value="Instalación" {{ request('categoria') == 'Instalación' ? 'selected' : '' }}>Instalación</option>
                                        <option value="Otro" {{ request('categoria') == 'Otro' ? 'selected' : '' }}>Otro</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="tecnico" class="form-label">Técnico</label>
                                    <select class="form-select" id="tecnico" name="tecnico">
                                        <option value="">Todos</option>
                                        @foreach($tecnicos as $tecnico)
                                            <option value="{{ $tecnico->id }}" {{ request('tecnico') == $tecnico->id ? 'selected' : '' }}>
                                                {{ $tecnico->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="mb-3">
                                    <label class="form-label">&nbsp;</label>
                                    <div class="d-flex gap-2">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-search"></i>
                                        </button>
                                        <a href="{{ route('soporte.index') }}" class="btn btn-secondary">
                                            <i class="fas fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Total Tickets</h5>
                            <h2 class="mb-0">{{ $soportes->total() }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-ticket-alt fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Pendientes</h5>
                            <h2 class="mb-0">{{ $estadisticas['pendientes'] }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">En Proceso</h5>
                            <h2 class="mb-0">{{ $estadisticas['en_proceso'] }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-cogs fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Resueltos</h5>
                            <h2 class="mb-0">{{ $estadisticas['resueltos'] }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de tickets -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Título</th>
                                    <th>Cliente</th>
                                    <th>Categoría</th>
                                    <th>Prioridad</th>
                                    <th>Estado</th>
                                    <th>Técnico</th>
                                    <th>Fecha Creación</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($soportes as $soporte)
                                    <tr>
                                        <td>
                                            <strong>#{{ $soporte->id }}</strong>
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ $soporte->titulo }}</strong>
                                                <br><small class="text-muted">{{ Str::limit($soporte->descripcion, 50) }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ $soporte->cliente->nombre }} {{ $soporte->cliente->apellido }}</strong>
                                                <br><small class="text-muted">{{ $soporte->cliente->email }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ $soporte->categoria }}</span>
                                        </td>
                                        <td>
                                            <span class="badge 
                                                @if($soporte->prioridad == 'baja') bg-success
                                                @elseif($soporte->prioridad == 'media') bg-warning
                                                @elseif($soporte->prioridad == 'alta') bg-danger
                                                @else bg-dark
                                                @endif">
                                                {{ ucfirst($soporte->prioridad) }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge 
                                                @if($soporte->estado == 'pendiente') bg-warning
                                                @elseif($soporte->estado == 'asignado') bg-info
                                                @elseif($soporte->estado == 'en_proceso') bg-primary
                                                @elseif($soporte->estado == 'resuelto') bg-success
                                                @else bg-secondary
                                                @endif">
                                                {{ str_replace('_', ' ', ucfirst($soporte->estado)) }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($soporte->tecnico)
                                                <div>
                                                    <strong>{{ $soporte->tecnico->name }}</strong>
                                                    <br><small class="text-muted">{{ $soporte->tecnico->email }}</small>
                                                </div>
                                            @else
                                                <span class="text-muted">Sin asignar</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ $soporte->fecha_creacion->format('d/m/Y') }}</strong>
                                                <br><small class="text-muted">{{ $soporte->fecha_creacion->format('H:i') }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('soporte.show', $soporte) }}" class="btn btn-sm btn-outline-info" title="Ver">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('soporte.edit', $soporte) }}" class="btn btn-sm btn-outline-primary" title="Editar">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                
                                                @if($soporte->estado == 'pendiente')
                                                    <button type="button" class="btn btn-sm btn-outline-info" onclick="asignarTecnico({{ $soporte->id }})" title="Asignar Técnico">
                                                        <i class="fas fa-user-plus"></i>
                                                    </button>
                                                @endif
                                                
                                                @if(in_array($soporte->estado, ['asignado', 'en_proceso']))
                                                    <form action="{{ route('soporte.cambiar-estado', $soporte) }}" method="POST" style="display: inline;">
                                                        @csrf
                                                        <input type="hidden" name="estado" value="resuelto">
                                                        <button type="submit" class="btn btn-sm btn-outline-success" title="Marcar Resuelto" 
                                                                onclick="return confirm('¿Marcar este ticket como resuelto?')">
                                                            <i class="fas fa-check"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                                
                                                <form action="{{ route('soporte.destroy', $soporte) }}" method="POST" style="display: inline;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar"
                                                            onclick="return confirm('¿Está seguro de eliminar este ticket?')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center py-4">
                                            <div class="text-muted">
                                                <i class="fas fa-ticket-alt fa-3x mb-3"></i>
                                                <p>No hay tickets de soporte registrados</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    <div class="d-flex justify-content-center">
                        {{ $soportes->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para asignar técnico -->
<div class="modal fade" id="asignarTecnicoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Asignar Técnico</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="asignarTecnicoForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="tecnico_id" class="form-label">Técnico</label>
                        <select class="form-select" id="tecnico_id" name="tecnico_id" required>
                            <option value="">Seleccionar técnico</option>
                            @foreach($tecnicos as $tecnico)
                                <option value="{{ $tecnico->id }}">{{ $tecnico->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="observaciones" class="form-label">Observaciones</label>
                        <textarea class="form-control" id="observaciones" name="observaciones" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Asignar</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function asignarTecnico(ticketId) {
    document.getElementById('asignarTecnicoForm').action = `/soporte/${ticketId}/asignar`;
    new bootstrap.Modal(document.getElementById('asignarTecnicoModal')).show();
}
</script>
@endpush