@extends('adminlte::page')
@section('title', 'Create User')
@section('content_header')<h1 class="font-condensed">Create User</h1>@endsection
@section('content')
@if($errors->any())<div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>@endif
<form method="POST" action="{{ route('admin.users.store') }}" class="card card-compact">
  @csrf
  <div class="card-body">
    <div class="form-row">
      <div class="form-group col-md-4"><label>Name</label><input class="form-control" name="name" value="{{ old('name') }}"></div>
      <div class="form-group col-md-4"><label>Email</label><input class="form-control" name="email" value="{{ old('email') }}"></div>
      <div class="form-group col-md-4">
        <label>Phone / WhatsApp <small class="text-muted">(optional)</small></label>
        <input class="form-control" name="phone" value="{{ old('phone') }}" placeholder="62xxxxxxxxxx">
        <small class="form-text text-muted">Used for WhatsApp sending. You can enter 0-leading local numbers; the system stores them as 62…</small>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label>Password <small class="text-muted">(optional)</small></label>
        <div class="input-group">
          <input type="password" class="form-control" id="password" name="password" autocomplete="new-password">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="btn-toggle-pass" title="Show/Hide"><i class="fas fa-eye"></i></button>
            <button class="btn btn-outline-secondary" type="button" id="btn-generate" title="Generate secure password"><i class="fas fa-magic"></i> Generate</button>
            <button class="btn btn-outline-secondary" type="button" id="btn-copy" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
          </div>
        </div>
        <small class="form-text text-muted">Leave empty to send a password reset link to the user. Generated password will meet strong policy (≥12 chars, upper/lower/number/symbol).</small>
      </div>
      <div class="form-group col-md-6">
        <label>Confirm Password</label>
        <div class="input-group">
          <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" autocomplete="new-password">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="btn-toggle-pass-confirm" title="Show/Hide"><i class="fas fa-eye"></i></button>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group"><label>Roles</label>
      <div class="row">
        @foreach($roles as $role)
          <div class="col-md-4">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="role_{{ $role->id }}" name="roles[]" value="{{ $role->name }}">
              <label class="custom-control-label" for="role_{{ $role->id }}">{{ $role->name }}</label>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </div>
  <div class="card-footer text-right"><button class="btn btn-primary">Create</button></div>
</form>
@section('js')
<script>
  (function(){
    function randIndex(max){
      // Use crypto for secure randomness when available
      if (window.crypto && window.crypto.getRandomValues) {
        const arr = new Uint32Array(1);
        window.crypto.getRandomValues(arr);
        return arr[0] % max;
      }
      return Math.floor(Math.random()*max);
    }
    function generateSecurePassword(length = 16) {
      const lowers = 'abcdefghijklmnopqrstuvwxyz';
      const uppers = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      const numbers = '0123456789';
      const symbols = '!@#$%^&*()-_=+[]{};:,.<>?';
      const all = lowers + uppers + numbers + symbols;

      // Ensure at least one of each category
      let pwd = [
        lowers[randIndex(lowers.length)],
        uppers[randIndex(uppers.length)],
        numbers[randIndex(numbers.length)],
        symbols[randIndex(symbols.length)],
      ];
      for (let i = pwd.length; i < length; i++) {
        const c = all[randIndex(all.length)];
        pwd.push(c);
      }
      // Shuffle using secure randomness
      for (let i = pwd.length - 1; i > 0; i--) {
        const j = randIndex(i + 1);
        [pwd[i], pwd[j]] = [pwd[j], pwd[i]];
      }
      return pwd.join('');
    }

    const passInput = document.getElementById('password');
    const passConfirm = document.getElementById('password_confirmation');
    const btnGen = document.getElementById('btn-generate');
    const btnCopy = document.getElementById('btn-copy');
    const btnToggle = document.getElementById('btn-toggle-pass');
    const btnToggleConfirm = document.getElementById('btn-toggle-pass-confirm');

    if (btnGen) btnGen.addEventListener('click', function(){
      const pwd = generateSecurePassword(16);
      passInput.value = pwd;
      if (passConfirm) passConfirm.value = pwd;
      passInput.type = 'text';
      if (btnToggle) btnToggle.innerHTML = '<i class="fas fa-eye-slash"></i>';
    });

    if (btnCopy) btnCopy.addEventListener('click', async function(){
      try {
        await navigator.clipboard.writeText(passInput.value || '');
        this.classList.add('text-success');
        this.innerHTML = '<i class="fas fa-check"></i>';
        setTimeout(() => { this.classList.remove('text-success'); this.innerHTML = '<i class="fas fa-copy"></i>'; }, 1200);
      } catch (e) {
        alert('Copy failed');
      }
    });

    if (btnToggle) btnToggle.addEventListener('click', function(){
      passInput.type = passInput.type === 'password' ? 'text' : 'password';
      this.innerHTML = passInput.type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
    });

    if (btnToggleConfirm) btnToggleConfirm.addEventListener('click', function(){
      passConfirm.type = passConfirm.type === 'password' ? 'text' : 'password';
      this.innerHTML = passConfirm.type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
    });
  })();
</script>
@endsection
@endsection