{{---- resources/views/admin/users/_form.blade.php ----}}

@csrf 

<div class="card-body">
  {{-- Baris 1: Nama --}}
  <div class="mb-3">
    <label for="name" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
    <input type="text" class="form-control @error('name') is-invalid @enderror" 
           id="name" name="name" 
           value="{{ old('name', $user->name ?? null) }}" required>
    @error('name')
      <div class="invalid-feedback">{{ $message }}</div>
    @enderror
  </div>

  {{-- Baris 2: Email dan Role --}}
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="email" class="form-label">Alamat Email <span class="text-danger">*</span></label>
      <input type="email" class="form-control @error('email') is-invalid @enderror" 
             id="email" name="email" 
             value="{{ old('email', $user->email ?? null) }}" required>
      @error('email')
        <div class="invalid-feedback">{{ $message }}</div>
      @enderror
    </div>
    <div class="col-md-6 mb-3">
      <label for="type" class="form-label">Role (Tipe) <span class="text-danger">*</span></label>
      <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
        <option value="" disabled {{ old('type', $user->type ?? '') === null ? 'selected' : '' }}>-- Pilih Role --</option>
        @foreach($types as $type)
          <option value="{{ $type->id }}" 
            {{ (string)old('type', (string)($user->type ?? '')) === (string)$type->id ? 'selected' : '' }}>
            {{ $type->name }}
          </option>
        @endforeach
      </select>
      @error('type')
        <div class="invalid-feedback">{{ $message }}</div>
      @enderror
    </div>
  </div>

  {{-- Baris 3: Password --}}
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="password" class="form-label">Password</label>
      
      {{-- Gunakan Input Group --}}
      <div class="input-group">
        <input type="password" class="form-control @error('password') is-invalid @enderror" 
               id="password" name="password">
        <button class="btn btn-outline-secondary" type="button" id="togglePasswordBtn">
          <i class="fa fa-eye-slash" id="togglePasswordIcon"></i>
        </button>
      </div>
      
      @error('password')
        {{-- Pesan error harus di luar input-group untuk tampil benar --}}
        <div class="invalid-feedback d-block">{{ $message }}</div>
      @enderror
      
      @if(isset($user))
        <small class="form-text text-muted">Kosongkan jika tidak ingin mengubah password.</small>
      @else
         <small class="form-text text-muted">Wajib diisi untuk pengguna baru.</small>
      @endif
    </div>
    <div class="col-md-6 mb-3">
      <label for="password_confirmation" class="form-label">Konfirmasi Password</label>
      
      {{-- Gunakan Input Group --}}
      <div class="input-group">
        <input type="password" class="form-control" id="password_confirmation" name="password_confirmation">
        <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPasswordBtn">
          <i class="fa fa-eye-slash" id="toggleConfirmPasswordIcon"></i>
        </button>
      </div>
      
    </div>
  </div>

  {{-- Baris 4: Picture Upload --}}
  <div class="mb-3 row">
    <div class="col-md-6">
      <label for="picture" class="form-label">Foto Profil</label>
      <input type="file" class="form-control @error('picture') is-invalid @enderror" id="picture" name="picture" accept="image/*">
      @error('picture')
        <div class="invalid-feedback">{{ $message }}</div>
      @enderror
      <small class="form-text text-muted">Ukuran maksimal 2MB. (jpg, png, gif)</small>
    </div>
    <div class="col-md-6">
      @if(isset($user) && $user->pictureUrl())
        <label class="form-label d-block">Preview Saat Ini</label>
        <img src="{{ $user->pictureUrl() }}" alt="preview" class="img-thumbnail" style="max-height:100px;">
      @endif
    </div>
  </div>

  {{-- Baris 5: Blocked & Direct Publish --}}
  <div class="mb-3 row">
    <div class="col-md-6">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="blocked" name="blocked" value="1"
          {{ old('blocked', isset($user) ? $user->blocked : 0) ? 'checked' : '' }}>
        <label class="form-check-label" for="blocked">
          Blokir Pengguna
        </label>
        <div class="form-text text-muted">Centang untuk memblokir akses pengguna ini.</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="direct_publish" name="direct_publish" value="1"
          {{ old('direct_publish', isset($user) ? $user->direct_publish : 0) ? 'checked' : '' }}>
        <label class="form-check-label" for="direct_publish">
          Direct Publish
        </label>
        <div class="form-text text-muted">Centang jika artikel yang dibuat pengguna ini langsung terbit.</div>
      </div>
    </div>
  </div>

</div>
<div class="card-footer text-end">
  <a href="{{ route('admin.users.index') }}" class="btn btn-secondary btn-round">
    <i class="fa fa-arrow-left"></i> Kembali
  </a>
  <button type="submit" class="btn btn-primary btn-round">
    <i class="fa fa-check"></i> Simpan Data
  </button>
</div>

@push('scripts')
<script>
  $(function () {
    $('#togglePasswordBtn').on('click', function() {
      const passwordInput = $('#password');
      const passwordIcon = $('#togglePasswordIcon');
      const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
      passwordInput.attr('type', type);
      passwordIcon.toggleClass('fa-eye fa-eye-slash');
    });

    $('#toggleConfirmPasswordBtn').on('click', function() {
      const confirmPasswordInput = $('#password_confirmation');
      const confirmPasswordIcon = $('#toggleConfirmPasswordIcon');
      const type = confirmPasswordInput.attr('type') === 'password' ? 'text' : 'password';
      confirmPasswordInput.attr('type', type);
      confirmPasswordIcon.toggleClass('fa-eye fa-eye-slash');
    });

    $('#picture').on('change', function(e){
      const file = this.files[0];
      if (!file) return;
      if (!file.type.startsWith('image/')) return;
      const reader = new FileReader();
      reader.onload = function(ev) {
        let preview = $('#picture-preview');
        if (!preview.length) {
          $('<div id="picture-preview" class="mt-2"><img class="img-thumbnail" style="max-height:100px;"></div>').insertAfter('#picture');
          preview = $('#picture-preview');
        }
        preview.find('img').attr('src', ev.target.result);
      };
      reader.readAsDataURL(file);
    });
  });
</script>
@endpush