@extends('layouts.bootstrap')

@section('title', 'Deleted Tickets')
@section('breadcrumb', 'Dashboard / Ticket Management / Deleted 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">
      <a href="{{ route('tickets.index') }}" class="btn btn-outline-primary">
        <i class="bi bi-arrow-left me-1"></i>Back to Tickets
      </a>
    </div>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <input id="quickSearch" class="form-control" placeholder="Search deleted tickets, people, #ID…" style="min-width:240px">
    </div>
  </div>
</div>

<!-- Deleted 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>Ticket</th>
          <th>Requester</th>
          <th>Assignee</th>
          <th>Priority</th>
          <th>Status</th>
          <th>Created</th>
          <th>Deleted</th>
          <th class="text-end">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($tickets as $ticket)
        <tr>
          <td><input class="form-check-input" type="checkbox" value="{{ $ticket->id }}"></td>
          <td>
            <div class="d-flex align-items-center">
              <div class="avatar me-2">{{ substr($ticket->user->name, 0, 1) }}</div>
              <div>
                <div class="fw-bold">{{ $ticket->title }}</div>
                <div class="text-secondary small">#{{ $ticket->id }}</div>
              </div>
            </div>
          </td>
          <td>{{ $ticket->user->name }}</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->priority)
              @case('urgent')
                <span class="badge pri-urgent">Urgent</span>
                @break
              @case('high')
                <span class="badge pri-high">High</span>
                @break
              @case('medium')
                <span class="badge pri-medium">Medium</span>
                @break
              @case('low')
                <span class="badge pri-low">Low</span>
                @break
            @endswitch
          </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>{{ $ticket->deleted_at->format('Y-m-d H:i') }}</td>
          <td class="text-end">
            <button class="btn btn-sm btn-outline-success" onclick="restoreTicket({{ $ticket->id }})" title="Restore">
              <i class="bi bi-arrow-clockwise"></i>
            </button>
            <button class="btn btn-sm btn-outline-danger" onclick="forceDeleteTicket({{ $ticket->id }})" title="Permanently Delete">
              <i class="bi bi-trash-fill"></i>
            </button>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="9" class="text-center py-4">
            <div class="text-muted">
              <i class="bi bi-trash fs-1 mb-3"></i>
              <p>No deleted tickets found</p>
            </div>
          </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>

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

<!-- Restore Confirmation Modal -->
<div class="modal fade" id="restoreTicketModal" tabindex="-1" aria-labelledby="restoreTicketModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-title" id="restoreTicketModalLabel">
          <i class="bi bi-arrow-clockwise me-2"></i>Confirm Restoration
        </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-arrow-clockwise text-success" style="font-size: 4rem;"></i>
        </div>
        <h4 class="fw-bold text-dark mb-3">Restore Ticket?</h4>
        <p class="text-muted mb-4">
          Are you sure you want to restore this ticket? It will be moved back to the active tickets list.
        </p>
        <div class="alert alert-info">
          <i class="bi bi-info-circle me-2"></i>
          <strong>Note:</strong> The ticket will be restored to its previous status and will appear in the main tickets list.
        </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-success" id="confirmRestoreBtn">
          <i class="bi bi-arrow-clockwise me-1"></i>Restore Ticket
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Force Delete Confirmation Modal -->
<div class="modal fade" id="forceDeleteTicketModal" tabindex="-1" aria-labelledby="forceDeleteTicketModalLabel" 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="forceDeleteTicketModalLabel">
          <i class="bi bi-exclamation-triangle-fill me-2"></i>Permanent 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-fill text-danger" style="font-size: 4rem;"></i>
        </div>
        <h4 class="fw-bold text-dark mb-3">Permanently Delete Ticket?</h4>
        <p class="text-muted mb-4">
          Are you sure you want to permanently delete this ticket? This action cannot be undone.
        </p>
        <div class="alert alert-danger">
          <i class="bi bi-exclamation-triangle me-2"></i>
          <strong>Warning:</strong> This will permanently remove the ticket and all its data from the system. This action cannot be undone.
        </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="confirmForceDeleteBtn">
          <i class="bi bi-trash-fill me-1"></i>Permanently Delete
        </button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
// 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';
    });
  });
}

// Global variables to store ticket IDs for actions
let ticketToRestore = null;
let ticketToForceDelete = null;

function restoreTicket(ticketId) {
  ticketToRestore = ticketId;
  const modal = new bootstrap.Modal(document.getElementById('restoreTicketModal'));
  modal.show();
}

function forceDeleteTicket(ticketId) {
  ticketToForceDelete = ticketId;
  const modal = new bootstrap.Modal(document.getElementById('forceDeleteTicketModal'));
  modal.show();
}

// Handle confirm restore button click
document.addEventListener('DOMContentLoaded', function() {
  const confirmRestoreBtn = document.getElementById('confirmRestoreBtn');
  if (confirmRestoreBtn) {
    confirmRestoreBtn.addEventListener('click', function() {
      if (ticketToRestore) {
        fetch(`/tickets/${ticketToRestore}/restore`, {
          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) {
            // Show success message
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show';
            alertDiv.innerHTML = `
              <i class="bi bi-check-circle me-2"></i>${result.success}
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.querySelector('.card.shadow-sm').insertBefore(alertDiv, document.querySelector('.table-responsive'));
            
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('restoreTicketModal'));
            if (modal) modal.hide();
            
            // Reload page after a short delay
            setTimeout(() => {
              location.reload();
            }, 1500);
          } else {
            alert(result.error || 'An error occurred');
          }
        })
        .catch(error => {
          console.error('Error:', error);
          alert('An error occurred while restoring the ticket');
        });
      }
    });
  }

  // Handle confirm force delete button click
  const confirmForceDeleteBtn = document.getElementById('confirmForceDeleteBtn');
  if (confirmForceDeleteBtn) {
    confirmForceDeleteBtn.addEventListener('click', function() {
      if (ticketToForceDelete) {
        fetch(`/tickets/${ticketToForceDelete}/force-delete`, {
          method: 'DELETE',
          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) {
            // Show success message
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show';
            alertDiv.innerHTML = `
              <i class="bi bi-check-circle me-2"></i>${result.success}
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.querySelector('.card.shadow-sm').insertBefore(alertDiv, document.querySelector('.table-responsive'));
            
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('forceDeleteTicketModal'));
            if (modal) modal.hide();
            
            // Reload page after a short delay
            setTimeout(() => {
              location.reload();
            }, 1500);
          } else {
            alert(result.error || 'An error occurred');
          }
        })
        .catch(error => {
          console.error('Error:', error);
          alert('An error occurred while permanently deleting the ticket');
        });
      }
    });
  }
});
</script>
@endpush