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

{% block title %}Select Business Header{% endblock %}

{% block stylesheets %}
<style>
  .shop-card {
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    outline: none;
  }
  .shop-card:hover {
    border-color: #007bff;
    box-shadow: 0 4px 15px rgba(0,123,255,0.15);
    transform: translateY(-2px);
  }
  .shop-card:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
  }
  .shop-card.selected {
    border-color: #28a745;
    background: #f0fff4;
    box-shadow: 0 0 0 3px rgba(40,167,69,0.25);
  }
  .shop-logo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #eee;
  }
  .shop-logo-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 2rem;
  }
  .shop-info h5 {
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
  }
  .shop-info p {
    margin-bottom: 3px;
    color: #666;
    font-size: 0.9rem;
  }
  .selection-header {
    text-align: center;
    margin-bottom: 30px;
  }
  .selection-header i {
    font-size: 3rem;
    color: #007bff;
    margin-bottom: 15px;
  }
  .selection-header h3 {
    color: #333;
    margin-bottom: 10px;
  }
  .selection-header p {
    color: #666;
  }
  .btn-proceed {
    padding: 12px 40px;
    font-size: 1.1rem;
  }
  .invoice-info-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
  }
  .invoice-info-box span {
    font-weight: 600;
    color: #333;
  }
  .keyboard-hint {
    background: #e9ecef;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #666;
  }
  .keyboard-hint kbd {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.8rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
</style>
{% endblock %}

{% block heading %}
  Select Business Header
{% endblock %}

{% block content %}
<div class="container py-4">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      
      <!-- Header -->
      <div class="selection-header">
        <i class="fas fa-store"></i>
        <h3>Select Business Header</h3>
        <p>Multiple business headers found. Please select which one to use for this invoice.</p>
      </div>

      <!-- Invoice Info -->
      <div class="invoice-info-box text-center">
        <i class="fas fa-file-invoice mr-2"></i>
        Printing Invoice: <span>{{ invoice_no }}</span>
        <span class="badge badge-info ml-2">{{ t_cat_str|upper }}</span>
      </div>

      <!-- Keyboard Hint -->
      <div class="keyboard-hint text-center mb-3">
        <kbd>↑</kbd> <kbd>↓</kbd> Navigate &nbsp;|&nbsp; 
        <kbd>Enter</kbd> Print Invoice &nbsp;|&nbsp;
        <kbd>Esc</kbd> Cancel
      </div>

      <!-- Shop Cards -->
      <div class="shop-list" id="shop-list">
        {% for shop in shops %}
          <div class="shop-card d-flex align-items-center" 
               data-shop-id="{{ shop.pk }}"
               data-index="{{ forloop.counter0 }}"
               tabindex="{{ forloop.counter }}"
               onclick="selectShop({{ shop.pk }})"
               onkeydown="handleCardKeydown(event, {{ shop.pk }})">
            
            <!-- Logo -->
            <div class="mr-4">
              {% if shop.logo_url %}
                <img src="{{ shop.logo_url }}" alt="Logo" class="shop-logo">
              {% else %}
                <div class="shop-logo-placeholder">
                  <i class="fas fa-store"></i>
                </div>
              {% endif %}
            </div>

            <!-- Info -->
            <div class="shop-info flex-grow-1">
              <h5>{{ shop.shop_name|default:"Unnamed Shop" }}</h5>
              {% if shop.address %}
                <p><i class="fas fa-map-marker-alt text-muted mr-1"></i> {{ shop.address }}</p>
              {% endif %}
              {% if shop.phone_1 %}
                <p><i class="fas fa-phone text-muted mr-1"></i> {{ shop.phone_1 }}</p>
              {% endif %}
            </div>

            <!-- Selection Indicator -->
            <div class="selection-indicator ml-3">
              <i class="fas fa-check-circle fa-2x text-success" style="display:none;"></i>
              <i class="far fa-circle fa-2x text-muted"></i>
            </div>
          </div>
        {% empty %}
          <div class="alert alert-warning text-center">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            No business headers found.
          </div>
        {% endfor %}
      </div>

      <!-- Action Buttons -->
      <div class="text-center mt-4">
        <button type="button" id="btn-proceed" class="btn btn-success btn-proceed" onclick="proceedWithInvoice()">
          <i class="fas fa-print mr-2"></i> Print Invoice
        </button>
        <a href="javascript:history.back()" class="btn btn-secondary btn-proceed ml-2">
          <i class="fas fa-arrow-left mr-2"></i> Cancel
        </a>
      </div>

    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
let selectedShopId = null;
const shopCards = document.querySelectorAll('.shop-card');
const totalShops = shopCards.length;
let currentIndex = 0;

function selectShop(shopId) {
  // Remove previous selection
  shopCards.forEach((card, idx) => {
    card.classList.remove('selected');
    card.querySelector('.fa-check-circle').style.display = 'none';
    card.querySelector('.fa-circle').style.display = 'block';
    
    // Update currentIndex
    if (parseInt(card.dataset.shopId) === shopId) {
      currentIndex = idx;
    }
  });

  // Add selection to clicked card
  const selectedCard = document.querySelector(`.shop-card[data-shop-id="${shopId}"]`);
  if (selectedCard) {
    selectedCard.classList.add('selected');
    selectedCard.querySelector('.fa-check-circle').style.display = 'block';
    selectedCard.querySelector('.fa-circle').style.display = 'none';
    selectedCard.focus();
  }

  selectedShopId = shopId;
  document.getElementById('btn-proceed').disabled = false;
}

function selectByIndex(index) {
  if (index >= 0 && index < totalShops) {
    currentIndex = index;
    const card = shopCards[index];
    selectShop(parseInt(card.dataset.shopId));
  }
}

function proceedWithInvoice() {
  if (!selectedShopId) {
    alert('Please select a business header first.');
    return;
  }

  // Build URL with shop_id
  const baseUrl = "{% url 'invoices:select_fixed_invoice' pk invoice_no t_cat_str %}";
  const finalUrl = baseUrl + selectedShopId + "/";
  
  // Navigate to invoice
  window.location.href = finalUrl;
}

function handleCardKeydown(event, shopId) {
  switch(event.key) {
    case 'Enter':
      event.preventDefault();
      selectShop(shopId);
      proceedWithInvoice();
      break;
    case 'ArrowDown':
      event.preventDefault();
      selectByIndex((currentIndex + 1) % totalShops);
      break;
    case 'ArrowUp':
      event.preventDefault();
      selectByIndex((currentIndex - 1 + totalShops) % totalShops);
      break;
    case 'Escape':
      event.preventDefault();
      history.back();
      break;
  }
}

// Global keyboard listener (when no card is focused)
document.addEventListener('keydown', function(event) {
  // Only if not focused on an input/button
  if (document.activeElement.tagName === 'INPUT' || 
      document.activeElement.tagName === 'BUTTON' ||
      document.activeElement.tagName === 'TEXTAREA') {
    return;
  }
  
  switch(event.key) {
    case 'Enter':
      event.preventDefault();
      proceedWithInvoice();
      break;
    case 'ArrowDown':
      event.preventDefault();
      selectByIndex((currentIndex + 1) % totalShops);
      break;
    case 'ArrowUp':
      event.preventDefault();
      selectByIndex((currentIndex - 1 + totalShops) % totalShops);
      break;
    case 'Escape':
      event.preventDefault();
      history.back();
      break;
  }
});

// Auto-select and focus first shop on page load
document.addEventListener('DOMContentLoaded', function() {
  if (shopCards.length > 0) {
    const firstShopId = parseInt(shopCards[0].dataset.shopId);
    selectShop(firstShopId);
    
    // Focus the first card for keyboard navigation
    setTimeout(() => {
      shopCards[0].focus();
    }, 100);
  }
});
</script>
{% endblock %}