{% extends '@InstallBois/index.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('install-bois/css/renewment.css') ~ "?rnd=" ~ random() }}">
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Espace Client | Renouveler ma licence
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid" style="padding-bottom: 0">
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Renouvellement</span>
            </div>
            <a href="{{ path('subscription_index') }}" class="boutonRetour" style="background-color: #FC971F;padding: 5px 10px">
                Retour
            </a>
            <form id="form" method="POST" action="{{ path('subscription_renewment_payment') }}" style="display: contents;">
                <div id="containerOrder">
                    <div class="containerLine" style="margin-top: 20px">
                        <select id="selectProduct" name="product">
                            {% for product in products %}
                                <option value="{{ product['ref'] }}" {{ product['ref'] == currentProduct['ref'] ? 'selected' : '' }}>
                                    {{ product['label']|replace({'Licence INSTALL BOIS - ': ''}) }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div id="containerPaymentChoice" class="containerLine">
                        <div class="info"><span>Mode de règlement</span></div>
                        <div class="value">
                            <select name="paymentChoice" id="paymentChoice">
                                <option value="cb">Carte Bancaire</option>
                                <option value="v">Virement</option>
                            </select>
                        </div>
                    </div>
                    <div id="containerPaymentMethod" class="containerLine">
                        <div class="info"><span>Modalité de règlement</span></div>
                        <div class="value">
                            <select name="paymentMethod" id="paymentMethod">
                                <option value="m" {{ paymentFrequency === 'm' ? 'selected' : '' }}>Mensuel</option>
                                <option value="a" {{ paymentFrequency === 'a' ? 'selected' : '' }}>Annuel</option>
                            </select>
                        </div>
                    </div>
                    <div id="containerPromoCode" class="containerLine">
                        <div class="info"><span> Code remise</span></div>
                        <div class="value"
                             style="position: relative;display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;">
                            <input id="promoCode" name="promoCode" type="text"/>
                            <button id="btnPC" onclick=" event.preventDefault();checkPromoCode();"
                                    type="submit">{{ button_label|default("Appliquer") }}</button>
                            <img id="loader" style="display: none;height: 150%;width: 100%;"
                                 src="{{ asset("images/loader.svg") }}"
                                 alt="loader">
                            <span style="margin: auto;display: none" id="sentenceCP">Code remise non applicable sur cette offre</span>
                        </div>
                    </div>
                    <div class="containerResultPrice">
                        <div id="containerPrice">
                            <span class="info">Votre tarif <span id="pricePaymentMethod">mensuel  </span></span>
                            <div id="containerPriceTable">
                                <div id="containerMonthlyPayment" class="lineRenew">
                                    <div>
                                        <span>Frais de mensualisation HT</span>
                                    </div>
                                    <div>
                                        <span id="costMonthly">{{ monthlyfee.price|number_format(2) }} €</span>
                                    </div>
                                </div>
                                <div class="lineRenew">
                                    <div>
                                        <span>Licence HT</span>
                                    </div>
                                    <div>
                                        <span id="licencePrice"></span>
                                    </div>
                                </div>
                                <div class="lineRenew" id="linePC" style="display: none;">
                                    <div>
                                        <span>Remise HT <span id="percentageDisplay"></span></span>
                                    </div>
                                    <div>
                                        <span id="promoCodePrice"></span>
                                    </div>
                                </div>
                                <div class="lineRenew">
                                    <div>
                                        <span>Total HT</span>
                                    </div>
                                    <div>
                                        <span id="totalHT"></span>
                                    </div>
                                </div>
                                <div class="lineRenew">
                                    <div>
                                        <span>TVA (20%)</span>
                                    </div>
                                    <div>
                                        <span id="tva"></span>
                                    </div>
                                </div>
                                <div id="containerTotalToPaid" class="lineRenew">
                                    <div style="background-color: #AFABAB">
                                        <span>Total à payer TTC</span>
                                    </div>
                                    <div>
                                        <span id="total" style="font-weight: 700"></span>
                                    </div>
                                </div>
                                <div class="containerCgvForYear">
                                    <span id="forYear"></span>
                                    {% if urlCgv is not null %}
                                        <div class="containerCgv">
                                            <input type="checkbox" id="validCGV" name="validCGV">
                                            <label for="validCGV">Je déclare avoir pris connaissance des conditions
                                                générales de
                                                vente « consultables en cliquant <a id="displayCGV" href="{{ urlCgv }}"
                                                                                    target="_blank">ici</a> et les
                                                accepter sans réserve
                                                »</label>
                                        </div>
                                    {% endif %}
                                </div>
                                <button id="btngoToPayment"
                                        type="button"
                                        style="position: relative!important;margin-top: 60px!important;"
                                        disabled
                                >{{ button_label|default("Passer au paiement") }} </button>
                            </div>

                        </div>
                        <div id="paymentInfos">
                            <div id="dateInfos">
                                <div class="lineInfo">
                                    <div class="title">Date de fin d'abonnement en cours</div>
                                    <div class="value">{{ dateEnd|date("d/m/Y") }}</div>
                                </div>
                                <div class="lineInfo">
                                    <div class="title">Date d'effet du renouvellement</div>
                                    <div class="value">{{ dateNewContract|date("d/m/Y") }}</div>
                                </div>
                                <div class="lineInfo">
                                    <div class="title">Date de paiement</div>
                                    <div class="value">{{ "now"|date("d/m/Y") }}</div>
                                </div>
                            </div>
                            <div class="forMonthly">
                                {% set dateLastDayOfMonth = dateNewContract|date_modify('last day of this month') %}
                                <span style="color: #FC971F; font-size: 15px">Premier paiement à ce jour : </span>
                                <span>Période du {{ dateNewContract|date("d/m/Y") }} au {{ dateLastDayOfMonth|date('d/m/Y') }},</span>
                                <span>soit {{ date(dateNewContract).diff(date(dateLastDayOfMonth)).days + 1 }} jours correspondant à la période allant de la date de fin</span>
                                <span>de votre licence en cours jusqu'à la fin du mois correspondant.</span>
                                <span style="color: #FC971F; font-size: 15px">Paiements mensuels suivants : </span>
                                <span>Période du premier jour au dernier de chaque mois</span>
                                <span>Date de paiement des mois suivants : au 5 de chaque mois</span>
                                <span>Montant mensuel : <span id="montantFixe"></span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="application/javascript">
        let isUpgrade = false;
        let products = {{ products | json_encode | raw }};
        let product = {{ currentProduct | json_encode | raw }};
        let currentProduct = {{ currentProduct | json_encode | raw }};
        let currentPromoCode = {{ currentPromocode | json_encode | raw }};
        let monthlyfee = {{ monthlyfee | json_encode | raw }};
        let canUsePC = product.array_options.options_promocodevalid;

        $(document).ready(function () {
            setTimeout(function () {
                autoCompletePromocodeField();
                checkPaymentMethod();
                initAnnual();
            }, 10);
        });

        $('#selectProduct').change(function () {
            isUpgrade = (parseFloat(currentProduct.price) < parseFloat(products[$('#selectProduct').val()].price));
            product = products[$('#selectProduct').val()];
            canUsePC = product.array_options.options_promocodevalid;
            if ($('#paymentMethod').val() === "a") {
                initAnnual();
            } else if ($('#paymentMethod').val() === "m") {
                initMonthly();
            }
            autoCompletePromocodeField();
        });

        if (!canUsePC) {
            $('#loader').hide();
            $('#btnPC').hide();
            $('#promoCode').hide();
            $('#sentenceCP').show();
            $('#linePC').hide();
        }

        let percentagePC = 1;

        //method event
        $('#paymentMethod').change(function () {
            if ($(this).val() === "a") {
                initAnnual();
            } else if ($(this).val() === "m") {
                initMonthly();
            }
        });

        $('#paymentChoice').change(function () {
            checkPaymentMethod();
        });

        // cgv event
        $('#validCGV').change(function () {
            $('#btngoToPayment').attr('disabled', !$(this).is(':checked'));
        });

        function initMonthly() {
            $('#containerMonthlyPayment').show();
            $('#forYear').show();
            $('#periodFirstPayment').show();
            $('#lineAmountHT').show();

            let licencePrice = parseFloat(product.price).toFixed(2);
            let promoCode = (percentagePC !== 1 ? parseFloat(parseFloat(licencePrice) * (1 - percentagePC.toFixed(2))).toFixed(2) : "0.00");
            let percentageDisplay = (percentagePC !== 1 ? ((1 - percentagePC) * 100).toFixed(0) : "0");
            let totalHT = (((parseFloat(licencePrice)) * percentagePC) + parseFloat(monthlyfee.price)).toFixed(2);

            let tvaFees = parseFloat(parseFloat(monthlyfee.price_ttc) - parseFloat(monthlyfee.price)).toFixed(2);
            let tvaProduct = parseFloat((parseFloat(product.price_ttc) * percentagePC) - (parseFloat(licencePrice) * percentagePC)).toFixed(2);
            let tva = parseFloat(parseFloat(tvaFees) + parseFloat(tvaProduct)).toFixed(2);

            let totalMontly = (parseFloat(totalHT) + parseFloat(tva)).toFixed(2);
            let forYear = (parseFloat(totalHT) * 12).toFixed(2);

            $("#pricePaymentMethod").text("mensuel");
            $("#licencePrice").text(licencePrice.replace('.', ',') + " €");
            $("#percentageDisplay").text('(' + percentageDisplay + " %)");
            $('#promoCodePrice').text('-' + promoCode.replace('.', ',') + " €");
            $("#totalHT").text(totalHT.replace('.', ',') + " €");
            $('#tva').text(tva.replace('.', ',') + " €");
            $('#total').text(totalMontly.replace('.', ',') + " € / mois");

            $('#forYear').text("Soit " + forYear.replace('.', ',') + " € HT / an ");
            $('#montantFixe').text(totalMontly.replace('.', ',') + " € TTC / mois");

            $('.forMonthly').show();
        }

        function initAnnual() {
            $('#containerMonthlyPayment').hide();
            $('#forYear').hide();
            $('#periodFirstPayment').hide();
            $('#lineAmountHT').hide();

            let licencePrice = parseFloat(product.price * 12).toFixed(2);
            let promoCode = (percentagePC !== 1 ? parseFloat(parseFloat(licencePrice) * (1 - percentagePC)).toFixed(2) : "0.00");
            let percentageDisplay = (percentagePC !== 1 ? ((1 - percentagePC) * 100).toFixed(0) : "0");
            let totalHT = (parseFloat(licencePrice) * percentagePC).toFixed(2);
            let tva = ((parseFloat(product.price_ttc * 12) * percentagePC) - (parseFloat(licencePrice) * percentagePC)).toFixed(2);
            let totalYear = (parseFloat(totalHT) + parseFloat(tva)).toFixed(2);

            $("#pricePaymentMethod").text("annuel");
            $("#licencePrice").text(licencePrice.replace('.', ',') + " €");
            $("#percentageDisplay").text('(' + percentageDisplay + " %)");
            $('#promoCodePrice').text('-' + promoCode.replace('.', ',') + " €");
            $("#totalHT").text(totalHT.replace('.', ',') + " €");
            $('#tva').text(tva.replace('.', ',') + " €");
            $('#total').text(totalYear.replace('.', ',') + " € / an");

            $('.forMonthly').hide();
        }

        function checkPromoCode() {
            let promoCode = $('#promoCode').val();
            if (promoCode !== "" && canUsePC) {
                $('#btnPC').hide();
                $('#loader').show();
                const request = new Request("{{ path('subscription_check_promo_code') }}", {
                    method: 'POST',
                    body: JSON.stringify({
                        promocode: promoCode,
                        type: isUpgrade ? 'A' : 'R'
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                fetch(request)
                    .then(async function (response) {
                        if (response.status === 200) {
                            let data = await response.json();
                            if (data.data.codeValid) {
                                $('#linePC').show();
                                $('#containerPromoCode .value').removeClass("errorPC");
                                $('#containerPromoCode .value').addClass("goodPC");
                                percentagePC = 1 - data.data.percentage;
                            } else {
                                percentagePC = 1;
                                $('#containerPromoCode .value').removeClass("goodPC");
                                $('#containerPromoCode .value').addClass("errorPC");
                            }
                            if ($('#paymentMethod').val() === "a") {
                                initAnnual();
                            } else {
                                initMonthly();
                            }
                        } else {
                            $('#containerPromoCode .value').removeClass("goodPC");
                            $('#containerPromoCode .value').addClass("errorPC");
                        }
                        $('#btnPC').show();
                        $('#loader').hide();
                    })
            } else {
                percentagePC = 1
                $('#containerPromoCode .value').removeClass("goodPC");
            }
            if ($('#paymentMethod').val() === "a") {
                initAnnual();
            } else {
                initMonthly();
            }
        }

        async function getOtherPromoCode(partner, typePC) {
            const response = await fetch("{{ path('subscription_check_promo_code_by_partner') }}", {
                method: 'POST',
                body: JSON.stringify({
                    partner: partner,
                    type: typePC
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            return response.json();
        }

        function autoCompletePromocodeField() {
            if (currentPromoCode != null) {
                // si contrat actuel = acquisition ET qu'il souhaite upgrade OU si contract actuel renouvellement ET pas d'upgrade => même CP
                if (((currentPromoCode.type_remise === 'A' && isUpgrade) || (currentPromoCode.type_remise === 'R' && !isUpgrade) || currentPromoCode.type_remise === 'AR') && currentPromoCode.status === "online") {
                    $('#promoCode').val(currentPromoCode.code_reduction);
                    checkPromoCode();
                    // sinon rechercher l'autre PC du même partenaire => si contrat actuel A rechercher R et inversement
                } else if ((currentPromoCode.type_remise === 'A' && !isUpgrade) || (currentPromoCode.type_remise === 'R' && isUpgrade)) {
                    getOtherPromoCode(currentPromoCode.partner_name, currentPromoCode.type_remise === 'A' ? 'R' : 'A').then(result => {
                        if (result.data != null) {
                            $('#promoCode').val(result.data.code_reduction);
                        }
                        checkPromoCode();
                    });
                }
            }
        }

        $("#btngoToPayment").click(function (e) {
            $('.containerCgv').css("pointer-events", "none")
            $('#form').submit();
        });

        function firstPayment() {
            let now = new Date();
            let daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
            let daysLeft = daysInMonth - now.getDate() + 1;
            let pricePerDay = product.price / daysInMonth;
            return [
                (pricePerDay * daysLeft * percentagePC).toFixed(2),
                daysLeft
            ];
        }

        function checkPaymentMethod() {
            if ($('#paymentChoice').val() === "v") {
                initAnnual();
                $('#paymentMethod').val('a').change();
                $('#paymentMethod  option[value="m"]').attr('disabled', true);
                $("#btngoToPayment").text('Recevoir un email avec notre IBAN');
            } else {
                $('#paymentMethod  option[value="m"]').attr('disabled', false);
                $("#btngoToPayment").text('Passer au paiement');
            }
        }
    </script>
{% endblock %}