<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>FabriO - MES</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body {
      background-color: #ecf0f1;
      font-family: 'Segoe UI', sans-serif;
    }
    .logo {
      height: 110px;
    }
    .card {
      border-radius: 15px;
      box-shadow: 0 0 8px rgba(0,0,0,0.05);
    }
    .section-title {
      font-weight: bold;
      font-size: 1.4rem;
      margin-bottom: 1rem;
    }
    .value {
      font-size: 1.5rem;
      font-weight: bold;
    }
    .label {
      font-size: 0.85rem;
      color: #555;
    }
    .footer-note {
      font-size: 1rem;
      color: #777;
      text-align: right;
      margin-top: 1rem;
    }
  </style>
</head>


<script>
function loadData(ligne, targetId) {
  $.ajax({
    url: 'https://api.orientalsnacks.com.tn/screen.php', // ou directement l'URL API si CORS est autorisé
    method: 'POST',
    contentType: 'application/json',
    dataType: 'json',
    data: JSON.stringify({
      token: '0XplwLyFpXjClVIQMSg39HbiDT8CSahHJ9uWITlr152PWDV92aJudFOl9uwAg4xR',
      ligne: ligne
    }),
    success: function(data) {
      const html = `
        <div class="card p-3 bg-white">
		   <div class="footer-note">${data.demarage}</div>
          <div class="section-title">${ligne}</div>
          <div class="row text-center">
            <div class="col">
              <div class="label">CADENCE SACHETS *</div>
              <div class="value">${data.CADENCE_SACHETS}</div>
            </div>
            <div class="col">
              <div class="label">QTE CARTON STD *</div>
              <div class="value">${data.QTE_CARTON}</div>
            </div>
            <div class="col">
              <div class="label">TEMPS PALETTE STD *</div>
              <div class="value">${data.TEMPS_PALLETTE_STD}</div>
            </div>
          </div>
   
          <hr>
          <div class="row text-center">
            <div class="col"><strong>${data.pa}</strong></div>
            <div class="col">${data.declaration}</div>
          </div>
          <hr>

          <div class="row text-center">
            <div class="col">
              <div class="label">QTE PALETTE LOCALE *</div>
              <div class="value">${data.QTE_PALETTE_LOCALE}</div>
            </div>
            <div class="col">
              <div class="label">QTE PALETTE EXPORT *</div>
              <div class="value">${data.QTE_PALETTE_EXPORT}</div>
            </div>
            <div class="col">
              <div class="label">QTE PALETTE LOT *</div>
              <div class="value">${data.QTE_PALETTE_GMS}</div>
            </div>
          </div>

   <div class="footer-note">* jusqu'à palette N°${data.count_palette}</div>
        </div>
      `;
      $(`#${targetId}`).html(html);
    },
    error: function(xhr) {
      $(`#${targetId}`).html('<div class="text-danger">Erreur de chargement</div>');
      console.error("Erreur API:", xhr.responseText);
    }
  });
}

$(document).ready(function() {
  loadData('PA1&2', 'bloc-PA1_2');
  loadData('PA3', 'bloc-PA3');
});
</script>





<body class="p-3">
  <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div><strong style="font-size: 1.7em;"><?php date_default_timezone_set('Africa/Tunis'); echo date("d/m/Y"); ?></strong></div>
      <div class="text-center">
        <img src="/admin/images/fabrio_logo.png" alt="Logo" class="logo" /><br />
      </div>
      <div><strong style="font-size: 1.7em;"><?php echo date("H:i"); ?></strong></div>
    </div>

<div class="row g-4" id="dashboard">
  <!-- Bloc PA1&2 -->
  <div class="col-md-6" id="bloc-PA1_2"></div>

  <!-- Bloc PA3 -->
  <div class="col-md-6" id="bloc-PA3"></div>
</div>
 </div>
</body>
</html>
