<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      Gérer les
      <small>Commandes</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
      <li class="active">Commandes</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 à jour de commande</h3>
          </div>
          <!-- /.box-header -->
          <form role="form" action="<?php base_url('orders/create') ?>" method="post" class="form-horizontal">
            <div class="box-body">


              <div class="form-group">
                <label for="date" class="col-sm-12 control-label">Date: <?php echo date('Y-m-d') ?></label>
              </div>
              <div class="form-group">
                <label for="time" class="col-sm-12 control-label">Heure: <?php echo date('h:i a') ?></label>
              </div>

              <div class="col-md-4 col-xs-12 pull pull-left">

                <div class="form-group">
                  <label for="types" class="col-sm-5 control-label" style="text-align:left;">Types</label>
                  <div class="col-sm-7">
                    <select name="" id="typesCommande" class="form-control">
                      <option value="1">Facture</option>
                      <option value="2">Bon de Livraison & Facture</option>
                      <option value="3">Bon de Livraison</option>
                    </select>
                  </div>
                </div>

                <div class="form-group">
                  <label for="customer_name" class="col-sm-5 control-label" style="text-align:left;">Nom du client</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="customer_name" name="customer_name" placeholder="Enter Customer Name" value="<?php echo $order_data['order']['customer_name'] ?>" autocomplete="off" />
                  </div>
                </div>

                <div class="form-group">
                  <label for="gross_amount" class="col-sm-5 control-label" style="text-align:left;">Adresse du client</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="customer_address" name="customer_address" placeholder="Enter Customer Address" value="<?php echo $order_data['order']['customer_address'] ?>" autocomplete="off">
                  </div>
                </div>

                <div class="form-group">
                  <label for="gross_amount" class="col-sm-5 control-label" style="text-align:left;">Téléphone du client</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="customer_phone" name="customer_phone" placeholder="Enter Customer Phone" value="<?php echo $order_data['order']['customer_phone'] ?>" autocomplete="off">
                  </div>
                </div>

                <div class="form-group">
                  <label for="gross_amount" class="col-sm-5 control-label" style="text-align:left;">CIN du client</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="customer_cin" name="customer_cin" placeholder="Enter Customer CIN" value="<?php echo $order_data['order']['customer_cin'] ?>" autocomplete="off">
                  </div>
                </div>
              </div>


              <br /> <br />
              <table class="table table-bordered" id="product_info_table">
                <thead>
                  <tr>
                    <th style="width:50%">Produit</th>
                    <th style="width:10%">Quantité</th>
                    <th style="width:10%">Prix unitaire</th>
                    <th style="width:20%">Montant</th>
                    <th style="width:10%"><button type="button" id="add_row" class="btn btn-default"><i class="fa fa-plus"></i></button></th>
                  </tr>
                </thead>

                <tbody>

                  <?php if (isset($order_data['order_item'])): ?>
                    <?php $x = 1; ?>
                    <?php foreach ($order_data['order_item'] as $key => $val): ?>
                      <?php //print_r($v); 
                      ?>
                      <tr id="row_<?php echo $x; ?>">
                        <td>
                          <select class="form-control select_group product" data-row-id="row_<?php echo $x; ?>" id="product_<?php echo $x; ?>" name="product[]" style="width:100%;" onchange="getProductData(<?php echo $x; ?>)" required>
                            <option value=""></option>
                            <?php foreach ($products as $k => $v): ?>
                              <option value="<?php echo $v['id'] ?>" <?php if ($val['product_id'] == $v['id']) {
                                                                        echo "selected='selected'";
                                                                      } ?>><?php echo $v['name'] ?></option>
                            <?php endforeach ?>
                          </select>
                        </td>
                        <td><input type="hidden" name="qty[]" id="qty_<//?php echo $x; ?>" class="form-control" required onkeyup="getTotal(<?php echo $x; ?>)" value="<//?php echo $val['qty'] ?>" autocomplete="off"></td>
                        <td>
                          <input type="text" name="rate[]" id="rate_<?php echo $x; ?>" class="form-control" disabled value="<?php echo $val['rate'] ?>" autocomplete="off">
                          <input type="hidden" name="rate_value[]" id="rate_value_<?php echo $x; ?>" class="form-control" value="<?php echo $val['rate'] ?>" autocomplete="off">
                        </td>
                        <td>
                          <input type="text" name="amount[]" id="amount_<?php echo $x; ?>" class="form-control" disabled value="<?php echo $val['amount'] ?>" autocomplete="off">
                          <input type="hidden" name="amount_value[]" id="amount_value_<?php echo $x; ?>" class="form-control" value="<?php echo $val['amount'] ?>" autocomplete="off">
                        </td>
                        <td><button type="button" class="btn btn-default" onclick="removeRow('<?php echo $x; ?>')"><i class="fa fa-close"></i></button></td>
                      </tr>
                      <?php $x++; ?>
                    <?php endforeach; ?>
                  <?php endif; ?>
                </tbody>
              </table>

              <br /> <br />

              <div class="col-md-6 col-xs-12 pull pull-right">

                <div class="form-group">
                  <label for="gross_amount" class="col-sm-5 control-label">Montant brut</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="gross_amount" name="gross_amount" disabled value="<?php echo $order_data['order']['gross_amount'] ?>" autocomplete="off">
                    <input type="hidden" class="form-control" id="gross_amount_value" name="gross_amount_value" value="<?php echo $order_data['order']['gross_amount'] ?>" autocomplete="off">
                  </div>
                </div>
                <!-- <//?php if ($is_service_enabled == true): ?>
                  <div class="form-group">
                    <label for="service_charge" class="col-sm-5 control-label">S-Charge <//?php echo $company_data['service_charge_value'] ?> %</label>
                    <div class="col-sm-7">
                      <input type="text" class="form-control" id="service_charge" name="service_charge" disabled value="<//?php echo $order_data['order']['service_charge_rate']  ?>" autocomplete="off">
                      
                      <input type="hidden" class="form-control" id="service_charge_value" name="service_charge_value" value="<//?php echo $order_data['order']['service_charge_rate'] ?>" autocomplete="off">
                    </div>
                  </div>
                <//?php endif; ?> -->
                <!-- <//?php if ($is_vat_enabled == true): ?>
                  <div class="form-group">
                    <label for="vat_charge" class="col-sm-5 control-label">T.V.A <//?php echo $company_data['vat_charge_value'] ?> %</label>
                    <div class="col-sm-7">
                      <input type="text" class="form-control" id="vat_charge" name="vat_charge" disabled value="<//?php echo $order_data['order']['vat_charge'] ?>" autocomplete="off">
                      <input type="hidden" class="form-control" id="vat_charge_value" name="vat_charge_value" value="<//?php echo $order_data['order']['vat_charge'] ?>" autocomplete="off">
                    </div>
                  </div>
                <//?php endif; ?> -->
                <div class="form-group">
                  <label for="discount" class="col-sm-5 control-label">Rabais</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="discount" name="discount" placeholder="Discount" onkeyup="subAmount()" value="<?php echo $order_data['order']['discount'] ?>" autocomplete="off">
                  </div>
                </div>
                <div class="form-group">
                  <label for="net_amount" class="col-sm-5 control-label">Montant net</label>
                  <div class="col-sm-7">
                    <input type="text" class="form-control" id="net_amount" name="net_amount" disabled value="<?php echo $order_data['order']['net_amount'] ?>" autocomplete="off">
                    <input type="hidden" class="form-control" id="net_amount_value" name="net_amount_value" value="<?php echo $order_data['order']['net_amount'] ?>" autocomplete="off">
                  </div>
                </div>


                <!-- <div class="form-group">
                      <label for="paid_status" class="col-sm-5 control-label">Mode de paiement</label>
                      <div class="col-sm-7">
                          <select class="form-control" id="payment_mode" name="payment_mode">
                              <option value="MVOLA" <//?= ($order_data['order']['order_payment_mode'] == "MVOLA") ? 'selected' : '' ?>>MVOLA</option>
                              <option value="Virement Bancaire" <//?= ($order_data['order']['order_payment_mode'] == "Virement Bancaire") ? 'selected' : '' ?>>Virement Bancaire</option>
                              <option value="En espèce" <//?= ($order_data['order']['order_payment_mode'] == "En espèce") ? 'selected' : '' ?>>En espèce</option>
                          </select>
                      </div>
                </div> -->
                <div class="form-group">
                  <label for="paid_status" class="col-sm-5 control-label">Tranche de paiement</label>
                  <div class="col-sm-7">
                    <select class="form-control" id="payment_mode" name="payment_mode">
                      <option value="1" selected>une tranche</option>
                      <option value="2">deux tranches</option>

                    </select>
                  </div>
                </div>




                <div id="payment-tranches">
                  <div class="form-group" id="paid_status_1" style="display: none">
                    <label for="paid_status_1" class="col-sm-5 control-label">Tranche 1</label>

                    <div class="col-sm-3">
                      <select class="form-control" id="payment_mode_1" name="order_payment_mode_1">
                        <option value="MVOLA">MVOLA</option>
                        <option value="Virement Bancaire">Virement Bancaire</option>
                        <option value="En espèce">En espèce</option>
                      </select>
                    </div>
                    <div class="col-sm-4">
                      <input type="number" class="form-control" id="payment_amount_1" name="tranche_1" placeholder="Montant">
                    </div>
                  </div>
                  <div class="form-group" id="paid_status_2" style="display: none">
                    <label for="paid_status_2" class="col-sm-5 control-label">Tranche 2</label>

                    <div class="col-sm-3">
                      <select class="form-control" id="payment_mode_2" name="order_payment_mode_2">
                        <option value="MVOLA">MVOLA</option>
                        <option value="Virement Bancaire">Virement Bancaire</option>
                        <option value="En espèce">En espèce</option>
                      </select>
                    </div>
                    <div class="col-sm-4">
                      <input type="number" class="form-control" id="payment_amount_2" name="tranche_2" placeholder="Montant">
                    </div>
                  </div>
                </div>


                <script>
                  $(document).ready(function() {
                    var paymentTranche = 1;
                    var netAmount = parseFloat($('#net_amount_value').val()) || 0;

                    // Initialisation : définir la première tranche avec le montant total
                    $('#payment_amount_1').val(netAmount);

                    function addPaymentTranche(paymentTranche) {
                      if (parseInt(paymentTranche) === 2) {
                        $("#paid_status_1").show();
                        $("#paid_status_2").show();

                        // Calculer la deuxième tranche
                        var amount1 = parseFloat($('#payment_amount_1').val()) || 0;
                        var amount2 = netAmount - amount1;
                        $('#payment_amount_2').val(amount2);
                      } else {
                        $("#paid_status_1").show();
                        $("#paid_status_2").hide();
                        $('#payment_mode_2').val('');
                      }
                    }

                    // Écouter le changement de la sélection pour afficher les tranches
                    $("#payment_mode").on("change", function() {
                      addPaymentTranche($(this).val());
                    });

                    // Écouter la modification du montant de la première tranche
                    $('#payment_amount_1').on("input", function() {
                      var amount1 = parseFloat($(this).val()) || 0;
                      var amount2 = netAmount - amount1;
                      $('#payment_amount_2').val(amount2);
                    });

                    addPaymentTranche(paymentTranche);
                  });
                </script>



                <div class="form-group">
                  <label for="paid_status" class="col-sm-5 control-label">Statut payant</label>
                  <div class="col-sm-7">
                    <select type="text" class="form-control" id="paid_status" name="paid_status">
                      <option value="1">Payé</option>
                      <option value="2">Non payé</option>
                    </select>
                  </div>
                </div>

              </div>
            </div>
            <!-- /.box-body -->

            <div class="box-footer">

              <input type="hidden" name="service_charge_rate" value="<?php echo $company_data['service_charge_value'] ?>" autocomplete="off">
              <input type="hidden" name="vat_charge_rate" value="<?php echo $company_data['vat_charge_value'] ?>" autocomplete="off">

              <a target="__blank" id="Imprimente" href="<?php echo base_url() . 'orders/printDiv/' . $order_data['order']['id'] ?>" class="btn btn-default">Imprimer</a>
              <button type="submit" class="btn btn-primary">Enregistrer</button>
              <a href="<?php echo base_url('orders/') ?>" 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">
  var base_url = "<?php echo base_url(); ?>";
  var idData = "<?php echo $order_data['order']['id']; ?>";
  let Imprimente = document.getElementById('Imprimente');
  let typesCommande = document.getElementById('typesCommande');

  typesCommande.addEventListener('change', function () {
    if (typesCommande.value == 1) {
      Imprimente.removeAttribute("href");
      Imprimente.setAttribute("href", base_url +'orders/printDiv/' + idData);
    } else if(typesCommande.value == 3) {
      Imprimente.removeAttribute("href");
      Imprimente.setAttribute("href", base_url +'orders/printDivBL/' + idData);
    } else {
      Imprimente.removeAttribute("href");
      Imprimente.setAttribute("href", base_url +'orders/printDivBLF/' + idData);
    }
  })


  // function printOrder(id)
  // {
  //   if(id) {
  //     $.ajax({
  //       url: base_url + 'orders/printDiv/' + id,
  //       type: 'post',
  //       success:function(response) {
  //         var mywindow = window.open('', 'new div', 'height=400,width=600');
  //         // mywindow.document.write('<html><head><title></title>');
  //         // mywindow.document.write('<link rel="stylesheet" href="<?php //echo base_url('assets/bower_components/bootstrap/dist/css/bootstrap.min.css') 
                                                                      ?>" type="text/css" />');
  //         // mywindow.document.write('</head><body >');
  //         mywindow.document.write(response);
  //         // mywindow.document.write('</body></html>');

  //         mywindow.print();
  //         mywindow.close();

  //         return true;
  //       }
  //     });
  //   }
  // }

  $(document).ready(function() {
    $(".select_group").select2();
    // $("#description").wysihtml5();

    $("#mainOrdersNav").addClass('active');
    $("#manageOrdersNav").addClass('active');


    // Add new row in the table 
    $("#add_row").unbind('click').bind('click', function() {
      var table = $("#product_info_table");
      var count_table_tbody_tr = $("#product_info_table tbody tr").length;
      var row_id = count_table_tbody_tr + 1;

      $.ajax({
        url: base_url + '/orders/getTableProductRow/',
        type: 'post',
        dataType: 'json',
        success: function(response) {


          // console.log(reponse.x);
          var html = '<tr id="row_' + row_id + '">' +
            '<td>' +
            '<select class="form-control select_group product" data-row-id="' + row_id + '" id="product_' + row_id + '" name="product[]" style="width:100%;" onchange="getProductData(' + row_id + ')">' +
            '<option value=""></option>';
          $.each(response, function(index, value) {
            html += '<option value="' + value.id + '">' + value.name + '</option>';
          });

          html += '</select>' +
            '</td>' +
            '<td><input type="number" name="qty[]" id="qty_' + row_id + '" class="form-control" onkeyup="getTotal(' + row_id + ')"></td>' +
            '<td><input type="text" name="rate[]" id="rate_' + row_id + '" class="form-control" disabled><input type="hidden" name="rate_value[]" id="rate_value_' + row_id + '" class="form-control"></td>' +
            '<td><input type="text" name="amount[]" id="amount_' + row_id + '" class="form-control" disabled><input type="hidden" name="amount_value[]" id="amount_value_' + row_id + '" class="form-control"></td>' +
            '<td><button type="button" class="btn btn-default" onclick="removeRow(\'' + row_id + '\')"><i class="fa fa-close"></i></button></td>' +
            '</tr>';

          if (count_table_tbody_tr >= 1) {
            $("#product_info_table tbody tr:last").after(html);
          } else {
            $("#product_info_table tbody").html(html);
          }

          $(".product").select2();

        }
      });

      return false;
    });

  }); // /document

  function getTotal(row = null) {
    if (row) {
      var total = Number($("#rate_value_" + row).val()) * Number($("#qty_" + row).val());
      total = total.toFixed(2);
      $("#amount_" + row).val(total);
      $("#amount_value_" + row).val(total);

      subAmount();

    } else {
      alert('no row !! please refresh the page');
    }
  }

  // get the product information from the server
  function getProductData(row_id) {
    var product_id = $("#product_" + row_id).val();
    if (product_id == "") {
      $("#rate_" + row_id).val("");
      $("#rate_value_" + row_id).val("");

      $("#qty_" + row_id).val("");

      $("#amount_" + row_id).val("");
      $("#amount_value_" + row_id).val("");

    } else {
      $.ajax({
        url: base_url + 'orders/getProductValueById',
        type: 'post',
        data: {
          product_id: product_id
        },
        dataType: 'json',
        success: function(response) {
          // setting the rate value into the rate input field

          $("#rate_" + row_id).val(response.price);
          $("#rate_value_" + row_id).val(response.price);

          $("#qty_" + row_id).val(1);
          $("#qty_value_" + row_id).val(1);

          var total = Number(response.price) * 1;
          total = total.toFixed(2);
          $("#amount_" + row_id).val(total);
          $("#amount_value_" + row_id).val(total);

          subAmount();
        } // /success
      }); // /ajax function to fetch the product data 
    }
  }

  // calculate the total amount of the order
  function subAmount() {
    var service_charge = <?php echo ($company_data['service_charge_value'] > 0) ? $company_data['service_charge_value'] : 0; ?>;
    var vat_charge = <?php echo ($company_data['vat_charge_value'] > 0) ? $company_data['vat_charge_value'] : 0; ?>;

    var tableProductLength = $("#product_info_table tbody tr").length;
    var totalSubAmount = 0;
    for (x = 0; x < tableProductLength; x++) {
      var tr = $("#product_info_table tbody tr")[x];
      var count = $(tr).attr('id');
      count = count.substring(4);

      totalSubAmount = Number(totalSubAmount) + Number($("#amount_" + count).val());
    } // /for

    totalSubAmount = totalSubAmount.toFixed(2);

    // sub total
    $("#gross_amount").val(totalSubAmount);
    $("#gross_amount_value").val(totalSubAmount);

    // vat
    var vat = (Number($("#gross_amount").val()) / 100) * vat_charge;
    vat = vat.toFixed(2);
    $("#vat_charge").val(vat);
    $("#vat_charge_value").val(vat);

    // service
    var service = (Number($("#gross_amount").val()) / 100) * service_charge;
    service = service.toFixed(2);
    $("#service_charge").val(service);
    $("#service_charge_value").val(service);

    // total amount
    var totalAmount = (Number(totalSubAmount));
    totalAmount = totalAmount.toFixed(2);
    // $("#net_amount").val(totalAmount);
    // $("#totalAmountValue").val(totalAmount);

    var discount = $("#discount").val();
    if (discount) {
      var grandTotal = Number(totalAmount) - Number(discount);
      grandTotal = grandTotal.toFixed(2);
      $("#net_amount").val(grandTotal);
      $("#net_amount_value").val(grandTotal);
    } else {
      $("#net_amount").val(totalAmount);
      $("#net_amount_value").val(totalAmount);

    } // /else discount 

    var paid_amount = Number($("#paid_amount").val());
    if (paid_amount) {
      var net_amount_value = Number($("#net_amount_value").val());
      var remaning = net_amount_value - paid_amount;
      $("#remaining").val(remaning.toFixed(2));
      $("#remaining_value").val(remaning.toFixed(2));
    }

  } // /sub total amount

  function paidAmount() {
    var grandTotal = $("#net_amount_value").val();

    if (grandTotal) {
      var dueAmount = Number($("#net_amount_value").val()) - Number($("#paid_amount").val());
      dueAmount = dueAmount.toFixed(2);
      $("#remaining").val(dueAmount);
      $("#remaining_value").val(dueAmount);
    } // /if
  } // /paid amoutn function

  function removeRow(tr_id) {
    $("#product_info_table tbody tr#row_" + tr_id).remove();
    subAmount();
  }

  const net_amount_value = document.getElementById('net_amount_value');
  const net_amount = document.getElementById('net_amount');
  const payment_amount_1 = document.getElementById('payment_amount_1');
  payment_amount_1.value = net_amount.value
  console.log(net_amount_value.value, net_amount.value, payment_amount_1.value);
</script>