@extends('voyager::master')

@section('content')
<style>
    .chat-wrapper {
        background-color: #f9f9f9;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        padding: 20px;
        height: 500px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    .chat-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #999;
        flex-direction: column;
    }
    .chat-empty i {
        font-size: 48px;
        margin-bottom: 10px;
        opacity: 0.5;
    }
    .message-row {
        display: flex;
        margin-bottom: 20px;
        width: 100%;
    }
    .message-row.support {
        justify-content: flex-end;
    }
    .message-bubble {
        max-width: 75%;
        padding: 15px;
        border-radius: 15px;
        position: relative;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .message-row.user .message-bubble {
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-left-radius: 2px;
    }
    .message-row.support .message-bubble {
        background-color: #dcf8c6; /* WhatsApp style green tint */
        border: 1px solid #d4eec0;
        border-bottom-right-radius: 2px;
    }
    .message-meta {
        font-size: 0.75rem;
        color: #999;
        margin-top: 5px;
        text-align: right;
    }
    .message-sender {
        font-weight: bold;
        font-size: 0.85rem;
        margin-bottom: 5px;
        display: block;
        color: #555;
    }
    .attachment-pill {
        display: inline-flex;
        align-items: center;
        background: rgba(0,0,0,0.05);
        padding: 5px 10px;
        border-radius: 20px;
        margin-top: 5px;
        font-size: 0.85rem;
        text-decoration: none;
        color: #333;
        border: 1px solid #ddd;
    }
    .attachment-pill:hover {
        background: rgba(0,0,0,0.1);
        text-decoration: none;
    }
    .ticket-info-card {
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        margin-bottom: 20px;
        padding: 20px;
    }
    .status-badge {
        font-size: 0.9rem;
        padding: 5px 10px;
        border-radius: 4px;
        display: inline-block;
        margin-bottom: 10px;
    }
    .status-waiting { background: #f0ad4e; color: white; }
    .status-in_progress { background: #337ab7; color: white; }
    .status-closed { background: #777; color: white; }
</style>

<div class="page-content">
    <div class="row">
        <div class="col-md-8">
            <!-- Ticket Header & Description -->
            <div class="panel panel-bordered">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 style="margin-top:0;">{{ $ticket->title }} <small>#{{ $ticket->id }}</small></h3>
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <p class="text-muted"><i class="voyager-person"></i> <strong>Usuario:</strong> {{ $ticket->user->name ?? $ticket->user->email ?? 'Desconocido' }}</p>
                                    <p class="text-muted"><i class="voyager-list"></i> <strong>Categoría:</strong> {{ $ticket->category->name ?? 'General' }}</p>
                                </div>
                                <div class="col-md-6 text-right">
                                    <p class="text-muted"><i class="voyager-calendar"></i> {{ $ticket->created_at->format('M d, Y h:i A') }}</p>
                                </div>
                            </div>
                            <hr>
                            <div class="description-content">
                                <p>{!! nl2br(e($ticket->description)) !!}</p>
                            </div>
                            @if($ticket->attachments)
                                <div class="mt-3">
                                    @foreach($ticket->attachments as $att)
                                        <a href="{{ Storage::url($att) }}" target="_blank" class="attachment-pill">
                                            <i class="voyager-paperclip"></i> Adjunto
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Conversation Area -->
            <div class="panel panel-bordered">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="voyager-chat"></i> Conversación</h3>
                </div>
                <div class="panel-body">
                    <div class="chat-wrapper" id="chatContainer">
                        @forelse($ticket->messages as $msg)
                            <div class="message-row {{ $msg->type }}">
                                <div class="message-bubble">
                                    <span class="message-sender">{{ $msg->type == 'support' ? 'Agente de Soporte' : 'Usuario' }}</span>
                                    <div class="message-text">
                                        {!! nl2br(e($msg->message)) !!}
                                    </div>
                                    @if($msg->attachments)
                                        <div class="mt-2">
                                            @foreach($msg->attachments as $att)
                                                <a href="{{ Storage::url($att) }}" target="_blank" class="attachment-pill">
                                                    <i class="voyager-paperclip"></i> Archivo
                                                </a>
                                            @endforeach
                                        </div>
                                    @endif
                                    <div class="message-meta">
                                        {{ $msg->created_at->format('M d, h:i A') }}
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="chat-empty">
                                <i class="voyager-chat"></i>
                                <h4>No hay mensajes aún.</h4>
                                <p>Inicia la conversación abajo.</p>
                            </div>
                        @endforelse
                    </div>
                    
                    <hr>

                    @if($ticket->status != 'closed')
                    <form action="{{ route('tickets.reply', $ticket->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label>Mensaje de Respuesta</label>
                            <textarea name="message" class="form-control" rows="4" placeholder="Escribe tu respuesta aquí..." style="resize:vertical;" required></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Adjuntos (Opcional)</label>
                                    <input type="file" name="attachments[]" multiple class="form-control" style="padding: 5px;">
                                </div>
                            </div>
                            <div class="col-md-6 text-right">
                                <button type="submit" class="btn btn-primary btn-lg" style="margin-top:25px;">
                                    <i class="voyager-paper-plane"></i> Enviar Respuesta
                                </button>
                            </div>
                        </div>
                    </form>
                    @else
                        <div class="alert alert-info text-center">
                            <i class="voyager-lock"></i> Este ticket está cerrado. La respuesta está deshabilitada.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Sidebar / Admin Actions -->
        <div class="col-md-4">
             <!-- Status Card -->
             <div class="ticket-info-card text-center">
                @php
                    $statusLabels = [
                        'waiting' => ['class' => 'waiting', 'text' => 'En Espera'],
                        'in_progress' => ['class' => 'in_progress', 'text' => 'En Progreso'],
                        'closed' => ['class' => 'closed', 'text' => 'Cerrado'],
                    ];
                    $currentStatus = $statusLabels[$ticket->status] ?? ['class' => 'default', 'text' => $ticket->status];
                @endphp
                <h4>Estado Actual</h4>
                <div class="status-badge status-{{ $currentStatus['class'] }}">
                    {{ $currentStatus['text'] }}
                </div>
                <p class="text-muted small mt-2">Plataforma: <strong>{{ ucfirst($ticket->platform) }}</strong></p>
             </div>

             <!-- Admin Management Actions -->
             @if(in_array(Auth::user()->role_id, [1, 4]))
             <div class="panel panel-bordered panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="voyager-settings"></i> Gestión</h3>
                </div>
                <div class="panel-body">
                    <form action="{{ route('tickets.updateStatus', $ticket->id) }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label>Cambiar Estado</label>
                            <select name="status" class="form-control">
                                <option value="waiting" {{ $ticket->status == 'waiting' ? 'selected' : '' }}>En Espera</option>
                                <option value="in_progress" {{ $ticket->status == 'in_progress' ? 'selected' : '' }}>En Progreso</option>
                                <option value="closed" {{ $ticket->status == 'closed' ? 'selected' : '' }}>Cerrado</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Actualizar Estado</button>
                    </form>
                    
                    <hr>
                    
                    <!-- Quick Buttons -->
                    <div class="d-flex" style="gap: 10px; flex-wrap: wrap; justify-content: center;">
                        @if($ticket->status != 'in_progress')
                        <form action="{{ route('tickets.updateStatus', $ticket->id) }}" method="POST" style="display:inline; width: 48%;">
                            @csrf
                            <input type="hidden" name="status" value="in_progress">
                            <button type="submit" class="btn btn-info btn-block btn-sm">Marcar En Progreso</button>
                        </form>
                        @endif
                        
                        @if($ticket->status != 'closed')
                        <form action="{{ route('tickets.updateStatus', $ticket->id) }}" method="POST" style="display:inline; width: 48%;">
                            @csrf
                            <input type="hidden" name="status" value="closed">
                            <button type="submit" class="btn btn-dark btn-block btn-sm">Cerrar Ticket</button>
                        </form>
                        @endif
                    </div>

                    <div style="margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px;">
                         <form action="{{ route('tickets.destroy', $ticket->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-block" onclick="return confirm('¡ADVERTENCIA! ¿Estás seguro de eliminar este ticket permanentemente? Se borrarán todos los mensajes y archivos adjuntos.')">
                                <i class="voyager-trash"></i> Eliminar Ticket
                            </button>
                        </form>
                    </div>
                </div>
             </div>
             @endif
        </div>
    </div>
</div>

<script>
    // Auto-scroll to bottom of chat
    var chatContainer = document.getElementById("chatContainer");
    chatContainer.scrollTop = chatContainer.scrollHeight;
</script>
@endsection