<?= $this->extend('layouts/owner') ?> 
<?= $this->section('content') ?> 

<script src="https://cdn.tailwindcss.com"></script> 
<script> 
  tailwind.config = { 
    darkMode: 'class', 
    theme: { 
      extend: { 
        colors: { 
          slate: { 950: '#0b1329' } 
        } 
      } 
    } 
  } 

  // Script untuk mengecek prevensi Dark Mode user saat pertama kali load
  if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
  } else {
      document.documentElement.classList.remove('dark');
  }
</script> 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 

<style> 
  body { 
    font-family: 'Inter', sans-serif !important; 
    background-color: #f8fafc; 
    transition: background-color 0.3s ease, color 0.3s ease; 
  } 
  .form-section-card { 
    background: #ffffff; 
    border: 1px solid rgba(226, 232, 240, 0.8); 
    border-radius: 1.25rem; 
    transition: all 0.3s ease; 
  } 
  .form-control-custom { 
    display: block; 
    width: 100%; 
    padding: 0.625rem 0.875rem; 
    font-size: 0.875rem; 
    border: 1px solid #cbd5e1; 
    border-radius: 0.75rem; 
    transition: all 0.15s ease-in-out; 
    background-color: #ffffff;
  } 
  .form-control-custom:focus { 
    border-color: #6366f1; 
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12); 
    outline: 0; 
  } 
  
  /* Dark Mode Styles */ 
  html.dark body { 
    background-color: #0b1329 !important; 
    color: #f8fafc !important; 
  } 
  html.dark .form-section-card { 
    background-color: #1e293b !important; 
    border-color: #334155 !important; 
  } 
  html.dark .form-control-custom { 
    background-color: #0f172a !important; 
    border-color: #475569 !important; 
    color: #f1f5f9 !important; 
  } 
</style> 

<div class="w-full py-6 px-4 sm:px-6 lg:px-8"> 
  <!-- Header -->
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 pb-6 border-b border-slate-200 dark:border-slate-700"> 
    <div> 
      <h1 class="text-2xl font-extrabold text-slate-900 dark:text-white tracking-tight flex items-center gap-2"> 
        <i class="fas fa-plus-circle text-indigo-600 dark:text-indigo-400"></i> <?= esc($title) ?> 
      </h1> 
    </div> 
    
    <!-- Bagian Kanan Header (Tombol Dark Mode & Kembali) -->
    <div class="flex items-center gap-3">
        <!-- Tombol Toggle Dark Mode -->
        <button id="theme-toggle" type="button" class="text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:focus:ring-slate-700 rounded-xl text-sm p-2.5 transition-colors border border-transparent dark:border-slate-600 bg-white dark:bg-slate-800 shadow-sm">
            <!-- Icon Matahari (untuk ganti ke Light Mode) tersembunyi di Light Mode -->
            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
            <!-- Icon Bulan (untuk ganti ke Dark Mode) tersembunyi di Dark Mode -->
            <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
        </button>

        <!-- Tombol Kembali -->
        <a href="<?= base_url('owner/payroll') ?>" class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-xl px-4 py-2.5 shadow-sm text-sm font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"> 
          <i class="fas fa-arrow-left mr-2"></i> Kembali 
        </a> 
    </div>
  </div> 

  <form action="<?= base_url('owner/payroll/store') ?>" method="post" id="createPayrollForm"> 
    <?= csrf_field() ?> 
    
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6"> 
      
      <!-- Left Panel --> 
      <div class="lg:col-span-5 flex flex-col"> 
        <div class="form-section-card p-6 h-full shadow-sm"> 
          <h3 class="text-base font-bold mb-5 border-b border-slate-100 dark:border-slate-700 pb-3 text-slate-800 dark:text-slate-100">
            <i class="fas fa-user-tie text-indigo-500 mr-2"></i> Penerima & Periode
          </h3> 
          <div class="mb-5"> 
            <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Pilih Karyawan *</label> 
            <select name="id_user" class="form-control-custom cursor-pointer" required> 
              <option value="">-- Pilih Karyawan --</option> 
              <?php foreach($users as $user): ?> 
                <option value="<?= $user['id_user'] ?>"><?= esc($user['nama_lengkap']) ?></option> 
              <?php endforeach; ?> 
            </select> 
          </div> 
          <div class="mb-2"> 
            <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Periode Pembayaran *</label> 
            <input type="month" name="periode" class="form-control-custom cursor-pointer" value="<?= date('Y-m') ?>" required> 
          </div> 
        </div> 
      </div> 

      <!-- Right Panel --> 
      <div class="lg:col-span-7 flex flex-col"> 
        <div class="form-section-card p-6 h-full shadow-sm bg-slate-50/50 dark:bg-slate-800/30"> 
          <h3 class="text-base font-bold mb-5 border-b border-slate-100 dark:border-slate-700 pb-3 text-slate-800 dark:text-slate-100">
            <i class="fas fa-calculator text-indigo-500 mr-2"></i> Kalkulasi Gaji
          </h3> 
          
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> 
            <div> 
              <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Gaji Pokok</label> 
              <input type="number" name="gaji_pokok" id="gaji_pokok" class="form-control-custom calc-input" value="0" min="0" required> 
            </div> 
            <div> 
              <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Bonus</label> 
              <input type="number" name="bonus" id="bonus" class="form-control-custom calc-input" value="0" min="0" required> 
            </div> 
            <div> 
              <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Potongan</label> 
              <input type="number" name="potongan" id="potongan" class="form-control-custom calc-input" value="0" min="0" required> 
            </div> 
          </div> 
          
          <div class="mt-6 pt-4 border-t border-slate-100 dark:border-slate-700"> 
            <label class="block text-sm font-bold text-slate-600 dark:text-slate-300 uppercase tracking-wide mb-2">Total Gaji Bersih</label> 
            <input type="number" name="total_gaji" id="total_gaji" class="form-control-custom py-3 text-lg font-extrabold text-indigo-700 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800" readonly required> 
          </div> 
        </div> 
      </div> 
    </div> 

    <!-- Submit Button -->
    <div class="mt-6 form-section-card p-4 flex justify-end gap-2 shadow-sm"> 
      <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl px-8 py-3 transition-colors shadow-md focus:ring-4 focus:ring-indigo-500/30"> 
        <i class="fas fa-save mr-2"></i> Simpan Penggajian 
      </button> 
    </div> 
  </form> 
</div> 

<script> 
document.addEventListener("DOMContentLoaded", function() { 
  // --- Kalkulasi Gaji Logic ---
  const pokokInput = document.getElementById('gaji_pokok'); 
  const bonusInput = document.getElementById('bonus'); 
  const potonganInput = document.getElementById('potongan'); 
  const totalInput = document.getElementById('total_gaji'); 

  function calculateSalary() { 
    const pokok = parseFloat(pokokInput.value) || 0; 
    const bonus = parseFloat(bonusInput.value) || 0; 
    const potongan = parseFloat(potonganInput.value) || 0; 
    
    const total = (pokok + bonus) - potongan; 
    totalInput.value = Math.max(0, total); 
  } 

  document.querySelectorAll('.calc-input').forEach(input => { 
    input.addEventListener('input', calculateSalary); 
    
    input.addEventListener('focus', function() {
      if(this.value === '0') this.value = '';
    });
    input.addEventListener('blur', function() {
      if(this.value === '') this.value = '0';
    });
  }); 

  calculateSalary(); 

  // --- Dark Mode Toggle Logic ---
  var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
  var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

  // Set ikon awal berdasarkan prevensi
  if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      themeToggleLightIcon.classList.remove('hidden');
  } else {
      themeToggleDarkIcon.classList.remove('hidden');
  }

  var themeToggleBtn = document.getElementById('theme-toggle');

  themeToggleBtn.addEventListener('click', function() {
      // Toggle ikon
      themeToggleDarkIcon.classList.toggle('hidden');
      themeToggleLightIcon.classList.toggle('hidden');

      // Jika localStorage punya data sebelumnya
      if (localStorage.getItem('color-theme')) {
          if (localStorage.getItem('color-theme') === 'light') {
              document.documentElement.classList.add('dark');
              localStorage.setItem('color-theme', 'dark');
          } else {
              document.documentElement.classList.remove('dark');
              localStorage.setItem('color-theme', 'light');
          }
      } else {
          // Jika tidak ada data localStorage, set berdasarkan class yang ada di documentElement
          if (document.documentElement.classList.contains('dark')) {
              document.documentElement.classList.remove('dark');
              localStorage.setItem('color-theme', 'light');
          } else {
              document.documentElement.classList.add('dark');
              localStorage.setItem('color-theme', 'dark');
          }
      }
  });
}); 
</script> 

<?= $this->endSection() ?>