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

{% block title %}OR Block - {{ object.operating_room.room_name }}{% endblock %}

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

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

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

.info-content {
    padding: 1.5rem;
}

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

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

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

.info-value {
    color: #495057;
    font-size: 1rem;
}

.utilization-chart {
    height: 200px;
    margin: 1rem 0;
}

.timeline-item {
    display: flex;
    align-items: start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.2rem;
}

.timeline-content {
    flex-grow: 1;
}

.case-card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    background: white;
}

.case-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.case-content {
    padding: 1.5rem;
}

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

.status-available { background-color: #28a745; }
.status-booked { background-color: #007bff; }
.status-in-progress { background-color: #ffc107; }
.status-completed { background-color: #6c757d; }
.status-cancelled { background-color: #dc3545; }

@media (max-width: 768px) {
    .block-header {
        padding: 1.5rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .info-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:or_block_list' %}">Block Schedule</a></li>
                <li class="breadcrumb-item active">{{ object.operating_room.room_name }}</li>
            </ol>
            <h1 class="page-header mb-0">
                <i class="fas fa-calendar-alt me-2"></i>OR Block Details
            </h1>
        </div>
        <div class="ms-auto">
            <div class="btn-group">
                <a href="{% url 'operating_theatre:or_block_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i>Back
                </a>
                {% if object.status == 'available' %}
                <a href="{% url 'operating_theatre:block_edit' object.pk %}" class="btn btn-primary">
                    <i class="fas fa-edit me-1"></i>Edit
                </a>
                {% endif %}
                <button class="btn btn-outline-secondary" onclick="window.print()">
                    <i class="fas fa-print me-1"></i>Print
                </button>
            </div>
        </div>
    </div>

    <!-- Block Header -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="widget widget-stats bg-dark mb-7px">
                <div class="row">
                    <div class="col-8">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-calendar fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-title fs-20px fw-bold">{{ object.operating_room.room_name }}</div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-2">
                                    <strong>Date:</strong> {{ object.date }}
                                </div>
                                <div class="mb-2">
                                    <strong>Time:</strong> {{ object.start_time|date:"H:i" }} - {{ object.end_time|date:"H:i" }}
                                </div>
                                <div class="mb-2">
                                    <strong>Duration:</strong> {{ object.allocated_minutes }} min
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-2">
                                    <strong>Block Type:</strong> {{ object.get_block_type_display }}
                                </div>
                                <div class="mb-2">
                                    <strong>Assigned Surgeon:</strong>
                                    {% if object.primary_surgeon %}
                                        {{ object.primary_surgeon.get_full_name }}
                                    {% else %}
                                        <span class="text-muted">Unassigned</span>
                                    {% endif %}
                                </div>
                                <div class="mb-2">
                                    <strong>Created:</strong> {{ object.created_at|date:"M d, Y H:i" }}
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-end">
                        <div class="mb-3">
                            {% if object.status == 'SCHEDULED' %}
                                <span class="badge bg-success fs-6">Scheduled</span>
                            {% elif object.status == 'DELAYED' %}
                                <span class="badge bg-primary fs-6">Delayed</span>
                            {% elif object.status == 'ACTIVE' %}
                                <span class="badge bg-success fs-6">Active</span>
                            {% elif object.status == 'COMPLETED' %}
                                <span class="badge bg-secondary fs-6">Completed</span>
                            {% elif object.status == 'CANCELLED' %}
                                <span class="badge bg-danger fs-6">Cancelled</span>
                            {% endif %}
                        </div>
                        <div class="text-center">
                            <div class="fs-1 fw-bold">{{ object.utilization_percentage }}%</div>
                            <div>Utilization</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <!-- Block Information -->
        <div class="col-lg-8">
            <!-- Utilization Chart -->
            <div class="panel panel-inverse mb-3">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fas fa-chart-bar me-2"></i>Block Utilization
                    </h4>
                </div>
                <div class="panel-body">
                    <div class="utilization-chart">
                        <canvas id="utilizationChart"></canvas>
                    </div>
                    <div class="row text-center">
                        <div class="col-md-3">
                            <div class="fw-bold text-primary">{{ total_block_minutes }}</div>
                            <small class="text-muted">Total Minutes</small>
                        </div>
                        <div class="col-md-3">
                            <div class="fw-bold text-success">{{ scheduled_minutes }}</div>
                            <small class="text-muted">Scheduled</small>
                        </div>
                        <div class="col-md-3">
                            <div class="fw-bold text-warning">{{ available_minutes }}</div>
                            <small class="text-muted">Available</small>
                        </div>
                        <div class="col-md-3">
                            <div class="fw-bold text-info">{{ turnover_minutes }}</div>
                            <small class="text-muted">Turnover</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Scheduled Cases -->
            <div class="panel panel-inverse mb-3">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fas fa-procedures me-2"></i>Scheduled Cases ({{ object.surgical_cases.count }})
                    {% if object.status == 'available' %}
                    <div class="ms-auto">
                        <button class="btn btn-sm btn-primary" onclick="addCase()">
                            <i class="fas fa-plus me-1"></i>Add Case
                        </button>
                    </div>
                    {% endif %}
                    </h4>
                </div>
                <div class="panel-body">
                    {% for case in object.surgical_cases.all %}
                    <div class="card">
                        <div class="card-header bg-success">
                            <div>
                                <h4 class="mb-1 text-light">{{ case.patient.get_full_name }}</h4>
                                Scheduled Time: <small class="text-muted">{{ case.scheduled_start|date:"H:i" }}</small> - Duration: <small class="text-muted">{{ case.estimated_duration }}</small>
                            </div>
                            <div>
                                {% if case.status == 'scheduled' %}
                                    <span class="badge bg-primary">Scheduled</span>
                                {% elif case.status == 'in_progress' %}
                                    <span class="badge bg-warning">In Progress</span>
                                {% elif case.status == 'completed' %}
                                    <span class="badge bg-success">Completed</span>
                                {% elif case.status == 'cancelled' %}
                                    <span class="badge bg-danger">Cancelled</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="card-body border-start border-end border-bottom border-success">
                            <div class="info-grid">
                                <div class="info-item">
                                    <div class="info-label">Procedure</div>
                                    <div class="info-value">{{ case.primary_procedure }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">Surgeon</div>
                                    <div class="info-value">{{ case.primary_surgeon.get_full_name }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">Estimated Duration</div>
                                    <div class="info-value">{{ case.estimated_duration }} minutes</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">Priority</div>
                                    <div class="info-value">
                                        {% if case.priority == 'emergency' %}
                                            <span class="badge bg-danger">Emergency</span>
                                        {% elif case.priority == 'urgent' %}
                                            <span class="badge bg-warning">Urgent</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Routine</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between mt-3">
                                <div class="btn-group">
                                    <a href="{% url 'operating_theatre:surgical_case_detail' case.pk %}" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye me-1"></i>View
                                    </a>
                                    {% if case.status == 'scheduled' %}
                                    <a href="{% url 'operating_theatre:case_edit' case.pk %}" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-edit me-1"></i>Edit
                                    </a>
                                    {% endif %}
                                </div>
                                <div class="btn-group">
                                    {% if case.status == 'scheduled' %}
                                    <button class="btn btn-success btn-sm" onclick="startCase('{{ case.pk }}')">
                                        <i class="fas fa-play me-1"></i>Start
                                    </button>
                                    {% elif case.status == 'in_progress' %}
                                    <button class="btn btn-warning btn-sm" onclick="completeCase('{{ case.pk }}')">
                                        <i class="fas fa-check me-1"></i>Complete
                                    </button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center py-4">
                        <i class="fas fa-calendar-plus fa-2x text-muted mb-2"></i>
                        <p class="text-muted mb-0">No cases scheduled for this block</p>
                        {% if object.status == 'available' %}
                        <button class="btn btn-primary mt-2" onclick="addCase()">
                            <i class="fas fa-plus me-1"></i>Add First Case
                        </button>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Block Details -->
            <div class="panel panel-inverse mb-3">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fas fa-info-circle me-2"></i>Block Details
                    </h4>
                </div>
                <div class="panel-body">
                    <div class="info-item mb-3">
                        <div class="info-label">Operating Room</div>
                        <div class="info-value">{{ object.operating_room.name }}</div>
                    </div>
                    <div class="info-item mb-3">
                        <div class="info-label">Room Type</div>
                        <div class="info-value">{{ object.operating_room.get_room_type_display }}</div>
                    </div>
                    <div class="info-item mb-3">
                        <div class="info-label">Capacity</div>
                        <div class="info-value">{{ object.operating_room.capacity }} people</div>
                    </div>
                    <div class="info-item mb-3">
                        <div class="info-label">Equipment Level</div>
                        <div class="info-value">{{ object.operating_room.get_equipment_level_display }}</div>
                    </div>
                    {% if object.notes %}
                    <div class="info-item mb-3">
                        <div class="info-label">Notes</div>
                        <div class="info-value">{{ object.notes }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Team Information -->

            <div class="panel panel-inverse mb-3">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fas fa-users me-2"></i>Assigned Team
                    </h4>
                </div>
                <div class="panel-body">
                    {% if object.primary_surgeon %}
                    <div class="info-item mb-3">
                        <div class="info-label">Primary Surgeon</div>
                        <div class="info-value">{{ object.primary_surgeon.get_full_name }}</div>
                    </div>
                    {% endif %}
                    
                    {% if object.assigned_anesthesiologist %}
                    <div class="info-item mb-3">
                        <div class="info-label">Anesthesiologist</div>
                        <div class="info-value">{{ object.assigned_anesthesiologist.get_full_name }}</div>
                    </div>
                    {% endif %}
                    
                    {% if object.assigned_nurses.exists %}
                    <div class="info-item mb-3">
                        <div class="info-label">Nursing Team</div>
                        <div class="info-value">
                            {% for nurse in object.assigned_nurses.all %}
                                <div>{{ nurse.get_full_name }}</div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>


            <!-- Activity Timeline -->
            <div class="panel panel-inverse mb-3">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <i class="fas fa-history me-2"></i>Activity Timeline
                    </h4>
                </div>
                <div class="panel-body">
                    {% for activity in object.activities.all %}
                    <div class="timeline-item">
                        <div class="timeline-icon bg-primary text-white">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="fw-bold">{{ activity.action }}</div>
                            <div class="text-muted small">{{ activity.created_at|date:"M d, Y H:i" }}</div>
                            {% if activity.notes %}
                            <div class="mt-1">{{ activity.notes }}</div>
                            {% endif %}
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center py-3">
                        <i class="fas fa-history fa-2x text-muted mb-2"></i>
                        <p class="text-muted mb-0">No activity recorded</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Utilization Chart
const ctx = document.getElementById('utilizationChart').getContext('2d');
const utilizationChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Scheduled', 'Available', 'Turnover'],
        datasets: [{
            data: [{{ object.scheduled_minutes }}, {{ object.available_minutes }}, {{ object.turnover_minutes }}],
            backgroundColor: ['#28a745', '#ffc107', '#17a2b8'],
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

function addCase() {
    window.location.href = '{% url "operating_theatre:surgical_case_create" %}?block={{ object.pk }}';
}

function startCase(caseId) {
    if (confirm('Start this surgical case?')) {
        $.ajax({
            url: `/operating-theatre/cases/${caseId}/start/`,
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error starting case: ' + response.error);
                }
            },
            error: function() {
                alert('Error starting case');
            }
        });
    }
}

function completeCase(caseId) {
    if (confirm('Mark this surgical case as completed?')) {
        $.ajax({
            url: `/operating-theatre/cases/${caseId}/complete/`,
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error completing case: ' + response.error);
                }
            },
            error: function() {
                alert('Error completing case');
            }
        });
    }
}
</script>
{% endblock %}