@extends('layouts.app')

@section('header')
    Comentarios del Ticket {{ $ticket->ticket_number }}
@endsection

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <!-- Información del Ticket -->
    <div class="bg-white rounded-lg shadow-lg border border-gray-300 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-300" style="background-color: #404040;">
            <h2 class="text-xl font-bold text-white">{{ $ticket->ticket_number }}</h2>
            <p class="text-gray-300 text-sm mt-1">{{ $ticket->subject }}</p>
        </div>
        <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Solicitante</p>
                <p class="text-sm font-semibold text-gray-900 mt-1">{{ $ticket->requester_user->name }}</p>
                <p class="text-xs text-gray-600">{{ $ticket->requester_user->email }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Estado</p>
                <p class="text-sm font-semibold text-gray-900 mt-1">{{ $ticket->ticket_status->name }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Creado</p>
                <p class="text-sm font-semibold text-gray-900 mt-1">{{ $ticket->created_at->format('d/m/Y H:i') }}</p>
            </div>
        </div>
    </div>

    <!-- Formulario de Comentario -->
    <x-posts.create :ticket="$ticket" />

    <!-- Listado de Comentarios -->
    <div class="bg-white rounded-lg shadow-lg border border-gray-300 p-6">
        <h3 class="text-lg font-bold text-gray-900 mb-6 flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
            </svg>
            Comentarios ({{ count($comments) }})
        </h3>
        <x-posts.list :comments="$comments" :ticket="$ticket" />
    </div>

    <!-- Botón de regreso -->
    <div class="flex justify-start">
        <a href="{{ route('tickets.index') }}" class="px-6 py-3 rounded-lg font-semibold text-white shadow hover:opacity-90 transition" style="background-color: #404040;">
            ← Volver a tickets
        </a>
    </div>
</div>
@endsection