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

{% block title %}Surgical Cases{% endblock %}

{% block content %}
<div class="container-fluid">

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0"><i class="fas fa-notes-medical me-2"></i>Surgical Cases</h1>
    <a href="{% url 'operating_theatre:surgical_case_create' %}" class="btn btn-primary">
      <i class="fas fa-plus me-2"></i>New Case
    </a>
  </div>

  <!-- Search & Filters -->
  <div class="panel panel-inverse mb-4">
    <div class="panel-heading">
      <h4 class="panel-title"><i class="fas fa-filter me-2"></i>Search & Filters</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>
      </div>
    </div>
    <div class="panel-body">
      <form method="get" class="row gy-2 gx-2">
        <div class="col-md-3">
          <input type="text" name="search" class="form-control"
                 placeholder="Search by patient, MRN, procedure…" value="{{ request.GET.search }}">
        </div>
        <div class="col-md-2">
          <select name="status" class="form-select">
            <option value="">All Statuses</option>
            {% for value, label in statuses %}
              <option value="{{ value }}" {% if request.GET.status == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2">
          <select name="priority" class="form-select">
            <option value="">All Case Types</option>
            {% for value, label in case_types %}
              <option value="{{ value }}" {% if request.GET.priority == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2">
          <select name="room" class="form-select">
            <option value="">All Rooms</option>
            {% for room in operating_rooms %}
              <option value="{{ room.pk }}" {% if request.GET.room == room.pk|stringformat:"s" %}selected{% endif %}>
                {{ room.room_number }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3 d-flex gap-2">
          <input type="date" name="date_from" class="form-control" value="{{ request.GET.date_from }}">
          <input type="date" name="date_to" class="form-control" value="{{ request.GET.date_to }}">
        </div>
        <div class="col-md-3">
          <select name="surgeon" class="form-select">
            <option value="">All Surgeons</option>
            {% for s in surgeons %}
              <option value="{{ s.pk }}" {% if request.GET.surgeon == s.pk|stringformat:"s" %}selected{% endif %}>
                {{ s.first_name }} {{ s.last_name }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3">
          <button type="submit" class="btn btn-outline-primary">
            <i class="fas fa-search me-1"></i>Search
          </button>
          <a href="{% url 'operating_theatre:surgical_case_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-times me-1"></i>Clear
          </a>
        </div>
      </form>
    </div>
  </div>

  <!-- Cases Table -->
  <div class="panel panel-inverse">
    <div class="panel-heading">
      <h4 class="panel-title"><i class="fas fa-table me-2"></i>Cases</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>
      </div>
    </div>
    <div class="panel-body">
      {% if surgical_cases %}
        <div class="table-responsive">
          <table class="table table-striped align-middle">
            <thead>
              <tr>
                <th>Patient</th>
                <th>Procedure</th>
                <th>Surgeon</th>
                <th>Room</th>
                <th>Scheduled</th>
                <th>Case Type</th>
                <th>Status</th>
                <th class="text-end">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for case in surgical_cases %}
              <tr>
                <td>
                  <a href="{% url 'operating_theatre:surgical_case_detail' case.pk %}">
                    <strong>{{ case.patient.first_name }} {{ case.patient.last_name }}</strong>
                  </a>
                  {% if case.patient.mrn %}<br><small class="text-muted">MRN: {{ case.patient.mrn }}</small>{% endif %}
                </td>
                <td>
                  {{ case.primary_procedure }}
                  {% if case.procedure_codes %}
                    <br><small class="text-muted">{{ case.procedure_codes|join:", " }}</small>
                  {% endif %}
                </td>
                <td>
                  {% if case.primary_surgeon %}
                    {{ case.primary_surgeon.first_name }} {{ case.primary_surgeon.last_name }}
                  {% else %}
                    <span class="text-muted">N/A</span>
                  {% endif %}
                </td>
                <td>
                  {% if case.or_block and case.or_block.operating_room %}
                    {{ case.or_block.operating_room.room_number }}
                  {% else %}
                    <span class="text-muted">TBD</span>
                  {% endif %}
                </td>
                <td>
                  {{ case.scheduled_start|date:"M d, Y H:i" }}
                  {% if case.estimated_duration %}
                    <br><small class="text-muted">Est: {{ case.estimated_duration }} min</small>
                  {% endif %}
                </td>
                <td>
                  {# Case type badge #}
                  {% with ct=case.case_type %}
                    <span class="badge
                      {% if ct == 'EMERGENCY' %}bg-danger
                      {% elif ct == 'URGENT' %}bg-warning
                      {% elif ct == 'TRAUMA' %}bg-dark
                      {% elif ct == 'TRANSPLANT' %}bg-primary
                      {% else %}bg-secondary{% endif %}">
                      {{ case.get_case_type_display }}
                    </span>
                  {% endwith %}
                </td>
                <td>
                  {% with st=case.status %}
                    <span class="badge
                      {% if st == 'SCHEDULED' %}bg-info
                      {% elif st == 'IN_PROGRESS' %}bg-warning
                      {% elif st == 'COMPLETED' %}bg-success
                      {% elif st == 'CANCELLED' %}bg-danger
                      {% elif st == 'DELAYED' %}bg-secondary
                      {% elif st == 'POSTPONED' %}bg-secondary
                      {% else %}bg-secondary{% endif %}">
                      {{ case.get_status_display }}
                    </span>
                  {% endwith %}
                </td>
                <td class="text-end">
                  <div class="btn-group btn-group-sm" role="group">
                    <a href="{% url 'operating_theatre:surgical_case_detail' case.pk %}"
                       class="btn btn-outline-info" title="View">
                      <i class="fas fa-eye"></i>
                    </a>

                    {% if case.status == 'SCHEDULED' or case.status == 'IN_PROGRESS' %}
                    <a href="{% url 'operating_theatre:surgical_case_update' case.pk %}"
                       class="btn btn-outline-primary" title="Update">
                      <i class="fas fa-edit"></i>
                    </a>
                    {% endif %}

                    {% if case.status == 'SCHEDULED' %}
                    <button type="button" class="btn btn-outline-success"
                            data-bs-toggle="modal" data-bs-target="#startCaseModal{{ case.pk }}"
                            title="Start Case">
                      <i class="fas fa-play"></i>
                    </button>
                    {% elif case.status == 'IN_PROGRESS' %}
                    <button type="button" class="btn btn-outline-warning"
                            data-bs-toggle="modal" data-bs-target="#completeCaseModal{{ case.pk }}"
                            title="Complete Case">
                      <i class="fas fa-check"></i>
                    </button>
                    {% endif %}
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        {# Pagination #}
        {% if is_paginated %}
        <nav aria-label="Page navigation">
          <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
              <li class="page-item">
                <a class="page-link" href="?page=1{% for k,v in request.GET.items %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{% endfor %}">First</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for k,v in request.GET.items %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{% endfor %}">Previous</a>
              </li>
            {% endif %}

            <li class="page-item active">
              <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </li>

            {% if page_obj.has_next %}
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for k,v in request.GET.items %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{% endfor %}">Next</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% for k,v in request.GET.items %}{% if k != 'page' %}&{{ k }}={{ v }}{% endif %}{% endfor %}">Last</a>
              </li>
            {% endif %}
          </ul>
        </nav>
        {% endif %}

      {% else %}
        <div class="text-center py-4">
          <i class="fas fa-user-md fa-3x text-muted mb-3"></i>
          <h5 class="text-muted">No surgical cases found</h5>
          <p class="text-muted">Start by creating your first surgical case.</p>
          <a href="{% url 'operating_theatre:surgical_case_create' %}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>Create First Case
          </a>
        </div>
      {% endif %}
    </div>
  </div>
</div>

{# Start Case Modals #}
{% for case in surgical_cases %}
{% if case.status == 'SCHEDULED' %}
<div class="modal fade" id="startCaseModal{{ case.pk }}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-play me-2"></i>Start Surgical Case</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="post" action="{% url 'operating_theatre:start_case' case.pk %}">
        {% csrf_token %}
        <div class="modal-body">
          <p class="mb-1"><strong>Patient:</strong> {{ case.patient.first_name }} {{ case.patient.last_name }}</p>
          <p class="mb-1"><strong>Procedure:</strong> {{ case.primary_procedure }}</p>
          <p class="mb-1"><strong>Room:</strong>
            {% if case.or_block and case.or_block.operating_room %}
              {{ case.or_block.operating_room.room_number }}
            {% else %}TBD{% endif %}
          </p>
          <div class="alert alert-info mt-3">
            <i class="fas fa-info-circle me-1"></i>
            This will mark the case <strong>In Progress</strong> and set the room to <strong>Occupied</strong>.
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Start Case</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endif %}
{% endfor %}

{# Complete Case Modals #}
{% for case in surgical_cases %}
{% if case.status == 'IN_PROGRESS' %}
<div class="modal fade" id="completeCaseModal{{ case.pk }}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-check me-2"></i>Complete Surgical Case</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="post" action="{% url 'operating_theatre:complete_case' case.pk %}">
        {% csrf_token %}
        <div class="modal-body">
          <p class="mb-1"><strong>Patient:</strong> {{ case.patient.first_name }} {{ case.patient.last_name }}</p>
          <p class="mb-1"><strong>Procedure:</strong> {{ case.primary_procedure }}</p>
          {% if case.actual_start %}
          <p class="mb-1"><strong>Started:</strong> {{ case.actual_start|date:"M d, Y H:i" }}</p>
          {% endif %}
          <div class="alert alert-warning mt-3">
            <i class="fas fa-exclamation-triangle me-1"></i>
            This will mark the case <strong>Completed</strong> and set the room to <strong>Cleaning</strong>.
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-warning">Complete Case</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endif %}
{% endfor %}

<style>
{#.panel-title { color:#495057; }#}
.badge { font-size: .75rem; }
.table td, .table th { vertical-align: middle; }
@media print {
  .btn, .dropdown, nav, .panel-heading .fa-cog { display:none!important; }
  .panel { border:1px solid #dee2e6!important; box-shadow:none!important; }
}
</style>
{% endblock %}