{% extends "layouts/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}Delete Feedback - PX360{% endblock %}

{% block extra_css %}
<style>
    .delete-card {
        border: 2px solid #dc3545;
        border-radius: 8px;
        background: #fff;
    }
    .delete-card-header {
        background: #dc3545;
        color: white;
        padding: 20px;
        border-radius: 6px 6px 0 0;
    }
    .delete-card-body {
        padding: 30px;
    }
    .feedback-info {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
    }
    .info-row {
        display: flex;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
    }
    .info-row:last-child {
        border-bottom: none;
    }
    .info-label {
        font-weight: 600;
        color: #666;
        min-width: 120px;
    }
    .info-value {
        flex: 1;
        color: #333;
    }
    .warning-icon {
        font-size: 4rem;
        color: #dc3545;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-2">
                <li class="breadcrumb-item"><a href="{% url 'feedback:feedback_list' %}">{% trans "Feedback" %}</a></li>
                <li class="breadcrumb-item"><a href="{% url 'feedback:feedback_detail' feedback.id %}">{% trans "Detail" %}</a></li>
                <li class="breadcrumb-item active">Delete</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <div class="col-lg-6 mx-auto">
            <div class="delete-card">
                <div class="delete-card-header text-center">
                    <h3 class="mb-0">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        Delete Feedback
                    </h3>
                </div>
                <div class="delete-card-body">
                    <div class="text-center">
                        <i class="bi bi-trash warning-icon"></i>
                        <h4 class="mb-3">{% trans "Are you sure you want to delete this feedback?" %}</h4>
                        <p class="text-muted mb-4">
                            This action will soft delete the feedback. The feedback will be marked as deleted 
                            but will remain in the database for audit purposes.
                        </p>
                    </div>

                    <!-- Feedback Information -->
                    <div class="feedback-info">
                        <h5 class="mb-3">{% trans "Feedback Information" %}</h5>
                        
                        <div class="info-row">
                            <div class="info-label">ID:</div>
                            <div class="info-value">
                                <code>{{ feedback.id|slice:":8" }}...</code>
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="info-label">Type:</div>
                            <div class="info-value">
                                <span class="badge bg-primary">{{ feedback.get_feedback_type_display }}</span>
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="info-label">Title:</div>
                            <div class="info-value">
                                <strong>{{ feedback.title }}</strong>
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="info-label">Patient/Contact:</div>
                            <div class="info-value">
                                {{ feedback.get_contact_name }}
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="info-label">Hospital:</div>
                            <div class="info-value">
                                {{ feedback.hospital.name }}
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="info-label">Status:</div>
                            <div class="info-value">
                                <span class="badge bg-secondary">{{ feedback.get_status_display }}</span>
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="info-label">Created:</div>
                            <div class="info-value">
                                {{ feedback.created_at|date:"F d, Y H:i" }}
                            </div>
                        </div>
                        
                        {% if feedback.rating %}
                        <div class="info-row">
                            <div class="info-label">Rating:</div>
                            <div class="info-value">
                                <span style="color: #ffc107;">
                                    {% for i in "12345" %}
                                        {% if forloop.counter <= feedback.rating %}
                                            <i class="bi bi-star-fill"></i>
                                        {% else %}
                                            <i class="bi bi-star"></i>
                                        {% endif %}
                                    {% endfor %}
                                </span>
                                ({{ feedback.rating }}/5)
                            </div>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Warning Message -->
                    <div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        <div>
                            <strong>Warning:</strong> This feedback will be marked as deleted. 
                            All associated responses and timeline entries will be preserved for audit purposes.
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <form method="post" class="d-flex justify-content-between gap-3">
                        {% csrf_token %}
                        <a href="{% url 'feedback:feedback_detail' feedback.id %}" class="btn btn-outline-secondary flex-fill">
                            <i class="bi bi-x-circle me-1"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-danger flex-fill">
                            <i class="bi bi-trash me-1"></i> Yes, Delete Feedback
                        </button>
                    </form>

                    <!-- Additional Info -->
                    <div class="text-center mt-4">
                        <small class="text-muted">
                            <i class="bi bi-info-circle me-1"></i>
                            Deleted feedback can be restored by system administrators if needed.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}