{% extends "pos/base.html" %}
{% load static %}

{% block title %}Shop Details{% endblock %}

{% block stylesheets %}
<style>
  .shop-logo-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #dee2e6;
  }
  .shop-logo-placeholder {
    width: 50px;
    height: 50px;
    background: #f0f0f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 1.2rem;
    border: 1px dashed #ccc;
  }
  .table th {
    background: #f8f9fa;
    font-weight: 600;
    white-space: nowrap;
  }
  .btn-add-new {
    font-size: 1rem;
  }
  .action-btns .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
  }
  .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
  }
  .empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ddd;
  }
</style>
{% endblock %}

{% block heading %}
  Shop Details
{% endblock %}

{% block content %}
<div class="card shadow-sm">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="fas fa-store mr-2"></i>All Shops</span>
    <a href="{% url 'pos:shop_details_add' %}" class="btn btn-success btn-add-new">
      <i class="fas fa-plus mr-1"></i> Add New Shop
    </a>
  </div>
  <div class="card-body p-0">
    {% if messages %}
      <div class="px-3 pt-3">
        {% for message in messages %}
          <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show py-2" role="alert">
            {{ message }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        {% endfor %}
      </div>
    {% endif %}

    {% if shops %}
      <div class="table-responsive">
        <table class="table table-hover table-striped mb-0">
          <thead>
            <tr>
              <th style="width:70px;">Logo</th>
              <th>Shop Name</th>
              <th>Address</th>
              <th>Phone 1</th>
              <th>Phone 2</th>
              <th>Description</th>
              <th style="width:140px;" class="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for shop in shops %}
              <tr>
                <td class="align-middle">
                  {% if shop.logo_image %}
                    {% get_media_prefix as MEDIA_PREFIX %}
                    <img src="{{ MEDIA_PREFIX }}{{ shop.logo_image }}" alt="Logo" class="shop-logo-thumb">
                  {% else %}
                    <div class="shop-logo-placeholder">
                      <i class="fas fa-store"></i>
                    </div>
                  {% endif %}
                </td>
                <td class="align-middle">
                  <strong>{{ shop.shop_name|default:"-" }}</strong>
                </td>
                <td class="align-middle">{{ shop.address|default:"-"|truncatechars:40 }}</td>
                <td class="align-middle">{{ shop.phone_1|default:"-" }}</td>
                <td class="align-middle">{{ shop.phone_2|default:"-" }}</td>
                <td class="align-middle">{{ shop.descp_1|default:"-"|truncatechars:30 }}</td>
                <td class="align-middle text-center action-btns">
                  <a href="{% url 'pos:shop_details_edit' shop.pk %}" 
                     class="btn btn-outline-primary btn-sm" title="Edit">
                    <i class="fas fa-edit"></i>
                  </a>
                  <button type="button" class="btn btn-outline-danger btn-sm" 
                          title="Delete" 
                          onclick="confirmDelete({{ shop.pk }}, '{{ shop.shop_name|escapejs }}')">
                    <i class="fas fa-trash-alt"></i>
                  </button>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="empty-state">
        <i class="fas fa-store-slash"></i>
        <h5>No Shop Details Found</h5>
        <p class="mb-3">You haven't added any shop details yet.</p>
        <a href="{% url 'pos:shop_details_add' %}" class="btn btn-success">
          <i class="fas fa-plus mr-1"></i> Add Your First Shop
        </a>
      </div>
    {% endif %}
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title"><i class="fas fa-exclamation-triangle mr-2"></i>Confirm Delete</h5>
        <button type="button" class="close text-white" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete shop "<strong id="delete-shop-name"></strong>"?</p>
        <p class="text-muted small mb-0">This action cannot be undone.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <form id="delete-form" method="post" style="display:inline;">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger">
            <i class="fas fa-trash-alt mr-1"></i> Delete
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
function confirmDelete(pk, shopName) {
  document.getElementById('delete-shop-name').textContent = shopName;
  document.getElementById('delete-form').action = "{% url 'pos:shop_details_delete' 0 %}".replace('/0/', '/' + pk + '/');
  $('#deleteModal').modal('show');
}
</script>
{% endblock %}