{% extends 'base/base.html' %}
{% load static %}
{% load equipment_tags %}
{% load image_utils %}
{% load cart_tags %}
{% load humanize %}

{% block title %}Equipment Rental | PRACA{% endblock %}

{% block extra_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'css/equipment_list.css' %}">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"></noscript>
<style>
    /* Skip to main content link */
    .skip-to-content {
        position: absolute;
        top: -40px;
        left: 0;
        background: #2563eb;
        color: white;
        padding: 8px 16px;
        z-index: 100;
        transition: top 0.3s;
    }
    
    .skip-to-content:focus {
        top: 0;
    }
    
    /* Equipment Card Styles */
    .equipment-card {
        border: 1px solid var(--primary-color);
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
        position: relative;
        background: #fff;
        min-height: 100%;
    }
    
    /* Focus styles for keyboard navigation */
    .card:focus-visible {
        outline: 3px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.15);
        border-color: var(--primary-hover);
    }
    
    /* Favorite button styles */
    .favorite-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        border-radius: 50%;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .favorite-btn:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    .favorite-btn .fa-heart {
        color: #6c757d;
        transition: transform 0.2s ease;
    }
    
    .favorite-btn .fa-heart.fas {
        color: #dc3545;
    }
    
    .card-img-container {
        position: relative;
        overflow: hidden;
        height: 200px;
        min-height: 200px;
        max-height: 200px;
        flex-shrink: 0;
    }
    
    .card-img-top {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        object-position: center;
    }
    
    .card:hover .card-img-top {
        transform: scale(1.05);
    }
    
    .favorite-btn {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #dc3545;
        z-index: 2;
        transition: all 0.2s ease;
    }
    
    .favorite-btn i {
        font-size: 1.1rem;
    }
    
    .favorite-btn:hover i {
        transform: scale(1.1);
    }
    
    .favorite-btn:hover {
        background: #f8f9fa;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
    }
    
    .card-body {
        padding: 1.25rem;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    
    .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .card-text {
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: 1rem;
        flex: 1 1 auto;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-clamp: 3;
        text-overflow: ellipsis;
        max-height: 4.5em;
    }
    
    .card-footer {
        background: transparent;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding: 0.75rem 1.25rem;
        margin-top: auto;
        flex-shrink: 0;
    }
    
    .badge {
        font-weight: 500;
        padding: 0.35em 0.65em;
    }
    
    /* Responsive adjustments */
    @media (max-width: 1199.98px) {
        .equipment-card {
            min-height: 420px;
        }
        
        .card-img-container {
            height: 180px;
            min-height: 180px;
            max-height: 180px;
        }
    }

    @media (max-width: 991.98px) {
        .equipment-card {
            min-height: 400px;
        }
        
        .card-img-container {
            height: 160px;
            min-height: 160px;
            max-height: 160px;
        }
    }

    @media (max-width: 767.98px) {
        .equipment-card {
            min-height: 380px;
        }
        
        .card-img-container {
            height: 200px;
            min-height: 200px;
            max-height: 200px;
        }
    }
    
    @media (max-width: 575.98px) {
        .equipment-card {
            min-height: 360px;
        }
        
        .card-img-container {
            height: 180px;
            min-height: 180px;
            max-height: 180px;
        }
    }
    
    /* Filter sidebar */
    .filter-card {
        position: sticky;
        top: 20px;
    }
    
    /* CTA section */
    .cta-section {
        background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    }
    
    .testimonial-author img {
        border: 3px solid #f8f9fa;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .star-rating {
        --rating: 0;
        --percent: calc(var(--rating) / 5 * 100%);
        display: inline-block;
        font-size: 1rem;
        line-height: 1;
        position: relative;
        color: #e4e5e9;
    }
    
    .star-rating::before {
        content: '★★★★★';
        letter-spacing: 2px;
        background: linear-gradient(90deg, #ffc107 var(--percent), #e4e5e9 var(--percent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .stats-section {
        padding: 4rem 0;
        background-color: #f8f9fa;
    }
    
    .pagination .page-link {
        color: #0d6efd;
        border: 1px solid #dee2e6;
    }
    
    .pagination .page-item.active .page-link {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
    
    .pagination .page-item.disabled .page-link {
        color: #6c757d;
    }
    
    @media (max-width: 991.98px) {
        .equipment-hero {
            padding: 6rem 0;
        }
    }
    
    @media (max-width: 767.98px) {
        .equipment-hero {
            padding: 5rem 0;
        }
    }
</style>
{% endblock %}
{% block content %}
<!-- Skip to main content link (hidden until focused) -->
<a href="#main-content" class="skip-to-content visually-hidden-focusable">Skip to main content</a>

<main id="main-content" class="container py-4" tabindex="-1">
  <!-- Filter Bar -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="card shadow-sm">
        <div class="card-body p-3">
          <form method="get" class="row g-2 align-items-center">
            <!-- Search Input -->
            <div class="col-md-5">
              <label for="search-input" class="visually-hidden">Search</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fas fa-search"></i></span>
                <input type="text" 
                       id="search-input"
                       class="form-control" 
                       name="q" 
                       value="{{ request.GET.q }}" 
                       placeholder="Search equipment..."
                       aria-label="Search equipment">
              </div>
            </div>
            
            <!-- Category Filter -->
            <div class="col-md-3">
              <label for="category-filter" class="visually-hidden">Category</label>
              <select class="form-select" id="category-filter" name="category" onchange="this.form.submit()">
                <option value="">All Categories</option>
                {% for cat in categories %}
                <option value="{{ cat.id }}" {% if request.GET.category == cat.id|stringformat:'s' %}selected{% endif %}>
                  {{ cat.name }}
                </option>
                {% endfor %}
              </select>
            </div>
            
            <!-- Sort Options -->
            <div class="col-md-3">
              <label for="sort-options" class="visually-hidden">Sort By</label>
              <select class="form-select" id="sort-options" name="sort" onchange="this.form.submit()">
                <option value="newest" {% if sort == 'newest' or not sort %}selected{% endif %}>Newest First</option>
                <option value="price_asc" {% if sort == 'price_asc' %}selected{% endif %}>Price: Low to High</option>
                <option value="price_desc" {% if sort == 'price_desc' %}selected{% endif %}>Price: High to Low</option>
              </select>
            </div>
            
            <!-- Reset Button -->
            <div class="col-md-1">
              <a href="{% url 'equipment:list' %}" class="btn btn-outline-secondary w-100" title="Reset filters">
                <i class="fas fa-sync-alt"></i>
                <span class="visually-hidden">Reset filters</span>
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col-12">
      <h1 class="h3 mb-0">
        {% if category %}
          {{ category.name }} Equipment
        {% else %}
          All Equipment
        {% endif %}
        <span class="text-muted small fw-normal">({{ page_obj.paginator.count }} items)</span>
      </h1>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      {% if page_obj %}
        <div class="row g-4" id="equipment-grid">
          {% for group in page_obj %}
            {% with item=group.item %}
            <div class="col-12 col-md-6 col-lg-4 mb-4">
              <div class="card h-100 position-relative equipment-card hover-shadow"
                   role="article" 
                   aria-labelledby="equipment-{{ item.id }}-title"
                   tabindex="0"
                   data-url="{% url 'equipment:detail' item.slug %}">
              
              {% if item.is_featured %}
              <div class="position-absolute top-0 start-0 m-2">
                <span class="badge bg-warning text-dark">
                  <i class="fas fa-star me-1"></i> Featured
                </span>
              </div>
              {% endif %}
              
              {% if request.user.is_authenticated %}
                {% with is_favorite=item|in_favorites:request.user %}
                  <button
                      class="favorite-btn position-absolute top-0 end-0 m-2 p-2 bg-white rounded-circle border-0 shadow-sm"
                      data-item-id="{{ item.id }}"
                      data-favorite-url="{% url 'equipment:favorite_toggle' %}"
                      data-csrf-token="{{ csrf_token }}"
                      aria-label="{% if is_favorite %}Remove from favorites{% else %}Add to favorites{% endif %}"
                      title="{% if is_favorite %}Remove from favorites{% else %}Add to favorites{% endif %}"
                      style="z-index: 2;"
                  >
                      <i class="{% if is_favorite %}fas{% else %}far{% endif %} fa-heart text-danger"></i>
                  </button>
                {% endwith %}
              {% else %}
                <button
                    class="favorite-btn position-absolute top-0 end-0 m-2 p-2 bg-white rounded-circle border-0 shadow-sm"
                    data-bs-toggle="tooltip"
                    data-bs-placement="left"
                    title="Sign in to add to favorites"
                    aria-label="Sign in to favorite"
                    style="z-index: 2;"
                >
                    <i class="far fa-heart text-secondary"></i>
                </button>
              {% endif %}

              <div class="card-img-container position-relative" style="background-color: #f8f9fa; min-height: 200px;">
                {% if item.images.first %}
                    {% responsive_image item.images.first.image item.name 'card-img-top' %}
                {% else %}
                    <img src="{% static 'images/placeholder-equipment.jpg' %}" 
                         alt="No image available for {{ item.name }}"
                         class="card-img-top"
                         style="object-fit: contain; height: 200px; width: 100%;">
                {% endif %}
                
                <!-- Image gallery indicator if multiple images -->
                {% if item.images.count > 1 %}
                <div class="position-absolute bottom-0 end-0 m-2">
                  <span class="badge bg-dark bg-opacity-75">
                    <i class="fas fa-images me-1"></i> {{ item.images.count }}
                  </span>
                </div>
                {% endif %}
                
                <!-- Quick View Button -->
                <div class="position-absolute top-50 start-50 translate-middle">
                  <button class="btn btn-primary btn-sm quick-view-btn" 
                          data-bs-toggle="modal" 
                          data-bs-target="#quickViewModal"
                          data-item-id="{{ item.id }}"
                          data-item-name="{{ item.name }}"
                          data-item-price="{{ item.price_per_day|floatformat:2 }}"
                          data-item-category="{{ item.category.name }}"
                          data-item-description="{{ item.description|truncatewords:20 }}"
                          data-item-image="{% if item.images.first %}{{ item.images.first.image.url }}{% else %}{% static 'images/placeholder-equipment.jpg' %}{% endif %}">
                    Quick View
                  </button>
                               name="start_date" 
                               required
                               min="{{ today|date:'Y-m-d' }}">
                      </div>
                      <div class="col-6">
                        <label for="end_date_{{ item.id }}" class="form-label small text-muted mb-1">End Date</label>
                        <input type="date" 
                               class="form-control form-control-sm" 
                               id="end_date_{{ item.id }}" 
                               name="end_date" 
                               required
                               min="{{ today|date:'Y-m-d' }}">
                      </div>
                    </div>
                  </div>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="input-group input-group-sm" style="width: 120px;">
                      <button type="button" class="btn btn-outline-secondary quantity-decrease">-</button>
                      <input type="number" 
                             class="form-control text-center" 
                             name="quantity" 
                             value="1" 
                             min="1" 
                             max="{{ item.quantity_available|default:10 }}">
                      <button type="button" class="btn btn-outline-secondary quantity-increase">+</button>
                    </div>
                    <button type="submit" class="btn btn-primary flex-grow-1 ms-2">
                      <i class="fas fa-cart-plus me-1"></i> Add to Cart
                    </button>
                  </div>
                </form>
                <div class="d-flex justify-content-between align-items-center mt-2">
                  <div>
                    <span class="h5 mb-0 text-primary">KSh {{ item.daily_rate|intcomma }}</span>
                    <span class="text-muted d-block small">per day</span>
                  </div>
                  <a href="{% url 'equipment:detail' item.slug %}" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-info-circle me-1"></i> Details
                  </a>
                </div>
              </div>
            </div>
          </div>
          {% endwith %}
        {% endfor %}
      </div>
      {% else %}
        <div class="col-12">
          <div class="d-flex align-items-center justify-content-center py-5 px-3" style="min-height: 60vh;">
            <div class="empty-state-container animate__animated animate__fadeIn">
              <div class="text-center">
                <div class="position-relative d-inline-block mb-4">
                  <i class="fas fa-tools fa-5x mb-3 tools-icon"></i>
                  <div class="position-absolute top-0 start-100 translate-middle">
                    <i class="fas fa-search search-icon" style="font-size: 1.5rem;"></i>
                  </div>
                </div>
                
                <h3 class="h4 mb-3 fw-semibold">No Equipment Found</h3>
                <p class="text-muted mb-4">
                  We couldn't find any equipment matching your criteria. Try adjusting your search or filters.
                </p>
                
                <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                  <a href="{% url 'equipment:list' %}" class="btn btn-primary px-4 btn-clear-filters">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    <span class="btn-text">
                      <i class="fas fa-filter me-2"></i>Clear Filters
                    </span>
                  </a>
                  <a href="{% url 'equipment:list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-redo me-2"></i>Refresh
                  </a>
                </div>
                
                <div class="mt-4">
                  <p class="small text-muted mb-2">Or try these suggestions:</p>
                  <div class="d-flex flex-wrap justify-content-center gap-2">
                    <a href="?category=" class="badge bg-light text-decoration-none text-dark border">
                      All Categories
                    </a>
                    <a href="?sort=newest" class="badge bg-light text-decoration-none text-dark border">
                      Newest First
                    </a>
                    <a href="?q=" class="badge bg-light text-decoration-none text-dark border">
                      Clear Search
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>
          @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
          }
          @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
          }
          .animate__animated {
            animation-duration: 0.5s;
          }
          .empty-state-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 2rem;
            border-radius: 1rem;
            background: #fff;
            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05);
          }
          .tools-icon {
            animation: float 3s ease-in-out infinite;
            color: var(--primary);
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
            -webkit-filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
          }
          .btn-clear-filters {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
          }
          .btn-clear-filters .spinner-border {
            display: none;
            width: 1rem;
            height: 1rem;
            margin-right: 0.5rem;
            border-width: 0.15em;
          }
          .btn-clear-filters.loading .spinner-border {
            display: inline-block;
          }
          .btn-clear-filters.loading .btn-text {
            opacity: 0.7;
          }
          .search-icon {
            animation: bounce 2s infinite;
            color: var(--warning);
          }
        </style>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
          // Clear filters button handler
          var clearFiltersBtn = document.querySelector('.btn-clear-filters');
          if (clearFiltersBtn) {
            clearFiltersBtn.addEventListener('click', function(e) {
              if (window.location.search) {
                e.preventDefault();
                this.classList.add('loading');
                this.disabled = true;
                
                // Add a small delay for better UX
                window.setTimeout(function() {
                  window.location.href = '{% url 'equipment:list' %}';
                }, 300);
              }
            });
          }
          
          // Add subtle animation to the tools icon
          var toolsIcon = document.querySelector('.tools-icon');
          if (toolsIcon) {
            toolsIcon.style.transition = 'transform 0.3s ease';
            
            window.setInterval(function() {
              toolsIcon.style.transform = 'rotate(5deg)';
              window.setTimeout(function() {
                toolsIcon.style.transform = 'rotate(-5deg)';
              }, 300);
              window.setTimeout(function() {
                toolsIcon.style.transform = 'rotate(0)';
              }, 600);
            }, 10000); // Run every 10 seconds
          }
        });
        </script>
      {% endif %}
      
      <!-- Pagination -->
      {% if is_paginated %}
      <nav aria-label="Equipment pagination" class="mt-5">
        <ul class="pagination justify-content-center">
          {% if page_obj.has_previous %}
            <li class="page-item">
              <a class="page-link" href="?{% url_replace request page=page_obj.previous_page_number %}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
          {% else %}
            <li class="page-item disabled">
              <span class="page-link" aria-hidden="true">&laquo;</span>
            </li>
          {% endif %}
          
          {% for i in page_obj.paginator.page_range %}
            {% if page_obj.number == i %}
              <li class="page-item active" aria-current="page">
                <span class="page-link">{{ i }}</span>
              </li>
            {% else %}
              <li class="page-item">
                <a class="page-link" href="?{% url_replace request page=i %}">{{ i }}</a>
              </li>
            {% endif %}
          {% endfor %}
          
          {% if page_obj.has_next %}
            <li class="page-item">
              <a class="page-link" href="?{% url_replace request page=page_obj.next_page_number %}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          {% else %}
            <li class="page-item disabled">
              <span class="page-link" aria-hidden="true">&raquo;</span>
            </li>
          {% endif %}
        </ul>
      </nav>
      {% endif %}
    </div>
    
    <!-- Filters Sidebar -->
    <div class="col-lg-3">
      <!-- Sidebar content here -->
    </div>
  </div>
</main>

{% if user.is_superuser %}
<!-- Debug Information - Only visible to superusers -->
<div class="container mt-5 border-top pt-3">
    <div class="alert alert-warning">
        <h4 class="alert-heading">Debug Information</h4>
        <p class="mb-2"><strong>Page Object:</strong> {{ page_obj|yesno:"Exists,None" }}</p>
        <p class="mb-2"><strong>Equipment Count:</strong> {{ page_obj.paginator.count|default:0 }}</p>
        
        {% if page_obj %}
        <div class="mt-3">
            <h5>First 3 Equipment Items:</h5>
            <div class="table-responsive">
                <table class="table table-sm table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Approved</th>
                            <th>Daily Rate</th>
                            <th>Owner</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in page_obj|slice:":3" %}
                        <tr>
                            <td>{{ item.id }}</td>
                            <td>{{ item.name|truncatechars:30 }}</td>
                            <td>{{ item.status }}</td>
                            <td>{{ item.is_approved|yesno:"Yes,No" }}</td>
                            <td>${{ item.daily_rate|floatformat:2 }}</td>
                            <td>{{ item.owner.username|default:"System" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
        
        <div class="mt-3">
            <h5>Query Parameters:</h5>
            <pre class="bg-light p-2">{{ request.GET|pprint|escape }}</pre>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

{% if not user.is_authenticated %}
<!-- CTA Section for non-logged in users -->
<style>
    .cta-section {
        position: relative;
        background: linear-gradient(135deg, #212529 0%, #343a40 100%);
        color: #f8f9fa;
        padding: 4rem 0;
        margin-top: 2rem;
        overflow: hidden;
    }
    .cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.1);
        z-index: 0;
    }
    .cta-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    }
</style>

<section class="cta-section">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <div class="cta-card p-4 p-lg-5">
                    <h2 class="text-white mb-3">Ready to rent or list your equipment?</h2>
                    <p class="lead text-light mb-4">Join our community of content creators and equipment owners today.</p>
                    <div class="d-flex flex-wrap gap-3 justify-content-center">
                        <a href="{% url 'account_signup' %}?user_type=renter" class="btn btn-primary btn-lg px-4">
                            <i class="fas fa-camera me-2" aria-hidden="true"></i> Start Renting
                        </a>
                        <a href="{% url 'account_signup' %}?user_type=owner" class="btn btn-outline-light btn-lg px-4">
                            <i class="fas fa-plus-circle me-2" aria-hidden="true"></i> List Equipment
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}

{% block extra_js %}
{{ block.super }}
{# Include parent's content first #}
<script>
// Configuration object as JSON
const APP_CONFIG_JSON = `{
    "isAuthenticated": {% if request.user.is_authenticated %}true{% else %}false{% endif %},
    "loginUrl": "{% url 'account_login' %}",
    "currentPath": "{{ request.path|escapejs }}",
    "csrfToken": "{{ csrf_token }}"
}`;

// Parse the JSON configuration
const APP_CONFIG = JSON.parse(APP_CONFIG_JSON);

// Function to show toast notifications
function showToast(title, message, type = 'info') {
    const toastEl = document.getElementById('cartToast');
    const toastHeader = toastEl.querySelector('.toast-header');
    const toastTitle = toastEl.querySelector('.toast-title');
    const toastMessage = document.getElementById('toastMessage');
    
    if (!toastEl || !toastMessage) return;
    
    // Set toast type (success, error, info, etc.)
    const bgClass = {
        'success': 'bg-success',
        'error': 'bg-danger',
        'warning': 'bg-warning',
        'info': 'bg-info'
    }[type] || 'bg-info';
    
    // Update toast content
    if (toastTitle) {
        toastTitle.textContent = title;
    }
    toastMessage.textContent = message;
    
    // Update toast header class
    toastHeader.className = `toast-header text-white ${bgClass}`;
    
    // Show the toast
    const toast = new bootstrap.Toast(toastEl);
    toast.show();
}

document.addEventListener('DOMContentLoaded', function() {
    // Sort select handler
    const sortSelect = document.getElementById('sort-select');
    if (sortSelect) {
        sortSelect.addEventListener('change', function() {
            this.form.submit();
        });
    }
    
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Handle click on equipment cards
    document.addEventListener('click', function(e) {
        const card = e.target.closest('.equipment-card');
        if (card && !e.target.closest('a') && !e.target.closest('button') && !e.target.closest('input') && !e.target.closest('select') && !e.target.closest('label')) {
            const url = card.getAttribute('data-url');
            if (url) {
                window.location.href = url;
            }
        }
    });
    
    // Handle keyboard navigation on equipment cards
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            const card = document.activeElement.closest('.equipment-card');
            if (card && document.activeElement === card) {
                e.preventDefault();
                const url = card.getAttribute('data-url');
                if (url) {
                    window.location.href = url;
                }
            }
        }
    });
    
    // Quantity controls
    document.querySelectorAll('.quantity-increase').forEach(button => {
        button.addEventListener('click', function() {
            const input = this.parentNode.querySelector('input[type=number]');
            input.stepUp();
        });
    });

    document.querySelectorAll('.quantity-decrease').forEach(button => {
        button.addEventListener('click', function() {
            const input = this.parentNode.querySelector('input[type=number]');
            input.stepDown();
        });
    });
    
    // Set minimum end date based on start date
    document.querySelectorAll('input[type="date"]').forEach(dateInput => {
        if (dateInput.name === 'start_date') {
            dateInput.addEventListener('change', function() {
                const endDateInput = this.closest('form').querySelector('input[name="end_date"]');
                if (endDateInput) {
                    endDateInput.setAttribute('min', this.value);
                    if (endDateInput.value && endDateInput.value < this.value) {
                        endDateInput.value = this.value;
                    }
                }
            });
        }
    });
    
    // Favorite functionality
    document.querySelectorAll('.favorite-btn').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // If user is not authenticated, redirect to login
            if (!APP_CONFIG.isAuthenticated && !this.getAttribute('data-bs-toggle')) {
                window.location.href = `${APP_CONFIG.loginUrl}?next=${encodeURIComponent(APP_CONFIG.currentPath)}`;
                return;
            }
            
            const itemId = this.getAttribute('data-item-id');
            const favoriteUrl = this.getAttribute('data-favorite-url');
            const csrfToken = this.getAttribute('data-csrf-token');
            const icon = this.querySelector('i');
            
            if (!favoriteUrl || !itemId) return;
            
            const button = this; // Capture 'this' reference
            const originalHTML = button.innerHTML; // Save original button content
            
            // Show loading state
            button.disabled = true;
            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            
            fetch(favoriteUrl, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken || APP_CONFIG.csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                credentials: 'same-origin',
                body: `equipment_id=${encodeURIComponent(itemId)}`
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    // Update button appearance based on action
                    if (data.action === 'added') {
                        icon.className = 'fas fa-heart text-danger';
                        button.setAttribute('aria-label', 'Remove from favorites');
                        button.setAttribute('title', 'Remove from favorites');
                    } else {
                        icon.className = 'far fa-heart text-danger';
                        button.setAttribute('aria-label', 'Add to favorites');
                        button.setAttribute('title', 'Add to favorites');
                    }
                    
                    // Show success message
                    showToast(
                        data.action === 'added' ? 'Added to Favorites' : 'Removed from Favorites',
                        data.message,
                        'success'
                    );
                } else {
                    throw new Error(data.message || 'An error occurred');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // Revert button to original state
                button.innerHTML = originalHTML;
                showToast('Error', 'Failed to update favorites. Please try again.', 'error');
            })
            .finally(() => {
                button.disabled = false;
            });
        });
    });
    
    // Handle add to cart form submission
    document.querySelectorAll('.add-to-cart-form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const url = this.getAttribute('action');
            const submitButton = this.querySelector('button[type="submit"]');
            const originalButtonText = submitButton.innerHTML;
            
            if (!url) {
                console.error('No action URL specified for the form');
                return;
            }
            
            // Disable button and show loading state
            submitButton.disabled = true;
            submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Adding...';
            
            const form = this; // Capture form reference
            fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || APP_CONFIG.csrfToken
                },
                credentials: 'same-origin'
            })
            .then((response) => response.json())
            .then((data) => {
                if (data.success) {
                    // Update cart count in navbar if it exists
                    const cartCount = document.querySelector('.cart-count');
                    if (cartCount) {
                        cartCount.textContent = data.cart_total_items || 0;
                    }
                    
                    // Show success message
                    showToast('Success', data.message || 'Item added to cart successfully!', 'success');
                    
                    // Optional: Scroll to cart if on mobile
                    if (window.innerWidth < 768) {
                        const cartLink = document.querySelector('.cart-link');
                        if (cartLink) {
                            cartLink.scrollIntoView({ behavior: 'smooth' });
                        }
                    }
                } else {
                    // Show error message
                    showToast('Error', data.message || 'There was an error adding this item to your cart.', 'error');
                }
                
                // Reset form
                form.reset();
            })
            .catch((error) => {
                console.error('Error:', error);
                alert('There was an error adding this item to your cart.');
            })
            .finally(() => {
                // Re-enable button
                submitButton.disabled = false;
                submitButton.innerHTML = originalButtonText;
            });
        });
    });
});
</script>

<!-- Toast Notification -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1100">
  <div id="cartToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-success text-white">
      <strong class="me-auto toast-title">Success</strong>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body" id="toastMessage">
      Item added to cart successfully!
    </div>
  </div>
</div>
{% endblock %}