{{-- resources/views/admin/kepegawaian/karyawan/_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="{{ ($karyawan && $karyawan->status && $karyawan->status->img) ? asset('storage/' . $karyawan->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;">
                
                {{-- Tombol Kamera dengan Dropdown (Update) --}}
                <div class="position-absolute bottom-0 end-0">
                    <button type="button" class="btn btn-primary text-white rounded-circle p-0 shadow border-0 d-flex align-items-center justify-content-center" 
                            style="width: 45px; height: 45px; transition: all 0.3s;"
                            data-bs-toggle="dropdown" aria-expanded="false" title="Ubah Foto">
                        <i class="fas fa-camera fs-5"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow border-0 rounded-3">
                        <li>
                            <label class="dropdown-item py-2 fw-bold" for="img_input" style="cursor: pointer;">
                                <i class="fas fa-upload me-2 text-primary"></i> Upload File Gambar
                            </label>
                        </li>
                        <li>
                            <a class="dropdown-item py-2 fw-bold" href="#" data-bs-toggle="modal" data-bs-target="#kameraModal">
                                <i class="fas fa-video me-2 text-success"></i> Ambil dari Kamera
                            </a>
                        </li>
                    </ul>
                </div>
            </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
        
        <small class="text-muted mt-3 d-block text-center" style="font-size: 0.75rem;">
            Format: JPG/PNG.<br>Maks: 2MB.<br>Akan dikonversi otomatis.
        </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', $karyawan->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', ($karyawan && $karyawan->kepegawaian && $karyawan->kepegawaian->tmt_angkat) ? \Carbon\Carbon::parse($karyawan->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" {{ ($karyawan->status->sts_pegawai ?? '') == 'Tetap' ? 'selected' : '' }}>Tetap</option>
                    <option value="Tidak Tetap" {{ ($karyawan->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', $karyawan->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">
                    <input type="text" name="nip" id="nip" class="form-control fw-bold text-primary bg-light" 
                           placeholder="Otomatis (248 + 03 + Tahun + Urut)"
                           value="{{ old('nip', $karyawan->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 (Kode Karyawan: 03).</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', $karyawan->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', $karyawan->jenkel ?? null) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                  <option value="P" {{ old('jenkel', $karyawan->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', $karyawan->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', $karyawan->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', $karyawan?->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', $karyawan->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', $karyawan->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($karyawan)
        <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', $karyawan->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, karyawan tidak bisa login ke sistem.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

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

{{-- Modal Untuk WebCam --}}
<div class="modal fade" id="kameraModal" tabindex="-1" aria-labelledby="kameraModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title fw-bold" id="kameraModalLabel"><i class="fas fa-camera me-2"></i> Ambil Foto Kamera</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0 text-center bg-black position-relative">
                <video id="kameraVideo" width="100%" autoplay playsinline style="display: block; max-height: 400px; object-fit: cover;"></video>
                <canvas id="kameraCanvas" style="display: none;"></canvas>
            </div>
            <div class="modal-footer justify-content-center bg-light border-0">
                <button type="button" class="btn btn-secondary fw-bold shadow-sm" id="switchCameraBtn">
                    <i class="fas fa-sync-alt me-1"></i> Ganti Kamera
                </button>
                <button type="button" class="btn btn-primary fw-bold shadow-sm px-4" id="captureCameraBtn">
                    <i class="fas fa-bullseye me-1"></i> Ambil Foto
                </button>
            </div>
        </div>
    </div>
</div>

@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]);
        }
    });

    // --- SCRIPT WEBCAM MULAI ---
    let video = document.getElementById('kameraVideo');
    let canvas = document.getElementById('kameraCanvas');
    let stream = null;
    let useFrontCamera = true; 

    function startCamera() {
        let constraints = {
            video: {
                facingMode: (useFrontCamera ? "user" : "environment"),
                width: { ideal: 1280 },
                height: { ideal: 720 }
            }
        };

        navigator.mediaDevices.getUserMedia(constraints)
            .then(function (mediaStream) {
                stream = mediaStream;
                video.srcObject = stream;
            })
            .catch(function (error) {
                console.error("Akses kamera ditolak atau tidak ditemukan!", error);
                
                let pesanError = "Gagal mengakses kamera!\n\nKode Error: " + error.name;
                
                if (error.name === 'NotAllowedError') {
                    pesanError += "\nSistem memblokir akses. Ini biasanya karena Anda menggunakan 'http://' (Bukan https://) atau Anda menekan tombol 'Block' saat diminta izin.";
                } else if (error.name === 'NotFoundError') {
                    pesanError += "\nSistem tidak dapat menemukan perangkat kamera (Webcam belum terpasang atau rusak).";
                } else if (error.name === 'NotReadableError') {
                    pesanError += "\nKamera saat ini sedang digunakan oleh aplikasi lain. Tutup dulu aplikasi tersebut.";
                } else {
                    pesanError += "\nPesan detail: " + error.message;
                }
                
                alert(pesanError);
            });
    }

    function stopCamera() {
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
            video.srcObject = null;
        }
    }

    $('#kameraModal').on('shown.bs.modal', function () {
        startCamera();
    });

    $('#kameraModal').on('hidden.bs.modal', function () {
        stopCamera();
    });

    $('#switchCameraBtn').click(function() {
        stopCamera();
        useFrontCamera = !useFrontCamera;
        startCamera();
    });

    $('#captureCameraBtn').click(function() {
        if (!stream) return;

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        let context = canvas.getContext('2d');
        
        if (useFrontCamera) {
            context.translate(canvas.width, 0);
            context.scale(-1, 1);
        }
        
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(function(blob) {
            let file = new File([blob], "foto_karyawan_" + Date.now() + ".jpg", { type: "image/jpeg" });
            let container = new DataTransfer();
            container.items.add(file);
            document.getElementById('img_input').files = container.files;

            $('#img_input').trigger('change');
            $('#kameraModal').modal('hide');
            
        }, 'image/jpeg', 0.9); 
    });
    // --- SCRIPT WEBCAM SELESAI ---

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

            $.ajax({
                url: "{{ route('admin.karyawan.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