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

{% block title %}
Delete Training Record | HR Management
{% endblock %}

{% block css %}
<style>
    .delete-warning {
        background-color: #f8d7da;
        border-left: 5px solid #dc3545;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 5px;
    }
    .record-info {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .record-info-title {
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .badge-status {
        font-size: 85%;
    }
    .badge-completed {
        background-color: #198754;
    }
    .badge-in-progress {
        background-color: #0d6efd;
    }
    .badge-scheduled {
        background-color: #6f42c1;
    }
    .badge-expired {
        background-color: #dc3545;
    }
    .badge-upcoming {
        background-color: #ffc107;
        color: #000;
    }
    .alternative-action {
        background-color: #e2f0fb;
        border-left: 5px solid #0d6efd;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 5px;
    }
</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:training_record_list' %}">Training Records</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:training_record_detail' record.id %}">{{ record.title }}</a></li>
    <li class="breadcrumb-item active">Delete</li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">
    Delete Training Record
</h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-8 -->
    <div class="col-xl-8">
        <!-- 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">
                <!-- Delete Warning -->
                <div class="delete-warning">
                    <h5><i class="fas fa-exclamation-triangle"></i> Warning: This action cannot be undone</h5>
                    <p>You are about to permanently delete this training record. This action cannot be reversed. Please review the information below carefully before proceeding.</p>
                </div>
                
                <!-- Record Information -->
                <div class="record-info">
                    <h5 class="record-info-title">Training Record Information</h5>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <strong>Title:</strong>
                            <div>{{ record.title }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Employee:</strong>
                            <div>{{ record.employee.get_full_name }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Training Type:</strong>
                            <div>{{ record.get_training_type_display }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Provider:</strong>
                            <div>{{ record.provider }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Status:</strong>
                            <div>
                                <span class="badge badge-{{ record.status|lower }} badge-status">
                                    {{ record.get_status_display }}
                                </span>
                                {% if record.is_mandatory %}
                                <span class="badge bg-danger ms-1">Mandatory</span>
                                {% endif %}
                                {% if record.is_certified %}
                                <span class="badge bg-success ms-1">Certified</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong>Date Range:</strong>
                            <div>{{ record.start_date|date:"M d, Y" }} to {{ record.end_date|date:"M d, Y" }}</div>
                        </div>
                        {% if record.completion_date %}
                        <div class="col-md-6 mb-3">
                            <strong>Completion Date:</strong>
                            <div>{{ record.completion_date|date:"M d, Y" }}</div>
                        </div>
                        {% endif %}
                        {% if record.is_certified and record.expiration_date %}
                        <div class="col-md-6 mb-3">
                            <strong>Expiration Date:</strong>
                            <div>{{ record.expiration_date|date:"M d, Y" }}</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Impact Assessment -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Impact Assessment</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <h6>The following will be permanently deleted:</h6>
                            <ul>
                                <li>Training record details and metadata</li>
                                {% if record.description %}
                                <li>Training description and learning objectives</li>
                                {% endif %}
                                {% if record.completion_date %}
                                <li>Completion details and notes</li>
                                {% endif %}
                                {% if certificates %}
                                <li>{{ certificates|length }} certificate file(s)</li>
                                {% endif %}
                                {% if attachments %}
                                <li>{{ attachments|length }} attachment file(s)</li>
                                {% endif %}
                                {% if record.notes %}
                                <li>Additional notes and comments</li>
                                {% endif %}
                            </ul>
                        </div>
                        
                        {% if record.is_mandatory and record.status == 'COMPLETED' %}
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle"></i> <strong>Warning:</strong> This is a completed mandatory training record. Deleting it may affect compliance reporting and regulatory requirements.
                        </div>
                        {% endif %}
                        
                        {% if record.is_certified and record.status != 'EXPIRED' %}
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i> <strong>Caution:</strong> This record contains active certification information. Deleting it will remove all evidence of certification.
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Alternative Actions -->
                <div class="alternative-action">
                    <h5>Consider Alternative Actions</h5>
                    <p>Instead of deleting this record, you might want to consider:</p>
                    <div class="row">
                        {% if record.status != 'EXPIRED' %}
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'hr:training_record_mark_expired' record.id %}" class="btn btn-warning btn-sm">
                                <i class="fas fa-calendar-times"></i> Mark as Expired
                            </a>
                        </div>
                        {% endif %}
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'hr:training_record_archive' record.id %}" class="btn btn-info btn-sm">
                                <i class="fas fa-archive"></i> Archive Record
                            </a>
                        </div>
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'hr:training_record_update' record.id %}" class="btn btn-primary btn-sm">
                                <i class="fas fa-edit"></i> Update Record
                            </a>
                        </div>
                        <div class="col-md-6 mb-2">
                            <a href="{% url 'hr:training_record_duplicate' record.id %}" class="btn btn-secondary btn-sm">
                                <i class="fas fa-copy"></i> Duplicate Record
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Delete Form -->
                <form method="post">
                    {% csrf_token %}
                    
                    {% if record.status == 'COMPLETED' %}
                    <div class="mb-3">
                        <label for="delete_reason" class="form-label">Reason for Deletion <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="delete_reason" name="delete_reason" rows="3" required></textarea>
                        <div class="form-text">Please provide a reason for deleting this completed training record.</div>
                    </div>
                    {% endif %}
                    
                    <div class="mb-4">
                        <div class="form-check">
                            <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 training record will be permanently deleted.
                            </label>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'hr:training_record_detail' record.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 Training Record
                        </button>
                    </div>
                </form>
            </div>
            <!-- end panel-body -->
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-8 -->
    
    <!-- begin col-4 -->
    <div class="col-xl-4">
        <!-- Employee Info -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Employee Information</h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    {% if record.employee.profile_picture %}
                    <img src="{{ record.employee.profile_picture.url }}" alt="{{ record.employee.get_full_name }}" class="rounded-circle me-3" width="50" height="50">
                    {% else %}
                    <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                        {{ record.employee.get_initials }}
                    </div>
                    {% endif %}
                    <div>
                        <h6 class="mb-0">{{ record.employee.get_full_name }}</h6>
                        <p class="text-muted mb-0">{{ record.employee.job_title }}</p>
                    </div>
                </div>
                
                <div class="mb-2">
                    <strong>Department:</strong><br>
                    {{ record.employee.department.name }}
                </div>
                
                <div class="mb-2">
                    <strong>Employee ID:</strong><br>
                    {{ record.employee.employee_id }}
                </div>
                
                <div class="mb-3">
                    <strong>Email:</strong><br>
                    {{ record.employee.email }}
                </div>
                
                <a href="{% url 'hr:employee_detail' record.employee.id %}" class="btn btn-sm btn-outline-primary w-100">
                    <i class="fas fa-user"></i> View Employee Profile
                </a>
            </div>
        </div>
        
        <!-- Training Statistics -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Training Statistics</h5>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <strong>Total Trainings:</strong>
                    <span class="float-end">{{ employee_training_count }}</span>
                </div>
                <div class="mb-2">
                    <strong>Completed Trainings:</strong>
                    <span class="float-end">{{ employee_completed_count }}</span>
                </div>
                <div class="mb-2">
                    <strong>In Progress Trainings:</strong>
                    <span class="float-end">{{ employee_in_progress_count }}</span>
                </div>
                <div class="mb-2">
                    <strong>Mandatory Trainings:</strong>
                    <span class="float-end">{{ employee_mandatory_count }}</span>
                </div>
                <div class="mb-2">
                    <strong>Certifications:</strong>
                    <span class="float-end">{{ employee_certified_count }}</span>
                </div>
                
                <div class="alert alert-info mt-3 mb-0">
                    <i class="fas fa-info-circle"></i> Deleting this record will affect these statistics.
                </div>
            </div>
        </div>
    </div>
    <!-- end col-4 -->
</div>
<!-- end row -->
{% endblock %}

{% block js %}
<script>
    $(document).ready(function() {
        // Enable delete button only when checkbox is checked
        $('#confirm_delete').change(function() {
            if ($(this).is(':checked')) {
                $('#delete_button').prop('disabled', false);
            } else {
                $('#delete_button').prop('disabled', true);
            }
        });
        
        // Form validation
        $('form').submit(function(e) {
            {% if record.status == 'COMPLETED' %}
            var deleteReason = $('#delete_reason').val().trim();
            if (!deleteReason) {
                alert('Please provide a reason for deleting this completed training record.');
                e.preventDefault();
                return false;
            }
            {% endif %}
            
            if (!$('#confirm_delete').is(':checked')) {
                alert('Please confirm that you understand the consequences of this action.');
                e.preventDefault();
                return false;
            }
            
            return true;
        });
    });
</script>
{% endblock %}