<div class="content-wrapper">
    <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>
    <section class="content">
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <?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; ?>
                <?php if ($errors = session()->getFlashdata('errors')): ?>
                    <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>
                        <ul>
                            <?php foreach ($errors as $error): ?>
                                <li><?= esc($error) ?></li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                <?php endif; ?>
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">Ajouter une commande</h3>
                    </div>
                    <form role="form" action="/orders/create" method="post" class="form-horizontal">
                        <?php if (isset($validation) && $validation->getErrors()): ?>
                            <div class="alert alert-danger">
                                <ul>
                                    <?= $validation->listErrors() ?>
                                </ul>
                            </div>

                        <?php endif; ?>
                        <div class="box-body">
                            <div class="form-group">
                                <label for="gross_amount" class="col-sm-12 control-label">Date:
                                    <?php echo date('Y-m-d') ?></label>
                            </div>
                            <div class="form-group">
                                <label for="gross_amount" 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="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" 
                                        value="<?= old('customer_name') ?>"
                                        name="customer_name"
                                            placeholder="Entrer le nom du client" required autocomplete="off" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="customer_address" 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"
                                        value="<?= old('customer_address') ?>"    
                                        name="customer_address" placeholder="Entrer l'adresse du client" required autocomplete="off" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="customer_phone" 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"
                                        value="<?= old('customer_phone') ?>"
                                            name="customer_phone" placeholder="Entrer le téléphone du client" 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_phone" name="customer_cin"
                                            value="<?= old('customer_cin') ?>" required placeholder="Entrer le CIN du client"
                                            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>
                                    <tr id="row_1">
                                        <td>
                                            <select class="form-control select_group product" data-row-id="row_1"
                                                id="product_1" name="product[]" style="width:100%;"
                                                onchange="getProductData(1)" required>
                                                <option value="<?= $products['id'] ?>">
                                                    <?= $products['sku'] . ' | ' . $products['name'] . ' | ' . $products['numero_de_moteur'] . ' | ' . $products['puissance'] ?>
                                                </option>
                                            </select>
                                        </td>

                                        <td>
                                            <input type="text" name="rate[]" id="rate_1" class="form-control" disabled
                                                autocomplete="off" value="<?= $pu ?>">
                                            <input type="hidden" name="rate_value[]" value="<?= $pu ?>"
                                                id="rate_value_1" class="form-control" autocomplete="off">
                                        </td>
                                        <td>

                                            <input type="text" name="amount[]" id="amount_1" class="form-control"
                                                disabled autocomplete="off">
                                            <input type="hidden" name="amount_value[]" id="amount_value_1"
                                                class="form-control" autocomplete="off">
                                        </td>
                                        <td><button type="button" class="btn btn-default" onclick="removeRow('1')"><i
                                                    class="fa fa-close"></i></button></td>
                                    </tr>
                                </tbody>
                            </table>
                            <input type="hidden" name="qty[]" value="1" id="qty_1" max="<//?= $totalqtt ?>"
                                class="form-control valueqty" required onkeyup="getTotal(1)">
                            <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 autocomplete="off">
                                        <input type="hidden" class="form-control" id="gross_amount_value"
                                            name="gross_amount_value" autocomplete="off">
                                    </div>
                                </div>
                                <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()" 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="hidden" class="form-control" id="net_amount_value"
                                            name="net_amount" hidden autocomplete="off">
                                        <input type="text" class="form-control" id="net_amount" name="net_amount"
                                            disabled autocomplete="off">
                                    </div>
                                </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 type="text" class="form-control" id="payment_mode" name="payment_mode">
                                    <option value="1">MVOLA</option>
                                    <option value="2">Virement Bancaire</option>
                                    <option value="3">En espece</option>
                                    </select>
                                </div>
                            </div> -->
                            <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">
                            </div>
                            <button onclick="window.history.back()" type="button"
                                class="btn btn-warning">Retour</button>
                            <button type="submit" class="btn btn-primary">Créer une commande</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>
<script type="text/javascript">
    var base_url = "<?php echo base_url(); ?>";

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

        $("#mainOrdersNav").addClass('active');
        $("#addOrderNav").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>';

        // 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.sku + ' | ' + value.name + ' | ' + value.numero_de_moteur + ' | ' + value.puissance + '</option>';
                    });

                    html += '</select>' +
                        '</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.prix_vente);
                    $("#rate_value_" + row_id).val(response.prix_vente);

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

                    var total = Number(response.prix_vente) * 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 

    } // /sub total amount

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

    // new area of javascript in the order
    const quantity = document.getElementById('qty_1')
    const rates = document.getElementById('rate_1')
    const amount = document.getElementById('amount_1')
    const gross_amount_value = document.getElementById('gross_amount');
    const gross_amount_value2 = document.getElementById('gross_amount_value');
    const remise = document.getElementById('remise');
    const net_amount = document.getElementById('net_amount');
    const net_amount_value = document.getElementById('net_amount_value');
    const amount_value = document.getElementById('amount_value_1');

    amount_value.value = gross_amount_value.value
    amount.value = (rates.value * quantity.value).toFixed(2)
    gross_amount_value.value = (rates.value * quantity.value).toFixed(2)
    gross_amount_value2.value = (gross_amount_value.value);

    net_amount.value = (gross_amount_value.value - remise.value);
    net_amount_value.value = (gross_amount_value.value - remise.value);
    remise.addEventListener('input', function () {
        net_amount.value = (gross_amount_value.value - remise.value);
        net_amount_value.value = (gross_amount_value.value - remise.value);
    })
</script>