Souke/producer/views/order/order.php

<?php

/**
 * Copyright Souke (2018)
 *
 * contact@souke.fr
 *
 * Ce logiciel est un programme informatique servant à aider les producteurs
 * à distribuer leur production en circuits courts.
 *
 * Ce logiciel est régi par la licence CeCILL soumise au droit français et
 * respectant les principes de diffusion des logiciels libres. Vous pouvez
 * utiliser, modifier et/ou redistribuer ce programme sous les conditions
 * de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA
 * sur le site "http://www.cecill.info".
 *
 * En contrepartie de l'accessibilité au code source et des droits de copie,
 * de modification et de redistribution accordés par cette licence, il n'est
 * offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
 * seule une responsabilité restreinte pèse sur l'auteur du programme,  le
 * titulaire des droits patrimoniaux et les concédants successifs.
 *
 * A cet égard  l'attention de l'utilisateur est attirée sur les risques
 * associés au chargement,  à l'utilisation,  à la modification et/ou au
 * développement et à la reproduction du logiciel par l'utilisateur étant
 * donné sa spécificité de logiciel libre, qui peut le rendre complexe à
 * manipuler et qui le réserve donc à des développeurs et des professionnels
 * avertis possédant  des  connaissances  informatiques approfondies.  Les
 * utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
 * logiciel à leurs besoins dans des conditions permettant d'assurer la
 * sécurité de leurs systèmes et ou de leurs données et, plus généralement,
 * à l'utiliser et l'exploiter dans les mêmes conditions de sécurité.
 *
 * Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
 * pris connaissance de la licence CeCILL, et que vous en avez accepté les
 * termes.
 */

use common\helpers\GlobalParam;
use domain\Distribution\Distribution\DistributionModule;
use domain\Distribution\PointSaleDistribution\PointSaleDistribution;
use domain\Producer\Producer\Producer;
use domain\Producer\Producer\ProducerModule;
use yii\helpers\Html;

\producer\assets\VuejsOrderOrderAsset::register($this);

$distributionModule =DistributionModule::getInstance();
$producerModule = ProducerModule::getInstance();

$producer = $this->context->getProducerCurrent();

$this->setTitle('Commander');
$this->setMeta('description', $producerModule->getSeoGenerator()->generateMetaDescriptionOrder());

?>

<script>
    var appInitValues = {
        urlLogin: '<?= \Yii::$app->urlManagerFrontend->createAbsoluteUrl(['site/producer', 'id' => $this->context->getProducerCurrent()->id, 'return_url' => \Yii::$app->urlManagerProducer->createAbsoluteUrl(['order/order', 'slug_producer' => $this->context->getProducerCurrent()->slug])]) ?>',
        producerOptionOrderEntryPoint: '<?= $producer->option_order_entry_point ?>',
        <?php if (isset($order)): ?>pointSaleActiveId: <?= $order->id_point_sale ?><?php endif; ?>
    };
</script>

<div id="app-order-order" :class="{'loaded': !loadingInit}">

    <?php if (isset($order)): ?>
        <span id="order-distribution-date"><?= $order->distribution->date; ?></span>
    <?php endif; ?>
    <?php if (isset($date)): ?>
        <span id="distribution-date"><?= $date; ?></span>
    <?php endif; ?>

    <div v-if="loadingInit">
        <div class="text-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Chargement ...</span>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <div v-if="!loadingInit && !pointSaleActive && distributions.length == 0" class="alert alert-warning">
            Aucune distribution à venir chez ce producteur.
        </div>
        <div v-else>
            <div id="steps">
                <ul class="row g-0">
                    <?php if ($producer->option_order_entry_point == Producer::ORDER_ENTRY_POINT_DATE): ?>
                        <step-date
                                first="true"
                                :step="step"
                                :point-sale-active="pointSaleActive"
                                :date-format="dateFormat"
                                :change-step="changeStep"
                                :producer="producer"
                        ></step-date>
                        <step-point-sale
                                :step="step"
                                :point-sale-active="pointSaleActive"
                                :change-step="changeStep"
                                :producer="producer"
                        ></step-point-sale>
                    <?php else: ?>
                        <step-point-sale
                                first="true"
                                :step="step"
                                :point-sale-active="pointSaleActive"
                                :change-step="changeStep"
                                :producer="producer"
                        ></step-point-sale>
                        <step-date
                                :step="step"
                                :point-sale-active="pointSaleActive"
                                :date-format="dateFormat"
                                :change-step="changeStep"
                                :producer="producer"
                        ></step-date>
                    <?php endif; ?>

                    <li id="step-products" :class="'col-md-4 '+((step == 'products') ? 'active ' : '')">
                        <button @click="changeStep('products')"
                                :class="'btn '+ (step == 'products' ? 'btn-primary' : 'btn-secondary')"
                                :disabled="step == 'date' || step == 'point-sale'">
                            <span class="button-content"><span
                                        class="glyphicon glyphicon-th-list"></span> Produits</span>
                        </button>
                        <div class="info-step" v-if="oneProductOrdered()">
                            {{ countProductOrdered() }} produit{{ (countProductOrdered() > 1) ? 's' : '' }}
                        </div>
                    </li>
                </ul>
                <div class="clr"></div>
            </div>
            <div class="content">
                <div v-if="order && date" class="alert alert-warning alert-edit-order">
                    <div class="glyphicon glyphicon-pencil"></div>
                    Attention, vous êtes en train de modifier votre commande du <strong>{{ dateFormat }}</strong>.
                </div>
                <div v-if="errors && errors.length" class="alert alert-danger">
                    <ul>
                        <li v-for="error in errors">
                            <div v-html="error"></div>
                        </li>
                    </ul>
                </div>
                <div v-else-if="loading && step != 'payment'">
                    <div class="text-center">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Chargement ...</span>
                        </div>
                    </div>
                </div>
                <transition name="slide">
                    <div id="content-step-date" v-if="step == 'date'">
                        <div v-if="!loading && pointSaleActive && distributions.length == 0" class="alert alert-warning">
                            Aucune distribution à venir sur ce point de vente.
                        </div>
                        <div v-else-if="!loading">
                            <?php if ($producer->behavior_order_select_distribution == Producer::BEHAVIOR_ORDER_SELECT_DISTRIBUTION_LIST): ?>
                            <div style="display:none ;">
                                <?php endif; ?>
                                <div id="legend">
                                    <div><span id="distribution-date-color"></span> Prochains jours de distribution</div>
                                    <div><span id="order-date-color"></span> Vos commandes déjà enregistrées</div>
                                    <div><span id="leave-period-date-color"></span> Congés</div>
                                </div>
                                <div id="calendar">
                                    <v-calendar
                                            is-inline
                                            is-expanded
                                            v-model="date"
                                            mode="single"
                                            color="green"
                                            :columns="calendar.columns"
                                            :masks="calendar.masks"
                                            :theme-styles="calendar.themeStyles"
                                            :attributes="calendar.attrs"
                                            :available-dates="calendar.availableDates"
                                            @dayclick='dayClick'
                                    ></v-calendar>
                                </div>
                                <?php if ($producer->behavior_order_select_distribution == Producer::BEHAVIOR_ORDER_SELECT_DISTRIBUTION_LIST): ?>
                            </div>
                        <?php endif; ?>

                            <?php if ($producer->behavior_order_select_distribution == Producer::BEHAVIOR_ORDER_SELECT_DISTRIBUTION_LIST): ?>
                                <div id="distributions-list">
                                    <?php $incomingDistributions = $distributionModule->findDistributionsIncoming(); ?>
                                    <?php foreach ($incomingDistributions as $distribution): ?>

                                        <?php
                                        $pointSaleDistributions = PointSaleDistribution::searchAll([
                                            'id_distribution' => $distribution->id,
                                            'delivery' => 1
                                        ], []);
                                        ?>

                                        <div class="card card-default">
                                            <div class="card-body">
                                                <button class="btn btn-primary" @click="dayClickList"
                                                        data-distribution-date="<?= $distribution->date . ' 00:00:00' ?>">
                                                    Sélectionner cette distribution
                                                </button>
                                                <span class="date"><?= ucfirst(strftime('%A %d %B', strtotime($distribution->date))); ?></span>
                                                <?php
                                                if ($pointSaleDistributions && count($pointSaleDistributions) > 0) {
                                                    echo '<div class="point-sales">';
                                                    foreach ($pointSaleDistributions as $pointSaleDistribution) {
                                                        if ($pointSaleDistribution->pointSale->status == 1) {
                                                            echo $pointSaleDistribution->pointSale->name . '';
                                                            if (strlen($pointSaleDistribution->pointSale->locality)) {
                                                                echo ' (' . $pointSaleDistribution->pointSale->locality . ')';
                                                            }
                                                            echo '<br />';
                                                        }
                                                    }
                                                    echo '</div>';
                                                }
                                                ?>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </transition>
                <transition name="slide">
                    <div id="content-step-point-sale" v-if="step == 'point-sale'">
                        <div v-if="!loading">
                            <h3>Où souhaitez-vous récupérer votre commande ?</h3>
                            <table id="points-sale" class="table table-striped" v-if="pointsSale.length">
                                <thead>
                                <tr>
                                    <th>Point de vente</th>
                                    <th class="column-locality">Localité</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="pointSale in orderedPointsSale"
                                    v-if="pointSale && (producer.option_order_entry_point == 'point-sale' || (producer.option_order_entry_point == 'date' && pointSale.pointSaleDistribution.delivery))"
                                    :class="(pointSaleActive && pointSale.id == pointSaleActive.id) ? 'selected' : ''">
                                    <td class="name">
                                        <span class="the-name">{{ pointSale.name }}</span>
                                        <div class="comment" v-if="pointSale.userPointSale">
                                            {{ pointSale.userPointSale.comment }}
                                        </div>
                                        <div class="locality">{{ pointSale.locality }}</div>
                                        <div class="comment" v-if="pointSale.infos && pointSale.infos.length > 0"
                                             v-html="pointSale.infos"></div>
                                        <div class="minimum-order-amount" v-if="pointSale.minimum_order_amount">
                                            Montant minimum de commande : {{ formatPrice(pointSale.minimum_order_amount) }}
                                        </div>
                                    </td>
                                    <td class="column-locality">{{ pointSale.locality }}</td>
                                    <td class="actions">
                                        <template
                                                v-if="(order == null || order.id_point_sale != pointSale.id) && pointSale.maximum_number_orders && pointSale.count_orders && pointSale.count_orders >= pointSale.maximum_number_orders">
                                                <span class="label label-default">
                                                    <template v-if="pointSale.is_bread_box">
                                                        Déjà réservée
                                                    </template>
                                                    <template v-else>
                                                        Maximum de commande atteint
                                                    </template>
                                                </span>
                                        </template>
                                        <template v-else>
                                            <div :class="'form-group' + (pointSale.invalid_code ? ' has-error' : '')">
                                                <form>
                                                    <div class="input-group"
                                                         v-if="pointSale.code && pointSale.code.length > 0">
                                                        <span class="input-group-text">
                                                            <i class="bi bi-lock"></i>
                                                        </span>
                                                            <input v-model="pointsSaleCodes[pointSale.id]" type="password"
                                                                   placeholder="Code" class="form-control input-code" />
                                                    </div>
                                                </form>
                                            </div>
                                            <div v-if="!user && producer.credit == 1 && pointSale.payment_method_credit == 1">
                                                <a :href="urlLogin" class="btn btn-secondary">
                                                    <i class="bi bi-box-arrow-in-right"></i>
                                                    Connexion obligatoire
                                                </a>
                                            </div>
                                            <div v-else>
                                                <button class="btn btn-primary" @click="pointSaleClick"
                                                        :data-code="pointSale.code && pointSale.code.length > 0"
                                                        :data-id-point-sale="pointSale.id">
                                                    <i class="bi bi-geo-alt"></i>
                                                    Choisir
                                                </button>
                                            </div>
                                        </template>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="alert alert-warning" v-else>
                                Aucun point de vente disponible pour ce jour de distribution.
                            </div>
                        </div>
                    </div>
                </transition>
                <transition name="slide">
                    <div id="content-step-products" v-if="step == 'products'">
                        <div v-if="!loading">
                            <div v-if="products.length">
                                <table id="products" class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th class="photo">Photo</th>
                                        <th class="name">Nom</th>
                                        <th class="price">Prix unitaire</th>
                                        <th class="quantity">Quantité</th>
                                        <th class="total">Total</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <template v-for="category in categories">
                                        <tr v-if="category.id && countProductsByCategory(category)" :id="'category'+category.id" :class="(categoryCurrent && categoryCurrent.id == category.id) ? 'category-open' : 'category-closed'">
                                            <td class="category-name" colspan="5" @click="setCategoryCurrent(category)">
                                                <!--<span v-if="categoryCurrent && categoryCurrent.id == category.id"
                                                      class="bi bi-caret-down-fill"></span>
                                                <span v-else class="bi bi-caret-right-fill"></span>-->
                                                {{ category.name }}
                                                <span class="badge bg-secondary">{{ countProductsByCategory(category) }}<!-- produit<template
                                                            v-if="countProductsByCategory(category) > 1">s</template>--></span>
                                                <span v-if="countSelectedProductsByCategory(category) > 0"
                                                      class="badge badge-count-selected-products bg-primary">{{ countSelectedProductsByCategory(category) }}<!-- produit<template
                                                            v-if="countSelectedProductsByCategory(category) > 1">s</template>--><span> sélectionné<template
                                                                v-if="countSelectedProductsByCategory(category) > 1">s</template></span></span>
                                            </td>
                                        </tr>
                                        <template v-if="(categoryCurrent && categoryCurrent.id == category.id) || category.id == null">
                                            <tr v-for="product in products"
                                                v-if="product.id_product_category == category.id && isProductAvailable(product)" class="product-open">
                                                <td class="photo">
                                                    <a class="product-photo" :href="product.photo_big" :title="product.name">
                                                        <img v-if="product.photo.length" class="photo-product" :src="product.photo"/>
                                                    </a>
                                                </td>
                                                <td class="name product-name-description-block">
                                                    <span class="name">{{ product.name }}</span>
                                                    <span class="other">
                                                            <span v-if="product.weight">({{ product.weight }}&nbsp;g)</span>
                                                        </span>
                                                    <div>
                                                        <span v-if="product.quantity_max > 0 && ((product.quantity_form / product.coefficient_unit == product.quantity_remaining) || ((product.quantity_remaining * product.coefficient_unit) - product.quantity_form) < product.step)"
                                                              class="badge bg-danger">Épuisé</span>
                                                    </div>
                                                    <div class="description" v-if="product.description.length">
                                                        {{ product.description }}
                                                    </div>
                                                    <div class="description-long" v-if="product.recipe.length">
                                                        <a href="javascript:void(0);" class="show-more-link">En savoir
                                                            plus</a>
                                                        <div class="content">
                                                            {{ product.recipe }}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="price-unit">
                                                    <template v-if="productHasPrice(product)">
                                                        <div>
                                                            {{ formatPrice(getBestProductPrice(product.id,
                                                            product.quantity_form)) }}<br/>
                                                            <span class="price-infos">{{ product.wording_unit }}</span>
                                                            <template v-if="product.unit == 'piece' && product.weight">
                                                                <br />
                                                                <span class="price-infos">
                                                                    {{ formatPrice(product.price_unit_ref) }} / kg
                                                                </span>
                                                            </template>
                                                        </div>
                                                        <div v-if="productHasPriceWithFromQuantity(product)"
                                                             class="alert alert-info decreasing-prices">
                                                            <ul>
                                                                <li v-for="price in product.prices"
                                                                    v-if="price.from_quantity > 0">
                                                                    <strong>{{ formatPrice(price.price_with_tax)
                                                                        }}</strong><br/>à partir de {{
                                                                    price.from_quantity }} {{ product.wording_unit_ref
                                                                    }}
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </template>
                                                </td>
                                                <td class="td-quantity">
                                                    <template v-if="productHasPrice(product)">
                                                        <div class="input-group">
                                                                <span class="input-group-btn">
                                                                    <button class="btn btn-secondary btn-moins"
                                                                            type="button"
                                                                            @click="productQuantityClick(product, product.unit == 'piece' ? -1 : -parseFloat(product.step))"
                                                                            :disabled="product.quantity_form == 0">
                                                                        <i class="bi bi-dash-lg"></i></button>
                                                                </span>
                                                            <input type="text" v-model="product.quantity_form"
                                                                   class="form-control quantity" readonly="readonly"/>
                                                            <span class="input-group-text">{{ product.unit == 'piece' ? 'p.' : product.unit }}</span>
                                                            <span class="input-group-btn">
                                                                    <button class="btn btn-secondary btn-plus"
                                                                            type="button"
                                                                            @click="productQuantityClick(product, product.unit == 'piece' ? 1 : parseFloat(product.step))"
                                                                            :disabled="product.quantity_form == product.quantity_remaining && product.quantity_max > 0">
                                                                        <i class="bi bi-plus-lg"></i></button>
                                                                </span>
                                                        </div>
                                                    </template>
                                                </td>
                                                <td class="price-total">
                                                    <template
                                                            v-if="productHasPrice(product) && product.quantity_form > 0">
                                                        {{ formatPrice(getBestProductPrice(product.id,
                                                        product.quantity_form) * (product.quantity_form /
                                                        product.coefficient_unit )) }}
                                                    </template>
                                                </td>
                                            </tr>
                                        </template>
                                    </template>
                                    <tr class="total">
                                        <td class="summary" colspan="4">
                                            <template v-if="priceTotal() > 0">
                                                <h3>Résumé</h3>
                                                <ul>
                                                    <li v-for="product in products" v-if="product.quantity_form > 0">
                                                        <span class="quantity">{{ product.quantity_form }} {{ product.unit == 'piece' ? 'p.' : product.unit }}</span>
                                                        <span class="name">{{ product.name }}</span>
                                                        <!--<span class="other">
                                                        <span v-if="product.description.length">/</span>
                                                        <span class="description">{{ product.description }}</span>-->
                                                        <span class="other">
                                                                <span v-if="product.weight">({{ product.weight }}&nbsp;g)</span>
                                                            </span>
                                                    </li>
                                                </ul>
                                            </template>
                                        </td>
                                        <td class="price-total">
                                            <span>{{ priceTotal(true) }}</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <div id="content-step-payment">
                                    <div>
                                        <div class="card delivery" v-if="pointSaleActive.is_home_delivery">
                                            <div class="card-body">
                                                <h5 class="card-title">
                                                    <label for="order-comment">
                                                        <i class="bi bi-truck"></i>
                                                        Adresse de livraison
                                                    </label>
                                                </h5>
                                                <div class="card-text">
                                                    <form>
                                                        <textarea id="deliver-address" v-model="deliveryAddress" class="form-control" required="required"></textarea>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="card comment">
                                            <div class="card-body">
                                                <h5 class="card-title">
                                                    <label for="order-comment">
                                                        <i class="bi bi-chat-left"></i>
                                                        Commentaire
                                                    </label>
                                                </h5>
                                                <div class="card-text">
                                                    <form>
                                                        <textarea id="order-comment" v-model="comment" class="form-control"></textarea>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="payment-methods" class="card" v-if="pointSaleActive.payment_method_onsite || pointSaleActive.payment_method_credit || pointSaleActive.payment_method_online">
                                            <div class="card-body">
                                                <h5 class="card-title">
                                                    <i class="bi bi-currency-euro"></i>
                                                    Paiement
                                                </h5>
                                                <div class="card-text">
                                                    <div class="row">
                                                        <div class="col-md-4" v-if="isPaymentMethodOnsiteActive()">
                                                            <input v-model="paymentMethod" type="radio" class="btn-check" name="payment_method" value="onsite" id="payment-method-onsite" autocomplete="off">
                                                            <label class="btn btn-outline-success" for="payment-method-onsite">
                                                                <i class="bi bi-wallet2"></i>
                                                                Sur place
                                                            </label>
                                                        </div>
                                                        <div class="col-md-4" v-if="isPaymentMethodCreditActive()">
                                                            <template v-if="errorCreditMandatoryAndLimit()">
                                                                <div class="alert alert-danger">
                                                                    <i class="bi bi-piggy-bank"></i>
                                                                    Vous devez
                                                                    <template v-if="producer.online_payment == 1">
                                                                        <a href="<?= \Yii::$app->urlManager->createUrl(['credit/add']) ?>">
                                                                            recharger votre cagnotte</a>
                                                                    </template>
                                                                    <template v-else>recharger votre cagnotte</template>
                                                                    auprès de votre producteur ou supprimer des produits.</span>
                                                                    Votre producteur n'autorise pas une cagnotte avec un montant inférieur
                                                                    à {{ formatPrice(producer.credit_limit) }}.<br />
                                                                    Montant de votre cagnotte : {{ formatPrice(user.credit) }}<br />
                                                                    Montant de votre commande : {{ priceTotal(true) }}
                                                                </div>
                                                            </template>
                                                            <template v-else>
                                                                <input v-model="paymentMethod" type="radio" class="btn-check" name="payment_method" value="credit" id="payment-method-credit" autocomplete="off">
                                                                <label class="btn btn-outline-success" for="payment-method-credit">
                                                                    <i class="bi bi-piggy-bank"></i>
                                                                    Cagnotte
                                                                </label>
                                                                <div class="infos">
                                                                    Montant de ma cagnotte : {{ formatPrice(user.credit) }}<br />
                                                                    <template v-if="paymentMethod == 'credit'">
                                                                        <template v-if="order == null || order.amount_paid == 0">
                                                                            <span v-if="checkCreditLimit(order)">{{ priceTotal(true) }} seront débités</span>
                                                                            <span v-else>
                                                                            {{ formatPrice(user.credit) }} seront débités. (Limite de cagnotte à {{ formatPrice(producer.credit_limit) }})<br/>
                                                                            Restera {{ formatPrice(priceTotal() - user.credit) }} à régler.
                                                                        </span>
                                                                        </template>
                                                                        <template v-else-if="order != null && order.amount_paid > 0 && order.amount_paid < priceTotal()">
                                                                            <span v-if="checkCreditLimit(order)">{{ formatPrice(priceTotal() - order.amount_paid) }} seront débités</span>
                                                                            <span v-else>
                                                                            {{ formatPrice(user.credit) }} seront débités. (Limite de cagnotte à {{ formatPrice(producer.credit_limit) }})<br/>
                                                                            Restera {{ formatPrice(priceTotal() - order.amount_paid - user.credit) }} à régler.
                                                                        </span>
                                                                        </template>
                                                                        <template v-else-if="order != null && order.amount_paid > priceTotal()">
                                                                            <span>{{ formatPrice(order.amount_paid - priceTotal()) }} seront remboursés</span>
                                                                        </template>
                                                                    </template>
                                                                </div>
                                                            </template>
                                                        </div>
                                                        <div class="col-md-4" v-if="isPaymentMethodCreditActiveFunctioningUser(false)">
                                                            <input v-model="paymentMethod" type="radio" class="btn-check" name="payment_method" value="credit" id="payment-method-credit" autocomplete="off" disabled>
                                                            <label class="btn btn-outline-success" for="payment-method-credit">
                                                                <i class="bi bi-piggy-bank"></i>
                                                                Cagnotte
                                                            </label>
                                                            <div class="infos">
                                                                Sur demande, vous pouvez payer vos commandes via votre
                                                                cagnotte sur ce point de vente. N'hésitez pas à en
                                                                parler à votre producteur.
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4" v-if="isPaymentMethodOnlineActive()">
                                                            <input v-model="paymentMethod" type="radio" class="btn-check" name="payment_method" value="online" id="payment-method-online" autocomplete="off">
                                                            <label class="btn btn-outline-success" for="payment-method-online">
                                                                <i class="bi bi-credit-card"></i>
                                                                Carte bancaire
                                                            </label>
                                                            <div class="infos">
                                                                Paiement sécurisé via la plateforme Stripe.
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <template>
                                            <div id="signup-guest" class="card" v-if="!user && producer.option_allow_order_guest">
                                                <div class="card-body">
                                                    <h5 class="card-title">
                                                        <i class="bi bi-person"></i>
                                                        Informations personnelles
                                                    </h5>
                                                    <div class="card-text">
                                                        <form action="#">
                                                            <div class="form-group field-signupguest-email required">
                                                                <label class="control-label" for="signupguest-email">Email</label>
                                                                <input type="email" id="signupguest-email" class="form-control"
                                                                       name="SignupForm[email]">
                                                                <p class="help-block help-block-error"></p>
                                                            </div>
                                                            <div class="form-group field-signupguest-firstname required">
                                                                <label class="control-label" for="signupguest-firstname">Prénom</label>
                                                                <input type="text" id="signupguest-firstname" class="form-control"
                                                                       name="SignupForm[firstname]">
                                                                <p class="help-block help-block-error"></p>
                                                            </div>
                                                            <div class="form-group field-signupguest-lastname required">
                                                                <label class="control-label" for="signupguest-lastname">Nom</label>
                                                                <input type="text" id="signupguest-lastname" class="form-control"
                                                                       name="SignupForm[lastname]">
                                                                <p class="help-block help-block-error"></p>
                                                            </div>
                                                            <div class="form-group field-signupguest-phone required">
                                                                <label class="control-label" for="signupguest-phone">Téléphone</label>
                                                                <input type="text" id="signupguest-phone" class="form-control"
                                                                       name="SignupForm[phone]">
                                                                <p class="help-block help-block-error"></p>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="block-actions">
                                                <button class="btn btn-primary" disabled="disabled" v-if="disableConfirmButton || errorCreditMandatoryAndLimit() || !oneProductOrdered()">
                                                    <span v-if="disableConfirmButton" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                                    Je confirme ma commande
                                                </button>
                                                <button class="btn btn-primary" v-else @click="confirmClick">
                                                    Je confirme ma commande
                                                </button>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                            <div class="alert alert-warning" v-else>
                                Aucun produit disponible
                            </div>
                        </div>
                    </div>
                </transition>
                <transition name="slide">

                </transition>
            </div>
        </div>

        <!--<div v-if="producer != null && producer.online_payment && producer.option_online_payment_type == 'credit'"
             id="credit-online-payment">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="glyphicon glyphicon-euro"></i> Paiement en ligne
                    <a href="<?= \Yii::$app->urlManager->createUrl(['credit/add']) ?>" class="btn btn-sm btn-secondary"><i
                                class="glyphicon glyphicon-credit-card"></i> Créditer mon compte</a>
                </div>
                <div class="panel-body">
                    Vous utilisez le crédit pour régler vos commandes ? Simplifiez les paiements avec votre producteur
                    en créditant votre compte par carte bancaire.
                </div>
            </div>
        </div>-->

        <?= $this->render('_block_infos'); ?>
    </div>
</div>

<script type="text/x-template" id="template-step-date">
    <li id="step-date" :class="'col-md-4'+((step == 'date') ? ' active' : '')+(first ? ' first' : '')">
        <button @click="changeStep('date')" :class="'btn '+ (step == 'date' ? 'btn-primary' : 'btn-secondary')"
                :disabled="producer && producer.option_order_entry_point == 'point-sale' && !pointSaleActive">
            <span class="button-content"><span class="glyphicon glyphicon-time"></span> Date</span></span>
        </button>
        <div class="info-step" v-if="dateFormat">
            {{ dateFormat }}
        </div>
    </li>
</script>

<script type="text/x-template" id="template-step-point-sale">
    <li id="step-point-sale" :class="'col-md-4'+((step == 'point-sale') ? ' active ' : '')+(first ? ' first' : '')">
        <button @click="changeStep('point-sale')"
                :class="'btn '+ (step == 'point-sale' ? 'btn-primary' : 'btn-secondary')"
                :disabled="producer && (producer.option_order_entry_point == 'date' && step == 'date')">
            <span class="button-content"><span
                        class="glyphicon glyphicon-map-marker"></span> <?= $producerModule->getPointSaleWording($producer); ?></span>
        </button>
        <div class="info-step" v-if="pointSaleActive">
            {{ pointSaleActive.name }}
        </div>
    </li>
</script>