<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8'); ?></title>
  <link rel="stylesheet" href="<?= base_url('assets/vendor/bootstrap/css/bootstrap.min.css'); ?>">
  <link rel="stylesheet" href="<?= base_url('assets/vendor/fontawesome-free/css/all.min.css'); ?>">
  <script src="<?= base_url('assets/js/jquery.min.js'); ?>"></script>
  <script src="<?= base_url('assets/vendor/bootstrap/js/bootstrap.bundle.min.js'); ?>"></script>
  <script>
    var base_url = <?= json_encode(base_url(), JSON_UNESCAPED_SLASHES); ?>;
    window.shortcut = window.shortcut || { add: function(){} };
    window.showNotif = window.showNotif || function(_pos, _title, msg){ if (msg) { alert(msg); } };
    window.sweet = window.sweet || function(_title, msg){ if (msg) { alert(msg); } };
    window.sweet_time = window.sweet_time || function(_time, _title, msg){ if (msg) { alert(msg); } };
  </script>
  <style>
    body{
      background:transparent;
      padding:0;
      margin:0;
    }
    .catatan-wrap{
      width:100%;
      max-width:100%;
      margin:0;
      background:#fff;
      border:0;
      border-radius:0;
      box-shadow:none;
      overflow:hidden;
    }
    .catatan-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 14px;
      border-bottom:1px solid #e5e7eb;
      background:#f8fafc;
    }
    .catatan-head h4{
      margin:0;
      font-size:34px;
      font-size:clamp(20px, 2.2vw, 34px);
      font-weight:500;
      color:#6b7280;
    }
    .catatan-body{
      padding:14px;
    }
    .catatan-footer{
      display:flex;
      justify-content:flex-end;
      gap:.5rem;
      margin-top:.75rem;
    }
    .catatan-footer .btn{
      min-width:90px;
    }
  </style>
</head>
<body>
  <div class="catatan-wrap">
    <div class="catatan-head">
      <h4><?= htmlspecialchars($nama_produk, ENT_QUOTES, 'UTF-8'); ?></h4>
      <button type="button" id="btn-close-header" class="btn btn-light btn-sm" aria-label="Tutup">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="catatan-body">
      <form id="form-finishing" autocomplete="off">
        <?php
          $this->load->view('produk/detail', [
            'detail' => $detail,
            'nama_produk' => $nama_produk,
            'desain' => $desain,
            'finishing' => $finishing
          ]);
        ?>
        <div class="catatan-footer">
          <button type="button" class="btn btn-danger btn-sm" id="btn-tutup-catatan">Tutup</button>
          <button type="submit" class="btn btn-info btn-sm">Simpan</button>
        </div>
      </form>
    </div>
  </div>

  <script>
    (function(){
      function closeCatatanPage(){
        if (window.parent && window.parent !== window && typeof window.parent.closeStatusBoardCatatanPopup === 'function') {
          window.parent.closeStatusBoardCatatanPopup();
          return;
        }
        if (window.opener && !window.opener.closed) {
          window.close();
          return;
        }
        window.history.back();
      }

      document.getElementById('btn-close-header').addEventListener('click', closeCatatanPage);
      document.getElementById('btn-tutup-catatan').addEventListener('click', closeCatatanPage);

      $(document).on('submit', '#form-finishing', function(e){
        e.preventDefault();
        var payload = $(this).serialize();
        $.ajax({
          url: base_url + 'produk/update_finishing',
          type: 'POST',
          dataType: 'json',
          headers: {'X-Requested-With': 'XMLHttpRequest'},
          data: payload,
          success: function(res){
            if (res && res.ok === 'ok') {
              if (window.parent && typeof window.parent.refreshGrid === 'function') {
                window.parent.refreshGrid();
              }
              alert('Catatan finishing berhasil disimpan.');
              return;
            }
            var msg = (res && res.msg) ? res.msg : 'Gagal menyimpan catatan finishing.';
            alert(msg);
          },
          error: function(xhr){
            var msg = (xhr && xhr.responseText) ? xhr.responseText : 'Terjadi kesalahan saat menyimpan catatan.';
            alert(msg);
          }
        });
      });
    })();
  </script>
</body>
</html>
