{% extends 'layout/base.html' %}

{% block content %}
<style>
  .table-container {
    margin-top: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  }

  h4 {
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .table thead th {
    background-color: #f8f9fa;
    border: none;
    font-weight: 600;
    color: #495057;
  }

  .table td,
  .table th {
    vertical-align: middle;
    padding: 14px 16px;
    border-color: #e9ecef;
  }

  .table tbody tr:hover {
    background-color: #f4f7fc;
    transition: background-color 0.2s ease-in-out;
  }

  .action-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  .action-icon-btn {
    border: none;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .action-icon-btn.edit {
    background-color: #ffc107;
    color: #212529;
  }

  .action-icon-btn.edit:hover {
    background-color: #e0a800;
  }

  .action-icon-btn.delete {
    background-color: #dc3545;
    color: #fff;
  }

  .action-icon-btn.delete:hover {
    background-color: #b02a37;
  }

  .modal-content {
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  }

  .modal-header {
    background-color: #f8f9fa;
    border-bottom: none;
    padding: 18px 24px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .modal-title {
    font-weight: 600;
  }

  .modal-body,
  .modal-footer {
    padding: 20px 24px;
  }

  .modal-footer {
    border-top: none;
    background-color: #f1f3f5;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
</style>

<div class="container table-container">
  <h4>🛠️ Manage Primary Companies</h4>

  {% if companies %}
  <div class="table-responsive mt-4">
    <table class="table align-middle table-bordered table-hover rounded-4 overflow-hidden">
      <thead class="table-light">
  <tr>
    <th style="width: 60px;">ID</th>
    <th>Company Name</th>
    <th>Status</th> <!-- ✅ Added this line -->
    <th style="width: 180px;">Actions</th>
  </tr>
</thead>
<tbody>
  {% for company in companies %}
  <tr>
    <td><strong>{{ company.id }}</strong></td>
    <td>{{ company.name }}</td>
    
    <!-- ✅ Status column -->
    <td>
      {% if company.is_enabled %}
        <span class="badge bg-success">✅ Enabled</span>
      {% else %}
        <span class="badge bg-danger">❌ Disabled</span>
      {% endif %}
    </td>

    <td>
      <div class="action-btns">
        <button class="action-icon-btn edit" title="Edit"
          onclick="openEditModal('{{ company.id }}')">
          ✏️ Edit
        </button>

        <!-- <button class="action-icon-btn delete" title="Delete"
          onclick="confirmDelete({{ company.id }}, '{{ company.name }}')">
          🗑️ Delete
        </button> -->
      </div>
    </td>
  </tr>
  {% endfor %}
</tbody>
    </table>
  </div>

  <!-- Edit Modals -->
  <!-- Edit Modals -->
{% for company in companies %}
<div class="modal fade" id="editModal{{ company.id }}" tabindex="-1" aria-labelledby="editModalLabel{{ company.id }}" aria-hidden="true">
  <div class="modal-dialog">
    <form method="POST" action="{{ url_for('uploader.edit_company', company_id=company.id) }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editModalLabel{{ company.id }}">✏️ Edit Company</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="companyName{{ company.id }}" class="form-label">Company Name</label>
            <input type="text" id="companyName{{ company.id }}" name="name" class="form-control" value="{{ company.name }}" required>
          </div>
          <div class="form-check form-switch mt-3">
            <input class="form-check-input" type="checkbox" role="switch" id="isEnabled{{ company.id }}" name="is_enabled" {% if company.is_enabled %}checked{% endif %}>
            <label class="form-check-label" for="isEnabled{{ company.id }}">Enabled</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">💾 Save</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endfor %}

  {% else %}
  <p class="text-muted mt-3">No companies found.</p>
  {% endif %}
</div>

<!-- SweetAlert2 for delete confirmation -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  function confirmDelete(companyId, companyName) {
    Swal.fire({
      title: `Delete "${companyName}"?`,
      text: "This action cannot be undone!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#6c757d',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        window.location.href = `/uploader/delete-company/${companyId}`;
      }
    });
  }

  function openEditModal(id) {
    const modal = new bootstrap.Modal(document.getElementById('editModal' + id));
    modal.show();
  }
</script>
{% endblock %}