@extends('tickets.guest_layout')

@section('content')
<div class="mb-4">
    <a href="{{ route('tickets.guest.dashboard') }}" class="text-muted font-weight-bold" style="text-decoration:none;">
        <i class="fas fa-arrow-left mr-2"></i> Volver al Dashboard
    </a>
</div>

<div class="row">
    <div class="col-lg-8">
        <!-- Ticket Detail Card -->
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 text-dark font-weight-bold">
                    <span class="text-muted mr-2">#{{ $ticket->id }}</span> {{ $ticket->title }}
                </h5>
                @if($ticket->status == 'waiting')
                    <span class="badge badge-warning text-white px-3 py-2 rounded-pill">En Espera</span>
                @elseif($ticket->status == 'in_progress')
                    <span class="badge badge-primary px-3 py-2 rounded-pill">En Progreso</span>
                @else
                    <span class="badge badge-secondary px-3 py-2 rounded-pill">Cerrado</span>
                @endif
            </div>
            <div class="card-body bg-light">
                <p class="font-weight-bold text-dark mb-2">Descripción del Problema:</p>
                <div class="bg-white p-4 rounded border shadow-sm">
                    <p class="mb-0 text-secondary" style="white-space: pre-line;">{!! nl2br(e($ticket->description)) !!}</p>
                </div>
                
                @if($ticket->attachments)
                    <div class="mt-4">
                        <strong class="d-block text-dark mb-2"><i class="fas fa-paperclip mr-1"></i> Archivos Adjuntos:</strong>
                        <div class="d-flex flex-wrap">
                            @foreach($ticket->attachments as $att)
                                <a href="{{ Storage::url($att) }}" target="_blank" class="btn btn-sm btn-white border mr-2 mb-2 shadow-sm">
                                    <i class="fas fa-file-alt text-primary mr-1"></i> Ver Archivo
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Chat Section -->
        <h5 class="mb-3 font-weight-bold text-dark"><i class="fas fa-comments text-primary mr-2"></i> Historial de Conversación</h5>
        
        <div class="conversation-container mb-4 pr-2" style="max-height: 600px; overflow-y: auto;" id="chatContainer">
            @forelse($ticket->messages as $msg)
                <div class="message-row {{ $msg->type == 'user' ? 'justify-content-end' : 'justify-content-start' }} d-flex mb-3">
                    <div class="message-content {{ $msg->type == 'user' ? 'bg-primary text-white' : 'bg-white border' }} p-3 rounded shadow-sm" style="max-width: 80%; border-radius: 15px; {{ $msg->type == 'user' ? 'border-bottom-right-radius: 2px;' : 'border-bottom-left-radius: 2px;' }}">
                        <div class="message-header d-flex justify-content-between align-items-center mb-1">
                            <strong class="small {{ $msg->type == 'user' ? 'text-light' : 'text-dark' }}">{{ $msg->type == 'support' ? 'Equipo de Soporte' : 'Tú' }}</strong>
                        </div>
                        <div class="message-body mb-1">
                            {!! nl2br(e($msg->message)) !!}
                        </div>
                        @if($msg->attachments)
                            <div class="mt-2 pt-2 border-top {{ $msg->type == 'user' ? 'border-light' : 'border-light' }}">
                                @foreach($msg->attachments as $att)
                                    <a href="{{ Storage::url($att) }}" target="_blank" class="text-{{ $msg->type == 'user' ? 'white' : 'primary' }} small mr-2">
                                        <i class="fas fa-paperclip"></i> Adjunto
                                    </a>
                                @endforeach
                            </div>
                        @endif
                        <div class="text-right">
                            <small class="{{ $msg->type == 'user' ? 'text-light' : 'text-muted' }} opacity-75" style="font-size: 0.7rem;">{{ $msg->created_at->format('d M, h:i A') }}</small>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-5">
                    <i class="fas fa-comment-slash fa-3x text-muted mb-3 opacity-50"></i>
                    <p class="text-muted">Aún no hay respuestas en este ticket.</p>
                </div>
            @endforelse
        </div>

        <!-- Reply Box -->
        @if($ticket->status != 'closed')
            <div class="card shadow-lg border-0 mb-5">
                <div class="card-body">
                    <h6 class="font-weight-bold mb-3"><i class="fas fa-reply text-primary mr-2"></i> Escribir Respuesta</h6>
                    <form action="{{ route('tickets.guest.reply', $ticket->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <textarea name="message" class="form-control bg-light border-0" rows="3" placeholder="Escribe tu mensaje aquí..." required style="resize: none;"></textarea>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="form-group mb-0">
                                <label class="btn btn-outline-secondary btn-sm mb-0 shadow-sm" style="cursor: pointer;">
                                    <i class="fas fa-paperclip mr-1"></i> Adjuntar Archivos
                                    <input type="file" name="attachments[]" multiple hidden>
                                </label>
                                <small class="text-muted ml-2">Máx 2 archivos.</small>
                            </div>
                            <button type="submit" class="btn btn-primary px-4 shadow-sm font-weight-bold">
                                Enviar <i class="fas fa-paper-plane ml-1"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        @else
            <div class="alert alert-secondary text-center py-4 shadow-sm border-0">
                <i class="fas fa-lock fa-2x mb-2 text-muted"></i>
                <h5 class="text-dark font-weight-bold">Ticket Cerrado</h5>
                <p class="mb-0 text-muted">Este caso ha sido marcado como resuelto. Si necesitas más ayuda, por favor crea un nuevo ticket.</p>
            </div>
        @endif
    </div>

    <!-- Sidebar Info -->
    <div class="col-lg-4">
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body">
                <h6 class="font-weight-bold text-dark mb-3">Detalles del Ticket</h6>
                <ul class="list-unstyled mb-0">
                    <li class="mb-3 d-flex justify-content-between border-bottom pb-2">
                        <span class="text-muted">Plataforma</span>
                        <span class="font-weight-bold text-dark">{{ ucfirst($ticket->platform) }}</span>
                    </li>
                    <li class="mb-3 d-flex justify-content-between border-bottom pb-2">
                        <span class="text-muted">Categoría</span>
                        <span class="font-weight-bold text-dark">{{ $ticket->category->name ?? 'General' }}</span>
                    </li>
                    <li class="mb-3 d-flex justify-content-between border-bottom pb-2">
                        <span class="text-muted">Creado</span>
                        <span class="font-weight-bold text-dark">{{ $ticket->created_at->format('d/m/Y') }}</span>
                    </li>
                    <li class="d-flex justify-content-between">
                        <span class="text-muted">Última Actualización</span>
                        <span class="font-weight-bold text-dark">{{ $ticket->updated_at->diffForHumans() }}</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="card bg-info text-white shadow-sm border-0">
            <div class="card-body">
                <h6 class="font-weight-bold"><i class="fas fa-headset mr-2"></i> ¿Necesitas algo más?</h6>
                <p class="small mb-0">Nuestro equipo revisa los tickets constantemente. Si tienes nueva información, agrégala en el chat.</p>
            </div>
        </div>
    </div>
</div>

<script>
    // Auto-scroll chat
    var chatContainer = document.getElementById("chatContainer");
    if(chatContainer) {
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
</script>
@endsection