{% extends "base.html" %}
{% load static %}

{% block title %}
Delete Performance Review | HR Management
{% endblock %}

{% block css %}
<style>
    .impact-assessment {
        background-color: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 15px;
        margin-bottom: 20px;
    }
    .alternative-actions {
        background-color: #d1e7dd;
        border-left: 4px solid #198754;
        padding: 15px;
        margin-bottom: 20px;
    }
    .review-info {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
    }
    .review-info-item {
        margin-bottom: 10px;
    }
    .review-info-item strong {
        min-width: 150px;
        display: inline-block;
    }
    .badge-review-status {
        font-size: 85%;
    }
    .badge-draft {
        background-color: #6c757d;
    }
    .badge-in-progress {
        background-color: #0d6efd;
    }
    .badge-completed {
        background-color: #198754;
    }
    .badge-overdue {
        background-color: #dc3545;
    }
</style>
{% endblock %}

{% block content %}
<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:dashboard' %}">HR</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:performance_review_list' %}">Performance Reviews</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:performance_review_detail' review.id %}">{{ review.employee.get_full_name }}</a></li>
    <li class="breadcrumb-item active">Delete</li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">
    Delete Performance Review
</h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-12 -->
    <div class="col-xl-12">
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <!-- begin panel-heading -->
            <div class="panel-heading">
                <h4 class="panel-title">Confirm Deletion</h4>
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <!-- end panel-heading -->
            
            <!-- begin panel-body -->
            <div class="panel-body">
                <div class="alert alert-danger">
                    <h4 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Warning!</h4>
                    <p>You are about to permanently delete this performance review. This action <strong>cannot be undone</strong>.</p>
                    <p>Please review the information below carefully before proceeding.</p>
                </div>
                
                <!-- Review Information -->
                <div class="review-info">
                    <h5>Review Information</h5>
                    <div class="review-info-item">
                        <strong>Employee:</strong> {{ review.employee.get_full_name }}
                    </div>
                    <div class="review-info-item">
                        <strong>Reviewer:</strong> {{ review.reviewer.get_full_name }}
                    </div>
                    <div class="review-info-item">
                        <strong>Review Type:</strong> {{ review.get_review_type_display }}
                    </div>
                    <div class="review-info-item">
                        <strong>Status:</strong> 
                        <span class="badge bg-{{ review.status|lower }} badge-review-status">
                            {{ review.get_status_display }}
                        </span>
                    </div>
                    <div class="review-info-item">
                        <strong>Review Period:</strong> {{ review.period_start|date:"M d, Y" }} - {{ review.period_end|date:"M d, Y" }}
                    </div>
                    <div class="review-info-item">
                        <strong>Due Date:</strong> {{ review.due_date|date:"M d, Y" }}
                    </div>
                    <div class="review-info-item">
                        <strong>Overall Score:</strong> {{ review.overall_score|default:"Not rated" }}
                    </div>
                    <div class="review-info-item">
                        <strong>Created:</strong> {{ review.created_at|date:"M d, Y H:i" }}
                    </div>
                    <div class="review-info-item">
                        <strong>Last Updated:</strong> {{ review.updated_at|date:"M d, Y H:i" }}
                    </div>
                </div>
                
                <!-- Impact Assessment -->
                <div class="impact-assessment">
                    <h5><i class="fas fa-chart-line"></i> Impact Assessment</h5>
                    <p>Deleting this performance review will have the following impacts:</p>
                    <ul>
                        <li><strong>Employee Records:</strong> This review will be permanently removed from the employee's performance history.</li>
                        <li><strong>HR Analytics:</strong> Performance metrics and trends will be affected.</li>
                        <li><strong>Audit Trail:</strong> While the deletion will be logged, the review content will be unrecoverable.</li>
                        {% if review.status == 'COMPLETED' %}
                        <li><strong>Compliance Risk:</strong> <span class="text-danger">Deleting a completed review may violate record retention policies.</span></li>
                        {% endif %}
                        {% if attachments %}
                        <li><strong>Attachments:</strong> {{ attachments|length }} document(s) associated with this review will be deleted.</li>
                        {% endif %}
                        {% if goals %}
                        <li><strong>Goals:</strong> {{ goals|length }} goal(s) associated with this review will be deleted.</li>
                        {% endif %}
                    </ul>
                </div>
                
                <!-- Alternative Actions -->
                <div class="alternative-actions">
                    <h5><i class="fas fa-lightbulb"></i> Alternative Actions</h5>
                    <p>Instead of deleting this review, consider these alternatives:</p>
                    <ul>
                        {% if review.status != 'COMPLETED' %}
                        <li><a href="{% url 'hr:performance_review_update' review.id %}"><i class="fas fa-edit"></i> Edit the review</a> to correct any issues.</li>
                        {% endif %}
                        <li><a href="{% url 'hr:performance_review_detail' review.id %}"><i class="fas fa-archive"></i> Archive the review</a> instead of deleting it.</li>
                        <li><a href="{% url 'hr:performance_review_list' %}"><i class="fas fa-search"></i> Review the list</a> to ensure you're deleting the correct review.</li>
                    </ul>
                </div>
                
                <!-- Deletion Form -->
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="confirm_delete" name="confirm_delete" required>
                        <label class="form-check-label" for="confirm_delete">
                            I understand that this action cannot be undone and all data associated with this review will be permanently deleted.
                        </label>
                    </div>
                    
                    {% if review.status == 'COMPLETED' %}
                    <div class="form-group mb-3">
                        <label for="deletion_reason" class="form-label">Reason for Deletion <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="deletion_reason" name="deletion_reason" rows="3" required></textarea>
                        <div class="form-text">A reason is required for deleting completed reviews for audit purposes.</div>
                    </div>
                    {% endif %}
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'hr:performance_review_detail' review.id %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-danger" id="delete_button" disabled>
                            <i class="fas fa-trash"></i> Delete Performance Review
                        </button>
                    </div>
                </form>
            </div>
            <!-- end panel-body -->
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-12 -->
</div>
<!-- end row -->
{% endblock %}

{% block js %}
<script>
    $(document).ready(function() {
        // Enable delete button only when confirmation checkbox is checked
        $('#confirm_delete').change(function() {
            if($(this).is(':checked')) {
                $('#delete_button').prop('disabled', false);
            } else {
                $('#delete_button').prop('disabled', true);
            }
        });
        
        {% if review.status == 'COMPLETED' %}
        // Additional validation for completed reviews
        $('form').submit(function(e) {
            var reason = $('#deletion_reason').val().trim();
            if (reason.length < 10) {
                e.preventDefault();
                alert('Please provide a detailed reason for deleting this completed review (minimum 10 characters).');
                return false;
            }
        });
        {% endif %}
    });
</script>
{% endblock %}