@extends('layouts.enterprise')

@section('title', 'Usuarios')

@section('content')
  <div class="card">
    @php($openCreateUserModal = old('name') !== null || old('email') !== null || old('role') !== null)

    <h1 class="page-title">Usuarios del sitio</h1>
    <p class="subtle">Administra roles y accede al perfil de cada usuario.</p>

    @if(session('ok'))
      <div class="notice">{{ session('ok') }}</div>
    @endif

    <div style="display:flex; justify-content:flex-end; margin-bottom:12px;">
      <sl-button variant="primary" id="open-create-user-modal">Crear usuario</sl-button>
    </div>

    <form method="GET" action="{{ route('admin.users.index') }}" style="display:flex; gap:12px; align-items:end; margin-bottom:16px;">
      <div class="field" style="max-width:220px;">
        <label>Rol</label>
        <select name="role">
          <option value="all" @selected($role === 'all')>Todos</option>
          <option value="admin" @selected($role === 'admin')>Admin</option>
          <option value="accountant" @selected($role === 'accountant')>Accountant</option>
          <option value="supplier" @selected($role === 'supplier')>Supplier</option>
        </select>
      </div>
      <button class="btn" type="submit">Filtrar</button>
    </form>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Nombre</th>
          <th>Email</th>
          <th>Rol</th>
          <th>Empresa</th>
          <th>Estatus proveedor</th>
          <th>Accion</th>
        </tr>
      </thead>
      <tbody>
        @foreach($users as $item)
          <tr>
            <td>{{ $item->id }}</td>
            <td>{{ $item->name }}</td>
            <td>{{ $item->email }}</td>
            <td><span class="badge">{{ \App\Models\User::normalizeRole($item->role ?? '-') }}</span></td>
            <td>{{ $item->company?->legal_name ?? '-' }}</td>
            <td><span class="badge">{{ $item->company?->provider_status ?? '-' }}</span></td>
            <td><a class="btn btn-secondary" href="{{ route('admin.users.edit', $item) }}">Editar</a></td>
          </tr>
        @endforeach
      </tbody>
    </table>

    <div style="margin-top:16px;">
      {{ $users->onEachSide(1)->links('vendor.pagination.enterprise') }}
    </div>
  </div>

  <sl-dialog label="Crear usuario" id="create-user-dialog">
    <form method="POST" action="{{ route('admin.users.store') }}" id="create-user-form" class="grid" style="gap:10px;">
      @csrf

      @if($errors->any())
        <div class="error" style="margin-bottom:0;">
          <ul>
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <div class="grid grid-2">
        <div class="field">
          <label>Nombre</label>
          <input name="name" value="{{ old('name') }}" required>
        </div>
        <div class="field">
          <label>Email</label>
          <input type="email" name="email" value="{{ old('email') }}" required>
        </div>
        <div class="field">
          <label>Rol</label>
          <select name="role" required>
            <option value="admin" @selected(old('role') === 'admin')>admin</option>
            <option value="accountant" @selected(old('role') === 'accountant')>accountant</option>
          </select>
        </div>
        <div class="field">
          <label>Correo verificado</label>
          <select name="email_verified">
            <option value="0" @selected(old('email_verified', '0') === '0')>No</option>
            <option value="1" @selected(old('email_verified') === '1')>Si</option>
          </select>
        </div>
        <div class="field">
          <label>Contraseña</label>
          <input type="password" name="password" required>
        </div>
        <div class="field">
          <label>Confirmar contraseña</label>
          <input type="password" name="password_confirmation" required>
        </div>
      </div>
    </form>

    <sl-button slot="footer" variant="default" id="close-create-user-modal">Cancelar</sl-button>
    <sl-button slot="footer" variant="primary" type="submit" form="create-user-form">Crear usuario</sl-button>
  </sl-dialog>
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const dialog = document.getElementById('create-user-dialog');
      const openButton = document.getElementById('open-create-user-modal');
      const closeButton = document.getElementById('close-create-user-modal');

      if (openButton && dialog) {
        openButton.addEventListener('click', function () {
          dialog.show();
        });
      }

      if (closeButton && dialog) {
        closeButton.addEventListener('click', function () {
          dialog.hide();
        });
      }

      @if($openCreateUserModal)
        if (dialog) {
          dialog.show();
        }
      @endif
    });
  </script>
@endpush