HH/apps/social/templates/social/comment_detail.html
2026-02-12 15:09:48 +03:00

505 lines
30 KiB
HTML

{% extends 'layouts/base.html' %}
{% load social_filters %}
{% load social_icons %}
{% load action_icons %}
{% load star_rating %}
{% block title %}Comment Detail - {{ platform_name }}{% endblock %}
{% block page_title %}Comment Details{% endblock %}
{% block page_subtitle %}View detailed analysis from {{ platform_name }}{% endblock %}
{% block content %}
<!-- Header Actions -->
<div class="d-flex justify-content-between align-items-center mb-4">
<a href="{% url 'social:comments_list' platform_type %}" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left me-2"></i>
Back to Comments
</a>
<div class="d-flex align-items-center gap-2">
<div class="text-primary">
{% social_icon platform_type size=24 %}
</div>
<span class="fw-bold">{{ platform_name }}</span>
</div>
</div>
<div class="row g-4">
<!-- Main Content -->
<div class="col-lg-8">
<div class="d-flex flex-column gap-4">
<!-- Main Comment Card -->
<div class="card">
<div class="card-body">
<div class="d-flex gap-4 mb-4">
<div class="avatar avatar-xl bg-primary flex-shrink-0 position-relative">
{{ comment.author_name|slice:":1"|upper }}
<span class="position-absolute bottom-0 end-0 bg-success border border-white rounded-circle" style="width: 12px; height: 12px;"></span>
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-start mb-2">
<div>
<h3 class="h4 mb-1">{{ comment.author_name }}</h3>
<div class="d-flex gap-2 flex-wrap">
{% if comment.synced_via_webhook %}
<span class="badge bg-success">
<i class="bi bi-bolt-fill me-1"></i> Real-time
</span>
{% endif %}
{% if comment.ai_analysis %}
<span class="badge bg-primary">
<i class="bi bi-cpu me-1"></i> AI Analyzed
</span>
{% endif %}
{% if comment.rating %}
<span class="badge bg-warning text-dark">
<i class="bi bi-star-fill me-1"></i> {{ comment.rating }}/5
</span>
{% endif %}
</div>
</div>
<div class="text-end">
<small class="text-muted">
<i class="bi bi-calendar me-1"></i> {{ comment.created_at|date:"M d, Y H:i" }}
</small>
</div>
</div>
</div>
</div>
<div class="bg-light rounded p-4 mb-4">
<p class="mb-0">{{ comment.text }}</p>
</div>
<!-- Media -->
{% if comment.media_url %}
<div class="rounded overflow-hidden mb-4">
<img src="{{ comment.media_url }}" alt="Comment media" class="img-fluid">
</div>
{% endif %}
<!-- Engagement Stats -->
<div class="d-flex gap-3 pt-3 border-top">
<div class="d-flex align-items-center gap-3 px-4 py-3 bg-white rounded shadow-sm flex-fill">
<i class="bi bi-heart-fill text-danger fs-4"></i>
<div>
<div class="fs-4 fw-bold">{{ comment.like_count }}</div>
<div class="small text-muted fw-bold">Likes</div>
</div>
</div>
<div class="d-flex align-items-center gap-3 px-4 py-3 bg-white rounded shadow-sm flex-fill">
<i class="bi bi-chat-fill text-primary fs-4"></i>
<div>
<div class="fs-4 fw-bold">{{ comment.reply_count }}</div>
<div class="small text-muted fw-bold">Replies</div>
</div>
</div>
<div class="d-flex align-items-center gap-3 px-4 py-3 bg-white rounded shadow-sm flex-fill">
<i class="bi bi-fingerprint text-muted fs-4"></i>
<div>
<div class="small fw-bold text-monospace">{{ comment.comment_id|truncatechars:12 }}</div>
<div class="small text-muted fw-bold">ID</div>
</div>
</div>
</div>
</div>
</div>
<!-- Replies Section -->
{% if replies %}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<i class="bi bi-chat-dots me-2"></i>
Replies ({{ replies|length }})
</h5>
</div>
<div class="card-body">
<div class="d-flex flex-column gap-3">
{% for reply in replies %}
<div class="bg-light rounded p-3 border border-light">
<div class="d-flex justify-content-between align-items-start mb-2">
<div>
<div class="fw-bold d-flex align-items-center gap-2">
{{ reply.author_name }}
{% if reply.author_name == 'You' %}
<span class="badge bg-primary">You</span>
{% endif %}
</div>
<small class="text-muted">
<i class="bi bi-calendar me-1"></i> {{ reply.created_at|date:"M d, Y H:i" }}
</small>
</div>
</div>
<p class="mb-1">{{ reply.text }}</p>
<code class="small text-muted">{{ reply.reply_id|truncatechars:10 }}</code>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
<!-- Reply Form -->
<div class="card">
<div class="card-header bg-gradient-teal text-white">
<h5 class="mb-0">
<i class="bi bi-reply me-2"></i>
Post a Reply
</h5>
</div>
<div class="card-body">
<form method="post">
{% csrf_token %}
<div class="mb-3">
<textarea
id="reply-text"
name="text"
rows="5"
placeholder="Write your thoughtful reply here..."
class="form-control"
required></textarea>
<small class="text-muted mt-2 d-block">
<i class="bi bi-info-circle me-1"></i>
Your reply will be posted publicly to platform
</small>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary">
<i class="bi bi-send me-2"></i>
Post Reply
</button>
<a href="{% url 'social:comments_list' platform_type %}" class="btn btn-outline-secondary">
<i class="bi bi-x-lg me-2"></i>
Cancel
</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="col-lg-4">
<div class="d-flex flex-column gap-4">
<!-- Comment Info -->
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<i class="bi bi-info-circle text-primary me-2"></i>
Comment Information
</h5>
</div>
<div class="card-body">
<div class="d-flex justify-content-between py-2 border-bottom">
<span class="small text-muted fw-bold">Platform</span>
<span class="small fw-bold">{{ platform_name }}</span>
</div>
{% if platform_type == 'META' and comment.source_platform %}
<div class="d-flex justify-content-between py-2 border-bottom">
<span class="small text-muted fw-bold">Source</span>
<span class="small fw-bold">
{% if comment.source_platform == 'FB' %}
Facebook
{% elif comment.source_platform == 'IG' %}
Instagram
{% endif %}
</span>
</div>
{% endif %}
<div class="d-flex justify-content-between py-2 border-bottom">
<span class="small text-muted fw-bold">Author</span>
<span class="small fw-bold">{{ comment.author_name }}</span>
</div>
<div class="d-flex justify-content-between py-2 border-bottom">
<span class="small text-muted fw-bold">Created</span>
<span class="small fw-bold">{{ comment.created_at|date:"M d, Y H:i" }}</span>
</div>
<div class="d-flex justify-content-between py-2 border-bottom">
<span class="small text-muted fw-bold">Replies</span>
<span class="small fw-bold">{{ replies|length }}</span>
</div>
<div class="d-flex justify-content-between py-2">
<span class="small text-muted fw-bold">Sync Method</span>
<span class="small fw-bold">
{% if comment.synced_via_webhook %}
<span class="badge bg-success">
<i class="bi bi-bolt-fill me-1"></i> Webhook
</span>
{% else %}
<span class="badge bg-primary">
<i class="bi bi-arrow-repeat me-1"></i> Polling
</span>
{% endif %}
</span>
</div>
</div>
</div>
<!-- AI Analysis -->
{% if comment.ai_analysis %}
<!-- Sentiment -->
{% if comment.ai_analysis.sentiment %}
<div class="card border-start border-4 border-success">
<div class="card-body">
<h5 class="mb-3">
<i class="bi bi-heart-pulse text-success me-2"></i>
Sentiment Analysis
</h5>
<div class="row g-2 mb-3">
<div class="col-6">
<div class="p-3 rounded text-center {% if comment.ai_analysis.sentiment.classification.en == 'positive' %}bg-success bg-opacity-10{% elif comment.ai_analysis.sentiment.classification.en == 'negative' %}bg-danger bg-opacity-10{% else %}bg-secondary bg-opacity-10{% endif %}">
<div class="small text-muted fw-bold mb-1">English</div>
<div class="h4 mb-0">{{ comment.ai_analysis.sentiment.classification.en|capfirst }}</div>
</div>
</div>
<div class="col-6">
<div class="p-3 rounded text-center {% if comment.ai_analysis.sentiment.classification.ar == 'إيجابي' %}bg-success bg-opacity-10{% elif comment.ai_analysis.sentiment.classification.ar == 'سلبي' %}bg-danger bg-opacity-10{% else %}bg-secondary bg-opacity-10{% endif %}">
<div class="small text-muted fw-bold mb-1">العربية</div>
<div class="h4 mb-0" style="direction: rtl;">{{ comment.ai_analysis.sentiment.classification.ar }}</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between py-1">
<span class="small text-muted fw-bold">Sentiment Score</span>
<span class="small fw-bold">{{ comment.ai_analysis.sentiment.score|floatformat:2 }}</span>
</div>
<div class="d-flex justify-content-between py-1">
<span class="small text-muted fw-bold">Confidence</span>
<span class="small fw-bold">{{ comment.ai_analysis.sentiment.confidence|floatformat:0 }}%</span>
</div>
{% if comment.ai_analysis.sentiment.urgency_level %}
<div class="d-flex justify-content-between py-1">
<span class="small text-muted fw-bold">Urgency Level</span>
<span class="small fw-bold">
{% if comment.ai_analysis.sentiment.urgency_level.en == 'critical' %}
<span class="badge bg-danger">{{ comment.ai_analysis.sentiment.urgency_level.en }}</span>
{% elif comment.ai_analysis.sentiment.urgency_level.en == 'high' %}
<span class="badge bg-warning text-dark">{{ comment.ai_analysis.sentiment.urgency_level.en }}</span>
{% elif comment.ai_analysis.sentiment.urgency_level.en == 'medium' %}
<span class="badge bg-primary">{{ comment.ai_analysis.sentiment.urgency_level.en }}</span>
{% else %}
<span class="badge bg-success">{{ comment.ai_analysis.sentiment.urgency_level.en }}</span>
{% endif %}
</span>
</div>
{% endif %}
</div>
</div>
{% endif %}
<!-- Actionable Insights -->
{% if comment.ai_analysis.actionable_insights %}
<div class="card border-start border-4 border-warning">
<div class="card-body">
<h5 class="mb-3">
<i class="bi bi-lightbulb text-warning me-2"></i>
Actionable Insights
</h5>
{% if comment.ai_analysis.actionable_insights.primary_concern %}
<div class="mb-3 p-3 bg-light rounded">
<div class="small text-muted fw-bold mb-1">Primary Concern</div>
<div class="fw-bold mb-1">{{ comment.ai_analysis.actionable_insights.primary_concern.en }}</div>
<div class="small text-muted" style="direction: rtl;">{{ comment.ai_analysis.actionable_insights.primary_concern.ar }}</div>
</div>
{% endif %}
{% if comment.ai_analysis.actionable_insights.requires_followup is not None %}
<div class="d-flex justify-content-between py-1">
<span class="small text-muted fw-bold">Requires Follow-up</span>
<span class="small fw-bold">
{% if comment.ai_analysis.actionable_insights.requires_followup %}
<span class="badge bg-danger">Yes</span>
{% else %}
<span class="badge bg-success">No</span>
{% endif %}
</span>
</div>
{% endif %}
{% if comment.ai_analysis.actionable_insights.followup_priority %}
<div class="d-flex justify-content-between py-1">
<span class="small text-muted fw-bold">Follow-up Priority</span>
<span class="small fw-bold">
{% if comment.ai_analysis.actionable_insights.followup_priority.en == 'urgent' %}
<span class="badge bg-danger">{{ comment.ai_analysis.actionable_insights.followup_priority.en }}</span>
{% elif comment.ai_analysis.actionable_insights.followup_priority.en == 'high' %}
<span class="badge bg-warning text-dark">{{ comment.ai_analysis.actionable_insights.followup_priority.en }}</span>
{% else %}
<span class="badge bg-primary">{{ comment.ai_analysis.actionable_insights.followup_priority.en }}</span>
{% endif %}
</span>
</div>
{% endif %}
</div>
</div>
{% endif %}
<!-- Business Intelligence -->
{% if comment.ai_analysis.business_intelligence %}
<div class="card border-start border-4 border-info">
<div class="card-body">
<h5 class="mb-3">
<i class="bi bi-graph-up text-info me-2"></i>
Business Intelligence
</h5>
{% if comment.ai_analysis.business_intelligence.patient_satisfaction_score %}
<div class="text-center mb-3 p-4 rounded {% if comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 80 %}bg-success bg-opacity-10{% elif comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 60 %}bg-warning bg-opacity-10{% else %}bg-danger bg-opacity-10{% endif %}">
<div class="small text-muted fw-bold mb-2">Patient Satisfaction Score</div>
<div class="display-4 fw-bold {% if comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 80 %}text-success{% elif comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 60 %}text-warning{% else %}text-danger{% endif %}">
{{ comment.ai_analysis.business_intelligence.patient_satisfaction_score }}
</div>
</div>
{% endif %}
{% if comment.ai_analysis.business_intelligence.retention_risk %}
<div class="d-flex justify-content-between py-1">
<span class="small text-muted fw-bold">Retention Risk</span>
<span class="small fw-bold">
{% if comment.ai_analysis.business_intelligence.retention_risk.level == 'high' %}
<span class="badge bg-danger">{{ comment.ai_analysis.business_intelligence.retention_risk.level }}</span>
{% elif comment.ai_analysis.business_intelligence.retention_risk.level == 'medium' %}
<span class="badge bg-warning text-dark">{{ comment.ai_analysis.business_intelligence.retention_risk.level }}</span>
{% else %}
<span class="badge bg-success">{{ comment.ai_analysis.business_intelligence.retention_risk.level }}</span>
{% endif %}
</span>
</div>
{% endif %}
{% if comment.ai_analysis.business_intelligence.reputation_impact %}
<div class="d-flex justify-content-between py-1">
<span class="small text-muted fw-bold">Reputation Impact</span>
<span class="small fw-bold">
{% if comment.ai_analysis.business_intelligence.reputation_impact.level == 'severe' %}
<span class="badge bg-danger">{{ comment.ai_analysis.business_intelligence.reputation_impact.level }}</span>
{% elif comment.ai_analysis.business_intelligence.reputation_impact.level == 'negative' %}
<span class="badge bg-warning text-dark">{{ comment.ai_analysis.business_intelligence.reputation_impact.level }}</span>
{% elif comment.ai_analysis.business_intelligence.reputation_impact.level == 'positive' %}
<span class="badge bg-success">{{ comment.ai_analysis.business_intelligence.reputation_impact.level }}</span>
{% else %}
<span class="badge bg-primary">{{ comment.ai_analysis.business_intelligence.reputation_impact.level }}</span>
{% endif %}
</span>
</div>
{% endif %}
</div>
</div>
{% endif %}
<!-- Keywords -->
{% if comment.ai_analysis.keywords %}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<i class="bi bi-tags text-primary me-2"></i>
Keywords
</h5>
</div>
<div class="card-body">
<div class="d-flex flex-wrap gap-2">
{% for keyword in comment.ai_analysis.keywords.en %}
<span class="badge bg-primary bg-opacity-10 text-primary">{{ keyword }}</span>
{% endfor %}
</div>
<div class="d-flex flex-wrap gap-2 mt-2">
{% for keyword in comment.ai_analysis.keywords.ar %}
<span class="badge bg-warning bg-opacity-10 text-warning" style="direction: rtl;">{{ keyword }}</span>
{% endfor %}
</div>
</div>
</div>
{% endif %}
<!-- Emotions -->
{% if comment.ai_analysis.emotions %}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<i class="bi bi-emoji-smile text-primary me-2"></i>
Emotion Analysis
</h5>
</div>
<div class="card-body">
<div class="mb-3">
<div class="d-flex justify-content-between mb-1">
<span class="small fw-bold text-muted"><i class="bi bi-smile text-success me-1"></i>Joy / فرح</span>
<span class="small fw-bold">{{ comment.ai_analysis.emotions.joy|floatformat:0 }}%</span>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-success" style="width: {{ comment.ai_analysis.emotions.joy|floatformat:0 }}%"></div>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between mb-1">
<span class="small fw-bold text-muted"><i class="bi bi-emoji-angry text-danger me-1"></i>Anger / غضب</span>
<span class="small fw-bold">{{ comment.ai_analysis.emotions.anger|floatformat:0 }}%</span>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-danger" style="width: {{ comment.ai_analysis.emotions.anger|floatformat:0 }}%"></div>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between mb-1">
<span class="small fw-bold text-muted"><i class="bi bi-emoji-frown text-muted me-1"></i>Sadness / حزن</span>
<span class="small fw-bold">{{ comment.ai_analysis.emotions.sadness|floatformat:0 }}%</span>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-secondary" style="width: {{ comment.ai_analysis.emotions.sadness|floatformat:0 }}%"></div>
</div>
</div>
<div>
<div class="d-flex justify-content-between mb-1">
<span class="small fw-bold text-muted"><i class="bi bi-emoji-neutral text-primary me-1"></i>Fear / خوف</span>
<span class="small fw-bold">{{ comment.ai_analysis.emotions.fear|floatformat:0 }}%</span>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-primary" style="width: {{ comment.ai_analysis.emotions.fear|floatformat:0 }}%"></div>
</div>
</div>
</div>
</div>
{% endif %}
<!-- AI Summary -->
{% if comment.ai_analysis.summaries %}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<i class="bi bi-file-text text-primary me-2"></i>
AI Summary
</h5>
</div>
<div class="card-body">
<p class="mb-2 small">{{ comment.ai_analysis.summaries.en }}</p>
<p class="small" style="direction: rtl;">{{ comment.ai_analysis.summaries.ar }}</p>
</div>
</div>
{% endif %}
{% else %}
<!-- AI Not Started -->
<div class="card text-center">
<div class="card-body">
<div class="avatar avatar-xl bg-light text-muted mx-auto mb-3">
<i class="bi bi-robot fs-1"></i>
</div>
<h5 class="mb-2">AI Analysis Pending</h5>
<p class="text-muted small mb-3">
This comment is waiting for AI-powered analysis. The system will automatically analyze sentiment, topics, emotions, and generate actionable business intelligence insights.
</p>
<div class="text-start small text-muted bg-light p-3 rounded">
<strong class="text-body">Analysis will include:</strong>
<ul class="mt-2 mb-0">
<li><i class="bi bi-check-circle text-success me-2"></i>Sentiment analysis (English & Arabic)</li>
<li><i class="bi bi-check-circle text-success me-2"></i>Actionable insights & recommendations</li>
<li><i class="bi bi-check-circle text-success me-2"></i>Business intelligence metrics</li>
<li><i class="bi bi-check-circle text-success me-2"></i>Patient journey tracking</li>
<li><i class="bi bi-check-circle text-success me-2"></i>Service quality indicators</li>
</ul>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}