<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <?php
  function stringToArray($data)
  {
    // Ensure the string is properly formatted for JSON decoding
    $data = str_replace("'", '"', $data); // Convert single quotes to double quotes

    // Decode JSON to an array
    return json_decode($data, true);
  }
  ?>
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      Gérer les
      <small>Produits</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
      <li class="active">Produits</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <!-- Small boxes (Stat box) -->
    <div class="row">
      <div class="col-md-12 col-xs-12">

        <div id="messages"></div>

        <?php if (session()->getFlashdata('success')): ?>
          <div class="alert alert-success alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <?php echo session()->getFlashdata('success'); ?>
          </div>
        <?php elseif (session()->getFlashdata('error')): ?>
          <div class="alert alert-error alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <?php echo session()->getFlashdata('error'); ?>
          </div>
        <?php endif; ?>


        <div class="box">
          <div class="box-header">
            <h3 class="box-title">Mise à jours Moto</h3>
          </div>
          <!-- /.box-header -->
          <form role="form" action="<?php base_url('users/update') ?>" method="post" enctype="multipart/form-data">
            <div class="box-body">
              <div class="form-group">
                <label>Image: </label>
                <img src="<?php echo base_url() . 'assets/images/product_image/' . $product_data['image'] ?>" width="150" height="150" class="img-circle">
              </div>

              <div class="form-group">
                <label for="product_image">Nouvelle Image</label>
                <div class="kv-avatar">
                  <div class="file-loading">
                    <input id="product_image" name="product_image" type="file" accept="image/*">
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label for="product_name">Nom de Moto</label>
                <input type="text" class="form-control" id="product_name" name="nom_de_produit" placeholder="Nom du moto" autocomplete="off" value="<?php echo $product_data['name']; ?>" />
              </div>

              <div class="form-group">
                <label for="marque">Marque</label>
                <select class="form-control" id="marque" name="marque">
                  <?php foreach ($marque as $k => $v): ?>
                    <option value="<?php echo $v['id'] ?>" <?php if ($product_data['marque'] == $v['id']) {
                                                              echo "selected='selected'";
                                                            } ?>><?php echo $v['name'] ?></option>
                  <?php endforeach ?>
                </select>
              </div>

              <div class="form-group">
                <label for="moteur">Numéro de moteur</label>
                <input type="text" class="form-control" id="moteur" name="numero_de_moteur" placeholder="Numéro de série" autocomplete="off" value="<?php echo $product_data['numero_de_moteur']; ?>" />
              </div>

              <div class="form-group">
                <label for="chassis">Chassis</label>
                <input type="text" class="form-control" id="chassis" name="chasis" placeholder="Chassis" autocomplete="off" value="<?php echo $product_data['chasis']; ?>" />
              </div>

              <div class="form-group">
                <label for="price">Prix d'Achat</label>
                <input type="number" min="0" class="form-control" id="price" name="price" placeholder="Prix d'achat" autocomplete="off" value="<?php echo $product_data['price']; ?>" />
              </div>
              <div class="form-group">
                <label for="price_vente">Prix de Vente</label>
                <input type="number" min="0" class="form-control" id="price_vente" name="price_vente" placeholder="Prix de vente" autocomplete="off" value="<?php echo $product_data['prix_vente']; ?>" />
              </div>

              <div class="form-group">
                <label for="qty">Quantiter</label>
                <input type="number" min="0" class="form-control" id="qty" name="quantiter" placeholder="Quantiter" autocomplete="off" value="<?php echo $product_data['qty']; ?>" />
              </div>

              <div class="form-group">
                <label for="datea">Date d'arrivage</label>
                <input type="date" class="form-control" id="datea" name="datea" autocomplete="off" value="<?php echo $product_data['date_arivage']; ?>" />
              </div>

              <div class="form-group">
                <label for="puissance">Puissances</label>
                <input type="text" class="form-control" id="puissance" name="puissance" placeholder="Puissances" autocomplete="off" value="<?php echo $product_data['puissance']; ?>" />
              </div>

              <div class="form-group">
                <label for="cler">Clé</label>
                <input type="text" class="form-control" id="cler" name="cler" placeholder="Type de clé" autocomplete="off" value="<?php echo $product_data['cler']; ?>" />
              </div>

              <div class="form-group">
                <label for="description">Description</label>
                <textarea type="text" class="form-control" id="description" name="description" placeholder="Description" autocomplete="off">
                <?php echo $product_data['description']; ?>
                  </textarea>
              </div>

              <div class="form-group">
                <label for="sku">Numéro de série</label>
                <input type="text" class="form-control" id="sku" name="numero_de_serie" placeholder="Numéro de série" autocomplete="off" value="<?php echo $product_data['sku']; ?>" />
              </div>

              <div class="form-group">
                <label for="categorie">Catégories</label>
               <?php
                  // Normalisation de la valeur de product_data['categorie_id']
                  $rawCats = $product_data['categorie_id'] ?? null;

                  if (is_array($rawCats)) {
                      $catIds = array_map('intval', $rawCats);
                  } elseif (is_string($rawCats)) {
                      // transforme "1,2,3" en [1,2,3]
                      $catIds = array_filter(array_map('intval', explode(',', $rawCats)), fn($id) => $id > 0);
                  } elseif (is_int($rawCats) || ctype_digit((string)$rawCats)) {
                      // wrap l'int en tableau
                      $catIds = [(int) $rawCats];
                  } else {
                      $catIds = [];
                  }
                  ?>

                  <select class="form-control select_group" id="categorie" name="categorie[]" multiple="multiple">
                    <?php foreach ($categorie as $k => $v): ?>
                      <option value="<?= $v['id']; ?>"
                        <?= in_array($v['id'], $catIds, true) ? 'selected="selected"' : '' ?>>
                        <?= esc($v['name']); ?>
                      </option>
                    <?php endforeach; ?>
                  </select>


              </div>

              <div class="form-group">
                <label for="store">Magasin</label>
                <select class="form-control select_group" id="store" name="store">
                  <?php foreach ($stores as $k => $v): ?>
                    <option value="<?php echo $v['id'] ?>" <?php if ($product_data['store_id'] == $v['id']) {
                                                              echo "selected='selected'";
                                                            } ?>><?php echo $v['name'] ?></option>
                  <?php endforeach ?>
                </select>
              </div>

              <div class="form-group">
                <label for="store">Disponibilité</label>
                <select class="form-control" id="availability" name="availability">
                  <option value="1" <?php if ($product_data['availability'] == 1) {
                                      echo "selected='selected'";
                                    } ?>>Oui</option>
                  <option value="2" <?php if ($product_data['availability'] != 1) {
                                      echo "selected='selected'";
                                    } ?>>Non</option>
                </select>
              </div>

              <div class="form-group">
                <label for="store">Etats</label>
                <select class="form-control" id="etat" name="etats">
                  <option value="1" <?php if ($product_data['etats'] == 1) {
                                      echo "selected='selected'";
                                    } ?>>Kit</option>
                  <option value="2" <?php if ($product_data['etats'] != 1) {
                                      echo "selected='selected'";
                                    } ?>>Non Kit</option>
                </select>
              </div>

              <div class="form-group" id="boxsuplementairekit"></div>

              <div class="form-group">
                <label for="store">Pièce Manquant</label>
                <select class="form-control" id="info" name="info">
                  <option value="2" <?php if ($product_data['info'] != 1) {
                                      echo "selected='selected'";
                                    } ?>>Non</option>
                  <option value="1" <?php if ($product_data['info'] == 1) {
                                      echo "selected='selected'";
                                    } ?>>Oui</option>
                </select>
              </div>

              <div class="form-group" id="boxsuplementaire"></div>
            </div>


        </div>

        <div class="box-footer">
          <button type="submit" class="btn btn-primary">Enregistrer</button>
          <a href="<?php echo base_url('products/') ?>" class="btn btn-warning">Retour</a>
        </div>
        </form>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- col-md-12 -->
</div>
<!-- /.row -->


</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

<script type="text/javascript">
  $(document).ready(function() {
    $(".select_group").select2();
    $("#description").wysihtml5();

    $("#mainProductNav").addClass('active');
    $("#manageProductNav").addClass('active');

    var btnCust = '<button type="button" class="btn btn-secondary" title="Add picture tags" ' +
      'onclick="alert(\'Call your custom code here.\')">' +
      '<i class="glyphicon glyphicon-tag"></i>' +
      '</button>';
    $("#product_image").fileinput({
      overwriteInitial: true,
      maxFileSize: 1500,
      showClose: false,
      showCaption: false,
      browseLabel: '',
      removeLabel: '',
      browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>',
      removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
      removeTitle: 'Cancel or reset changes',
      elErrorContainer: '#kv-avatar-errors-1',
      msgErrorClass: 'alert alert-block alert-danger',
      // defaultPreviewContent: '<img src="/uploads/default_avatar_male.jpg" alt="Your Avatar">',
      layoutTemplates: {
        main2: '{preview} ' + btnCust + ' {remove} {browse}'
      },
      allowedFileExtensions: ["jpg", "png", "gif", "jpeg", 'webp']
    });

    const info = document.getElementById('info');
    const divSupp = document.getElementById('boxsuplementaire')

    window.addEventListener('load', () => {
      if (info.value == 1) {
        divSupp.innerHTML = `
            <label for="infoManque">Information</label>
            <textarea type="text" class="form-control" id="infoManque" name="infoManque" placeholder="Description sur des trucs manquants" autocomplete="off"><?php echo $product_data['infoManque']; ?></textarea>
        `;
      } else {
        divSupp.innerHTML = '';
      }

      if (etat.value == 1) {
        boxsuplementairekit.innerHTML = `
            <label for="infoManquekit">Information sur le kit</label>
            <textarea type="text" class="form-control" id="infoManquekit" name="infoManquekit" placeholder="Description sur le kit" autocomplete="off"><?php echo $product_data['infoManquekit']; ?></textarea>
        `;
      } else {
        boxsuplementairekit.innerHTML = '';
      }
    })

    info.addEventListener('change', () => {
      if (info.value == 1) {
        divSupp.innerHTML = `
            <label for="infoManque">Information</label>
            <textarea type="text" class="form-control" id="infoManque" name="infoManque" placeholder="Description sur des trucs manquants" autocomplete="off"><?php echo $product_data['infoManque']; ?></textarea>
        `;
      } else {
        divSupp.innerHTML = '';
      }
    })

    const etat = document.getElementById('etat');
    const boxsuplementairekit = document.getElementById('boxsuplementairekit')

    etat.addEventListener('change', () => {
      if (etat.value == 1) {
        boxsuplementairekit.innerHTML = `
            <label for="infoManquekit">Information sur le kit</label>
            <textarea type="text" class="form-control" id="infoManquekit" name="infoManquekit" placeholder="Description sur le kit" autocomplete="off"><?php echo $product_data['infoManquekit']; ?></textarea>
        `;
      } else {
        boxsuplementairekit.innerHTML ='';
      }
    })

  });
</script>