@extends('layout.main')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Edit User</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">User</a></li>
              <li class="breadcrumb-item active">Edit</li>
            </ol>
          </div>
        </div>
      </div>
    </div>

    <section class="content">
      <div class="container-fluid">
        <form action="{{ route('admin.user.update', $data->id) }}" method="POST">
          @csrf
          @method('PUT')
          <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">Form Edit User</h3>
            </div>
            <div class="card-body">
              <div class="form-group">
                <label>Nama</label>
                <input type="text" class="form-control" name="nama" value="{{ old('nama', $data->name) }}" placeholder="Masukkan Nama">
                @error('nama')
                  <small class="text-danger">{{ $message }}</small>
                @enderror
              </div>
              <div class="form-group">
                <label>NIP</label>
                <input type="text" class="form-control" name="nip" value="{{ old('nip', $data->nip) }}" placeholder="Masukkan NIP">
                @error('nip')
                  <small class="text-danger">{{ $message }}</small>
                @enderror
              </div>
              <div class="form-group">
                <label>Password (Kosongkan jika tidak diubah)</label>
                <input type="password" name="password" class="form-control" placeholder="Password Baru">
                @error('password')
                  <small class="text-danger">{{ $message }}</small>
                @enderror
              </div>
              <div class="form-group">
                <label>Role</label>
                <select name="role" id="roleSelect" class="form-control" required>
                  <option value="">-- Pilih Role --</option>
                  <option value="admin" {{ old('role', $data->role) == 'admin' ? 'selected' : '' }}>Admin</option>
                  <option value="operator" {{ old('role', $data->role) == 'operator' ? 'selected' : '' }}>Operator</option>
                </select>
                @error('role')
                  <small class="text-danger">{{ $message }}</small>
                @enderror
              </div>
              <div class="form-group" id="skpdGroup">
                <label>SKPD</label>
                <select name="skpd_id" id="skpdSelect" class="form-control">
                  <option value="">-- Pilih SKPD --</option>
                  @foreach ($skpds as $skpd)
                    <option value="{{ $skpd->id }}" {{ old('skpd_id', $data->skpd_id) == $skpd->id ? 'selected' : '' }}>
                      {{ $skpd->nama }}
                    </option>
                  @endforeach
                </select>
                @error('skpd_id')
                  <small class="text-danger">{{ $message }}</small>
                @enderror
              </div>
            </div>
            <div class="card-footer">
              <button type="submit" class="btn btn-primary">Simpan</button>
              <a href="{{ route('admin.index') }}" class="btn btn-secondary">Kembali</a>
            </div>
          </div>
        </form>
      </div>
    </section>
</div>

<script>
  function toggleSKPDField() {
    const role = document.getElementById('roleSelect').value;
    const skpdGroup = document.getElementById('skpdGroup');
    const skpdSelect = document.getElementById('skpdSelect');

    if (role === 'admin') {
      skpdGroup.style.display = 'none';
      skpdSelect.value = '';
    } else {
      skpdGroup.style.display = 'block';
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    toggleSKPDField(); // Run on page load
    document.getElementById('roleSelect').addEventListener('change', toggleSKPDField);
  });
</script>
@endsection