@extends('contentNavbarLayout')

@section('title', 'User Management')

@section('content')
<div class="container">

  <h4 class="mb-3">User Management</h4>

  {{-- Add User Button --}}
  @hasPermission('system.accesscontrol.user.add')
    <div class="mb-3 text-end">
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
        <i class="mdi mdi-account-plus"></i> Add User
      </button>
    </div>
  @endhasPermission

  {{-- Flash Message --}}
    @if(session('success'))
      <div class="alert alert-success alert-dismissible fade show m-3" role="alert">
        <i class="mdi mdi-check-circle-outline me-1"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif

    {{-- Global Error List --}}
    @if ($errors->any())
      <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
        <i class="mdi mdi-alert-circle-outline me-1"></i>
        <strong>Whoops!</strong> Please fix the following:
        <ul class="mb-0 mt-1 ps-3">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif


  <br>
  <div class="col-12">
    <div class="card">
      <div class="table-responsive">
        <table class="table">
          <thead class="table-light">
            <tr>
              <th class="text-truncate">No.</th>
              <th class="text-truncate">Full Name</th>
              <th class="text-truncate">Email</th>
              <th class="text-truncate">Role</th>
              <th class="text-truncate">Status</th>
              <th class="text-truncate">Last Login</th>
              @hasAnyPermission(['system.accesscontrol.user.edit', 'system.accesscontrol.user.delete'])
                <th class="text-truncate">Actions</th>
              @endhasAnyPermission
            </tr>
          </thead>
          <tbody>
            @foreach ($users as $index => $user)
              <tr>
                <td>{{ $index + 1 }}</td>
                <td>{{ $user->full_name }}</td>
                <td>{{ $user->email }}</td>
                <td>
                  @switch($user->role->name ?? null)
                      @case('Admin')
                          <i class="mdi mdi-pencil-outline mdi-24px text-info me-1"></i> Admin
                          @break

                      @case('HR')
                          <i class="mdi mdi-account-tie mdi-24px text-secondary me-1"></i> HR
                          @break

                      @case('Sales')
                          <i class="mdi mdi-cash-multiple mdi-24px text-success me-1"></i> Sales
                          @break

                      @case('STD')
                          <i class="mdi mdi-laptop mdi-24px text-danger me-1"></i> STD
                          @break

                      @case('Technical Support')
                          <i class="mdi mdi-cog-outline mdi-24px text-warning me-1"></i> Technical Support
                          @break

                      @default
                          <i class="mdi mdi-account-outline mdi-24px text-primary me-1"></i> {{ $user->role->name ?? '-' }}
                  @endswitch
                </td>

                <td>
                  @if ($user->status == '1')
                    <span class="badge bg-label-success rounded-pill">Active</span>
                  @elseif ($user->status == '0')
                    <span class="badge bg-label-secondary rounded-pill">Inactive</span>
                  @else
                    <span class="badge bg-label-warning rounded-pill">Pending</span>
                  @endif
                </td>
                <td>{{ $user->last_login ? $user->last_login->format('d/m/y H:i') : '-' }}</td>
                @hasAnyPermission(['system.accesscontrol.user.edit', 'system.accesscontrol.user.delete'])
                  <td>
                    <div class="dropdown">
                      <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
                        <i class="mdi mdi-dots-vertical"></i>
                      </button>
                      <div class="dropdown-menu">
                        {{-- Edit User --}}
                        @hasPermission('system.accesscontrol.user.edit')
                          <a class="dropdown-item" href="{{ route('users.edit', $user->id) }}">
                            <i class="mdi mdi-pencil-outline me-1"></i> Edit
                          </a>
                        @endhasPermission

                        {{-- Delete User --}}
                        @hasPermission('system.accesscontrol.user.delete')
                          <form action="{{ route('users.destroy', $user->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this user?');">
                            @csrf
                            @method('DELETE')
                            <button class="dropdown-item text-danger" type="submit">
                              <i class="mdi mdi-trash-can-outline me-1"></i> Delete
                            </button>
                          </form>
                        @endhasPermission
                      </div>
                    </div>
                  </td>
                @endhasAnyPermission
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>


{{-- Modal Form --}}
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form method="POST" action="{{ route('users.store') }}">
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addUserModalLabel">Add New User</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Full Name</label>
            <input type="text" name="full_name" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" name="email" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Password</label>
            <input type="password" name="password" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Role</label>
            <select name="role_id" class="form-select" required>
              <option value="">-- Select Role --</option>
              @foreach($roles as $role)
                <option value="{{ $role->id }}">{{ $role->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Status</label>
            <select name="status" class="form-select" required>
              <option value="1">Active</option>
              <option value="0">Inactive</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            <i class="mdi mdi-close"></i> Cancel
          </button>
          <button type="submit" class="btn btn-primary">
            <i class="mdi mdi-content-save"></i> Save
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection