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

{% block title %}Valider ma commande - Les Pépites d'Ophélie{% endblock %}

{% block meta %}
    <meta name="description" content="Validation de ma commande.">
{% endblock %}


{% block content %}

<div class="container mt-5 mb-5" style="min-height:54vh">
    <h1>Je passe ma commande</h1>
    <p>Choisissez vos préférences avant de passer votre commande sur Les Pépites d'Ophélie</p>
    <hr>
    <h3 class="mb-4 mt-4">Récapitulatif de ma commande</h3>
   <div class="d-flex flex-column croller">
            <b>Ma commande</b>
            {% for product in cart %}
            <div class="row mt-2">
                <div class="col-2 my-auto"><img src="/uploads/{{ product.product.illustration1 }}" alt="{{ product.product.name }}" height="90px"></div>
                <div class="col-4 my-auto">{{ product.product.name }} </div>
                <div class="col-4 my-auto"><small>Taille :{{ product.size}}</small></div>
                <div class="col-2 my-auto">X{{ product.quantity}} </div>
            </div>
            {% endfor %}
        </div>
        <div class="widget-container">
            <h3 class="mb-4 mt-5">Sélectionner votre point relais</h3>
            <div class="d-flex flex-column align-items-center justify-content-center mt-5 mb-5">
                <div id="Zone_Widget"></div> 
                
                <div id="selectedParcelShopDetails"></div>
                
                <div class="mt-3">
                    <button id="chooseParcelShop" class="btn btn-primary">Choisir ce point relais</button>
                    <button id="changeParcelShop" class="btn btn-secondary" style="display: none;">Changer de point relais</button>
                </div>
            </div> 
        </div>
        <h3 class="mb-4 mt-5">Sélectionner votre adresse de facturation</h3>
        <form action="{{ path('app_order_recap') }}" method="POST">
            <div class="row justify-content-center">
                {% for key, address in app.user.addresses %}
                    <div class="col-md-4 address">
                        <div class="card text-center mb-4" style="width: 18rem; background-color: #CCCCCC;">
                            <div class="card-body">
                                <h5 class="card-title">{{ address.firstname }} {{ address.lastname }}</h5>
                                <p class="card-text">{{ address.address }} <br>
                                {{ address.postal }} {{ address.city }} <br>
                                {{ address.country }}
                                </p>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="billingAddress" value="{{ address.id }}" id="billingAddress{{ address.id }}" {% if key == 0 %}checked{% endif %}>
                                    <label class="form-check-label" for="billingAddress{{ address.id }}">
                                        Utiliser cette adresse de facturation
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <br>
            {# Ajouter un champ hidden pour l'adresse du point relais sélectionné #}
            <input type="hidden" name="selectedParcelShopAddress" id="selectedParcelShopAddress">
            
            {# Bouton de soumission du formulaire #}
            <button type="submit" class="btn btn-primary d-block mx-auto" id="validateOrderButton" disabled>Valider ma commande</button>
        </form>
    </div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>

<script>
$(document).ready(function () {  
    // Cacher le bouton "Choisir ce point relais" au chargement de la page
    $("#chooseParcelShop").hide();
    
    // Charge le widget dans la DIV d'id "Zone_Widget" avec les paramètres indiqués  
    // et renverra le Point Relais sélectionné par l'utilisateur dans le champ d'ID "ParcelShopCode"  
    $("#Zone_Widget").MR_ParcelShopPicker({     
        Target: "#ParcelShopCode", // Sélecteur JQuery de l'élément dans lequel sera renvoyé l'ID du Point Relais sélectionné (généralement un champ input hidden)  
        Brand: "BDTEST  ", // Votre code client Mondial Relay  
        Responsive: true, 
        AllowedCountries: "FR,ES,LU,BE,PT,NL",
        Country: "FR", // Code ISO 2 lettres du pays utilisé pour la recherche,  
        // Habiller le widget aux couleurs Mondial Relay (thème par défaut si ce paramètre n'est pas renseigné) 
        EnableGeolocalisatedSearch: "true", 
        Theme: "mondialrelay", // Mettre la valeur "inpost" (en minuscule) pour utiliser le thème graphique Inpost  
        // Fonction de callback à la sélection d'un Point Relais
       // Fonction de callback à la sélection d'un Point Relais
OnParcelShopSelected: function (data) {
    // Construire les détails du point relais sélectionné avec l'adresse complète
    var fullDetails = "Point relais sélectionné : <br>";
    
    // Ajouter le nom de l'enseigne
    if (data.Nom) {
        fullDetails += "<strong>" + data.Nom + "</strong><br>"; // Ajout du <br> après le nom de l'enseigne
    }
    
    // Ajouter l'adresse ligne 1 si elle n'est pas vide
    if (data.Adresse1) {
        fullDetails += data.Adresse1 + '<br>';
    }
    
    // Ajouter l'adresse ligne 2 si elle n'est pas vide
    if (data.Adresse2) {
        fullDetails += data.Adresse2 + '<br>';
    }
    
    // Ajouter le code postal et la ville si ils ne sont pas vides
    if (data.CP && data.Ville) {
        fullDetails += data.CP + ' ' + data.Ville + '<br>';
    }
    
    // Ajouter le pays si il n'est pas vide
    if (data.Pays) {
        fullDetails += data.Pays;
    }
    
    // Afficher les détails sous le widget
    $("#selectedParcelShopDetails").html(fullDetails);
    
    // Stocker l'adresse du point relais sélectionné dans le champ hidden
    $("#selectedParcelShopAddress").val(JSON.stringify(data));
    
    // Afficher le bouton une fois qu'une adresse est sélectionnée
    $("#chooseParcelShop").show();
    
    // Vérifier si les deux adresses sont sélectionnées pour activer le bouton de validation
    checkAddresses();
}

    });  

    // Gérer le clic sur le bouton "Choisir ce point relais"
    $("#chooseParcelShop").click(function() {
        // Cacher le widget
        $("#Zone_Widget").hide();
        // Cacher le bouton "Choisir ce point relais"
        $("#chooseParcelShop").hide();
        // Afficher le bouton "Changer de point relais"
        $("#changeParcelShop").show();
        // Vérifier si les deux adresses sont sélectionnées pour activer le bouton de validation
        checkAddresses();
    });
    
    // Gérer le clic sur le bouton "Changer de point relais"
    $("#changeParcelShop").click(function() {
        // Afficher le widget
        $("#Zone_Widget").show();
        // Cacher le bouton "Changer de point relais"
        $("#changeParcelShop").hide();
        // Cacher les détails du point relais sélectionné
        $("#selectedParcelShopDetails").empty();
        // Vérifier si les deux adresses sont sélectionnées pour activer le bouton de validation
        checkAddresses();
    });
    
    // Fonction pour vérifier si les deux adresses sont sélectionnées et activer le bouton de validation
    function checkAddresses() {
    var billingAddressSelected = $("input[name='billingAddress']:checked").length > 0;
    var parcelShopSelected = $("#selectedParcelShopAddress").val() !== "";
    if (billingAddressSelected || parcelShopSelected) {
        $("#validateOrderButton").prop('disabled', false);
    } else {
        $("#validateOrderButton").prop('disabled', true);
    }
}
});

</script>

{% endblock %}