{{-- resources/views/admin/kepegawaian/guru/_form.blade.php --}}
@csrf
<div class="card-body"> 
  <div class="row mb-4">
    <div class="col-md-3 border-end d-flex flex-column align-items-center pt-2">
        <label class="form-label fw-bold mb-3">Foto Profil</label>
        
        <div class="position-relative mb-3">
            <div class="avatar-upload" style="width: 160px; height: 160px; position: relative;">
                <img id="img_preview" 
                     src="{{ ($guru && $guru->status && $guru->status->img) ? asset('storage/' . $guru->status->img) : asset('kaiadmin/assets/img/iconuser.png') }}" 
                     alt="Preview Foto" 
                     class="rounded-circle shadow-sm border border-3 border-white bg-light"
                     style="width: 100%; height: 100%; object-fit: cover;">
                
                <label for="img_input" class="position-absolute bottom-0 end-0 bg-primary text-white rounded-circle p-2 shadow-sm" 
                       style="cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.3s;"
                       title="Ganti Foto">
                    <i class="fas fa-camera"></i>
                </label>
            </div>
        </div>

        <input type="file" class="d-none @error('img') is-invalid @enderror" 
               id="img_input" name="img" accept="image/jpeg, image/png, image/jpg">

        @error('img') 
            <div class="text-danger small mt-1 text-center">{{ $message }}</div> 
        @enderror

        <label for="img_input" class="btn btn-sm btn-outline-secondary btn-round mt-2">
            <i class="fas fa-upload me-1"></i> Pilih File
        </label>
        
        <small class="text-muted mt-2 d-block text-center" style="font-size: 0.75rem;">
            Format: JPG/PNG.<br>Maks: 2MB.
        </small>
    </div>

    <div class="col-md-9 ps-md-4">
        <div class="row bg-light rounded p-2 mb-3 border mx-0">
            <div class="col-md-12 mb-2">
                <span class="badge bg-primary">Data Pengangkatan & Status</span>
            </div>
            <div class="col-md-6 mb-2">
                <label class="form-label fw-bold small">Nomor SK Pengangkatan</label>
                <input type="text" name="sk_angkat" class="form-control form-control-sm" 
                       placeholder="No. SK Yayasan / Dinas"
                       value="{{ old('sk_angkat', $guru->kepegawaian->sk_angkat ?? '') }}">
            </div>
            <div class="col-md-6 mb-2">
                <label class="form-label fw-bold small">TMT Pengangkatan</label>
                <input type="date" name="tmt_angkat" class="form-control form-control-sm" 
                       value="{{ old('tmt_angkat', ($guru && $guru->kepegawaian && $guru->kepegawaian->tmt_angkat) ? \Carbon\Carbon::parse($guru->kepegawaian->tmt_angkat)->format('Y-m-d') : '') }}">
                <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">Terhitung Mulai Tanggal</small>
            </div>

            <div class="col-md-6 mb-2">
                <label class="form-label fw-bold small">Status Pegawai</label>
                <select name="sts_pegawai" class="form-select form-select-sm">
                    <option value="">- Pilih -</option>
                    <option value="Tetap" {{ ($guru->status->sts_pegawai ?? '') == 'Tetap' ? 'selected' : '' }}>Tetap</option>
                    <option value="Tidak Tetap" {{ ($guru->status->sts_pegawai ?? '') == 'Tidak Tetap' ? 'selected' : '' }}>Tidak Tetap</option>
                </select>
            </div>
            <div class="col-md-6 mb-2">
                <label class="form-label fw-bold small">Tahun Masuk</label>
                <input type="number" name="th_masuk" id="th_masuk" class="form-control form-control-sm" 
                       value="{{ old('th_masuk', $guru->status->th_masuk ?? '') }}" placeholder="Contoh: 2024">
                <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">
                    <i class="fa fa-info-circle"></i> Input tahun untuk generate NIP.
                </small>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 mb-3">
                <label class="form-label fw-bold">NIP (Nomor Induk Pegawai)</label>
                <div class="input-group">
                    {{-- ID: nip untuk target generate --}}
                    <input type="text" name="nip" id="nip" class="form-control fw-bold text-primary bg-light" 
                           placeholder="Otomatis (248 + 02 + Tahun + Urut)"
                           value="{{ old('nip', $guru->status->nip ?? '') }}" readonly>
                    <button class="btn btn-outline-secondary" type="button" id="btnEditNip" title="Edit Manual">
                        <i class="fa fa-pencil-alt"></i>
                    </button>
                </div>
                <small class="text-muted">NIP SMP Alidrus (Bukan NIP PNS/PPPK).</small>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 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', $guru->name ?? null) }}" required
                     placeholder="Nama lengkap beserta gelar">
              @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
              <label for="jenkel" class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
              <select class="form-select @error('jenkel') is-invalid @enderror" id="jenkel" name="jenkel" required>
                  <option value="L" {{ old('jenkel', $guru->jenkel ?? null) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                  <option value="P" {{ old('jenkel', $guru->jenkel ?? null) == 'P' ? 'selected' : '' }}>Perempuan</option>
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label for="agama" class="form-label">Agama <span class="text-danger">*</span></label>
              <input type="text" class="form-control @error('agama') is-invalid @enderror" 
                     id="agama" name="agama" 
                     value="{{ old('agama', $guru->agama ?? 'Islam') }}" required>
              @error('agama') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
              <label for="tmpt_lahir" class="form-label">Tempat Lahir <span class="text-danger">*</span></label>
              <input type="text" class="form-control @error('tmpt_lahir') is-invalid @enderror" 
                     id="tmpt_lahir" name="tmpt_lahir" 
                     value="{{ old('tmpt_lahir', $guru->tmpt_lahir ?? null) }}" required>
              @error('tmpt_lahir') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
            <div class="col-md-6 mb-3">
              <label for="tgl_lahir" class="form-label">Tanggal Lahir <span class="text-danger">*</span></label>
              <input type="date" class="form-control @error('tgl_lahir') is-invalid @enderror" 
                     id="tgl_lahir" name="tgl_lahir" 
                     value="{{ old('tgl_lahir', $guru?->tgl_lahir?->format('Y-m-d')) }}" required>
              @error('tgl_lahir') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
        </div>
    </div>
  </div>
  
  <hr class="my-4">

  <h6 class="fw-bold text-primary mb-3"><i class="fas fa-lock me-2"></i> Akun & Kontak</h6>
  
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="handphone" class="form-label">No. Handphone / WhatsApp</label>
      <input type="text" class="form-control @error('handphone') is-invalid @enderror" 
             id="handphone" name="handphone" 
             value="{{ old('handphone', $guru->handphone ?? null) }}" placeholder="08...">
    </div>
    <div class="col-md-6 mb-3">
      <label for="email" class="form-label">Email (Untuk Login)</label>
      <input type="email" class="form-control @error('email') is-invalid @enderror" 
             id="email" name="email" 
             value="{{ old('email', $guru->email ?? null) }}" placeholder="nama@email.com">
      @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="password" class="form-label fw-bold">Password</label>
      <div class="input-group">
        <input type="password" class="form-control @error('password') is-invalid @enderror" 
               id="password" name="password" placeholder="******">
        <button class="btn btn-outline-secondary" type="button" id="togglePasswordBtn">
          <i class="fa fa-eye-slash" id="togglePasswordIcon"></i>
        </button>
      </div>
      @if($guru)
        <small class="form-text text-muted">Kosongkan jika tidak ingin mengubah password.</small>
      @else
        <small class="form-text text-muted">Wajib diisi (Min. 6 karakter).</small>
      @endif
      @error('password') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
    </div>

    <div class="col-md-6 mb-3">
      <label for="password_confirmation" class="form-label fw-bold">Konfirmasi Password</label>
      <div class="input-group">
        <input type="password" class="form-control" 
               id="password_confirmation" name="password_confirmation" placeholder="Ketik ulang password">
        <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPasswordBtn">
          <i class="fa fa-eye-slash" id="toggleConfirmPasswordIcon"></i>
        </button>
      </div>
      <small class="form-text text-muted">Pastikan sama dengan password di samping.</small>
    </div>
  </div>

  <div class="row mt-2">
    <div class="col-md-12">
        <div class="card bg-light border-0">
            <div class="card-body py-2 px-3">
                <div class="form-check form-switch d-flex align-items-center">
                    <input class="form-check-input me-3" type="checkbox" name="hak_akses" id="hak_akses"
                           {{ old('hak_akses', $guru->hak_akses ?? false) ? 'checked' : '' }} style="cursor: pointer; width: 3em; height: 1.5em;">
                    <div>
                        <label class="form-check-label fw-bold text-dark mb-0" for="hak_akses" style="cursor: pointer;">Aktifkan Akun Login</label>
                        <small class="d-block text-muted">Jika non-aktif, guru tidak bisa login ke sistem.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

@if(is_null($guru))
<div class="card-footer text-end">
  <a href="{{ route('admin.guru.index') }}" class="btn btn-secondary btn-round">Batal</a>
  <button type="submit" class="btn btn-primary btn-round">Simpan Data Guru</button>
</div>
@endif

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

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

    $('#img_input').change(function(){
        let reader = new FileReader();
        reader.onload = (e) => { 
          $('#img_preview').attr('src', e.target.result); 
        }
        if(this.files[0]){
            reader.readAsDataURL(this.files[0]);
        }
    });

    $('#th_masuk').on('input change', function() {
        let year = $(this).val();
        
        if (year.length === 4) {
            $('#nip').attr('placeholder', 'Sedang membuat NIP...');

            $.ajax({
                url: "{{ route('admin.guru.generate-nip') }}",
                type: "GET",
                data: { year: year },
                success: function(response) {
                    if(response.nip) {
                        $('#nip').val(response.nip);
                    }
                },
                error: function(xhr) {
                    console.error('Gagal generate NIP');
                }
            });
        }
    });

    $('#btnEditNip').on('click', function() {
        let nipInput = $('#nip');
        if (nipInput.attr('readonly')) {
            nipInput.removeAttr('readonly').removeClass('bg-light').focus();
        } else {
            nipInput.attr('readonly', true).addClass('bg-light');
        }
    });

  });
</script>
@endpush