<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1><?php echo $page_title; ?></h1>
        <p class="text-muted mb-0"><?php echo $page_subtitle; ?></p>
      </div>
      <div class="col-sm-6 text-right">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="<?php echo site_url('dashboard'); ?>">Dashboard</a></li>
          <li class="breadcrumb-item"><a href="<?php echo site_url('master/shift'); ?>">Manajemen Shift</a></li>
          <li class="breadcrumb-item active"><?php echo $page_title; ?></li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-md-7">
        <div class="card card-danger card-outline">
          <div class="card-header">
            <h3 class="card-title"><i class="fa fa-clock mr-1"></i> <?php echo $page_title; ?></h3>
          </div>
          <form action="<?php echo site_url('master/shift/simpan'); ?>" method="post">
            <?php echo form_open('master/shift/simpan'); ?>
            <?php if ($row): ?>
              <input type="hidden" name="id_shift" value="<?php echo $row->id_shift; ?>">
            <?php endif; ?>
            <div class="card-body">

              <div class="form-group">
                <label>Kode Shift <span class="text-danger">*</span></label>
                <input type="text" name="kode_shift" class="form-control text-uppercase"
                       value="<?php echo html_escape($row->kode_shift ?? ''); ?>"
                       placeholder="Contoh: PAGI, SIANG, MALAM" maxlength="20"
                       <?php echo ($row && $row->kode_shift === 'DEFAULT') ? 'readonly' : ''; ?> required>
                <small class="text-muted">Hanya huruf kapital, tanpa spasi.</small>
              </div>

              <div class="form-group">
                <label>Nama Shift <span class="text-danger">*</span></label>
                <input type="text" name="nama_shift" class="form-control"
                       value="<?php echo html_escape($row->nama_shift ?? ''); ?>"
                       placeholder="Contoh: Shift Pagi" maxlength="100" required>
              </div>

              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group">
                    <label>Jam Masuk <span class="text-danger">*</span></label>
                    <input type="time" name="jam_masuk" class="form-control"
                           value="<?php echo $row ? substr($row->jam_masuk, 0, 5) : '08:00'; ?>" required>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label>Jam Keluar <span class="text-danger">*</span></label>
                    <input type="time" name="jam_keluar" class="form-control"
                           value="<?php echo $row ? substr($row->jam_keluar, 0, 5) : '17:00'; ?>" required>
                    <small class="text-muted" id="info-lintas"></small>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label>Toleransi Keterlambatan (menit) <span class="text-danger">*</span></label>
                <input type="number" name="toleransi_menit" class="form-control"
                       value="<?php echo $row->toleransi_menit ?? 15; ?>"
                       min="0" max="120" required>
                <small class="text-muted">Pegawai yang masuk dalam rentang ini tidak dianggap terlambat.</small>
              </div>

              <div class="form-group">
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1"
                         <?php echo (!$row || $row->is_active) ? 'checked' : ''; ?>>
                  <label class="custom-control-label" for="is_active">Shift Aktif</label>
                </div>
              </div>

            </div>
            <div class="card-footer">
              <button type="submit" class="btn btn-danger">
                <i class="fa fa-save mr-1"></i> Simpan
              </button>
              <a href="<?php echo site_url('master/shift'); ?>" class="btn btn-secondary ml-2">Batal</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
(function() {
  var infoEl = document.getElementById('info-lintas');
  function cekLintas() {
    var masuk  = document.querySelector('[name=jam_masuk]').value;
    var keluar = document.querySelector('[name=jam_keluar]').value;
    if (masuk && keluar && keluar < masuk) {
      infoEl.innerHTML = '<span class="text-info"><i class="fa fa-moon"></i> Shift malam (jam keluar di hari berikutnya) terdeteksi otomatis.</span>';
    } else {
      infoEl.innerHTML = '';
    }
  }
  document.querySelector('[name=jam_masuk]').addEventListener('change', cekLintas);
  document.querySelector('[name=jam_keluar]').addEventListener('change', cekLintas);
  cekLintas();
})();
</script>
