{% extends 'base.html.twig' %}
{% block body_class %}checkout-checkout{% endblock %}
{% block body %}

    <script type="text/javascript">
        $(document).ready(function() {
            $("input[id='form_usedefault']").click(function(){
                thisRadio = $(this);
                if (thisRadio.hasClass("imChecked")) {
                     thisRadio.removeClass("imChecked");
                     thisRadio.prop('checked', false);
                } else {
                    thisRadio.prop('checked', true);
                    thisRadio.addClass("imChecked");
                }
            });

            $('#form_lieuliv').on("focus",(function(){
                thisRadio = $("input[id='form_usedefault']");
                    thisRadio.removeClass("imChecked");
                    thisRadio.prop('checked', false);
            } ));

            $("input[name='account']").on("click" , function() {
                var Radio = $(this);
                if (Radio.val() == "account") {
                    $('#conectinsc').html('');
                    // ('#conectinsc').append('<h2>S\'Inscrire</h2><form name="fos_user_registration_form" method="post" action="/register/" class="fos_user_registration_register" style="padding:5px;"><div class="form-group"><input type="email" id="fos_user_registration_form_email" name="fos_user_registration_form[email]" required="required" class="form-control" placeholder="Adresse E-mail" /></div><div class="form-group"><input type="text" id="fos_user_registration_form_username" name="fos_user_registration_form[username]" required="required" maxlength="180" pattern=".{2,}" class="form-control" placeholder="Nom d&#039;utilisateur" /></div><div class="form-group"><input type="password" id="fos_user_registration_form_plainPassword_first" name="fos_user_registration_form[plainPassword][first]" required="required" autocomplete="new-password" class="form-control" placeholder="Mot de passe" /></div><div class="form-group"><input type="password" id="fos_user_registration_form_plainPassword_second" name="fos_user_registration_form[plainPassword][second]" required="required" autocomplete="new-password" class="form-control" placeholder="Répéter le mot de passe" /></div><div><input type="submit" value="S'inscrire" class="btn btn-primary"/></div><input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="Eq0yuxaCfGpsFmg-ril_nMbCbz1g5evJYjpxIylZTVs" /></form>');
                    //
                     $('#conectinsc').append('{% spaceless %}<h2>S\'Inscrire</h2>{{ render(controller('CRMBundle:Registration:register')) }}{% endspaceless %}');
                }
                if (Radio.val() == "connect") {
                    $('#conectinsc').html('');
                    $('#conectinsc').append('{% spaceless %}<h2>Se Connecter</h2>{{ render(controller('CRMBundle:Security:login')) }}{% endspaceless %}');
                }
            });
        });
        function  passtofinalstep() {
            $('a[href=\'#collapse-payment-address\']').trigger('click')
            $('#collapse-checkout-confirm').parent().find('.panel-heading .panel-title').html('<a href="#collapse-checkout-confirm" data-toggle="collapse" data-parent="#accordion" class="accordion-toggle"> Etape 2: Confirmation Commande <i class="fa fa-caret-down"></i></a>');
            $('a[href=\'#collapse-checkout-confirm\']').trigger('click');
        };
    </script>
    <style>
        form{
            padding: unset!important;
        }
    </style>

    <div class="header-content-title">
        <div style="background-image: url('{{ asset('bundles/frontend/') }}image/catalog/demo/banners/parallax.jpg'); background-position: 50% 78.1106%;" data-source-url="{{ asset('bundles/frontend/') }}image/catalog/demo/banners/parallax.jpg" class="parallex">
        </div>
    </div>

    <div id="checkout-checkout" class="container">
        <div class="page-title-wrapper">
            <div class="container">
                <h1 class="page-title">Cammande</h1>
                <ul class="breadcrumb">
                    <li><a href="{{ path('homepage') }}"><i class="fa fa-home"></i></a></li>
                    <li><a href="{{ path('getdetail') }}">Panier</a></li>
                    <li><a href="#">Commander</a></li>
                </ul>
            </div>
        </div>

            <div class="row">

                <div id="content" class="col-sm-12 left-column">
                    <div class="panel-group" id="accordion">


                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title"><a href="#collapse-checkout-option" data-toggle="collapse" data-parent="#accordion" class="accordion-toggle" aria-expanded="true">
                                    Etape 1: Authentification Où  Inscription   <i class="fa fa-caret-down"></i></a></h4>
                            </div>
                            <div class="  {% if app.user %} panel-collapse collapse  {% else %} panel-collapse collapse  in {% endif %}" id="collapse-checkout-option" aria-expanded="true" style="">
                                <div class="panel-body"><div class="row">
                                        <div class="col-sm-6">
                                            <h3>Choisir une option:</h3>

                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="account" value="connect" checked="checked">   Se connecter {% if app.user %} avec un autre compte  {% endif %}</label>
                                            </div>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="account" value="account" >  Créer Compte</label>
                                            </div>
                                            {% if app.user %} {% else %}
                                            <p>
                                                En créant un compte, vous pourrez faire vos achats plus rapidement, être au courant du statut d’une commande et suivre les commandes que vous avez précédemment passées.
                                            </p>
                                            {% endif %}
                                            {#<input type="button" value="Continuer" id="button-account" data-loading-text="Loading..." class="btn btn-primary">#}
                                        </div>

                                        <div class="col-sm-6" id="conectinsc">
                                            <h2 >Se Connecter</h2>{{ render(controller('CRMBundle:Security:login')) }}
                                        </div>

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

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    {% if app.user %}
                                        <a href="#collapse-details-compte" data-toggle="collapse" data-parent="#accordion" class="accordion-toggle" aria-expanded="true">
                                            Etape 3: Details Compte <i class="fa fa-caret-down"></i></a>
                                    {% else %}  Etape 3: Details Compte
                                    {% endif %}

                                </h4>
                            </div>
                            <div  class="{% if (app.user) %}  {% if(app.user.tier ) %} panel-collapse collapse {% else %} panel-collapse collapse in  {% endif %}
                                         {% else %} panel-collapse collapse  {% endif %}"  id="collapse-details-compte" aria-expanded="true" style="">
                                <div class="panel-body">
                                    {% if (app.user) %}
                                        {{  include('@Frontend/tiers/edit_tier_passager.html.twig', {'tier':tier  })  }}
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        {{ form_start(form, {'attr': {'style': 'padding:0px!important;' }}) }}
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    {% if app.user %} {% if(app.user.tier ) %}
                                    <a  href="#collapse-payment-address"   data-toggle="collapse" data-parent="#accordion" class="accordion-toggle">  Etape 4: Adresse de livraison   <i class="fa fa-caret-down"></i></a>
                                    {% else %} Etape 4: Adresse de livraison{% endif %} {% else %} Etape 4: Adresse de livraison
                                      {% endif %}
                                </h4>
                            </div>
                            <div class="{% if (app.user) %}{% if(app.user.tier ) %} panel-collapse collapse in {% else %}panel-collapse collapse {% endif %}  {% else %}panel-collapse collapse {{ dump(app.user)  }} {% endif %}" id="collapse-payment-address">
                                <div class="panel-body">
                                    <p>
                                        Vous pouvez modifier l’adresse de livraison de la commande avant de confirmer votre commande.
                                    </p>
                                    <label>
                                        {{ form_widget(form.usedefault) }}

                                        Utiliser l'adresse de mon compte
                                    </label>

                                    <p><strong>Nouveau lieu de livraison </strong></p>
                                    <p>
                                        {{ form_widget(form.lieuliv, {'attr': {'class': 'form-control' ,'rows':3 }}) }}
                                    </p>

                                    <div class="buttons">
                                        <div class="pull-right">
                                            <input type="button" value="Continuer" id="button-payment-method"  onclick="passtofinalstep()" data-loading-text="Chargement..." class="btn btn-primary">
                                        </div>
                                    </div>

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

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">Etape 5: Confirmation Commande
                                </h4>
                            </div>
                            <div class="panel-collapse collapse" id="collapse-checkout-confirm">
                                <div class="panel-body"><div class="table-responsive">
                                        <table class="table table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <td class="text-left">Produit</td>
                                                <td class="text-right">Quantité</td>
                                                <td class="text-right">Prix Unitaire </td>
                                                <td class="text-center">Remise </td>
                                                <td class="text-right">Total HT</td>
                                            </tr>
                                            </thead>
                                            <tbody >
                                            {%  for art in  articles %}
                                                <tr>
                                                    <td class="text-left">
                                                        {{ art['article'] }}</a>
                                                    </td>
                                                    <td class="text-right">
                                                        {{ (app.session.get('panier'))[art['idart']] }}
                                                    </td>
                                                    <td class="text-right">{{ (art['put'])|localizedcurrency('TND')  }}</td>
                                                    <td class="text-right">
                                                        {% if(art['remise']) %}
                                                            {{ art['remise'] }} %
                                                        {% endif %}
                                                    </td>
                                                    <td class="text-right">{{ (art['ttc'])|localizedcurrency('TND')  }}</td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                            <tfoot>

                                            <tr>
                                                <td colspan="4" class="text-right"><strong>Total-HT:</strong></td>
                                                <td class="text-right">{{ (totals['tpunit'])|localizedcurrency('TND')  }}</td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right"><strong>Taxe</strong></td>
                                                <td class="text-right">{{ totals['tva'] }} % </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-right"><strong>Total-TTC:</strong></td>
                                                <td class="text-right">{{ (totals['ttc'])|localizedcurrency('TND') }}</td>
                                            </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                    <div class="buttons">
                                        <div class="pull-right">
                                            J'ai lu et j'accepte les<a href="#" class="agree"><b> conditions d'utilisation</b></a>
                                            <input type="checkbox" name="agree" value="1" required>
                                            &nbsp;
                                            <input type="submit" value="Confirmer"   data-loading-text="Chargement..." class="btn btn-primary">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        {{ form_end(form) }}



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

{% endblock %}