{% extends 'base.html.twig' %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/offres.css') }}">
{% endblock %}
{% block title %}Offres{% endblock %}
{% block body %}
    <div class="container-m">

        <h1 class="title-offres">Les offres Quali Distrib</h1>
        <p>Pour un devis personnalisé, il est indispensable de prendre contact avec nos équipes, en revanche voici
            globalement les possibilités à votre dispositions </p>
        <h2 class="title-body">Les modes de distribution :</h2>
        <div class="formules">
            <div class="plus">
                <section class="section exigence border-bottom">
                    <img src="/build/images/plein.png" alt="Village" class="section-img-exigence">
                    <div class="section-body border-top">
                        <h4 class="section-title user-select-none">Mode Dual</h4>
                        <p class="section-text user-select-none">
                            Une offre simple et essentielle, du pain et de la baguette par exemple.
                        </p>
                    </div>
                </section>
                <img class="formules-img" src="build/images/distributeur.svg" alt="">
                <section class="section exigence border-bottom">
                    <img src="/build/images/mix.JPG" alt="Village" class="section-img-exigence">
                    <div class="section-body border-top">
                        <h4 class="section-title user-select-none">Mode Varié</h4>
                        <p>
                            Une offre plus élaborée et diversifiée , des brioches, des vienoiseries et même des galettes
                            de rois
                        </p>
                    </div>
                </section>
            </div>
        </div>
        <div style="display: flex;flex-direction: column;align-items: center">
        <div class="unique" >
            <h2
{#                style="margin-left:650px; border-radius: 15px; "#}
            >
                + Fonctionalité UNIQUE !</h2>
            <p>Le produit de démonstration</p>
        </div>
            <section class="coop border-bottom">
                <img src="{{ asset('build/images/variete-produits2.0.jpeg') }}" alt="Village" class="section-img-right">
                <div class="section-body">
                    <p class="section-text user-select-none">Votre machine n'est jamais ,vide, cette option permet la
                        présentation d'un article
                        que vous souhaitez mettre en avant, comme un evitrine dans nos magasins de vêtements.
                        N'importe quel client pourra le voir à n'importe quelle heure du jour ou de la nuit, fini les
                        clients qui se demandent ce que contient votre distributeur !
                    </p>
                </div>
            </section>


        </div>
        <h2 class="title-body">Gestion / Suivi des ventes</h2>
        <p>Suivez en temps réel et en détail l'activité de votre machine: <br> Chiffre d'affaire Quotidien -
            Hebdomadaire - Mensuel,
            Horaires d'affluence, Moyens de payements Carte bleue ou Espèce, Stocks d'alerte, etc.</p>

        <div style="display: flex;flex-direction: row">
            <div class="gestion">
                <img src="{{ asset('build/images/rendement.png') }}" alt="">
                <p><i>( Capture d'écran du logiciel d'Infogérance: Rentabilité )</i></p>
            </div>
            <div class="gestion">
                <img src="{{ asset('build/images/inventaire.png') }}" alt="">
                <p><i>( Capture d'écran du logiciel d'Infogérance: Suivi des stocks )</i></p>

            </div>
        </div>


        <section class="section-offres">

            <div class="formule-1">
                <div class="section-offre-header">
                    <h4 class="section-offres-title ">Location simple et courte durée</h4>
                </div>

                <div class="section-offre-body">
                    <p class="section-offres-text">Familiarisez vous avec nos offres lors d'une période de test de
                        quelques mois, l'idée est de s'assurer que le concept plaise à tous</p>
                </div>
            </div>

            <div class="formule-1">
                <div class="section-offre-header">
                    <h4 class="section-offres-title ">Achat et financement </h4>
                </div>
                <div class="section-offre-body">
                    <p class="section-offres-text">Pour capitaliser et devenir propriétaires, mais aussi améliorer son
                        rapport au distributeur et optimiser son rendement</p>
                </div>
            </div>
        </section>
        <section>
            <h2 class="title-body">Ils sont incluts dans notre prestation:</h2>
            <article class="offrons">
                <div id="tagscloud">
                    <a class="tagc1"
                       style="left: 20px; top: 30.1925px; z-index: 102; opacity: 0.118615; color: rgb(255, 255, 255);display: none; font-size: 1.25rem">Montage
                        du dossier de crédit</a>
                    <a class="tagc1"
                       style="left: 156px; top: 34.752px; z-index: 102; opacity: 0.111076; color: rgb(255, 255, 255); padding: 8px; display: none;font-size: 2rem">Livraison
                        et installation</a>
                    <a class="tagc1"
                       style="left: 386.9px; top: 30.9076px; z-index: 103; opacity: 0.119797; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.5rem">SAV
                        & Assistance 24/7</a>
                    <a class="tagc1"
                       style="left: 296.16px; top: 45.3038px; z-index: 107; opacity: 0.181538; color: rgb(255, 255, 255); padding: 8px; font-size: 1.5rem">Garantie
                        pièces toujours possible</a>
                    <a class="tagc1"
                       style="left: 1200px; top: 42.9294px; z-index: 119; opacity: 0.389813; color: rgb(255, 255, 255); padding: 8px; font-size: 2rem">Suivi
                        régulier</a>
                    <a class="tagc1"
                       style="left: 935.24px; top: 30.0199px; z-index: 105; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.25rem">Personnalisation
                        du distributeur</a>
                    <a class="tagc1"
                       style="left: 813.30px; top: 33.0199px; z-index: 111; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.25rem">Formation
                        logiciel de gestion</a>
                    <a class="tagc1"
                       style="left: 423.67px; top: 30.0199px; z-index: 115; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none;">Visite
                        des emplacements en amont</a>
                    <a class="tagc1"
                       style="left: 669.18px; top: 30.0199px; z-index: 104; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none;">Démarche
                        auprès des mairies</a>
                    <a class="tagc1"
                       style="left: 54.12px; top: 30.0199px; z-index: 108; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.5rem">Interventions
                        ultra rapide</a>
                    <a class="tagc1"
                       style="left: 727px; top: 30.0199px; z-index: 102; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 2rem">Machines
                        anti-effractions</a>
                    <a class="tagc1"
                       style="left: 550px; top: 30.0199px; z-index: 108; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none; font-size: 1.25rem">Suggestions
                        d'offres commerciales</a>
                    <a class="tagc1"
                       style="left: 784px; top: 30.0199px; z-index: 102; opacity: 0.117901; color: rgb(255, 255, 255); padding: 8px; display: none;">Proposition
                        de rachat en fin de contrat</a>
                </div>
                {# <div class="row row-cols-3 row-offre">
                <div class="col"> <div class="box">Etude du financement offerte</div></div>
                <div class="col"> <div class="box">Livraison et installation</div></div>
                <div class="col"> <div class="box">SAV téléphonique 24/7</div></div>

                <div class="col"> <div class="box" style="margin-top: 15px;">Garantie pièces incluse 24 mois</div></div>
                <div class="col"> <div class="box" style="margin-top: 15px;">Suivi régulier</div></div>
                <div class="col"> <div class="box" style="margin-top: 15px;">Personnalisation du distributeur</div></div>
                #}

            </article>
        </section>
    </div>

    <h2 class="title-body">Completez votre panier</h2>
    <section class="section-panier">
        <div class="section-body">
            <p>
                Des outils de communication à l’entretien périodique, nous sommes partout avec vous ! <br>
                Toute la palette de service Quali Distrib vous permet de rester concentrer sur votre coeur de métier :
                La fabrication de délicieux produits de la boulangerie
            </p>
        </div>
    </section>

    <section class="section-plus">
        <h2 class="title-body">Sautez le pas...</h2>
        <div class="section-body">
            <p>Pour affinez votre projet vous pouvez compléter le formulaire en bas de la page dédiée aux artisans
                boulangers, ce lien en forme de Distributeur vous y emmène </p>
            <div class="section-distrib">
            <table>
                <thead>
                <tr>
                    <th>↳</th>
                    <th><a href="{{ path('artisan') }}#form"><img class="img-distrib" src="build/images/distributeur.svg" alt=""></a></th>
                </tr>
                </thead>
            </table>
    
            </div>
        </div>
    </section>
    </div>

    <script>
        var radius = 90;
        var d = 200;
        var dtr = Math.PI / 180;
        var mcList = [];
        var lasta = 1;
        var lastb = 1;
        var distr = true;
        var tspeed = 11;
        var size = 200;
        var mouseX = 0;
        var mouseY = 10;
        var howElliptical = 22;
        var aA = null;
        var oDiv = null;
        window.onload = function () {
            var i = 0;
            var oTag = null;
            oDiv = document.getElementById('tagscloud');
            aA = oDiv.getElementsByTagName('a');
            for (i = 0; i < aA.length; i++) {
                oTag = {};
                aA[i].onmouseover = (function (obj) {
                    return function () {
                        obj.on = true;
                        this.style.zIndex = 9999;
                        this.style.color = '#fff';
                        this.style.padding = '5px 5px';
                        this.style.filter = "alpha(opacity=100)";
                        this.style.opacity = 1;
                    }
                })(oTag)
                aA[i].onmouseout = (function (obj) {
                    return function () {
                        obj.on = false;
                        this.style.zIndex = obj.zIndex;
                        this.style.color = '#fff';
                        this.style.padding = '5px';
                        this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
                        this.style.opacity = obj.alpha;
                        this.style.zIndex = obj.zIndex;
                    }
                })(oTag)
                oTag.offsetWidth = aA[i].offsetWidth;
                oTag.offsetHeight = aA[i].offsetHeight;
                mcList.push(oTag);
            }
            sineCosine(0, 0, 0);
            positionAll();
            (function () {
                update();
                setTimeout(arguments.callee, 40);
            })();
        };

        function update() {
            var a, b, c = 0;
            a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
            b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
            lasta = a;
            lastb = b;
            if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
                return;
            }
            sineCosine(a, b, c);
            for (var i = 0; i < mcList.length; i++) {
                if (mcList[i].on) {
                    continue;
                }
                var rx1 = mcList[i].cx;
                var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
                var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;

                var rx2 = rx1 * cb + rz1 * sb;
                var ry2 = ry1;
                var rz2 = rx1 * (-sb) + rz1 * cb;

                var rx3 = rx2 * cc + ry2 * (-sc);
                var ry3 = rx2 * sc + ry2 * cc;
                var rz3 = rz2;

                mcList[i].cx = rx3;
                mcList[i].cy = ry3;
                mcList[i].cz = rz3;

                per = d / (d + rz3);

                mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
                mcList[i].y = ry3 * per;
                mcList[i].scale = per;
                var alpha = per;
                alpha = (alpha - 0.6) * (10 / 6);
                mcList[i].alpha = alpha * alpha * alpha - 0.2;
                mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
            }
            doPosition();
        }

        function positionAll() {
            var phi = 0;
            var theta = 0;
            var max = mcList.length;
            for (var i = 0; i < max; i++) {
                if (distr) {
                    phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
                    theta = Math.sqrt(max * Math.PI) * phi;
                } else {
                    phi = Math.random() * (Math.PI);
                    theta = Math.random() * (2 * Math.PI);
                }
                //坐标变换
                mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
                mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
                mcList[i].cz = radius * Math.cos(phi);

                // aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
                aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
            }
        }

        function doPosition() {
            var l = oDiv.offsetWidth / 2;
            var t = oDiv.offsetHeight / 2;
            for (var i = 0; i < mcList.length; i++) {
                if (mcList[i].on) {
                    continue;
                }
                var aAs = aA[i].style;
                if (mcList[i].alpha > 0.1) {
                    if (aAs.display != '')
                        aAs.display = '';
                } else {
                    if (aAs.display != 'none')
                        aAs.display = 'none';
                    continue;
                }
                // aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
                aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
                //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
                //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
                aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
                aAs.zIndex = mcList[i].zIndex;
                aAs.opacity = mcList[i].alpha;
            }
        }

        function sineCosine(a, b, c) {
            sa = Math.sin(a * dtr);
            ca = Math.cos(a * dtr);
            sb = Math.sin(b * dtr);
            cb = Math.cos(b * dtr);
            sc = Math.sin(c * dtr);
            cc = Math.cos(c * dtr);
        }

    </script>
{% endblock %}