@extends('layouts.app')

@section('title', 'Tickets')

@section('content')
<div class="max-w-[1400px] mx-auto flex flex-col gap-6">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-2xl font-bold text-white">Gestión de Tickets</h2>
            <p class="text-gray-400 text-sm mt-1">Administra las solicitudes de soporte</p>
        </div>
        <a href="{{ route('tickets.create') }}" class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary hover:bg-primary-dark text-background-dark font-bold transition-all shadow-[0_0_15px_rgba(19,236,91,0.3)]">
            <span class="material-symbols-outlined text-[18px]">add</span>
            <span>Nuevo Ticket</span>
        </a>
    </div>

    <div class="bg-surface-dark border border-[#23482f] rounded-xl p-6">
        <div class="flex flex-col gap-4">
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left text-gray-400">
                    <thead class="text-xs text-white uppercase bg-[#102216] border-b border-[#23482f]">
                        <tr>
                            <th scope="col" class="px-4 py-3">ID</th>
                            <th scope="col" class="px-4 py-3">Cliente</th>
                            <th scope="col" class="px-4 py-3">Título</th>
                            <th scope="col" class="px-4 py-3">Tipo</th>
                            <th scope="col" class="px-4 py-3">Estado</th>
                            <th scope="col" class="px-4 py-3">Técnico Asignado</th>
                            <th scope="col" class="px-4 py-3">Fecha Creación</th>
                            <th scope="col" class="px-4 py-3">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($tickets as $ticket)
                        <tr class="border-b border-[#23482f] hover:bg-[#1a3524]">
                            <td class="px-4 py-3 font-medium text-white">#{{ $ticket->id }}</td>
                            <td class="px-4 py-3 text-white">{{ $ticket->cliente->cliente ?? 'N/A' }}</td>
                            <td class="px-4 py-3 text-gray-300">{{ Str::limit($ticket->titulo, 30) }}</td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 text-xs font-bold rounded-full bg-secondary/10 text-secondary">
                                    {{ $ticket->tipo }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                @if($ticket->estado === 'abierto')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-red-500/10 text-red-400">
                                        Abierto
                                    </span>
                                @elseif($ticket->estado === 'en proceso')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-yellow-500/10 text-yellow-400">
                                        En Proceso
                                    </span>
                                @elseif($ticket->estado === 'resuelto')
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-green-500/10 text-green-400">
                                        Resuelto
                                    </span>
                                @else
                                    <span class="px-2 py-1 text-xs font-bold rounded-full bg-gray-500/10 text-gray-400">
                                        {{ $ticket->estado }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-gray-300">{{ $ticket->tecnico_asignado ?? 'Sin asignar' }}</td>
                            <td class="px-4 py-3 text-gray-300">{{ $ticket->fecha_creacion->format('d/m/Y H:i') }}</td>
                            <td class="px-4 py-3 flex items-center gap-2">
                                <a href="{{ route('tickets.show', $ticket) }}" class="p-2 text-gray-400 hover:text-white hover:bg-[#23482f] rounded-lg transition-colors" title="Ver detalles">
                                    <span class="material-symbols-outlined text-[18px]">visibility</span>
                                </a>
                                <a href="{{ route('tickets.edit', $ticket) }}" class="p-2 text-gray-400 hover:text-white hover:bg-[#23482f] rounded-lg transition-colors" title="Editar">
                                    <span class="material-symbols-outlined text-[18px]">edit</span>
                                </a>
                                <form action="{{ route('tickets.destroy', $ticket) }}" method="POST" class="inline-block" onsubmit="return confirm('¿Estás seguro de eliminar este ticket?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 text-gray-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors" title="Eliminar">
                                        <span class="material-symbols-outlined text-[18px]">delete</span>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection