<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
    .border-danger {
        border: 2px solid #d9534f !important;
        box-shadow: 0 0 5px rgba(217, 83, 79, 0.5) !important;
    }
</style>
<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-danger alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <?php if (is_array($errors)): ?>
                            <ul>
                                <?php foreach ($errors as $error): ?>
                                    <li><?= esc($error) ?></li>
                                <?php endforeach; ?>
                            </ul>
                        <?php else: ?>
                            <?= esc($errors) ?>
                        <?php endif; ?>
                    </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">

                                <!-- ✅ NOUVEAU CHAMP : Type de client -->
                                <div class="form-group">
                                    <label for="customer_type" class="col-sm-5 control-label"
                                        style="text-align:left;">Type de client</label>
                                    <div class="col-sm-7">
                                        <select class="form-control" id="customer_type" name="customer_type" required>
                                            <option value="">-- Sélectionner --</option>
                                            <option value="particulier" <?= old('customer_type') == 'particulier' ? 'selected' : '' ?>>Particulier</option>
                                            <option value="revendeur" <?= old('customer_type') == 'revendeur' ? 'selected' : '' ?>>Revendeur</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- ✅ NOUVEAU CHAMP : Source -->
                                <div class="form-group">
                                    <label for="source" class="col-sm-5 control-label"
                                        style="text-align:left;">Source</label>
                                    <div class="col-sm-7">
                                        <select class="form-control" id="source" name="source" required>
                                            <option value="">-- Sélectionner --</option>
                                            <option value="facebook_perso" <?= old('source') == 'facebook_perso' ? 'selected' : '' ?>>Facebook perso</option>
                                            <option value="page_motorbike" <?= old('source') == 'page_motorbike' ? 'selected' : '' ?>>Page motorbike</option>
                                            <option value="bouche_a_oreille" <?= old('source') == 'bouche_a_oreille' ? 'selected' : '' ?>>Bouche à oreille</option>
                                            <option value="commercial_interne" <?= old('source') == 'commercial_interne' ? 'selected' : '' ?>>Commercial interne</option>
                                            <option value="autre" <?= old('source') == 'autre' ? 'selected' : '' ?>>Autre</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" 
                                        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="customer_cin" 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"
                                            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:35%">Produit</th>
            <!-- ✅ COLONNE QUANTITÉ (cachée par défaut) -->
            <th class="qty-column" style="width:10%; display:none;">Quantité</th>
            <th style="width:12%">Puissance (CC)</th>
            <th style="width:15%">Prix unitaire</th>
            <th style="width:18%">Montant</th>
            <th style="width:10%"><button type="button" class="btn btn-default" id="add_row"><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'] ?>
                    </option>
                </select>
            </td>

            <!-- ✅ CHAMP QUANTITÉ (caché par défaut) -->
            <td class="qty-column" style="display:none;">
                <input type="number" name="qty[]" id="qty_1" 
                       class="form-control numeric-input" 
                       value="1" min="1" disabled autocomplete="off">
            </td>

            <td>
                <input type="number" name="puissance[]" id="puissance_1" 
                       class="form-control" placeholder="CC" 
                       value="<?= esc($products['puissance'] ?? '1') ?>" 
                       min="1" autocomplete="off">
            </td>

            <td>
                <input type="text" name="rate[]" id="rate_1" class="form-control" disabled
                    autocomplete="off" value="<?= esc($pu) ?>" min="0">
                <input type="hidden" name="rate_value[]" id="rate_value_1" 
                       value="<?= esc($pu) ?>" class="form-control" autocomplete="off">
                <input type="hidden" id="min_price_1" name="min_price[]" value="">
            </td>
            
            <td>
                <input type="text" name="amount[]" id="amount_1" class="form-control"
                    disabled autocomplete="off" min="0">
                <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>

                            <!-- ✅ Champ qty caché (toujours = 1) -->
                            <input type="hidden" name="qty[]" value="1" id="qty_1" class="form-control">

                            <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">Prix affiché</label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" id="gross_amount" name="gross_amount"
                                            disabled autocomplete="off" min="0">
                                        <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">Prix demandé</label>
                                    <div class="col-sm-7">
                                        <div id="discount_error" class="alert alert-danger" style="display:none; padding: 8px; margin-bottom: 5px; font-size: 13px;">
                                            <i class="fa fa-exclamation-triangle"></i> <span id="discount_error_text"></span>
                                        </div>
                                        <input type="number" class="form-control numeric-input" id="discount" name="discount" 
                                            placeholder="Prix demandé" min="0" step="0.01"
                                            onkeyup="subAmount()" oninput="validatePrixDemande(this)" autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="net_amount" class="col-sm-5 control-label">Remise</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" min="0">
                                    </div>
                                </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(); ?>";

    // ✅ Fonction pour afficher/masquer la colonne quantité
    function toggleQuantityColumn() {
        var customerType = $('#customer_type').val();
        
        if (customerType === 'revendeur') {
            $('.qty-column').show();
            $('input[name="qty[]"]').prop('disabled', false);
        } else {
            $('.qty-column').hide();
            $('input[name="qty[]"]').val(1).prop('disabled', true);
            recalculateAllRows();
        }
    }

    // ✅ Fonction pour recalculer tous les montants
    function recalculateAllRows() {
        var tableProductLength = $("#product_info_table tbody tr").length;
        for (var i = 1; i <= tableProductLength; i++) {
            if ($("#row_" + i).length > 0) {
                getTotal(i);
            }
        }
    }

    function validatePositiveNumber(input) {
        let value = parseFloat(input.value);
        if (isNaN(value) || value < 0) {
            input.value = '';
            return false;
        }
        return true;
    }

    function showDiscountError(message) {
        $('#discount_error_text').text(message);
        $('#discount_error').slideDown(200);
        $('#discount').addClass('border-danger');
    }

    function hideDiscountError() {
        $('#discount_error').slideUp(200);
        $('#discount').removeClass('border-danger');
    }

    function validatePrixDemande(input) {
        let prixDemande = parseFloat(input.value);
        let prixAffiche = parseFloat($('#gross_amount').val()) || 0;
        
        if (isNaN(prixDemande) || prixDemande < 0) {
            input.value = '';
            showDiscountError('Le prix demandé ne peut pas être négatif.');
            setTimeout(hideDiscountError, 3000);
            return false;
        }
        
        if (prixDemande > prixAffiche) {
            showDiscountError('Le prix demandé (' + prixDemande.toFixed(2) + ') ne peut pas être supérieur au prix affiché (' + prixAffiche.toFixed(2) + ').');
            input.value = prixAffiche;
            subAmount();
            setTimeout(hideDiscountError, 4000);
            return false;
        }
        
        hideDiscountError();
        return true;
    }

    function preventNegativeInput(e) {
        if (e.key === '-' || e.key === 'e' || e.key === 'E' || e.key === '+') {
            e.preventDefault();
            return false;
        }
    }

    $(document).ready(function () {
        getTotal(1);
        $("#rate_value_1").val($("#rate_1").val());
        
        $(".select_group").select2();
        $("#mainOrdersNav").addClass('active');
        $("#addOrderNav").addClass('active');

        // ✅ Initialiser l'affichage selon le type de client
        toggleQuantityColumn();
        
        // ✅ Écouter les changements du type de client
        $('#customer_type').on('change', function() {
            toggleQuantityColumn();
        });

        // ✅ Gérer les changements de quantité
        $(document).on('input', 'input[name="qty[]"]', function() {
            var row_id = $(this).attr('id').replace('qty_', '');
            var qty = parseInt($(this).val()) || 1;
            
            if (qty < 1) {
                $(this).val(1);
                qty = 1;
            }
            
            getTotal(row_id);
        });

        $(document).on('keydown', '.numeric-input, input[type="number"]', function(e) {
            preventNegativeInput(e);
        });

        $(document).on('input', '.numeric-input, input[type="number"]', function() {
            validatePositiveNumber(this);
        });

        $("#discount").on('input', function() {
            validatePrixDemande(this);
        });

        $("#discount").on('blur', function() {
            validatePrixDemande(this);
            checkMinimalPrice();
        });

        $('form').on('submit', function(e) {
            let hasNegative = false;
            $('.numeric-input, input[type="number"]').each(function() {
                if (parseFloat($(this).val()) < 0) {
                    hasNegative = true;
                    $(this).val('');
                }
            });

            if (hasNegative) {
                alert('Les valeurs négatives ne sont pas autorisées.');
                e.preventDefault();
                return false;
            }

            if (!checkMinimalPrice()) {
                e.preventDefault();
                return false;
            }
        });

        $("#add_row").unbind('click').bind('click', function () {
            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) {
                    var customerType = $('#customer_type').val();
                    var qtyColumnVisible = (customerType === 'revendeur') ? '' : 'style="display:none;"';
                    var qtyDisabled = (customerType === 'revendeur') ? '' : 'disabled';
                    
                    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 + '</option>';
                    });

                    html += '</select></td>' +
                        '<td class="qty-column" ' + qtyColumnVisible + '><input type="number" name="qty[]" id="qty_' + row_id + '" class="form-control numeric-input" min="1" value="1" ' + qtyDisabled + ' autocomplete="off"></td>' +
                        '<td><input type="number" name="puissance[]" id="puissance_' + row_id + '" class="form-control" placeholder="CC" min="1" value="1" autocomplete="off"></td>' +
                        '<td><input type="text" name="rate[]" id="rate_' + row_id + '" class="form-control numeric-input" disabled min="0"><input type="hidden" name="rate_value[]" id="rate_value_' + row_id + '" class="form-control"><input type="hidden" id="min_price_' + row_id + '" name="min_price[]" value=""></td>' +
                        '<td><input type="text" name="amount[]" id="amount_' + row_id + '" class="form-control numeric-input" disabled min="0"><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;
        });
    });

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

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

    function getProductData(row_id) {
        var product_id = $("#product_" + row_id).val();
        if (product_id == "") {
            $("#rate_" + row_id).val("");
            $("#rate_value_" + row_id).val("");
            $("#min_price_" + row_id).val("");
            $("#puissance_" + row_id).val("1");
            $("#qty_" + row_id).val("1");
            $("#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) {
                    var prixVente = parseFloat(response.prix_vente) || 0;
                    var prixMinimal = parseFloat(response.prix_minimal) || 0;
                    
                    if (prixVente < 0) prixVente = 0;
                    if (prixMinimal < 0) prixMinimal = 0;

                    $("#rate_" + row_id).val(prixVente);
                    $("#rate_value_" + row_id).val(prixVente);
                    $("#min_price_" + row_id).val(prixMinimal);

                    var puissanceValue = response.puissance || '1';
                    $("#puissance_" + row_id).val(puissanceValue);

                    var qty = parseInt($("#qty_" + row_id).val()) || 1;
                    var total = prixVente * qty;
                    total = total.toFixed(2);
                    $("#amount_" + row_id).val(total);
                    $("#amount_value_" + row_id).val(total);

                    subAmount();
                }
            });
        }
    }

    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);

            var amount = Number($("#amount_" + count).val());
            if (amount < 0) amount = 0;
            totalSubAmount = Number(totalSubAmount) + amount;
        }

        totalSubAmount = totalSubAmount.toFixed(2);

        $("#gross_amount").val(totalSubAmount);
        $("#gross_amount_value").val(totalSubAmount);

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

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

        var totalAmount = (Number(totalSubAmount));
        totalAmount = totalAmount.toFixed(2);

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

    function checkMinimalPrice() {
        var discount = Number($("#discount").val()) || 0;
        
        if (discount < 0) {
            alert("Le prix demandé ne peut pas être négatif.");
            $("#discount").val('');
            subAmount();
            return false;
        }
        
        if (discount === 0) return true;
        
        var tableProductLength = $("#product_info_table tbody tr").length;
        var error = false;
        var messages = [];

        for (var i = 0; i < tableProductLength; i++) {
            var tr = $("#product_info_table tbody tr")[i];
            var rowId = $(tr).attr('id').replace('row_', '');
            var minPrice = Number($("#min_price_" + rowId).val()) || 0;

            if (minPrice > 0 && discount < minPrice) {
                error = true;
                var productText = $("#product_" + rowId + " option:selected").text();
                messages.push("Le prix demandé (" + discount.toFixed(2) + ") pour « " + productText + " » est inférieur au prix minimal (" + minPrice.toFixed(2) + ")");
            }
        }

        if (error) {
            alert(messages.join("\n"));
            $("#discount").val('');
            subAmount();
            return false;
        }
        return true;
    }

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

    // ✅ INITIALISATION
    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('discount');
    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 () {
        if (validatePrixDemande(this)) {
            var discountValue = parseFloat(this.value) || 0;
            var grossValue = parseFloat(gross_amount_value.value) || 0;
            var netValue = grossValue - discountValue;
            
            if (netValue < 0) netValue = 0;
            
            net_amount.value = netValue.toFixed(2);
            net_amount_value.value = netValue.toFixed(2);
            subAmount();
        }
    })
</script>