{% extends "base.html" %}

{% block title %}Facilities{% endblock %}

{#
  MODERN facilities page (design A/B test — slide 5 of JQC_design).

  The four hub cards are new; everything below them is the original grouped
  facility list, delete modal and JS, unchanged — no functionality removed.
#}

{% block content %}
<div class="jqc-page-head center">
  <div class="jqc-page-title">Facilities</div>
  <div class="jqc-page-sub text-center">Manage facility records, statistics and QR access</div>
</div>

<div class="row g-4 mb-4">
  {% if not current_user.is_inspector %}
  <div class="col-12 col-lg-6">
    <a class="jqc-hub-card" href="{{ url_for('facilities.qr_print_all') }}">
      <div class="d-flex gap-4 align-items-start">
        <span class="jqc-tile-icon lg"><i class="bi bi-qr-code"></i></span>
        <div>
          <div class="jqc-hub-title">Print QR Code</div>
          <div class="jqc-hub-text">Generate and print scannable QR codes for every facility entrance and asset.</div>
        </div>
      </div>
      <div class="jqc-hub-open">Open &rarr;</div>
    </a>
  </div>
  {% endif %}

  <div class="col-12 col-lg-6">
    <a class="jqc-hub-card" href="#facility-list">
      <div class="d-flex gap-4 align-items-start">
        <span class="jqc-tile-icon lg"><i class="bi bi-buildings"></i></span>
        <div>
          <div class="jqc-hub-title">Facilities Information</div>
          <div class="jqc-hub-text">View addresses, contacts, contracts and service details in one place.</div>
        </div>
      </div>
      <div class="jqc-hub-open">Open &rarr;</div>
    </a>
  </div>

  <div class="col-12 col-lg-6">
    <a class="jqc-hub-card" href="{{ url_for('reports.index') }}">
      <div class="d-flex gap-4 align-items-start">
        <span class="jqc-tile-icon lg"><i class="bi bi-pie-chart"></i></span>
        <div>
          <div class="jqc-hub-title">Facilities Statistics</div>
          <div class="jqc-hub-text">Track inspection scores and issue trends by location over time.</div>
        </div>
      </div>
      <div class="jqc-hub-open">Open &rarr;</div>
    </a>
  </div>

  {% if current_user.role in ['admin', 'director'] %}
  <div class="col-12 col-lg-6">
    <a class="jqc-hub-card" href="{{ url_for('templates.index') }}">
      <div class="d-flex gap-4 align-items-start">
        <span class="jqc-tile-icon lg"><i class="bi bi-gear"></i></span>
        <div>
          <div class="jqc-hub-title">Customize</div>
          <div class="jqc-hub-text">Configure inspection templates, checklist items and scoring for your facilities.</div>
        </div>
      </div>
      <div class="jqc-hub-open">Open &rarr;</div>
    </a>
  </div>
  {% endif %}
</div>

{# ── Original facility list (unchanged) ───────────────────────────────── #}
<div id="facility-list" class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
  <h2 class="mb-0" style="font-size:1.4rem;font-weight:800;">
    <i class="bi bi-building"></i> All Facilities
  </h2>
  <div>
    {% if not current_user.is_inspector %}
    <a href="{{ url_for('facilities.qr_print_all') }}"
       class="btn btn-outline-dark" title="Printable sheet of your facilities' QR codes">
      <i class="bi bi-qr-code"></i> Print All QR Codes
    </a>
    {% endif %}
    {% if current_user.role in ['admin', 'director'] %}
    <a href="{{ url_for('facilities.create_facility') }}" class="btn btn-primary">
      <i class="bi bi-plus-circle"></i> Add Facility
    </a>
    {% endif %}
  </div>
</div>

{% if grouped %}
  {% for group_key, group in grouped.items() %}
  {# ── Contract group header ────────────────────────────────────────────── #}
  {% set collapse_id = 'contract-' ~ loop.index %}
  <div class="mb-4">
    <div class="d-flex align-items-center mb-2">
      <button class="btn btn-link text-decoration-none p-0 d-flex align-items-center gap-2 fw-semibold fs-5"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#{{ collapse_id }}"
              aria-expanded="false"
              aria-controls="{{ collapse_id }}">
        <i class="bi bi-chevron-down contract-chevron" style="transition: transform .2s; transform: rotate(-90deg);"></i>
        {% if group.project %}
          <i class="bi bi-briefcase text-primary"></i>
          {{ group.project.name }}
        {% else %}
          <i class="bi bi-dash-circle text-secondary"></i>
          <span class="text-secondary">No Contract Assigned</span>
        {% endif %}
      </button>
      <span class="badge bg-secondary ms-2">{{ group.facilities|length }}</span>
      {% if group.project and current_user.role in ['admin', 'director', 'project_manager', 'auditor'] %}
      <a href="{{ url_for('projects.view', project_id=group.project.id) }}"
         class="btn btn-sm btn-outline-secondary ms-2"
         title="View Contract">
        <i class="bi bi-arrow-right-circle"></i>
      </a>
      {% endif %}
    </div>

    {# ── Collapsible card grid ─────────────────────────────────────────── #}
    <div class="collapse" id="{{ collapse_id }}">
      <div class="row">
        {% for facility in group.facilities %}
        <div class="col-sm-6 col-md-4 col-lg-3 mb-3">
          <div class="card shadow-sm h-100">
            <div class="card-body py-2 px-3">
              <div class="mb-1" style="font-size:.875rem;font-weight:600;line-height:1.3;">
                <a href="{{ url_for('facilities.view_facility', facility_id=facility.id) }}" class="text-decoration-none">
                  {{ facility.name }}
                </a>
                {% if not facility.active %}
                <span class="badge bg-secondary" style="font-size:.7rem;">Inactive</span>
                {% endif %}
              </div>

              {% if facility.address %}
              <p class="card-text text-muted mb-1" style="font-size:.78rem;">
                <i class="bi bi-geo-alt"></i> {{ facility.address }}
              </p>
              {% endif %}

              <div class="mt-1">
                <small class="text-muted" style="font-size:.78rem;">
                  <i class="bi bi-diagram-3"></i> {{ facility.areas.count() }} areas
                </small>
              </div>
            </div>
            <div class="card-footer bg-transparent d-flex gap-2 py-2 px-3">
              <a href="{{ url_for('facilities.view_facility', facility_id=facility.id) }}" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-eye"></i> View Details
              </a>
              {% if current_user.role == 'admin' %}
              <button type="button"
                      class="btn btn-sm btn-outline-danger ms-auto"
                      data-bs-toggle="modal"
                      data-bs-target="#deleteModal"
                      data-facility-id="{{ facility.id }}"
                      data-facility-name="{{ facility.name }}"
                      data-inspection-count="{{ facility.inspections.count() }}">
                <i class="bi bi-trash"></i> Delete
              </button>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endfor %}

{% else %}
<div class="alert alert-info">
  <i class="bi bi-info-circle"></i> No facilities configured yet.
</div>
{% endif %}

{% if current_user.role == 'admin' %}
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="bi bi-exclamation-triangle-fill"></i> Confirm Deletion
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>You are about to permanently delete:</p>
                <p class="fw-bold fs-5" id="modalFacilityName"></p>
                <div id="modalWarningBlock" class="alert alert-danger d-none">
                    <i class="bi bi-x-circle-fill"></i>
                    <strong>Cannot delete this facility.</strong> It has existing inspection records.
                    Please remove all associated inspections first.
                </div>
                <div id="modalConfirmBlock">
                    <p class="text-muted mb-0">This action is <strong>irreversible</strong>. All areas associated with this facility will also be deleted.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Cancel
                </button>
                <form id="deleteFacilityForm" method="POST" action="" class="d-inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" id="confirmDeleteBtn" class="btn btn-danger">
                        <i class="bi bi-trash-fill"></i> Delete Permanently
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    // ── Rotate chevron on collapse toggle ────────────────────────────────
    document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function (btn) {
        const target = document.querySelector(btn.getAttribute('data-bs-target'));
        if (!target) return;
        const chevron = btn.querySelector('.contract-chevron');

        target.addEventListener('hide.bs.collapse', function () {
            if (chevron) chevron.style.transform = 'rotate(-90deg)';
        });
        target.addEventListener('show.bs.collapse', function () {
            if (chevron) chevron.style.transform = 'rotate(0deg)';
        });
    });

    {% if current_user.role == 'admin' %}
    // ── Delete modal wiring ──────────────────────────────────────────────
    const deleteModal = document.getElementById('deleteModal');
    deleteModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const facilityId = button.getAttribute('data-facility-id');
        const facilityName = button.getAttribute('data-facility-name');
        const inspectionCount = parseInt(button.getAttribute('data-inspection-count'));

        document.getElementById('modalFacilityName').textContent = facilityName;
        document.getElementById('deleteFacilityForm').action = '/facilities/' + facilityId + '/delete';

        const warningBlock = document.getElementById('modalWarningBlock');
        const confirmBlock = document.getElementById('modalConfirmBlock');
        const confirmBtn   = document.getElementById('confirmDeleteBtn');

        if (inspectionCount > 0) {
            warningBlock.classList.remove('d-none');
            confirmBlock.classList.add('d-none');
            confirmBtn.disabled = true;
        } else {
            warningBlock.classList.add('d-none');
            confirmBlock.classList.remove('d-none');
            confirmBtn.disabled = false;
        }
    });
    {% endif %}
});
</script>
{% endblock %}