@extends('layouts.bootstrap')

@section('title', $ticket->title)
@section('breadcrumb', 'Dashboard / Ticket Management / Ticket #' . $ticket->id)

@section('content')
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
  <div>
    <h1 class="h4 mb-1">{{ $ticket->title }}</h1>
    <div class="text-secondary small">Ticket #{{ $ticket->id }} • Created {{ $ticket->created_at->format('M d, Y H:i') }} • Last update {{ $ticket->updated_at->format('M d, Y H:i') }}</div>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-secondary"><i class="bi bi-share me-1"></i>Share</button>
    <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#addAttachmentModal"><i class="bi bi-paperclip me-1"></i>Add Attachment</button>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCommentModal"><i class="bi bi-chat-left-text me-1"></i>Comment</button>
  </div>
</div>

<div class="row g-3">
  <div class="col-12 col-lg-8">
    <div class="card shadow-sm">
      <div class="card-body pb-0">
        <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
          @switch($ticket->status)
            @case('open')
              <span class="badge rounded-pill status-badge status-open">Open</span>
              @break
            @case('in_progress')
              <span class="badge rounded-pill status-badge status-in-progress">In Progress</span>
              @break
            @case('resolved')
              <span class="badge rounded-pill status-badge status-resolved">Resolved</span>
              @break
            @case('closed')
              <span class="badge rounded-pill status-badge bg-secondary">Closed</span>
              @break
          @endswitch
          
          @switch($ticket->priority)
            @case('urgent')
              <span class="badge text-bg-danger">High</span>
              @break
            @case('high')
              <span class="badge text-bg-danger">High</span>
              @break
            @case('medium')
              <span class="badge text-bg-warning">Medium</span>
              @break
            @case('low')
              <span class="badge text-bg-success">Low</span>
              @break
          @endswitch
          
          <span class="badge text-bg-light">{{ ucfirst(str_replace('_', ' ', $ticket->category)) }}</span>
        </div>
        <p class="mb-0">{{ $ticket->description }}</p>
      </div>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <div class="row g-3 small">
            <div class="col-md-6"><span class="text-secondary d-block">Requester</span><strong>{{ $ticket->user->name }}</strong></div>
            <div class="col-md-6"><span class="text-secondary d-block">Assignee</span>
              <div class="d-flex align-items-center gap-2">
                @if($ticket->assignedTo)
                  <div class="avatar">{{ substr($ticket->assignedTo->name, 0, 1) }}</div>
                  <strong>{{ $ticket->assignedTo->name }}</strong>
                  @if(auth()->user()->hasPermission('assign-tickets'))
                    <button class="btn btn-sm btn-outline-primary ms-2" data-bs-toggle="modal" data-bs-target="#assignTicketModal">
                      <i class="bi bi-person-gear me-1"></i>Reassign
                    </button>
                  @endif
                  @if($ticket->status === 'resolved' && (auth()->user()->hasPermission('edit-tickets') || $ticket->user_id === auth()->id()))
                    <button class="btn btn-sm btn-outline-success ms-2" onclick="reopenTicket({{ $ticket->id }})">
                      <i class="bi bi-arrow-clockwise me-1"></i>Reopen
                    </button>
                  @endif
                @else
                  <span class="text-muted">Unassigned</span>
                  @if(auth()->user()->hasPermission('assign-tickets'))
                    <button class="btn btn-sm btn-outline-primary ms-2" data-bs-toggle="modal" data-bs-target="#assignTicketModal">
                      <i class="bi bi-person-plus me-1"></i>Assign
                    </button>
                  @endif
                  @if($ticket->status === 'resolved' && (auth()->user()->hasPermission('edit-tickets') || $ticket->user_id === auth()->id()))
                    <button class="btn btn-sm btn-outline-success ms-2" onclick="reopenTicket({{ $ticket->id }})">
                      <i class="bi bi-arrow-clockwise me-1"></i>Reopen
                    </button>
                  @endif
                @endif
              </div>
            </div>
            <div class="col-md-6"><span class="text-secondary d-block">Created</span><strong>{{ $ticket->created_at->format('M d, Y H:i') }}</strong></div>
            <div class="col-md-6"><span class="text-secondary d-block">Last Updated</span><strong>{{ $ticket->updated_at->format('M d, Y H:i') }}</strong></div>
            @if($ticket->resolved_at)
            <div class="col-md-6"><span class="text-secondary d-block">Resolved</span><strong>{{ $ticket->resolved_at->format('M d, Y H:i') }}</strong></div>
            @endif
          </div>
        </li>
        <li class="list-group-item">
          <div class="d-flex align-items-center justify-content-between flex-wrap">
            <div class="d-flex align-items-center gap-2">
              <span class="text-secondary small">Status:</span>
              @if(auth()->user()->hasPermission('edit-tickets'))
              <div class="btn-group">
                <button class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                  <i class="bi bi-arrow-repeat me-1"></i>
                  @switch($ticket->status)
                    @case('open') Open @break
                    @case('in_progress') In Progress @break
                    @case('resolved') Resolved @break
                    @case('closed') Closed @break
                  @endswitch
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#" onclick="updateStatus('open')">Open</a></li>
                  <li><a class="dropdown-item" href="#" onclick="updateStatus('in_progress')">In Progress</a></li>
                  <li><a class="dropdown-item" href="#" onclick="updateStatus('resolved')">Resolved</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item text-danger" href="#" onclick="updateStatus('closed')">Close & Archive</a></li>
                </ul>
              </div>
              @else
                @switch($ticket->status)
                  @case('open')
                    <span class="badge rounded-pill status-badge status-open">Open</span>
                    @break
                  @case('in_progress')
                    <span class="badge rounded-pill status-badge status-in-progress">In Progress</span>
                    @break
                  @case('resolved')
                    <span class="badge rounded-pill status-badge status-resolved">Resolved</span>
                    @break
                  @case('closed')
                    <span class="badge rounded-pill status-badge bg-secondary">Closed</span>
                    @break
                @endswitch
              @endif
            </div>
            <div class="d-flex align-items-center gap-2">
              @if(auth()->user()->hasPermission('edit-tickets'))
                <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-flag me-1"></i>Set Priority</button>
                <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-tags me-1"></i>Tags</button>
                @if($ticket->status !== 'resolved' && $ticket->status !== 'closed')
                  <button class="btn btn-sm btn-success" onclick="updateStatus('resolved')"><i class="bi bi-check2-circle me-1"></i>Mark Resolved</button>
                @endif
              @endif
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="card shadow-sm mt-3">
      <div class="card-header bg-white">
        <ul class="nav nav-tabs card-header-tabs">
          <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabDetails" type="button">Details</button></li>
          <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabComments" type="button">Comments ({{ $ticket->comments->count() }})</button></li>
          <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabActivity" type="button">Activity</button></li>
          <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabAttachments" type="button">Attachments ({{ $ticket->attachments->count() }})</button></li>
        </ul>
      </div>
      <div class="card-body">
        <div class="tab-content">
          <div class="tab-pane fade show active" id="tabDetails">
            <h6>Additional Information</h6>
            <p class="mb-3">{{ $ticket->description }}</p>
            
            <h6>Ticket Details</h6>
            <div class="row g-3 small">
              <div class="col-md-6">
                <span class="text-secondary d-block">Ticket ID</span>
                <strong>#{{ $ticket->id }}</strong>
              </div>
              <div class="col-md-6">
                <span class="text-secondary d-block">Category</span>
                <strong>{{ ucfirst(str_replace('_', ' ', $ticket->category)) }}</strong>
              </div>
              <div class="col-md-6">
                <span class="text-secondary d-block">Priority</span>
                <strong>{{ ucfirst($ticket->priority) }}</strong>
              </div>
              <div class="col-md-6">
                <span class="text-secondary d-block">Status</span>
                <strong>{{ ucfirst(str_replace('_', ' ', $ticket->status)) }}</strong>
              </div>
            </div>
          </div>

          <div class="tab-pane fade" id="tabComments">
            <div class="vstack gap-3">
              @forelse($ticket->comments as $comment)
                <div class="d-flex gap-3">
                  <div class="avatar">{{ substr($comment->user->name, 0, 1) }}</div>
                  <div class="flex-grow-1">
                    <div class="d-flex align-items-center gap-2 mb-1">
                      <strong>{{ $comment->user->name }}</strong>
                      <span class="text-secondary small">{{ $comment->created_at->format('M d, Y H:i') }}</span>
                      @if($comment->is_internal)
                        <span class="badge bg-warning text-dark">Internal</span>
                      @endif
                    </div>
                    <div class="bg-light p-3 rounded">
                      {{ $comment->content }}
                    </div>
                  </div>
                </div>
              @empty
                <div class="text-center text-muted py-4">
                  <i class="bi bi-chat-left-text fs-1 mb-3"></i>
                  <p>No comments yet</p>
                  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCommentModal">
                    <i class="bi bi-plus-circle me-1"></i>Add First Comment
                  </button>
                </div>
              @endforelse
              
              @if($ticket->comments->count() > 0)
                <div class="text-center mt-3">
                  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCommentModal">
                    <i class="bi bi-plus-circle me-1"></i>Add Comment
                  </button>
                </div>
              @endif
            </div>
          </div>

          <div class="tab-pane fade" id="tabActivity">
            <div class="activity">
              @forelse($ticket->activities as $activity)
                <div class="activity-item">
                  <div class="dot"></div>
                  <div class="small">
                    <strong>{{ $activity->user->name }}</strong> {{ $activity->description }}<br>
                    <span class="text-secondary">{{ $activity->created_at->format('M d, Y H:i') }}</span>
                  </div>
                </div>
              @empty
                <div class="activity-item">
                  <div class="dot"></div>
                  <div class="small">
                    <strong>{{ $ticket->user->name }}</strong> created this ticket<br>
                    <span class="text-secondary">{{ $ticket->created_at->format('M d, Y H:i') }}</span>
                  </div>
                </div>
                @if($ticket->updated_at != $ticket->created_at)
                <div class="activity-item">
                  <div class="dot"></div>
                  <div class="small">
                    <strong>{{ $ticket->user->name }}</strong> updated this ticket<br>
                    <span class="text-secondary">{{ $ticket->updated_at->format('M d, Y H:i') }}</span>
                  </div>
                </div>
                @endif
                @if($ticket->resolved_at)
                <div class="activity-item">
                  <div class="dot"></div>
                  <div class="small">
                    <strong>{{ $ticket->assignedTo ? $ticket->assignedTo->name : 'System' }}</strong> resolved this ticket<br>
                    <span class="text-secondary">{{ $ticket->resolved_at->format('M d, Y H:i') }}</span>
                  </div>
                </div>
                @endif
              @endforelse
            </div>
          </div>

          <div class="tab-pane fade" id="tabAttachments">
            <div class="vstack gap-3">
              @forelse($ticket->attachments as $attachment)
                <div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
                  <div class="text-primary">
                    <i class="bi bi-paperclip fs-4"></i>
                  </div>
                  <div class="flex-grow-1">
                    <div class="fw-bold">{{ $attachment->original_filename }}</div>
                    <div class="small text-secondary">
                      Uploaded by {{ $attachment->user->name }} • {{ $attachment->file_size_human }} • {{ $attachment->created_at->format('M d, Y H:i') }}
                    </div>
                  </div>
                  <div class="btn-group">
                    <a href="{{ Storage::url($attachment->file_path) }}" class="btn btn-sm btn-outline-primary" target="_blank">
                      <i class="bi bi-download me-1"></i>Download
                    </a>
                  </div>
                </div>
              @empty
                <div class="text-center text-muted py-4">
                  <i class="bi bi-paperclip fs-1 mb-3"></i>
                  <p>No attachments yet</p>
                  <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAttachmentModal">
                    <i class="bi bi-plus-circle me-1"></i>Add Attachment
                  </button>
                </div>
              @endforelse
              
              @if($ticket->attachments->count() > 0)
                <div class="text-center mt-3">
                  <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAttachmentModal">
                    <i class="bi bi-plus-circle me-1"></i>Add Attachment
                  </button>
                </div>
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-4">
    <div class="card shadow-sm">
      <div class="card-header bg-white d-flex align-items-center justify-content-between">
        <h6 class="mb-0"><i class="bi bi-gear me-2"></i>Quick Actions</h6>
      </div>
      <div class="card-body">
        <div class="d-grid gap-2">
          @if(auth()->user()->hasPermission('edit-tickets'))
            @if($ticket->status === 'open')
              <button class="btn btn-warning" onclick="updateStatus('in_progress')">
                <i class="bi bi-play-circle me-1"></i>Start Working
              </button>
            @endif
            
            @if($ticket->status === 'in_progress')
              <button class="btn btn-success" onclick="updateStatus('resolved')">
                <i class="bi bi-check-circle me-1"></i>Mark as Resolved
              </button>
            @endif
            
            @if($ticket->status === 'resolved')
              <button class="btn btn-secondary" onclick="updateStatus('closed')">
                <i class="bi bi-x-circle me-1"></i>Close Ticket
              </button>
            @endif
            
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editTicketModal">
              <i class="bi bi-pencil me-1"></i>Edit Ticket
            </button>
          @endif
          
          <a href="{{ route('tickets.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Tickets
          </a>
          
          @if(auth()->user()->hasPermission('delete-tickets') || $ticket->user_id === auth()->id())
          <button class="btn btn-outline-danger" onclick="deleteTicket({{ $ticket->id }})">
            <i class="bi bi-trash me-1"></i>Delete Ticket
          </button>
          @endif
        </div>
      </div>
    </div>

    <div class="card shadow-sm mt-3">
      <div class="card-header bg-white">
        <h6 class="mb-0"><i class="bi bi-person me-2"></i>Ticket Details</h6>
      </div>
      <div class="card-body">
        <div class="small">
          <div class="mb-2">
            <span class="text-secondary d-block">Created by</span>
            <strong>{{ $ticket->user->name }}</strong>
          </div>
          <div class="mb-2">
            <span class="text-secondary d-block">Email</span>
            <strong>{{ $ticket->user->email }}</strong>
          </div>
          @if($ticket->assignedTo)
          <div class="mb-2">
            <span class="text-secondary d-block">Assigned to</span>
            <strong>{{ $ticket->assignedTo->name }}</strong>
          </div>
          @endif
          @if($ticket->resolved_at)
          <div class="mb-2">
            <span class="text-secondary d-block">Resolved</span>
            <strong>{{ $ticket->resolved_at->format('M d, Y H:i') }}</strong>
          </div>
          @endif
        </div>
      </div>
    </div>

    <div class="card shadow-sm mt-3">
      <div class="card-header bg-white">
        <h6 class="mb-0"><i class="bi bi-clock me-2"></i>Timeline</h6>
      </div>
      <div class="card-body">
        <div class="activity">
          <div class="activity-item">
            <div class="dot"></div>
            <div class="small">
              <i class="bi bi-plus-circle text-success me-1"></i>Created: {{ $ticket->created_at->format('M d, Y H:i') }}
            </div>
          </div>
          @if($ticket->updated_at != $ticket->created_at)
          <div class="activity-item">
            <div class="dot"></div>
            <div class="small">
              <i class="bi bi-pencil text-warning me-1"></i>Updated: {{ $ticket->updated_at->format('M d, Y H:i') }}
            </div>
          </div>
          @endif
          @if($ticket->resolved_at)
          <div class="activity-item">
            <div class="dot"></div>
            <div class="small">
              <i class="bi bi-check-circle text-success me-1"></i>Resolved: {{ $ticket->resolved_at->format('M d, Y H:i') }}
            </div>
          </div>
          @endif
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add Comment Modal -->
<div class="modal fade" id="addCommentModal" 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">Add Comment</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addCommentForm">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Comment</label>
            <textarea class="form-control" name="content" rows="4" placeholder="Add your comment here..." required></textarea>
          </div>
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="is_internal" id="isInternal">
              <label class="form-check-label" for="isInternal">
                Internal comment (only visible to staff)
              </label>
            </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">Add Comment</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Assign Ticket Modal -->
<div class="modal fade" id="assignTicketModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          @if($ticket->assignedTo)
            Reassign Ticket
          @else
            Assign Ticket
          @endif
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="assignTicketForm">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Assign to</label>
            <select class="form-select" name="assigned_to" required>
              <option value="">Select User</option>
              <!-- Users will be loaded dynamically -->
            </select>
          </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">
            @if($ticket->assignedTo)
              Reassign Ticket
            @else
              Assign Ticket
            @endif
          </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>

<!-- Add Attachment Modal -->
<div class="modal fade" id="addAttachmentModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add Attachment</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addAttachmentForm" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Select File</label>
            <input type="file" class="form-control" name="attachment" accept="*/*" required>
            <div class="form-text">Maximum file size: 10MB</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">Upload Attachment</button>
        </div>
      </form>
    </div>
  </div>
</div>

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

@push('styles')
<style>
.activity::before {
  content:""; position:absolute; left:14px; top:0; bottom:0; width:2px; background:#e9ecef;
}
.activity-item { position:relative; padding-left:2.5rem; margin-bottom:1rem; }
.activity-item .dot { position:absolute; left:8px; top:.4rem; width:12px; height:12px; border-radius:50%; background:#0d6efd; }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Load users for assignment modal
  const assignModal = document.getElementById('assignTicketModal');
  if (assignModal) {
    assignModal.addEventListener('show.bs.modal', function() {
      loadUsersForAssignment();
    });
  }

  // Load ticket data for edit modal
  const editModal = document.getElementById('editTicketModal');
  if (editModal) {
    editModal.addEventListener('show.bs.modal', function() {
      loadTicketDataForEdit();
    });
  }

  // Handle comment form submission
  const commentForm = document.getElementById('addCommentForm');
  if (commentForm) {
    commentForm.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      const formData = new FormData(this);
      const data = Object.fromEntries(formData.entries());
      
      try {
        const response = await fetch('{{ route("tickets.comments", $ticket) }}', {
          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 || 'Comment added successfully!');
          // Close modal and reset form
          const modal = bootstrap.Modal.getInstance(document.getElementById('addCommentModal'));
          if (modal) modal.hide();
          this.reset();
          // Reload page to show new comment
          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 adding the comment');
      }
    });
  }

  // Handle assignment form submission
  const assignForm = document.getElementById('assignTicketForm');
  if (assignForm) {
    assignForm.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      const formData = new FormData(this);
      const data = Object.fromEntries(formData.entries());
      
      try {
        const response = await fetch('{{ route("tickets.assign", $ticket) }}', {
          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 assigned successfully!');
          // Close modal and reset form
          const modal = bootstrap.Modal.getInstance(document.getElementById('assignTicketModal'));
          if (modal) modal.hide();
          this.reset();
          // Reload page to show assignment
          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 assigning the ticket');
      }
    });
  }

  // Handle edit form submission
  const editForm = document.getElementById('editTicketForm');
  if (editForm) {
    editForm.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      const formData = new FormData(this);
      const data = Object.fromEntries(formData.entries());
      
      try {
        const response = await fetch('{{ route("tickets.update", $ticket) }}', {
          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');
      }
    });
  }

  // Handle attachment form submission
  const attachmentForm = document.getElementById('addAttachmentForm');
  if (attachmentForm) {
    attachmentForm.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      const formData = new FormData(this);
      
      try {
        const response = await fetch('{{ route("tickets.attachments", $ticket) }}', {
          method: 'POST',
          headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
          },
          credentials: 'same-origin',
          body: formData
        });
        
        if (response.ok) {
          const result = await response.json();
          alert(result.success || 'Attachment uploaded successfully!');
          // Close modal and reset form
          const modal = bootstrap.Modal.getInstance(document.getElementById('addAttachmentModal'));
          if (modal) modal.hide();
          this.reset();
          // Reload page to show new attachment
          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 uploading the attachment');
      }
    });
  }
});

// Load users for assignment
async function loadUsersForAssignment() {
  try {
    const response = await fetch('/admin/users', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      credentials: 'same-origin'
    });
    
    if (response.ok) {
      const data = await response.json();
      const userSelect = document.querySelector('#assignTicketForm select[name="assigned_to"]');
      
      // Clear existing options except the first one
      userSelect.innerHTML = '<option value="">Select User</option>';
      
      // Add users
      data.users.forEach(user => {
        const option = document.createElement('option');
        option.value = user.id;
        option.textContent = user.name;
        // Pre-select current assignee if reassigning
        @if($ticket->assigned_to)
        if (user.id == {{ $ticket->assigned_to }}) {
          option.selected = true;
        }
        @endif
        userSelect.appendChild(option);
      });
    }
  } catch (error) {
    console.error('Error loading users:', error);
  }
}

// Load ticket data for editing
async function loadTicketDataForEdit() {
  try {
    const response = await fetch('{{ route("tickets.edit-data", $ticket) }}', {
      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');
      
      // 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);
  }
}

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(status) {
  if (confirm(`Are you sure you want to change status to ${status}?`)) {
    // Use AJAX to update status so activity logging works
    const data = {
      title: '{{ $ticket->title }}',
      description: '{{ $ticket->description }}',
      priority: '{{ $ticket->priority }}',
      category: '{{ $ticket->category }}',
      status: status,
      assigned_to: '{{ $ticket->assigned_to }}'
    };
    
    fetch('{{ route("tickets.update", $ticket) }}', {
      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)
    })
    .then(response => response.json())
    .then(result => {
      if (result.success) {
        alert(result.success);
        location.reload();
      } else {
        alert(result.message || 'An error occurred');
      }
    })
    .catch(error => {
      console.error('Error:', error);
      alert('An error occurred while updating the status');
    });
  }
}

function deleteTicket(ticketId) {
  if (confirm('Are you sure you want to delete this ticket?')) {
    const form = document.getElementById('deleteForm');
    form.action = `/tickets/${ticketId}`;
    form.submit();
  }
}
</script>
@endpush