@extends('layouts.app')

@section('header', 'Detalle del Ticket')

@section('content')
<div class="max-w-6xl mx-auto space-y-6">
    <!-- Ticket Header -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-2xl font-bold text-gray-900">{{ $ticket->ticket_number ?? 'CRM-2025-001' }}</h3>
                    <p class="mt-1 text-sm text-gray-600">Creado el {{ $ticket->created_at->format('d/m/Y H:i') ?? '01/01/2025' }}</p>
                </div>
                <div class="flex items-center gap-3">
                    @php
                        $estado = $ticket->estado ?? 'Recibida';
                        $estadoColors = [
                            'Recibida' => 'bg-gray-100 text-gray-800',
                            'En revisión técnica' => 'bg-blue-100 text-blue-800',
                            'En evaluación del comité' => 'bg-purple-100 text-purple-800',
                            'Aprobada / Pendiente de presupuesto' => 'bg-indigo-100 text-indigo-800',
                            'En desarrollo' => 'bg-yellow-100 text-yellow-800',
                            'En pruebas' => 'bg-orange-100 text-orange-800',
                            'En confirmación del comité' => 'bg-pink-100 text-pink-800',
                            'Cerrada' => 'bg-green-100 text-green-800',
                            'Rechazada / En espera' => 'bg-red-100 text-red-800',
                        ];
                        $colorClass = $estadoColors[$estado] ?? 'bg-gray-100 text-gray-800';
                    @endphp
                    <span class="px-3 py-1 text-sm font-semibold rounded-full {{ $colorClass }}">
                        {{ $estado }}
                    </span>
                    <a  class="text-gray-600 hover:text-gray-900">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Solicitante -->
                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-2">Solicitante</h4>
                    <p class="text-base font-semibold text-gray-900">{{ $ticket->solicitante_nombre ?? 'Juan Pérez' }}</p>
                    <p class="text-sm text-gray-600">{{ $ticket->solicitante_email ?? 'juan@example.com' }}</p>
                    <p class="text-sm text-gray-600">{{ $ticket->area_solicitante ?? 'Ventas' }}</p>
                </div>

                <!-- Tipo y Prioridad -->
                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-2">Tipo de Solicitud</h4>
                    <p class="text-base font-semibold text-gray-900">{{ $ticket->tipo_solicitud ?? 'Correctivo' }}</p>
                    <div class="mt-3">
                        <h4 class="text-sm font-medium text-gray-500 mb-1">Prioridad</h4>
                        @php
                            $prioridad = $ticket->prioridad ?? 'Media';
                        @endphp
                        @if($prioridad === 'Alta')
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Alta</span>
                        @elseif($prioridad === 'Media')
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Media</span>
                        @else
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Baja</span>
                        @endif
                    </div>
                </div>

                <!-- Impacto y Responsable -->
                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-2">Impacto</h4>
                    <p class="text-base font-semibold text-gray-900">{{ $ticket->impacto ?? 'Medio' }}</p>
                    @if(isset($ticket->responsable))
                        <div class="mt-3">
                            <h4 class="text-sm font-medium text-gray-500 mb-1">Responsable</h4>
                            <p class="text-sm text-gray-900">{{ $ticket->responsable->name }}</p>
                        </div>
                    @endif
                </div>

                <!-- Fecha Estimada -->
                @if(isset($ticket->fecha_estimada))
                    <div>
                        <h4 class="text-sm font-medium text-gray-500 mb-2">Fecha Estimada</h4>
                        <p class="text-base font-semibold text-gray-900">{{ \Carbon\Carbon::parse($ticket->fecha_estimada)->format('d/m/Y') }}</p>
                    </div>
                @endif
            </div>

            <!-- Descripción -->
            <div class="mt-6 pt-6 border-t border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-2">Descripción</h4>
                <p class="text-base text-gray-900 whitespace-pre-line">{{ $ticket->descripcion ?? 'Descripción del ticket...' }}</p>
            </div>

            <!-- Observaciones -->
            @if(isset($ticket->observaciones) && $ticket->observaciones)
                <div class="mt-4">
                    <h4 class="text-sm font-medium text-gray-500 mb-2">Observaciones</h4>
                    <p class="text-base text-gray-900 whitespace-pre-line">{{ $ticket->observaciones }}</p>
                </div>
            @endif
        </div>

        <!-- Actions for Tech/Committee/Admin -->
        @if(in_array(auth()->user()->role, ['tech', 'committee', 'admin']))
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                <form class="flex items-end gap-4">
                    @csrf
                    @method('PATCH')

                    <div class="flex-1">
                        <label for="estado" class="block text-sm font-medium text-gray-700 mb-1">Cambiar Estado</label>
                        <select name="estado" id="estado" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <option value="Recibida">Recibida</option>
                            <option value="En revisión técnica">En revisión técnica</option>
                            <option value="En evaluación del comité">En evaluación del comité</option>
                            <option value="Aprobada / Pendiente de presupuesto">Aprobada / Pendiente de presupuesto</option>
                            <option value="En desarrollo">En desarrollo</option>
                            <option value="En pruebas">En pruebas</option>
                            <option value="En confirmación del comité">En confirmación del comité</option>
                            <option value="Cerrada">Cerrada</option>
                            <option value="Rechazada / En espera">Rechazada / En espera</option>
                        </select>
                    </div>

                    @if(auth()->user()->role === 'tech' || auth()->user()->role === 'admin')
                        <div class="flex-1">
                            <label for="responsable_id" class="block text-sm font-medium text-gray-700 mb-1">Asignar a</label>
                            <select name="responsable_id" id="responsable_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                <option value="">Sin asignar</option>
                                {{-- @foreach($technicians ?? [] as $tech)
                                    <option value="{{ $tech->id }}">{{ $tech->name }}</option>
                                @endforeach
                            </select> --}}
                        </div>
                    @endif

                    <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
                        Actualizar
                    </button>
                </form>
            </div>
        @endif
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Historial de Cambios -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">Historial de Cambios</h3>
            </div>
            <div class="p-6">
                <div class="flow-root">
                    <ul class="-mb-8">
                        @forelse($history ?? [] as $index => $item)
                            <li>
                                <div class="relative pb-8">
                                    @if(!$loop->last)
                                        <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                                    @endif
                                    <div class="relative flex space-x-3">
                                        <div>
                                            <span class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
                                                <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            {{-- <div>
                                                <p class="text-sm text-gray-900 font-medium">{{ $item->accion }}</p>
                                                <p class="text-xs text-gray-500">{{ $item->user->name }} - {{ $item->created_at->diffForHumans() }}</p>
                                            </div>
                                            @if($item->comentario)
                                                <div class="mt-2 text-sm text-gray-700">
                                                    <p>{{ $item->comentario }}</p>
                                                </div>
                                            @endif --}}
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @empty
                            <li class="text-center py-8 text-sm text-gray-500">
                                No hay historial disponible
                            </li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>

        <!-- Comentarios -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">Comentarios</h3>
            </div>
            <div class="p-6 max-h-96 overflow-y-auto">
                <div class="space-y-4">
                    @forelse($comments ?? [] as $comment)
                        <div class="flex space-x-3">
                            <div class="flex-shrink-0">
                                <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center text-gray-700 font-semibold">
                                    {{-- {{ strtoupper(substr($comment->user->name ?? 'U', 0, 1)) }} --}}
                                </div>
                            </div>
                            <div class="flex-1">
                                {{-- <div class="bg-gray-50 rounded-lg px-4 py-3">
                                    <div class="flex items-center justify-between mb-1">
                                        <p class="text-sm font-medium text-gray-900">{{ $comment->user->name ?? 'Usuario' }}</p>
                                        <p class="text-xs text-gray-500">{{ $comment->created_at->diffForHumans() ?? 'Hace 1 hora' }}</p>
                                    </div>
                                    <p class="text-sm text-gray-700">{{ $comment->comentario ?? 'Comentario de ejemplo' }}</p>
                                </div> --}}
                            </div>
                        </div>
                    @empty
                        <p class="text-center py-8 text-sm text-gray-500">No hay comentarios aún</p>
                    @endforelse
                </div>
            </div>

            <!-- Add Comment Form -->
            <div class="px-6 py-4 border-t border-gray-200">
                {{-- <form action="{{ route('tickets.comments.store', $ticket->id ?? 1) }}" method="POST">
                    @csrf
                    <div class="flex gap-3">
                        <textarea name="comentario"
                                  rows="2"
                                  class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                                  placeholder="Escribe un comentario..."
                                  required></textarea>
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition self-end">
                            Enviar
                        </button>
                    </div>
                </form> --}}
            </div>
        </div>
    </div>
</div>
@endsection