@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">Mis Tareas - Tickets Asignados</h2>
                <div class="d-flex gap-2">
                    <a href="{{ route('soporte.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Volver a Soporte
                    </a>
                    <a href="{{ route('soporte.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Nuevo Ticket
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas rápidas -->
    <div class="row mb-4">
        <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">Asignados</h5>
                            <h2 class="mb-0">{{ $soportes->where('estado', 'asignado')->count() }}</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">{{ $soportes->where('estado', 'en_proceso')->count() }}</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-danger">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Críticos</h5>
                            <h2 class="mb-0">{{ $soportes->where('prioridad', 'critica')->count() }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-exclamation-triangle 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">Total Asignados</h5>
                            <h2 class="mb-0">{{ $soportes->total() }}</h2>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-tasks fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Lista de tickets -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Tickets Asignados a Mí</h5>
                </div>
                <div class="card-body">
                    @if($soportes->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Cliente</th>
                                        <th>Título</th>
                                        <th>Prioridad</th>
                                        <th>Estado</th>
                                        <th>Categoría</th>
                                        <th>Fecha Asignación</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($soportes as $soporte)
                                        <tr>
                                            <td>
                                                <strong>#{{ $soporte->id }}</strong>
                                            </td>
                                            <td>
                                                <div>
                                                    <strong>{{ $soporte->cliente->nombre }} {{ $soporte->cliente->apellido }}</strong>
                                                    @if($soporte->cliente->empresa)
                                                        <br><small class="text-muted">{{ $soporte->cliente->empresa }}</small>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <strong>{{ $soporte->titulo }}</strong>
                                                    @if($soporte->descripcion)
                                                        <br><small class="text-muted">{{ Str::limit($soporte->descripcion, 50) }}</small>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                @php
                                                    $prioridadClass = [
                                                        'baja' => 'success',
                                                        'media' => 'warning',
                                                        'alta' => 'danger',
                                                        'critica' => 'dark'
                                                    ];
                                                @endphp
                                                <span class="badge bg-{{ $prioridadClass[$soporte->prioridad] ?? 'secondary' }}">
                                                    {{ ucfirst($soporte->prioridad) }}
                                                </span>
                                            </td>
                                            <td>
                                                @php
                                                    $estadoClass = [
                                                        'pendiente' => 'warning',
                                                        'asignado' => 'info',
                                                        'en_proceso' => 'primary',
                                                        'resuelto' => 'success',
                                                        'cerrado' => 'secondary'
                                                    ];
                                                @endphp
                                                <span class="badge bg-{{ $estadoClass[$soporte->estado] ?? 'secondary' }}">
                                                    {{ ucwords(str_replace('_', ' ', $soporte->estado)) }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge bg-light text-dark">{{ $soporte->categoria }}</span>
                                            </td>
                                            <td>
                                                @if($soporte->fecha_asignacion)
                                                    {{ $soporte->fecha_asignacion->format('d/m/Y H:i') }}
                                                @else
                                                    <span class="text-muted">No asignado</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <a href="{{ route('soporte.show', $soporte) }}" class="btn btn-outline-primary" title="Ver detalles">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    
                                                    @if($soporte->estado !== 'resuelto' && $soporte->estado !== 'cerrado')
                                                        <!-- Botón cambiar a En Proceso -->
                                                        @if($soporte->estado !== 'en_proceso')
                                                            <form action="{{ route('soporte.cambiar-estado', $soporte) }}" method="POST" style="display: inline;">
                                                                @csrf
                                                                <input type="hidden" name="estado" value="en_proceso">
                                                                <button type="submit" class="btn btn-outline-info" title="Marcar En Proceso">
                                                                    <i class="fas fa-play"></i>
                                                                </button>
                                                            </form>
                                                        @endif
                                                        
                                                        <!-- Botón resolver -->
                                                        <form action="{{ route('soporte.cambiar-estado', $soporte) }}" method="POST" 
                                                              style="display: inline;"
                                                              onsubmit="return confirm('¿Está seguro de marcar este ticket como resuelto?')">
                                                            @csrf
                                                            <input type="hidden" name="estado" value="resuelto">
                                                            <button type="submit" class="btn btn-outline-success" title="Marcar como Resuelto">
                                                                <i class="fas fa-check"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Paginación -->
                        <div class="d-flex justify-content-center">
                            {{ $soportes->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-tasks fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No tienes tickets asignados</h5>
                            <p class="text-muted">Cuando te asignen tickets de soporte, aparecerán aquí.</p>
                            <a href="{{ route('soporte.index') }}" class="btn btn-primary">
                                <i class="fas fa-arrow-left"></i> Ver Todos los Tickets
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection