@extends('crm.master')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <!-- Page Header -->
  <div class="row mb-6">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <h4 class="mb-1">User Accounts</h4>
          <p class="text-muted mb-0">Manage all user accounts in the system</p>
        </div>
        <div>
          <a href="{{ route('crm.user-accounts.create') }}" class="btn btn-primary">
            <i class="icon-base ti tabler-plus me-2 icon-14px"></i>
            Add New User
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card crm-grid-card">
        <div class="table-responsive crm-grid-wrap">
          @include('crm.components.alerts')

          <table class="table table-hover crm-grid-table">
            <thead class="table-light">
              <tr>
                <th class="bg-secondary text-white">S.No</th>
                <th class="bg-secondary text-white">Name</th>
                <th class="bg-secondary text-white">Email</th>
                <th class="bg-secondary text-white">Role</th>
                <th class="bg-secondary text-white">Created At</th>
                <th class="bg-secondary text-white">Actions</th>
              </tr>
            </thead>
            <tbody>
              @forelse($users as $key => $user)
                <tr>
                  <td>{{ $key + 1 }}</td>
                  <td>
                    <div class="d-flex align-items-center">
                      <div class="avatar me-3">
                        <div class="avatar-initial bg-label-primary rounded-circle">
                          {{ strtoupper(substr($user->first_name, 0, 1)) }}{{ strtoupper(substr($user->last_name, 0, 1)) }}
                        </div>
                      </div>
                      <div>
                        <h6 class="mb-0">{{ $user->first_name }} {{ $user->last_name }}</h6>
                      </div>
                    </div>
                  </td>
                  <td>{{ $user->email }}</td>
                  <td>
                    <span class="badge bg-label-{{ $user->role === 'super_admin' ? 'danger' : ($user->role === 'admin' ? 'warning' : 'info') }}">
                      {{ ucfirst(str_replace('_', ' ', $user->role)) }}
                    </span>
                  </td>
                  <td>{{ $user->created_at->format('d M, Y') }}</td>
                  <td>
                    <div class="btn-group" role="group">
                      <a href="{{ route('crm.user-accounts.edit', $user->id) }}" class="btn btn-sm btn-primary waves-effect">
                        <i class="icon-base ti tabler-edit icon-14px"></i>
                        Edit
                      </a>
                      <a href="{{ route('crm.user-accounts.change-password', $user->id) }}" class="btn btn-sm btn-warning waves-effect">
                        <i class="icon-base ti tabler-lock icon-14px"></i>
                        Password
                      </a>
                      <button type="button" class="btn btn-sm btn-danger waves-effect" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $user->id }}">
                        <i class="icon-base ti tabler-trash icon-14px"></i>
                        Delete
                      </button>
                    </div>
                  </td>
                </tr>

                <!-- Delete Modal -->
                <div class="modal fade" id="deleteModal{{ $user->id }}" tabindex="-1" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Confirm Delete</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                        <p>Are you sure you want to delete <strong>{{ $user->first_name }} {{ $user->last_name }}</strong>?</p>
                        <p class="text-muted small mb-0">This action cannot be undone.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                          <i class="icon-base ti tabler-x me-1 icon-14px"></i>
                          No
                        </button>
                        <button type="button" class="btn btn-danger" onclick="confirmDelete({{ $user->id }})">
                          <i class="icon-base ti tabler-trash me-1 icon-14px"></i>
                          Yes, Delete
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              @empty
                <tr>
                  <td colspan="6" class="text-center py-5">
                    <p class="text-muted mb-0">No users found</p>
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  function confirmDelete(userId) {
    fetch(`/crm/user-accounts/${userId}`, {
      method: 'DELETE',
      headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
        'Content-Type': 'application/json'
      }
    })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          // Close modal
          const modal = bootstrap.Modal.getInstance(document.getElementById(`deleteModal${userId}`));
          if (modal) modal.hide();
          
          // Show success alert and reload
          alert(data.message);
          location.reload();
        } else {
          alert('Error deleting user');
        }
      })
      .catch(error => {
        console.error('Error:', error);
        alert('Error deleting user');
      });
  }
</script>
@endsection