@extends('layouts.user_type.auth')

@section('content')
  <div>
    <div class="row">
      <div class="col-12">
        <div class="card mb-4 mx-4">
          <div class="card-header pb-0">
            <div class="d-flex flex-row justify-content-between">
              <div>
                <h5 class="mb-0">All Users</h5>
              </div>
              <!-- Button trigger modal -->
              <a href="#" class="btn bg-gradient-primary btn-sm mb-0" data-bs-toggle="modal"
                data-bs-target="#addUserModal" type="button">+&nbsp; Tambah User</a>
            </div>
          </div>
          <div class="card-body px-0 pt-0 pb-2">
            <div class="table-responsive p-0">
              <table class="table align-items-center mb-0">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      No
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Name
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Email
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Assign Role
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Project
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Action
                    </th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($users as $user)
                    <tr>
                      <td class="ps-4">{{ $loop->iteration }}</td>
                      <td class="text-center">{{ $user->name }}</td>
                      <td class="text-center">{{ $user->email }}</td>
                      <td>
                        <form action="{{ route('user-management.assign-role', $user->id) }}" method="POST"
                          style="display: flex; gap: 5px; align-items: center;">
                          @csrf
                          <select name="role" class="select2 form-control" style="width: 60%;" required>
                            <option value="">Pilih Role</option>
                            @foreach ($roles as $role)
                              <option value="{{ $role->name }}"
                                {{ $user->roles->contains('name', $role->name) ? 'selected' : '' }}>
                                {{ $role->display_name }}
                              </option>
                            @endforeach
                          </select>
                          <button type="submit" class="btn btn-primary btn-sm"
                            style="white-space: nowrap;">Assign</button>
                        </form>
                      </td>
                      <td class="text-center">{{ $project->nama_project ?? '-' }}</td>
                      <td class="text-center">
                        <button class="btn btn-sm btn-info" data-bs-toggle="modal"
                          data-bs-target="#editUserModal{{ $user->id }}">Edit</button>
                        <button type="button" class="btn btn-sm btn-danger delete-btn" data-user-id="{{ $user->id }}"
                          data-user-name="{{ $user->name }}">Delete</button>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Tambah User -->
  <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <form action="{{ route('user-management.store') }}" method="POST">
        @csrf
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addUserModalLabel">Tambah User</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label>Nama</label>
              <input type="text" name="name" class="form-control" required>
            </div>
            <div class="mb-3">
              <label>Email</label>
              <input type="email" name="email" class="form-control" required>
            </div>
            <div class="mb-3">
              <label>Project</label>
              <select name="project_id" class="select2 form-control">
                <option value="" class="" disabled selected>Pilih Project</option>
                @foreach ($projects as $project)
                  <option value="{{ $project->project_id }}">{{ $project->nama_project }}</option>
                @endforeach
              </select>
            </div>
            <div class="mb-3">
              <label>Departement</label>
              <select name="departement_id" class="select2 form-control" required>
                <option value="" disabled selected>Pilih Departement</option>
                @foreach ($departements as $departement)
                  <option value="{{ $departement->id }}">{{ $departement->nm_dpt }}</option>
                @endforeach
              </select>
            </div>
            <div class="mb-3">
              <label>Password</label>
              <input type="password" name="password" class="form-control" required>
            </div>
            <div class="mb-3">
              <label>Password Konfirmasi</label>
              <input type="password" name="password_confirmation" class="form-control" required>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary">Simpan</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  @if ($errors->any())
    <div class="alert alert-danger">
      <ul>
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  {{-- Edit User Modals --}}
  @foreach ($users as $user)
    <div class="modal fade" id="editUserModal{{ $user->id }}" tabindex="-1"
      aria-labelledby="editUserModalLabel{{ $user->id }}" aria-hidden="true">
      <div class="modal-dialog">
        <form action="{{ route('user-management.update', $user->id) }}" method="POST">
          @csrf
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="editUserModalLabel{{ $user->id }}">Edit User</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="mb-3">
                <label for="edit_name{{ $user->id }}" class="form-label">Nama <span
                    class="text-danger">*</span></label>
                <input type="text" id="edit_name{{ $user->id }}" name="name" class="form-control"
                  value="{{ $user->name }}" required>
              </div>
              <div class="mb-3">
                <label for="edit_email{{ $user->id }}" class="form-label">Email <span
                    class="text-danger">*</span></label>
                <input type="email" id="edit_email{{ $user->id }}" name="email" class="form-control"
                  value="{{ $user->email }}" required>
              </div>
              <div class="mb-3">
                <label for="edit_departement{{ $user->id }}" class="form-label">Departement</label>
                <select id="edit_departement{{ $user->id }}" name="departement_id" class="form-select">
                  <option value="">-- Pilih Departement --</option>
                  @foreach ($departements as $departement)
                    <option value="{{ $departement->id }}"
                      {{ $user->departement_id == $departement->id ? 'selected' : '' }}>
                      {{ $departement->nm_dpt }}
                    </option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
              <button type="submit" class="btn btn-primary">Update User</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  @endforeach

  {{-- SweetAlert & Delete Handler --}}
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
    document.querySelectorAll('.delete-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const userId = this.getAttribute('data-user-id');
        const userName = this.getAttribute('data-user-name');

        Swal.fire({
          title: 'Kamu yakin untuk hapus?',
          text: `Hapus user "${userName}"? Tindakan ini tidak dapat dibatalkan.`,
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#dc3545',
          cancelButtonColor: '#6c757d',
          confirmButtonText: 'Ya, hapus!',
          cancelButtonText: 'Batal'
        }).then((result) => {
          if (result.isConfirmed) {
            // Create and submit form
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/user-management/delete/${userId}`;
            form.innerHTML = `
              @csrf
              @method('DELETE')
            `;
            document.body.appendChild(form);
            form.submit();
          }
        });
      });
    });
  </script>
@endsection