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

{% block title %}
{{ record.title }} | Training Record
{% endblock %}

{% block css %}
<style>
    .record-header {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .record-section {
        background-color: #fff;
        border-radius: 5px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    }
    .record-section-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;
    }
    .timeline {
        position: relative;
        padding-left: 30px;
    }
    .timeline:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #dee2e6;
    }
    .timeline-item {
        position: relative;
        padding-bottom: 20px;
    }
    .timeline-item:last-child {
        padding-bottom: 0;
    }
    .timeline-item:before {
        content: '';
        position: absolute;
        left: -34px;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #2d62ed;
    }
    .timeline-date {
        color: #6c757d;
        font-size: 0.85rem;
    }
    .progress-container {
        margin-bottom: 20px;
    }
    .progress {
        height: 10px;
    }
    .certificate-card {
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 15px;
    }
    .certificate-card .certificate-icon {
        font-size: 2rem;
        color: #2d62ed;
    }
    .quick-actions {
        position: sticky;
        top: 20px;
    }
</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 active">{{ record.title }}</li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">
    Training Record: {{ record.title }}
</h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-9 -->
    <div class="col-xl-9">
        <!-- begin record header -->
        <div class="record-header">
            <div class="row">
                <div class="col-md-8">
                    <h4>{{ record.title }}</h4>
                    <p class="text-muted mb-2">{{ record.get_training_type_display }} by {{ record.provider }}</p>
                    <div class="mb-3">
                        <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-4 text-md-end">
                    <div class="mb-2">
                        <strong>Employee:</strong> 
                        <a href="{% url 'hr:employee_detail' record.employee.id %}">
                            {{ record.employee.get_full_name }}
                        </a>
                    </div>
                    <div class="mb-2">
                        <strong>Department:</strong> {{ record.employee.department.name }}
                    </div>
                </div>
            </div>
            
            {% if record.status == 'IN_PROGRESS' %}
            <div class="progress-container">
                <div class="d-flex justify-content-between mb-1">
                    <span>Progress</span>
                    <span>{{ record.completion_percentage|default:"0" }}%</span>
                </div>
                <div class="progress">
                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ record.completion_percentage|default:'0' }}%" aria-valuenow="{{ record.completion_percentage|default:'0' }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
            {% endif %}
            
            <div class="row mt-3">
                <div class="col-md-3 mb-2">
                    <strong>Start Date:</strong><br>
                    {{ record.start_date|date:"M d, Y" }}
                </div>
                <div class="col-md-3 mb-2">
                    <strong>End Date:</strong><br>
                    {{ record.end_date|date:"M d, Y" }}
                </div>
                <div class="col-md-3 mb-2">
                    <strong>Completion Date:</strong><br>
                    {{ record.completion_date|date:"M d, Y"|default:"Not completed" }}
                </div>
                <div class="col-md-3 mb-2">
                    <strong>Expiration Date:</strong><br>
                    {{ record.expiration_date|date:"M d, Y"|default:"No expiration" }}
                </div>
            </div>
        </div>
        <!-- end record header -->
        
        <!-- begin description section -->
        <div class="record-section">
            <h5 class="record-section-title">Description</h5>
            <div class="mb-3">
                {{ record.description|linebreaks|default:"No description provided." }}
            </div>
            
            {% if record.learning_objectives %}
            <h6>Learning Objectives</h6>
            <ul>
                {% for objective in record.learning_objectives_list %}
                <li>{{ objective }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>
        <!-- end description section -->
        
        <!-- begin completion details section -->
        <div class="record-section">
            <h5 class="record-section-title">Completion Details</h5>
            
            {% if record.status == 'COMPLETED' %}
            <div class="row mb-3">
                <div class="col-md-4">
                    <strong>Completion Date:</strong><br>
                    {{ record.completion_date|date:"M d, Y" }}
                </div>
                <div class="col-md-4">
                    <strong>Score/Grade:</strong><br>
                    {{ record.score_grade|default:"Not recorded" }}
                </div>
                <div class="col-md-4">
                    <strong>Hours Completed:</strong><br>
                    {{ record.hours_completed|default:"0" }} hours
                </div>
            </div>
            
            {% if record.completion_notes %}
            <div class="mb-3">
                <strong>Completion Notes:</strong><br>
                {{ record.completion_notes|linebreaks }}
            </div>
            {% endif %}
            
            {% if record.is_certified %}
            <h6>Certification Details</h6>
            <div class="row mb-3">
                <div class="col-md-4">
                    <strong>Certificate Number:</strong><br>
                    {{ record.certificate_number|default:"Not recorded" }}
                </div>
                <div class="col-md-4">
                    <strong>Issued By:</strong><br>
                    {{ record.provider }}
                </div>
                <div class="col-md-4">
                    <strong>Expiration Date:</strong><br>
                    {{ record.expiration_date|date:"M d, Y"|default:"No expiration" }}
                </div>
            </div>
            {% endif %}
            
            {% if certificates %}
            <h6>Certificates</h6>
            <div class="row">
                {% for certificate in certificates %}
                <div class="col-md-6 mb-3">
                    <div class="certificate-card">
                        <div class="d-flex align-items-center">
                            <div class="certificate-icon me-3">
                                <i class="fas fa-certificate"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">{{ certificate.title }}</h6>
                                <p class="mb-2 text-muted">{{ certificate.file.name|split:"/"|last }}</p>
                                <a href="{{ certificate.file.url }}" class="btn btn-sm btn-primary" target="_blank">
                                    <i class="fas fa-download"></i> Download
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
            
            {% else %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> This training has not been completed yet.
            </div>
            {% endif %}
        </div>
        <!-- end completion details section -->
        
        <!-- begin timeline section -->
        <div class="record-section">
            <h5 class="record-section-title">Timeline</h5>
            
            <div class="timeline">
                {% if record.created_at %}
                <div class="timeline-item">
                    <div class="timeline-date">{{ record.created_at|date:"M d, Y H:i" }}</div>
                    <div class="timeline-content">
                        <h6>Training Record Created</h6>
                        <p>Training record was created by {{ record.created_by.get_full_name|default:"System" }}</p>
                    </div>
                </div>
                {% endif %}
                
                {% if record.start_date %}
                <div class="timeline-item">
                    <div class="timeline-date">{{ record.start_date|date:"M d, Y" }}</div>
                    <div class="timeline-content">
                        <h6>Training Started</h6>
                        <p>{{ record.title }} training began</p>
                    </div>
                </div>
                {% endif %}
                
                {% if record.status == 'IN_PROGRESS' and record.last_updated %}
                <div class="timeline-item">
                    <div class="timeline-date">{{ record.last_updated|date:"M d, Y H:i" }}</div>
                    <div class="timeline-content">
                        <h6>Progress Updated</h6>
                        <p>Progress updated to {{ record.completion_percentage|default:"0" }}%</p>
                    </div>
                </div>
                {% endif %}
                
                {% if record.completion_date %}
                <div class="timeline-item">
                    <div class="timeline-date">{{ record.completion_date|date:"M d, Y" }}</div>
                    <div class="timeline-content">
                        <h6>Training Completed</h6>
                        <p>{{ record.title }} training was successfully completed</p>
                    </div>
                </div>
                {% endif %}
                
                {% if record.expiration_date and record.status == 'EXPIRED' %}
                <div class="timeline-item">
                    <div class="timeline-date">{{ record.expiration_date|date:"M d, Y" }}</div>
                    <div class="timeline-content">
                        <h6>Certification Expired</h6>
                        <p>The certification for this training has expired</p>
                    </div>
                </div>
                {% endif %}
                
                {% if record.end_date and record.end_date > today and record.status != 'COMPLETED' %}
                <div class="timeline-item">
                    <div class="timeline-date">{{ record.end_date|date:"M d, Y" }}</div>
                    <div class="timeline-content">
                        <h6>Expected Completion</h6>
                        <p>Training is expected to be completed by this date</p>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- end timeline section -->
        
        <!-- begin attachments section -->
        {% if attachments %}
        <div class="record-section">
            <h5 class="record-section-title">Attachments</h5>
            
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>File Type</th>
                            <th>Uploaded</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for attachment in attachments %}
                        <tr>
                            <td>{{ attachment.title }}</td>
                            <td>{{ attachment.file.name|split:"."|last|upper }}</td>
                            <td>{{ attachment.uploaded_at|date:"M d, Y" }}</td>
                            <td>
                                <a href="{{ attachment.file.url }}" class="btn btn-sm btn-primary" target="_blank">
                                    <i class="fas fa-download"></i> Download
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
        <!-- end attachments section -->
        
        <!-- begin notes section -->
        {% if record.notes %}
        <div class="record-section">
            <h5 class="record-section-title">Notes</h5>
            
            <div class="mb-3">
                {{ record.notes|linebreaks }}
            </div>
        </div>
        {% endif %}
        <!-- end notes section -->
    </div>
    <!-- end col-9 -->
    
    <!-- begin col-3 -->
    <div class="col-xl-3">
        <!-- begin quick actions -->
        <div class="quick-actions">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'hr:training_record_update' record.id %}" class="btn btn-primary">
                            <i class="fas fa-edit"></i> Edit Record
                        </a>
                        
                        {% if record.status != 'COMPLETED' %}
                        <a href="{% url 'hr:training_record_mark_complete' record.id %}" class="btn btn-success">
                            <i class="fas fa-check-circle"></i> Mark as Completed
                        </a>
                        {% endif %}
                        
                        {% if record.is_certified and record.status == 'EXPIRED' %}
                        <a href="{% url 'hr:training_record_renew' record.id %}" class="btn btn-info">
                            <i class="fas fa-sync-alt"></i> Renew Certification
                        </a>
                        {% endif %}
                        
                        <a href="{% url 'hr:training_record_delete' record.id %}" class="btn btn-danger">
                            <i class="fas fa-trash"></i> Delete Record
                        </a>
                        
                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-toggle w-100" type="button" id="moreActionsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-ellipsis-h"></i> More Actions
                            </button>
                            <ul class="dropdown-menu w-100" aria-labelledby="moreActionsDropdown">
                                <li>
                                    <a class="dropdown-item" href="{% url 'hr:training_record_print' record.id %}">
                                        <i class="fas fa-print"></i> Print Record
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="{% url 'hr:training_record_export_pdf' record.id %}">
                                        <i class="fas fa-file-pdf"></i> Export as PDF
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="{% url 'hr:training_record_duplicate' record.id %}">
                                        <i class="fas fa-copy"></i> Duplicate Record
                                    </a>
                                </li>
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <a class="dropdown-item" href="{% url 'hr:training_record_upload_certificate' record.id %}">
                                        <i class="fas fa-certificate"></i> Upload Certificate
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- begin employee info -->
            <div class="card mb-3">
                <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>
            <!-- end employee info -->
            
            <!-- begin related trainings -->
            {% if related_trainings %}
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Related Trainings</h5>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        {% for training in related_trainings %}
                        <a href="{% url 'hr:training_record_detail' training.id %}" class="list-group-item list-group-item-action">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ training.title }}</h6>
                                    <p class="text-muted mb-0 small">{{ training.get_training_type_display }}</p>
                                </div>
                                <span class="badge badge-{{ training.status|lower }} badge-status">
                                    {{ training.get_status_display }}
                                </span>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
            <!-- end related trainings -->
        </div>
        <!-- end quick actions -->
    </div>
    <!-- end col-3 -->
</div>
<!-- end row -->
{% endblock %}

{% block js %}
<script>
    $(document).ready(function() {
        // Any JavaScript functionality can be added here
    });
</script>
{% endblock %}