{{-- resources/views/profiles/roles_management.blade.php --}}
@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="{{ asset('css/roles.css') }}">
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="mb-0">Users & Roles</h3>
    <a href="{{ route('roles.index') }}" class="btn btn-outline-secondary">Manage Roles</a>
  </div>

  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  <div class="card">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table mb-0">
          <thead class="table-light">
            <tr>
              <th style="width:80px">#</th>
              <th>Name</th>
              <th>Email</th>
              <th style="width:260px">Roles</th>
              <th style="width:150px" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            @forelse($users as $user)
              <tr>
                <td class="fw-semibold">{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td><a href="mailto:{{ $user->email }}">{{ $user->email }}</a></td>
                <td>
                  @forelse($user->getRoleNames() as $r)
                    <span class="badge bg-secondary">{{ $r }}</span>
                  @empty
                    <small class="text-muted">— none —</small>
                  @endforelse
                </td>
                <td class="text-end">
                  <button class="btn btn-sm btn-outline-primary btn-edit-user-roles" data-id="{{ $user->id }}">Edit Roles</button>
                </td>
              </tr>
            @empty
              <tr><td colspan="5" class="text-center py-3">No users.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

    <div class="card-footer">
      {{ $users->links() }}
    </div>
  </div>
</div>

<!-- Edit user roles modal -->
<div class="modal fade" id="editUserRolesModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <form id="editUserRolesForm" method="POST">
        @csrf
        @method('PUT')
        <div class="modal-header">
          <h5 class="modal-title">Edit Roles for <span id="erm_user_name"></span></h5>
          <button class="btn-close" data-bs-dismiss="modal" type="button"></button>
        </div>
        <div class="modal-body">
          <div id="erm_errors" class="alert alert-danger d-none"></div>

          <div class="mb-3">
            <label class="form-label">Roles</label>
            <select name="roles[]" id="erm_roles_select" class="form-select" multiple>
              {{-- options populated by JS --}}
            </select>
            <div class="form-text">Hold Ctrl / Cmd to select multiple roles.</div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-light" data-bs-dismiss="modal" type="button">Close</button>
          <button class="btn btn-primary" id="erm_submit" type="submit">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const editBtns = document.querySelectorAll('.btn-edit-user-roles');
  const modalEl = document.getElementById('editUserRolesModal');
  const modal = new bootstrap.Modal(modalEl);
  const nameEl = document.getElementById('erm_user_name');
  const rolesSelect = document.getElementById('erm_roles_select');
  const form = document.getElementById('editUserRolesForm');
  const errorsBox = document.getElementById('erm_errors');

  editBtns.forEach(b => {
    b.addEventListener('click', async function () {
      const id = this.dataset.id;
      // fetch edit data
      try {
        const res = await fetch(`/profiles/${id}/roles/edit`, {
          headers: { 'Accept': 'application/json' },
          credentials: 'same-origin'
        });
        if (!res.ok) throw new Error('Fetch failed');
        const data = await res.json();
        nameEl.innerText = data.user.name;
        // populate roles select
        rolesSelect.innerHTML = '';
        data.roles.forEach(r => {
          const opt = document.createElement('option');
          opt.value = r;
          opt.text = r;
          if (data.user_roles.includes(r)) opt.selected = true;
          rolesSelect.appendChild(opt);
        });

        // set form action
        form.setAttribute('action', `/profiles/${id}/roles`);
        errorsBox.classList.add('d-none');
        errorsBox.innerText = '';

        modal.show();
      } catch (err) {
        console.error(err);
        alert('Could not load user roles. See console.');
      }
    });
  });

  // submit form (PUT via _method)
  form.addEventListener('submit', async function (e) {
    e.preventDefault();
    errorsBox.classList.add('d-none');
    errorsBox.innerText = '';
    const action = form.getAttribute('action');

    // collect selected roles
    const selected = Array.from(rolesSelect.selectedOptions).map(o => o.value);

    // send as JSON (or FormData) - use fetch with proper CSRF
    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    try {
      const res = await fetch(action, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': token,
          'Accept': 'application/json'
        },
        credentials: 'same-origin',
        body: JSON.stringify({ roles: selected })
      });

      if (res.status === 422) {
        const json = await res.json();
        const errs = json.errors || {};
        errorsBox.classList.remove('d-none');
        errorsBox.innerText = Object.values(errs).flat().join(' ');
        return;
      }

      if (!res.ok) {
        const text = await res.text();
        errorsBox.classList.remove('d-none');
        errorsBox.innerText = text || 'Server error';
        return;
      }

      // success
      modal.hide();
      // reload to update user roles cells (simple)
      location.reload();

    } catch (err) {
      errorsBox.classList.remove('d-none');
      errorsBox.innerText = 'Network error — see console';
      console.error(err);
    }
  });

});
</script>
@endpush

@endsection