@extends('layouts.bootstrap')

@section('title', $user->hasRole('agent') ? 'My Assigned Tickets' : 'Active Tickets')
@section('breadcrumb', $user->hasRole('agent') ? 'Dashboard / My Assigned Tickets' : 'Dashboard / Ticket Management / Active Tickets')

@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('create-tickets'))
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTicketModal">
        <i class="bi bi-plus-circle me-1"></i>Create
      </button>
      @endif
      <button class="btn btn-outline-danger" onclick="bulkDelete()">
        <i class="bi bi-trash me-1"></i>Delete
      </button>
      <div class="vr d-none d-md-block"></div>
      <button class="btn btn-outline-secondary" onclick="exportCSV()">
        <i class="bi bi-download me-1"></i>Export CSV
      </button>
      <button class="btn btn-outline-secondary" onclick="importCSV()">
        <i class="bi bi-upload me-1"></i>Import
      </button>
    </div>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <input id="quickSearch" class="form-control" placeholder="Search tickets, people, #ID…" style="min-width:240px">
      <button class="btn btn-outline-secondary d-none d-md-inline-flex" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFilters">
        <i class="bi bi-sliders2 me-1"></i>Filters
      </button>
      <div class="dropdown">
        <button class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
          <i class="bi bi-eye me-1"></i>{{ !request('status') ? ($user->hasRole('agent') ? 'My Assigned Tickets' : 'Active Tickets') : (request('status') == 'all' ? 'All Tickets' : ucfirst(str_replace('_', ' ', request('status'))) . ' Tickets') }}
        </button>
        <div class="dropdown-menu dropdown-menu-end p-2" style="min-width:260px">
          <a href="{{ route('tickets.index') }}" class="btn btn-outline-primary w-100 mb-2 {{ !request('status') ? 'active' : '' }}">{{ $user->hasRole('agent') ? 'My Assigned Tickets' : 'Active Tickets' }}</a>
          <a href="{{ route('tickets.index', ['status' => 'open']) }}" class="btn btn-outline-primary w-100 mb-2 {{ request('status') == 'open' ? 'active' : '' }}">Open Cases</a>
          <a href="{{ route('tickets.index', ['status' => 'resolved']) }}" class="btn btn-outline-primary w-100 mb-2 {{ request('status') == 'resolved' ? 'active' : '' }}">Resolved Cases</a>
          <a href="{{ route('tickets.index', ['status' => 'closed']) }}" class="btn btn-outline-primary w-100 mb-2 {{ request('status') == 'closed' ? 'active' : '' }}">Closed Cases</a>
          <a href="{{ route('tickets.index', ['status' => 'all']) }}" class="btn btn-outline-secondary w-100 mb-2 {{ request('status') == 'all' ? 'active' : '' }}">All Tickets</a>
          @if(auth()->user()->hasPermission('delete-tickets'))
          <hr class="my-2">
          <a href="{{ route('tickets.deleted') }}" class="btn btn-outline-danger w-100">Deleted Tickets</a>
          @endif
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tickets Table -->
<div class="card shadow-sm">
      <div class="table-responsive">
        <table class="table align-middle mb-0" id="ticketTable">
          <thead class="table-light">
            <tr>
              <th style="width:28px"><input class="form-check-input" type="checkbox" id="selectAll"></th>
              <th>#</th>
              <th>Title</th>
              <th>Category</th>
              <th>Priority</th>
              <th>Assignee</th>
              <th>Status</th>
              <th>Created</th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            @forelse($tickets as $ticket)
            <tr>
              <td><input class="form-check-input row-select" type="checkbox" value="{{ $ticket->id }}"></td>
              <td>{{ $ticket->id }}</td>
              <td><a href="{{ route('tickets.show', $ticket) }}" class="text-decoration-none">{{ Str::limit($ticket->title, 40) }}</a></td>
              <td>{{ ucfirst(str_replace('_', ' ', $ticket->category)) }}</td>
              <td>
                @switch($ticket->priority)
                  @case('urgent')
                    <span class="badge pri-urgent">High</span>
                    @break
                  @case('high')
                    <span class="badge pri-high">High</span>
                    @break
                  @case('medium')
                    <span class="badge pri-med">Medium</span>
                    @break
                  @case('low')
                    <span class="badge pri-low">Low</span>
                    @break
                @endswitch
              </td>
              <td>
                @if($ticket->assignedTo)
                  <span class="avatar">{{ substr($ticket->assignedTo->name, 0, 1) }}</span> 
                  <span class="ms-1">{{ $ticket->assignedTo->name }}</span>
                @else
                  <span class="text-muted">Unassigned</span>
                @endif
              </td>
              <td>
                @switch($ticket->status)
                  @case('open')
                    <span class="badge rounded-pill ticket-badge status-open">Open</span>
                    @break
                  @case('in_progress')
                    <span class="badge rounded-pill ticket-badge status-in-progress">In Progress</span>
                    @break
                  @case('resolved')
                    <span class="badge rounded-pill ticket-badge status-resolved">Resolved</span>
                    @break
                  @case('closed')
                    <span class="badge rounded-pill ticket-badge bg-secondary">Closed</span>
                    @break
                @endswitch
              </td>
              <td>{{ $ticket->created_at->format('Y-m-d') }}</td>
              <td class="text-end">
                <a class="btn btn-sm btn-outline-secondary" href="{{ route('tickets.show', $ticket) }}" title="View">
                  <i class="bi bi-eye"></i>
                </a>
                @if(auth()->user()->hasPermission('edit-tickets') || $ticket->user_id === auth()->id())
                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editTicketModal" onclick="loadTicketForEdit({{ $ticket->id }})" title="Edit">
                  <i class="bi bi-pencil"></i>
                </button>
                @endif
                @if($ticket->status === 'resolved' && (auth()->user()->hasPermission('edit-tickets') || $ticket->user_id === auth()->id()))
                <button class="btn btn-sm btn-outline-success" onclick="reopenTicket({{ $ticket->id }})" title="Reopen">
                  <i class="bi bi-arrow-clockwise"></i>
                </button>
                @endif
                @if(auth()->user()->hasPermission('delete-tickets') || $ticket->user_id === auth()->id())
                <button class="btn btn-sm btn-outline-danger" onclick="deleteTicket({{ $ticket->id }})" title="Delete">
                  <i class="bi bi-trash"></i>
                </button>
                @endif
              </td>
            </tr>
            @empty
            <tr>
              <td colspan="9" class="text-center py-4">
                <i class="bi bi-ticket-detailed fs-1 text-muted mb-3"></i>
                <p class="text-muted">No tickets found</p>
                @if(auth()->user()->hasPermission('create-tickets'))
                <a href="{{ route('tickets.create') }}" class="btn btn-primary">
                  <i class="bi bi-plus-circle"></i> Create Your First Ticket
                </a>
                @endif
              </td>
            </tr>
            @endforelse
          </tbody>
        </table>
      </div>
      @if($tickets->hasPages())
      <div class="card-footer bg-white d-flex align-items-center justify-content-between">
        <div class="small text-secondary">Showing {{ $tickets->firstItem() }}–{{ $tickets->lastItem() }} of {{ $tickets->total() }}</div>
        <nav>
          {{ $tickets->links() }}
        </nav>
      </div>
      @endif
</div>

<!-- Offcanvas Filters -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasFilters" aria-labelledby="filtersLabel">
  <div class="offcanvas-header">
    <h5 id="filtersLabel">Filters</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form method="GET" action="{{ route('tickets.index') }}">
      <div class="mb-3">
        <label class="form-label">Status</label>
        <select class="form-select" name="status">
          <option value="">Any</option>
          <option value="open" {{ request('status') == 'open' ? 'selected' : '' }}>Open</option>
          <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
          <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved</option>
          <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>Closed</option>
        </select>
      </div>
      <div class="mb-3">
        <label class="form-label">Priority</label>
        <select class="form-select" name="priority">
          <option value="">Any</option>
          <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Low</option>
          <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
          <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>High</option>
          <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
        </select>
      </div>
      <div class="mb-3">
        <label class="form-label">Category</label>
        <select class="form-select" name="category">
          <option value="">Any</option>
          <option value="technical" {{ request('category') == 'technical' ? 'selected' : '' }}>Technical</option>
          <option value="billing" {{ request('category') == 'billing' ? 'selected' : '' }}>Billing</option>
          <option value="general" {{ request('category') == 'general' ? 'selected' : '' }}>General</option>
          <option value="feature_request" {{ request('category') == 'feature_request' ? 'selected' : '' }}>Feature Request</option>
        </select>
      </div>
      <div class="mb-3">
        <label class="form-label">Assignee</label>
        <input class="form-control" placeholder="Search people" name="assignee">
      </div>
      <div class="mb-3">
        <label class="form-label">Date range</label>
        <input type="date" class="form-control mb-2" name="date_from">
        <input type="date" class="form-control" name="date_to">
      </div>
      <div class="d-grid">
        <button type="submit" class="btn btn-primary">Apply Filters</button>
        <a href="{{ route('tickets.index') }}" class="btn btn-light mt-2">Reset</a>
      </div>
    </form>
  </div>
</div>

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

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteTicketModal" tabindex="-1" aria-labelledby="deleteTicketModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title" id="deleteTicketModalLabel">
          <i class="bi bi-exclamation-triangle-fill me-2"></i>Confirm Deletion
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center py-4">
        <div class="mb-4">
          <i class="bi bi-trash text-danger" style="font-size: 4rem;"></i>
        </div>
        <h4 class="fw-bold text-dark mb-3">Delete Ticket?</h4>
        <p class="text-muted mb-4">
          Are you sure you want to delete this ticket? This action can be undone later by restoring the ticket.
        </p>
        <div class="alert alert-warning">
          <i class="bi bi-info-circle me-2"></i>
          <strong>Note:</strong> The ticket will be moved to the deleted tickets section and can be restored if needed.
        </div>
      </div>
      <div class="modal-footer border-0 justify-content-center">
        <button type="button" class="btn btn-outline-secondary me-2" data-bs-dismiss="modal">
          <i class="bi bi-x-circle me-1"></i>Cancel
        </button>
        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
          <i class="bi bi-trash me-1"></i>Delete Ticket
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Create Ticket Modal -->
<div class="modal fade" id="createTicketModal" tabindex="-1" aria-labelledby="createTicketModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="createTicketModalLabel">
          <i class="bi bi-plus-circle me-2"></i>Create New Ticket
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="createTicketForm">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label for="ticket_title" class="form-label">Title <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="ticket_title" name="title" required>
          </div>

          <div class="mb-3">
            <label for="ticket_description" class="form-label">Description <span class="text-danger">*</span></label>
            <textarea class="form-control" id="ticket_description" name="description" rows="5" required></textarea>
          </div>

          <div class="row g-3">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="ticket_priority" class="form-label">Priority <span class="text-danger">*</span></label>
                <select class="form-select" id="ticket_priority" name="priority" required>
                  <option value="">Select Priority</option>
                  <option value="low">Low</option>
                  <option value="medium">Medium</option>
                  <option value="high">High</option>
                  <option value="urgent">Urgent</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label for="ticket_category" class="form-label">Category <span class="text-danger">*</span></label>
                <select class="form-select" id="ticket_category" name="category" required>
                  <option value="">Select Category</option>
                  <!-- Categories will be loaded dynamically -->
                </select>
              </div>
            </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>Create Ticket
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- Edit Ticket Modal -->
<div class="modal fade" id="editTicketModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Ticket</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editTicketForm">
        @csrf
        @method('PUT')
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Title</label>
            <input type="text" class="form-control" name="title" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Description</label>
            <textarea class="form-control" name="description" rows="5" required></textarea>
          </div>
          <div class="row g-3">
            <div class="col-md-4">
              <div class="mb-3">
                <label class="form-label">Priority</label>
                <select class="form-select" name="priority" required>
                  <option value="low">Low</option>
                  <option value="medium">Medium</option>
                  <option value="high">High</option>
                  <option value="urgent">Urgent</option>
                </select>
              </div>
            </div>
            <div class="col-md-4">
              <div class="mb-3">
                <label class="form-label">Status</label>
                <select class="form-select" name="status" required>
                  <option value="open">Open</option>
                  <option value="in_progress">In Progress</option>
                  <option value="resolved">Resolved</option>
                  <option value="closed">Closed</option>
                </select>
              </div>
            </div>
            <div class="col-md-4">
              <div class="mb-3">
                <label class="form-label">Category</label>
                <select class="form-select" name="category" required>
                  <!-- Categories will be loaded dynamically -->
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Update Ticket</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
// Load categories when modal opens
document.addEventListener('DOMContentLoaded', function() {
  const createModal = document.getElementById('createTicketModal');
  if (createModal) {
    createModal.addEventListener('show.bs.modal', function() {
      loadCategories();
    });
  }
  
  // Handle form submission
  const createForm = document.getElementById('createTicketForm');
  if (createForm) {
    createForm.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      const formData = new FormData(this);
      const data = Object.fromEntries(formData.entries());
      
      try {
        const response = await fetch('/tickets', {
          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)
        });
        
        if (response.ok) {
          const result = await response.json();
          alert(result.success || 'Ticket created successfully!');
          // Close modal and reset form
          const modal = bootstrap.Modal.getInstance(document.getElementById('createTicketModal'));
          if (modal) modal.hide();
          this.reset();
          // Reload page to show new ticket
          location.reload();
        } else {
          const result = await response.json();
          alert(result.message || 'An error occurred');
        }
      } catch (error) {
        console.error('Error:', error);
        alert('An error occurred while creating the ticket');
      }
    });
  }
});

// Load categories function
async function loadCategories() {
  try {
    const response = await fetch('/ticket-categories', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      credentials: 'same-origin'
    });
    
    if (response.ok) {
      const data = await response.json();
      const categorySelect = document.getElementById('ticket_category');
      
      // Clear existing options except the first one
      categorySelect.innerHTML = '<option value="">Select Category</option>';
      
      // Add active categories
      data.categories.forEach(category => {
        if (category.is_active) {
          const option = document.createElement('option');
          option.value = category.slug;
          option.textContent = category.name;
          categorySelect.appendChild(option);
        }
      });
    }
  } catch (error) {
    console.error('Error loading categories:', error);
  }
}

// Load ticket data for editing from ticket list
let currentTicketId = null;

function loadTicketForEdit(ticketId) {
  currentTicketId = ticketId;
  loadTicketDataForEditModal(ticketId);
}

async function loadTicketDataForEditModal(ticketId) {
  try {
    const response = await fetch(`/tickets/${ticketId}/edit-data`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      credentials: 'same-origin'
    });
    
    if (response.ok) {
      const data = await response.json();
      const form = document.getElementById('editTicketForm');
      
      // Update form action
      form.action = `/tickets/${ticketId}`;
      
      // Populate form fields
      form.querySelector('input[name="title"]').value = data.ticket.title;
      form.querySelector('textarea[name="description"]').value = data.ticket.description;
      form.querySelector('select[name="priority"]').value = data.ticket.priority;
      form.querySelector('select[name="status"]').value = data.ticket.status;
      
      // Populate categories
      const categorySelect = form.querySelector('select[name="category"]');
      categorySelect.innerHTML = '';
      data.categories.forEach(category => {
        const option = document.createElement('option');
        option.value = category.slug;
        option.textContent = category.name;
        if (category.slug === data.ticket.category) {
          option.selected = true;
        }
        categorySelect.appendChild(option);
      });
    }
  } catch (error) {
    console.error('Error loading ticket data:', error);
  }
}

// Handle edit form submission
document.addEventListener('DOMContentLoaded', function() {
  const editForm = document.getElementById('editTicketForm');
  if (editForm) {
    editForm.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      if (!currentTicketId) {
        alert('No ticket selected for editing');
        return;
      }
      
      const formData = new FormData(this);
      const data = Object.fromEntries(formData.entries());
      
      try {
        const response = await fetch(`/tickets/${currentTicketId}`, {
          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)
        });
        
        if (response.ok) {
          const result = await response.json();
          alert(result.success || 'Ticket updated successfully!');
          // Close modal and reset form
          const modal = bootstrap.Modal.getInstance(document.getElementById('editTicketModal'));
          if (modal) modal.hide();
          // Reload page to show changes
          location.reload();
        } else {
          const result = await response.json();
          alert(result.message || 'An error occurred');
        }
      } catch (error) {
        console.error('Error:', error);
        alert('An error occurred while updating the ticket');
      }
    });
  }
});

// Simple client-side search over table rows
const q = document.getElementById('quickSearch');
if (q) {
  q.addEventListener('input', () => {
    const term = q.value.toLowerCase();
    document.querySelectorAll('#ticketTable tbody tr').forEach(tr => {
      tr.style.display = tr.innerText.toLowerCase().includes(term) ? '' : 'none';
    });
  });
}

// Bulk select
const selectAll = document.getElementById('selectAll');
if (selectAll) {
  selectAll.addEventListener('change', (e)=>{
    document.querySelectorAll('.row-select').forEach(cb => cb.checked = e.target.checked);
  });
}

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

// Global variable to store the ticket ID for deletion
let ticketToDelete = null;

function deleteTicket(ticketId) {
  ticketToDelete = ticketId;
  const modal = new bootstrap.Modal(document.getElementById('deleteTicketModal'));
  modal.show();
}

// Handle confirm delete button click
document.addEventListener('DOMContentLoaded', function() {
  const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
  if (confirmDeleteBtn) {
    confirmDeleteBtn.addEventListener('click', function() {
      if (ticketToDelete) {
        const form = document.getElementById('deleteForm');
        form.action = `/tickets/${ticketToDelete}`;
        form.submit();
      }
    });
  }
});

function reopenTicket(ticketId) {
  if (confirm('Are you sure you want to reopen this ticket?')) {
    fetch(`/tickets/${ticketId}/reopen`, {
      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'
    })
    .then(response => response.json())
    .then(result => {
      if (result.success) {
        alert(result.success);
        location.reload();
      } else {
        alert(result.error || 'An error occurred');
      }
    })
    .catch(error => {
      console.error('Error:', error);
      alert('An error occurred while reopening the ticket');
    });
  }
}

function updateStatus(ticketId, status) {
  // Implement status update logic
  console.log('Update ticket', ticketId, 'to status', status);
}

function exportCSV() {
  // Implement CSV export
  console.log('Export CSV');
}

function importCSV() {
  // Implement CSV import
  console.log('Import CSV');
}

function filterView(view) {
  // Update active saved view button
  document.querySelectorAll('.saved-view').forEach(btn => btn.classList.remove('active'));
  event.target.classList.add('active');
  
  // Implement view filtering
  console.log('Filter view:', view);
}
</script>
@endpush