@extends('layouts.bootstrap')

@section('title', 'Ticket Categories')
@section('breadcrumb', 'Dashboard / Ticket Management / Ticket Categories')

@section('content')
<!-- Toolbar -->
<div class="card shadow-sm mb-3">
  <div class="card-body d-flex flex-wrap gap-2 align-items-center justify-content-between">
    <div class="d-flex flex-wrap gap-2 align-items-center">
      @if(auth()->user()->hasPermission('manage-categories'))
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
        <i class="bi bi-plus-circle me-1"></i>Create Category
      </button>
      <button class="btn btn-outline-danger" onclick="bulkDelete()">
        <i class="bi bi-trash me-1"></i>Delete Selected
      </button>
      @endif
    </div>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <input id="quickSearch" class="form-control" placeholder="Search categories..." style="min-width:240px">
      <div class="dropdown">
        <button class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
          <i class="bi bi-funnel me-1"></i>Filter
        </button>
        <div class="dropdown-menu dropdown-menu-end p-2" style="min-width:200px">
          <button class="btn btn-outline-primary w-100 mb-2" onclick="filterStatus('all')">All Categories</button>
          <button class="btn btn-outline-success w-100 mb-2" onclick="filterStatus('active')">Active Only</button>
          <button class="btn btn-outline-secondary w-100" onclick="filterStatus('inactive')">Inactive Only</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Categories Grid -->
<div class="row g-3" id="categoriesGrid">
  @forelse($categories as $category)
  <div class="col-md-6 col-lg-4 col-xl-3 category-card" data-status="{{ $category->is_active ? 'active' : 'inactive' }}">
    <div class="card shadow-sm card-hover h-100">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between mb-3">
          <div class="d-flex align-items-center">
            @if($category->icon)
              <i class="{{ $category->icon }} fs-4 me-2" style="color: {{ $category->color }}"></i>
            @else
              <div class="rounded-circle d-flex align-items-center justify-content-center me-2" 
                   style="width: 32px; height: 32px; background-color: {{ $category->color }}20; color: {{ $category->color }}">
                <i class="bi bi-tag fs-6"></i>
              </div>
            @endif
            <div>
              <h6 class="mb-0">{{ $category->name }}</h6>
              <small class="text-muted">{{ $category->slug }}</small>
            </div>
          </div>
          <div class="form-check">
            <input class="form-check-input category-checkbox" type="checkbox" value="{{ $category->id }}">
          </div>
        </div>
        
        @if($category->description)
        <p class="small text-muted mb-3">{{ Str::limit($category->description, 80) }}</p>
        @endif
        
        <div class="row g-2 small mb-3">
          <div class="col-6">
            <span class="text-secondary d-block">Total Tickets</span>
            <strong>{{ $category->ticket_count }}</strong>
          </div>
          <div class="col-6">
            <span class="text-secondary d-block">Active Tickets</span>
            <strong class="{{ $category->active_ticket_count > 0 ? 'text-warning' : 'text-success' }}">
              {{ $category->active_ticket_count }}
            </strong>
          </div>
        </div>
        
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center gap-2">
            @if($category->is_active)
              <span class="badge bg-success">Active</span>
            @else
              <span class="badge bg-secondary">Inactive</span>
            @endif
            <span class="badge bg-light text-dark">Order: {{ $category->sort_order }}</span>
          </div>
            <div class="btn-group">
              <button class="btn btn-sm btn-outline-secondary" onclick="openViewCategoryModal({{ $category->id }})" title="View">
                <i class="bi bi-eye"></i>
              </button>
              @if(auth()->user()->hasPermission('manage-categories'))
              <button class="btn btn-sm btn-outline-primary" onclick="openEditCategoryModal({{ $category->id }})" title="Edit">
                <i class="bi bi-pencil"></i>
              </button>
            <button class="btn btn-sm btn-outline-danger" 
                    onclick="deleteCategory({{ $category->id }}, '{{ $category->name }}', {{ $category->active_ticket_count }})" 
                    title="Delete">
              <i class="bi bi-trash"></i>
            </button>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
  @empty
  <div class="col-12">
    <div class="card shadow-sm">
      <div class="card-body text-center py-5">
        <i class="bi bi-tags fs-1 text-muted mb-3"></i>
        <h5 class="text-muted">No Categories Found</h5>
        <p class="text-muted">Create your first ticket category to get started.</p>
        @if(auth()->user()->hasPermission('manage-categories'))
        <a href="{{ route('ticket-categories.create') }}" class="btn btn-primary">
          <i class="bi bi-plus-circle me-1"></i>Create Category
        </a>
        @endif
      </div>
    </div>
  </div>
  @endforelse
</div>

@if($categories->hasPages())
<div class="d-flex justify-content-center mt-4">
  {{ $categories->links() }}
</div>
@endif

<!-- Delete Form -->
<form id="deleteForm" method="POST" style="display: none;">
  @csrf
  @method('DELETE')
</form>

<!-- Create Category Modal -->
<div class="modal fade" id="createCategoryModal" tabindex="-1" aria-labelledby="createCategoryModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="createCategoryModalLabel">
          <i class="bi bi-plus-circle me-2"></i>Create New Category
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="createCategoryForm">
        @csrf
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="category_name" class="form-label">Category Name <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="category_name" name="name" required>
              </div>
              <div class="mb-3">
                <label for="category_color" class="form-label">Color <span class="text-danger">*</span></label>
                <input type="color" class="form-control form-control-color" id="category_color" name="color" value="#6c757d" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label for="category_icon" class="form-label">Icon</label>
                <input type="text" class="form-control" id="category_icon" name="icon" placeholder="e.g., bi-tag">
                <div class="form-text">Bootstrap icon class (e.g., bi-tag, bi-bug)</div>
              </div>
              <div class="mb-3">
                <label for="category_sort_order" class="form-label">Sort Order</label>
                <input type="number" class="form-control" id="category_sort_order" name="sort_order" value="0" min="0">
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label for="category_description" class="form-label">Description</label>
            <textarea class="form-control" id="category_description" name="description" rows="3" placeholder="Brief description of the category"></textarea>
          </div>
          
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="category_is_active" name="is_active" checked>
            <label class="form-check-label" for="category_is_active">
              Active
            </label>
          </div>
          
          <!-- Category Preview -->
          <div class="card mt-3">
            <div class="card-header bg-light">
              <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>Category Preview</h6>
            </div>
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="me-3" id="categoryPreviewIcon" style="width: 40px; height: 40px; border-radius: 50%; background: #6c757d20; color: #6c757d; display: flex; align-items: center; justify-content: center;">
                  <i class="bi bi-tag"></i>
                </div>
                <div>
                  <h6 class="mb-0" id="categoryPreviewName">Category Name</h6>
                  <small class="text-muted" id="categoryPreviewSlug">category-name</small>
                </div>
              </div>
              <p class="small text-muted mt-2 mb-0" id="categoryPreviewDescription">Category description will appear here</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i>Create Category
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit Category Modal -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editCategoryModalLabel">
          <i class="bi bi-pencil me-2"></i>Edit Category
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editCategoryForm">
        @csrf
        @method('PUT')
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="edit_category_name" class="form-label">Category Name <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="edit_category_name" name="name" required>
              </div>
              <div class="mb-3">
                <label for="edit_category_color" class="form-label">Color <span class="text-danger">*</span></label>
                <input type="color" class="form-control form-control-color" id="edit_category_color" name="color" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label for="edit_category_icon" class="form-label">Icon</label>
                <input type="text" class="form-control" id="edit_category_icon" name="icon" placeholder="e.g., bi-tag">
                <div class="form-text">Bootstrap icon class (e.g., bi-tag, bi-bug)</div>
              </div>
              <div class="mb-3">
                <label for="edit_category_sort_order" class="form-label">Sort Order</label>
                <input type="number" class="form-control" id="edit_category_sort_order" name="sort_order" min="0">
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label for="edit_category_description" class="form-label">Description</label>
            <textarea class="form-control" id="edit_category_description" name="description" rows="3" placeholder="Brief description of the category"></textarea>
          </div>
          
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="edit_category_is_active" name="is_active">
            <label class="form-check-label" for="edit_category_is_active">
              Active
            </label>
          </div>
          
          <!-- Category Preview -->
          <div class="card mt-3">
            <div class="card-header bg-light">
              <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>Category Preview</h6>
            </div>
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="me-3" id="editCategoryPreviewIcon" style="width: 40px; height: 40px; border-radius: 50%; background: #6c757d20; color: #6c757d; display: flex; align-items: center; justify-content: center;">
                  <i class="bi bi-tag"></i>
                </div>
                <div>
                  <h6 class="mb-0" id="editCategoryPreviewName">Category Name</h6>
                  <small class="text-muted" id="editCategoryPreviewSlug">category-name</small>
                </div>
              </div>
              <p class="small text-muted mt-2 mb-0" id="editCategoryPreviewDescription">Category description will appear here</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-circle me-1"></i>Update Category
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- View Category Modal -->
<div class="modal fade" id="viewCategoryModal" tabindex="-1" aria-labelledby="viewCategoryModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="viewCategoryModalLabel">
          <i class="bi bi-eye me-2"></i>View Category
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="viewCategoryContent">
        <div class="text-center py-4">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <p class="mt-2 text-muted">Loading category details...</p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
// Simple client-side search
const q = document.getElementById('quickSearch');
if (q) {
  q.addEventListener('input', () => {
    const term = q.value.toLowerCase();
    document.querySelectorAll('.category-card').forEach(card => {
      const text = card.innerText.toLowerCase();
      card.style.display = text.includes(term) ? '' : 'none';
    });
  });
}

function filterStatus(status) {
  document.querySelectorAll('.category-card').forEach(card => {
    const cardStatus = card.getAttribute('data-status');
    if (status === 'all' || cardStatus === status) {
      card.style.display = '';
    } else {
      card.style.display = 'none';
    }
  });
}

function bulkDelete() {
  const checkedBoxes = document.querySelectorAll('.category-checkbox:checked');
  if (checkedBoxes.length === 0) {
    alert('Please select categories to delete');
    return;
  }
  
  if (confirm(`Are you sure you want to delete ${checkedBoxes.length} category(ies)?`)) {
    // Implement bulk delete logic
    console.log('Bulk delete:', Array.from(checkedBoxes).map(cb => cb.value));
  }
}

function deleteCategory(categoryId, categoryName, activeTicketCount) {
  if (activeTicketCount > 0) {
    alert(`Cannot delete "${categoryName}". It has ${activeTicketCount} active ticket(s) (open or in progress).`);
    return;
  }
  
  if (confirm(`Are you sure you want to delete "${categoryName}"?`)) {
    console.log('Delete request started for category:', categoryId);
    
    // Use AJAX for deletion
    fetch(`/ticket-categories/${categoryId}`, {
      method: 'DELETE',
      headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      credentials: 'same-origin'
    })
    .then(response => {
      console.log('Delete response status:', response.status);
      console.log('Delete response ok:', response.ok);
      
      if (response.ok) {
        return response.json();
      } else {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
    })
    .then(data => {
      console.log('Delete success response:', data);
      if (data.success) {
        alert(data.success);
        location.reload();
      } else {
        alert(data.error || 'An error occurred');
      }
    })
    .catch(error => {
      console.error('Delete error:', error);
      alert('An error occurred while deleting the category');
    });
  }
}

// View Category Modal Functions
function openViewCategoryModal(categoryId) {
  console.log('Opening view modal for category:', categoryId);
  
  // Show loading state
  document.getElementById('viewCategoryContent').innerHTML = `
    <div class="text-center py-4">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <p class="mt-2 text-muted">Loading category details...</p>
    </div>
  `;
  
  // Show modal first
  const viewModal = new bootstrap.Modal(document.getElementById('viewCategoryModal'));
  viewModal.show();
  
  // Fetch category data
  fetch(`/ticket-categories/${categoryId}`, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    credentials: 'same-origin'
  })
  .then(response => {
    console.log('View response status:', response.status);
    if (response.ok) {
      return response.json();
    } else {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
  })
  .then(data => {
    console.log('View response data:', data);
    const category = data.category;
    const tickets = data.tickets || [];
    
    // Build view content
    const content = `
      <div class="row">
        <div class="col-md-8">
          <div class="d-flex align-items-center mb-3">
            <div class="me-3" style="width: 50px; height: 50px; border-radius: 50%; background: ${category.color}20; color: ${category.color}; display: flex; align-items: center; justify-content: center;">
              <i class="${category.icon || 'bi-tag'} fs-4"></i>
            </div>
            <div>
              <h4 class="mb-0">${category.name}</h4>
              <small class="text-muted">${category.slug}</small>
            </div>
          </div>
          
          ${category.description ? `<p class="text-muted">${category.description}</p>` : ''}
          
          <div class="row g-3 mb-3">
            <div class="col-md-4">
              <div class="card bg-light">
                <div class="card-body text-center">
                  <h5 class="mb-0">${data.ticket_count || 0}</h5>
                  <small class="text-muted">Total Tickets</small>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card bg-light">
                <div class="card-body text-center">
                  <h5 class="mb-0 text-warning">${data.active_ticket_count || 0}</h5>
                  <small class="text-muted">Active Tickets</small>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card bg-light">
                <div class="card-body text-center">
                  <h5 class="mb-0">${category.sort_order}</h5>
                  <small class="text-muted">Sort Order</small>
                </div>
              </div>
            </div>
          </div>
          
          <div class="d-flex align-items-center gap-2">
            ${category.is_active ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-secondary">Inactive</span>'}
            <span class="badge bg-light text-dark">Created ${new Date(category.created_at).toLocaleDateString()}</span>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="card">
            <div class="card-header">
              <h6 class="mb-0">Recent Tickets</h6>
            </div>
            <div class="card-body">
              ${tickets.length > 0 ? 
                tickets.slice(0, 5).map(ticket => `
                  <div class="d-flex justify-content-between align-items-center mb-2">
                    <div>
                      <small class="fw-bold">${ticket.title}</small>
                      <br>
                      <small class="text-muted">by ${ticket.user ? ticket.user.name : 'Unknown'}</small>
                    </div>
                    <span class="badge bg-${ticket.status === 'open' ? 'success' : ticket.status === 'in_progress' ? 'warning' : 'secondary'}">${ticket.status}</span>
                  </div>
                `).join('') : 
                '<p class="text-muted small">No tickets in this category</p>'
              }
            </div>
          </div>
        </div>
      </div>
    `;
    
    document.getElementById('viewCategoryContent').innerHTML = content;
  })
  .catch(error => {
    console.error('Error fetching category data:', error);
    document.getElementById('viewCategoryContent').innerHTML = `
      <div class="alert alert-danger">
        <i class="bi bi-exclamation-triangle me-2"></i>
        Error loading category data: ${error.message}
      </div>
    `;
  });
}

// Edit Category Modal Functions
function openEditCategoryModal(categoryId) {
  console.log('Opening edit modal for category:', categoryId);
  
  // Fetch category data
  fetch(`/ticket-categories/${categoryId}`, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    credentials: 'same-origin'
  })
  .then(response => {
    console.log('Edit data response status:', response.status);
    if (response.ok) {
      return response.json();
    } else {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
  })
  .then(data => {
    console.log('Edit data response:', data);
    const category = data.category;
    
    // Populate form fields
    document.getElementById('edit_category_name').value = category.name;
    document.getElementById('edit_category_description').value = category.description || '';
    document.getElementById('edit_category_color').value = category.color;
    document.getElementById('edit_category_icon').value = category.icon || '';
    document.getElementById('edit_category_sort_order').value = category.sort_order || 0;
    document.getElementById('edit_category_is_active').checked = category.is_active;
    
    // Set form action
    document.getElementById('editCategoryForm').action = `/ticket-categories/${categoryId}`;
    
    // Update preview
    updateEditCategoryPreview();
    
    // Show modal
    const editModal = new bootstrap.Modal(document.getElementById('editCategoryModal'));
    editModal.show();
  })
  .catch(error => {
    console.error('Error fetching category data:', error);
    alert('Error loading category data: ' + error.message);
  });
}

// Create Category Modal Functions
document.addEventListener('DOMContentLoaded', function() {
  const createForm = document.getElementById('createCategoryForm');
  if (!createForm) {
    console.error('Create category form not found');
    return;
  }
  
  createForm.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    console.log('Form submission started');
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    
    // Convert checkbox values to boolean
    if (data.is_active === 'on') {
      data.is_active = true;
    } else {
      data.is_active = false;
    }
    
    // Convert sort_order to integer
    if (data.sort_order) {
      data.sort_order = parseInt(data.sort_order);
    } else {
      data.sort_order = 0;
    }
    
    console.log('Form data:', data);
    
    try {
      const response = await fetch('/ticket-categories', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
          'Accept': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        credentials: 'same-origin',
        body: JSON.stringify(data)
      });
      
      console.log('Response status:', response.status);
      console.log('Response ok:', response.ok);
      
      if (response.ok) {
        const result = await response.json();
        console.log('Success response:', result);
        alert(result.success || 'Category created successfully!');
        // Close modal and reset form
        const modal = bootstrap.Modal.getInstance(document.getElementById('createCategoryModal'));
        if (modal) modal.hide();
        this.reset();
        // Reset preview
        updateCategoryPreview();
        // Reload page to show new category
        location.reload();
      } else {
        console.log('Response not ok, status:', response.status);
        try {
          const result = await response.json();
          console.log('Error response:', result);
          const errorMessage = result.message || result.error || 'An error occurred';
          alert(`Error: ${errorMessage}`);
        } catch (parseError) {
          console.error('Error parsing response:', parseError);
          const textResponse = await response.text();
          console.log('Raw response:', textResponse);
          alert(`Error: ${response.status} - ${response.statusText}`);
        }
      }
    } catch (error) {
      console.error('Network error:', error);
      alert('An error occurred while creating the category');
    }
  });
});

// Edit Category Form Handler
document.addEventListener('DOMContentLoaded', function() {
  const editForm = document.getElementById('editCategoryForm');
  if (editForm) {
    editForm.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      console.log('Edit form submission started');
      
      const formData = new FormData(this);
      const data = Object.fromEntries(formData.entries());
      
      // Convert checkbox values to boolean
      if (data.is_active === 'on') {
        data.is_active = true;
      } else {
        data.is_active = false;
      }
      
      // Convert sort_order to integer
      if (data.sort_order) {
        data.sort_order = parseInt(data.sort_order);
      } else {
        data.sort_order = 0;
      }
      
      console.log('Edit form data:', data);
      
      try {
        const response = await fetch(this.action, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
          },
          credentials: 'same-origin',
          body: JSON.stringify(data)
        });
        
        console.log('Edit response status:', response.status);
        console.log('Edit response ok:', response.ok);
        
        if (response.ok) {
          const result = await response.json();
          console.log('Edit success response:', result);
          alert(result.success || 'Category updated successfully!');
          // Close modal
          const modal = bootstrap.Modal.getInstance(document.getElementById('editCategoryModal'));
          if (modal) modal.hide();
          // Reload page to show updated data
          location.reload();
        } else {
          console.log('Edit response not ok, status:', response.status);
          try {
            const result = await response.json();
            console.log('Edit error response:', result);
            const errorMessage = result.message || result.error || 'An error occurred';
            alert(`Error: ${errorMessage}`);
          } catch (parseError) {
            console.error('Error parsing edit response:', parseError);
            const textResponse = await response.text();
            console.log('Raw edit response:', textResponse);
            alert(`Error: ${response.status} - ${response.statusText}`);
          }
        }
      } catch (error) {
        console.error('Edit network error:', error);
        alert('An error occurred while updating the category');
      }
    });
  }
});

// Live preview updates
function updateCategoryPreview() {
  const name = document.getElementById('category_name').value || 'Category Name';
  const description = document.getElementById('category_description').value || 'Category description will appear here';
  const color = document.getElementById('category_color').value || '#6c757d';
  const icon = document.getElementById('category_icon').value || 'bi-tag';
  
  // Update preview elements
  document.getElementById('categoryPreviewName').textContent = name;
  document.getElementById('categoryPreviewSlug').textContent = name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
  document.getElementById('categoryPreviewDescription').textContent = description;
  
  // Update icon and color
  const iconElement = document.getElementById('categoryPreviewIcon');
  iconElement.style.backgroundColor = color + '20';
  iconElement.style.color = color;
  iconElement.innerHTML = `<i class="${icon}"></i>`;
}

// Edit preview updates
function updateEditCategoryPreview() {
  const name = document.getElementById('edit_category_name').value || 'Category Name';
  const description = document.getElementById('edit_category_description').value || 'Category description will appear here';
  const color = document.getElementById('edit_category_color').value || '#6c757d';
  const icon = document.getElementById('edit_category_icon').value || 'bi-tag';
  
  // Update preview elements
  document.getElementById('editCategoryPreviewName').textContent = name;
  document.getElementById('editCategoryPreviewSlug').textContent = name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
  document.getElementById('editCategoryPreviewDescription').textContent = description;
  
  // Update icon and color
  const iconElement = document.getElementById('editCategoryPreviewIcon');
  iconElement.style.backgroundColor = color + '20';
  iconElement.style.color = color;
  iconElement.innerHTML = `<i class="${icon}"></i>`;
}

// Add event listeners for live preview and initialize preview
document.addEventListener('DOMContentLoaded', function() {
  updateCategoryPreview();
  
  // Add event listeners for create modal live preview
  const nameInput = document.getElementById('category_name');
  const descInput = document.getElementById('category_description');
  const colorInput = document.getElementById('category_color');
  const iconInput = document.getElementById('category_icon');
  
  if (nameInput) nameInput.addEventListener('input', updateCategoryPreview);
  if (descInput) descInput.addEventListener('input', updateCategoryPreview);
  if (colorInput) colorInput.addEventListener('input', updateCategoryPreview);
  if (iconInput) iconInput.addEventListener('input', updateCategoryPreview);
  
  // Add event listeners for edit modal live preview
  const editNameInput = document.getElementById('edit_category_name');
  const editDescInput = document.getElementById('edit_category_description');
  const editColorInput = document.getElementById('edit_category_color');
  const editIconInput = document.getElementById('edit_category_icon');
  
  if (editNameInput) editNameInput.addEventListener('input', updateEditCategoryPreview);
  if (editDescInput) editDescInput.addEventListener('input', updateEditCategoryPreview);
  if (editColorInput) editColorInput.addEventListener('input', updateEditCategoryPreview);
  if (editIconInput) editIconInput.addEventListener('input', updateEditCategoryPreview);
});
</script>
@endpush