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

{% block title %}{{ equipment.name }} - Equipment Details{% endblock %}

{% block css %}
<style>
.equipment-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.equipment-image {
    width: 100%;
    max-width: 400px;
    height: 300px;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 3px solid white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.info-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
}

.section-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: #495057;
}

.section-content {
    padding: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.info-value {
    color: #495057;
    font-weight: 500;
}

.status-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

.status-available { background-color: #28a745; }
.status-in-use { background-color: #007bff; }
.status-maintenance { background-color: #ffc107; }
.status-out-of-order { background-color: #dc3545; }
.status-reserved { background-color: #6f42c1; }

.maintenance-timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
    border-left: 2px solid #dee2e6;
    margin-left: 0.5rem;
}

.timeline-item:last-child {
    border-left: none;
}

.timeline-marker {
    position: absolute;
    left: -6px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #007bff;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #007bff;
}

.timeline-content {
    margin-left: 1rem;
}

.timeline-date {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 600;
}

.timeline-title {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.timeline-description {
    color: #6c757d;
    font-size: 0.875rem;
}

.usage-chart {
    height: 300px;
    margin-bottom: 1rem;
}

.qr-code-section {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
}

.qr-code {
    width: 150px;
    height: 150px;
    margin: 0 auto 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-maintenance {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 0.25rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.specifications-table {
    width: 100%;
    margin-bottom: 0;
}

.specifications-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding: 0.75rem;
}

.specifications-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .equipment-header {
        padding: 1.5rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .section-content {
        padding: 1rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <!-- Page Header -->
    <div class="d-flex align-items-center mb-3">
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{% url 'operating_theatre:dashboard' %}">Operating Theatre</a></li>
                <li class="breadcrumb-item"><a href="{% url 'operating_theatre:equipment_list' %}">Equipment</a></li>
                <li class="breadcrumb-item active">{{ equipment.name }}</li>
            </ol>
            <h1 class="page-header mb-0">
                <i class="fas fa-tools me-2"></i>{{ equipment.name }}
            </h1>
        </div>
        <div class="ms-auto">
            <div class="btn-group">
                <a href="{% url 'operating_theatre:equipment_edit' equipment.pk %}" class="btn btn-primary">
                    <i class="fas fa-edit me-1"></i>Edit
                </a>
                <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="#" onclick="scheduleMaintenance()">
                            <i class="fas fa-wrench me-2"></i>Schedule Maintenance
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#" onclick="generateQR()">
                            <i class="fas fa-qrcode me-2"></i>Generate QR Code
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#" onclick="printDetails()">
                            <i class="fas fa-print me-2"></i>Print Details
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item text-danger" href="#" onclick="reportIssue()">
                            <i class="fas fa-exclamation-triangle me-2"></i>Report Issue
                        </a>
                    </li>
                </ul>
            </div>
            <a href="{% url 'operating_theatre:equipment_list' %}" class="btn btn-outline-secondary ms-2">
                <i class="fas fa-arrow-left me-1"></i>Back to List
            </a>
        </div>
    </div>

    <!-- Equipment Header -->
    <div class="equipment-header">
        <div class="row">
            <div class="col-md-8">
                <div class="d-flex align-items-center mb-3">
                    <div>
                        <span class="status-indicator status-{{ equipment.status }}"></span>
                        {% if equipment.status == 'available' %}
                            <span class="badge bg-success me-2">Available</span>
                        {% elif equipment.status == 'in_use' %}
                            <span class="badge bg-primary me-2">In Use</span>
                        {% elif equipment.status == 'maintenance' %}
                            <span class="badge bg-warning me-2">Maintenance</span>
                        {% elif equipment.status == 'out_of_order' %}
                            <span class="badge bg-danger me-2">Out of Order</span>
                        {% elif equipment.status == 'reserved' %}
                            <span class="badge bg-info me-2">Reserved</span>
                        {% endif %}
                        <span class="badge bg-light text-dark">{{ equipment.get_category_display }}</span>
                    </div>
                </div>
                <h2 class="mb-2">{{ equipment.name }}</h2>
                <p class="mb-3">{{ equipment.description|default:"No description available" }}</p>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-2">
                            <strong>Serial Number:</strong> {{ equipment.serial_number }}
                        </div>
                        <div class="mb-2">
                            <strong>Manufacturer:</strong> {{ equipment.manufacturer }}
                        </div>
                        <div class="mb-2">
                            <strong>Model:</strong> {{ equipment.model }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <strong>Location:</strong> 
                            {% if equipment.current_location %}
                                {{ equipment.current_location.name }}
                            {% else %}
                                <span class="text-muted">Not assigned</span>
                            {% endif %}
                        </div>
                        <div class="mb-2">
                            <strong>Purchase Date:</strong> 
                            {% if equipment.purchase_date %}
                                {{ equipment.purchase_date|date:"M d, Y" }}
                            {% else %}
                                <span class="text-muted">Not recorded</span>
                            {% endif %}
                        </div>
                        <div class="mb-2">
                            <strong>Warranty Expires:</strong> 
                            {% if equipment.warranty_expiry %}
                                {{ equipment.warranty_expiry|date:"M d, Y" }}
                            {% else %}
                                <span class="text-muted">Not recorded</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 text-center">
                {% if equipment.image %}
                <img src="{{ equipment.image.url }}" alt="{{ equipment.name }}" class="equipment-image">
                {% else %}
                <div class="equipment-image bg-light d-flex align-items-center justify-content-center">
                    <i class="fas fa-tools fa-4x text-muted"></i>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Maintenance Alert -->
    {% if equipment.maintenance_due %}
    <div class="alert-maintenance">
        <h6 class="mb-2">
            <i class="fas fa-exclamation-triangle me-2"></i>Maintenance Due
        </h6>
        <p class="mb-0">
            This equipment is due for maintenance. Last maintenance was on 
            {% if equipment.last_maintenance_date %}
                {{ equipment.last_maintenance_date|date:"M d, Y" }}
            {% else %}
                never
            {% endif %}.
        </p>
    </div>
    {% endif %}

    <div class="row">
        <!-- Equipment Information -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="info-section">
                <div class="section-header">
                    <i class="fas fa-info-circle me-2"></i>Equipment Information
                </div>
                <div class="section-content">
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">Equipment ID</div>
                            <div class="info-value">{{ equipment.equipment_id|default:"Not assigned" }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">Asset Tag</div>
                            <div class="info-value">{{ equipment.asset_tag|default:"Not assigned" }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">Category</div>
                            <div class="info-value">{{ equipment.get_category_display }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">Current Status</div>
                            <div class="info-value">
                                <span class="status-indicator status-{{ equipment.status }}"></span>
                                {{ equipment.get_status_display }}
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">Purchase Cost</div>
                            <div class="info-value">
                                {% if equipment.purchase_cost %}
                                    ${{ equipment.purchase_cost|floatformat:2 }}
                                {% else %}
                                    <span class="text-muted">Not recorded</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">Depreciation</div>
                            <div class="info-value">
                                {% if equipment.depreciation_rate %}
                                    {{ equipment.depreciation_rate }}% per year
                                {% else %}
                                    <span class="text-muted">Not set</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Technical Specifications -->
            {% if equipment.specifications %}
            <div class="info-section">
                <div class="section-header">
                    <i class="fas fa-cogs me-2"></i>Technical Specifications
                </div>
                <div class="section-content">
                    <table class="specifications-table table">
                        <thead>
                            <tr>
                                <th>Specification</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for spec, value in equipment.specifications.items %}
                            <tr>
                                <td>{{ spec|title }}</td>
                                <td>{{ value }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}

            <!-- Maintenance History -->
            <div class="info-section">
                <div class="section-header">
                    <i class="fas fa-history me-2"></i>Maintenance History
                </div>
                <div class="section-content">
                    {% if equipment.maintenance_records.all %}
                    <div class="maintenance-timeline">
                        {% for record in equipment.maintenance_records.all %}
                        <div class="timeline-item">
                            <div class="timeline-marker"></div>
                            <div class="timeline-content">
                                <div class="timeline-date">{{ record.date|date:"M d, Y" }}</div>
                                <div class="timeline-title">{{ record.maintenance_type|title }}</div>
                                <div class="timeline-description">
                                    {{ record.description|default:"No description provided" }}
                                    {% if record.performed_by %}
                                        <br><small class="text-muted">Performed by: {{ record.performed_by.get_full_name }}</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-wrench fa-2x text-muted mb-3"></i>
                        <p class="text-muted">No maintenance records found</p>
                        <button class="btn btn-primary" onclick="scheduleMaintenance()">
                            <i class="fas fa-plus me-1"></i>Schedule First Maintenance
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Usage Statistics -->
            <div class="info-section">
                <div class="section-header">
                    <i class="fas fa-chart-line me-2"></i>Usage Statistics
                </div>
                <div class="section-content">
                    <div class="usage-chart">
                        <canvas id="usageChart"></canvas>
                    </div>
                    <div class="row text-center">
                        <div class="col-md-3">
                            <div class="mb-2">
                                <strong class="text-primary">{{ equipment.total_usage_hours|default:0 }}</strong>
                            </div>
                            <div class="text-muted small">Total Hours</div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-2">
                                <strong class="text-success">{{ equipment.monthly_usage_hours|default:0 }}</strong>
                            </div>
                            <div class="text-muted small">This Month</div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-2">
                                <strong class="text-warning">{{ equipment.utilization_rate|default:0 }}%</strong>
                            </div>
                            <div class="text-muted small">Utilization</div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-2">
                                <strong class="text-info">{{ equipment.efficiency_score|default:0 }}%</strong>
                            </div>
                            <div class="text-muted small">Efficiency</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- QR Code -->
            <div class="qr-code-section">
                <h6 class="mb-3">Equipment QR Code</h6>
                <div class="qr-code">
                    {% if equipment.qr_code %}
                        <img src="{{ equipment.qr_code.url }}" alt="QR Code" style="width: 100%; height: 100%;">
                    {% else %}
                        <i class="fas fa-qrcode fa-3x text-muted"></i>
                    {% endif %}
                </div>
                <button class="btn btn-outline-primary btn-sm" onclick="generateQR()">
                    <i class="fas fa-download me-1"></i>Download QR Code
                </button>
            </div>

            <!-- Quick Actions -->
            <div class="info-section">
                <div class="section-header">
                    <i class="fas fa-bolt me-2"></i>Quick Actions
                </div>
                <div class="section-content">
                    <div class="d-grid gap-2">
                        {% if equipment.status == 'available' %}
                        <button class="btn btn-success" onclick="reserveEquipment()">
                            <i class="fas fa-lock me-1"></i>Reserve Equipment
                        </button>
                        {% elif equipment.status == 'reserved' %}
                        <button class="btn btn-warning" onclick="releaseEquipment()">
                            <i class="fas fa-unlock me-1"></i>Release Reservation
                        </button>
                        {% endif %}
                        
                        <button class="btn btn-primary" onclick="scheduleMaintenance()">
                            <i class="fas fa-wrench me-1"></i>Schedule Maintenance
                        </button>
                        
                        <button class="btn btn-outline-secondary" onclick="viewHistory()">
                            <i class="fas fa-history me-1"></i>View Full History
                        </button>
                        
                        <button class="btn btn-outline-danger" onclick="reportIssue()">
                            <i class="fas fa-exclamation-triangle me-1"></i>Report Issue
                        </button>
                    </div>
                </div>
            </div>

            <!-- Current Assignment -->
            {% if equipment.current_assignment %}
            <div class="info-section">
                <div class="section-header">
                    <i class="fas fa-user-md me-2"></i>Current Assignment
                </div>
                <div class="section-content">
                    <div class="mb-2">
                        <strong>Assigned to:</strong> {{ equipment.current_assignment.assigned_to.get_full_name }}
                    </div>
                    <div class="mb-2">
                        <strong>Since:</strong> {{ equipment.current_assignment.assigned_date|date:"M d, Y" }}
                    </div>
                    <div class="mb-2">
                        <strong>Purpose:</strong> {{ equipment.current_assignment.purpose|default:"General use" }}
                    </div>
                    {% if equipment.current_assignment.expected_return %}
                    <div class="mb-2">
                        <strong>Expected Return:</strong> {{ equipment.current_assignment.expected_return|date:"M d, Y" }}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Related Documents -->
            {% if equipment.documents.all %}
            <div class="info-section">
                <div class="section-header">
                    <i class="fas fa-file-alt me-2"></i>Related Documents
                </div>
                <div class="section-content">
                    {% for document in equipment.documents.all %}
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <div class="fw-bold">{{ document.name }}</div>
                            <small class="text-muted">{{ document.document_type|title }}</small>
                        </div>
                        <a href="{{ document.file.url }}" class="btn btn-outline-primary btn-sm" target="_blank">
                            <i class="fas fa-download"></i>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Usage Chart
const ctx = document.getElementById('usageChart').getContext('2d');
const usageChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{ equipment.usage_chart_labels|safe }},
        datasets: [{
            label: 'Usage Hours',
            data: {{ equipment.usage_chart_data|safe }},
            borderColor: '#007bff',
            backgroundColor: 'rgba(0, 123, 255, 0.1)',
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

function reserveEquipment() {
    if (confirm('Reserve this equipment?')) {
        $.ajax({
            url: '{% url "operating_theatre:equipment_reserve" equipment.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error reserving equipment: ' + response.error);
                }
            },
            error: function() {
                alert('Error reserving equipment');
            }
        });
    }
}

function releaseEquipment() {
    if (confirm('Release this equipment reservation?')) {
        $.ajax({
            url: '{% url "operating_theatre:equipment_release" equipment.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error releasing equipment: ' + response.error);
                }
            },
            error: function() {
                alert('Error releasing equipment');
            }
        });
    }
}

function scheduleMaintenance() {
    window.location.href = '{% url "operating_theatre:equipment_maintenance_schedule" equipment.pk %}';
}

function generateQR() {
    window.open('{% url "operating_theatre:equipment_qr_code" equipment.pk %}', '_blank');
}

function viewHistory() {
    window.location.href = '{% url "operating_theatre:equipment_history" equipment.pk %}';
}

function reportIssue() {
    window.location.href = '{% url "operating_theatre:equipment_report_issue" equipment.pk %}';
}

function printDetails() {
    window.print();
}
</script>
{% endblock %}