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

{% block title %}Mon profil{% endblock %}

{% block description %}Bienvenue dans votre espace personnel.{% endblock %}

{% block body %}
    {% if success %}
        <div class="alert alert-success">
            <strong>Parfait !</strong> Vos paramètres ont bien été mis à jour.
        </div>
    {% endif %}
    <div class="panel">
        <div class="panel-body">
            <div class="fixed-fluid">
                <div class="fixed-md-200 pull-sm-left fixed-right-border">

                    <!-- Simple profile -->
                    <div class="text-center">
                        <div class="pad-ver">
                            <img src="{{ asset('/assets/img/profile-photos/1.png') }}" class="img-lg img-circle"
                                 alt="Profile Picture">
                        </div>
                        <h4 class="text-lg text-overflow mar-no">{{ user.firstname | capitalize }} {{ user.lastname | upper }}</h4>
                    </div>
                    <hr>
                    <p class="pad-ver text-main text-sm text-uppercase text-bold">Mon offre</p>
                    <div class="panel panel-info panel-colorful media middle pad-all">
                        <div class="media-left">
                            <div class="pad-hor">
                                <i class="ti-layout-grid2 icon-2x"></i>
                            </div>
                        </div>
                        <div class="media-body">
                            <p class="mar-no text-semibold">{{ site.product.name }}</p>
                        </div>
                    </div>
                    <hr>

                    <!-- Profile Details -->
                    <p class="pad-ver text-main text-sm text-uppercase text-bold">A propos de moi</p>
                    <p><i class="demo-pli-map-marker-2 icon-lg icon-fw"></i> {{ site.contact.postCode }} {{ site.contact.city }}, {{ site.contact.country }}</p>
                    {% if site.contact.phone %}
                        <p><i class="demo-pli-old-telephone icon-lg icon-fw"></i>{{ site.contact.phone }}</p>
                    {% endif %}
                    <p>
                        {% if site.domainActif and site.domain %}
                        <a href="{{ site.domain }}" target="_blank" class="btn-link">
                            <i class="demo-pli-internet icon-lg icon-fw"></i>
                            {{ site.domain }}
                        </a>
                    {% else %}
                        <a href="{{ path('site_home', {'siteName':site.internalName}) }}" target="_blank" class="btn-link">
                            <i class="demo-pli-internet icon-lg icon-fw"></i>
                            {{ site.internalName }}
                        </a>
                    {% endif %}
                    </p>


                </div>
                <div class="fluid">
                    <div class="panel panel-mint">
                        <div class="panel-heading">
                            <h3 class="panel-title"><label class="control-label">Informations postales</label></h3>
                        </div>
                        <div class="panel-body">
                            {{ form_start(form) }}
                            <div class="row">
                                <div class="col-sm-12 form-group">
                                    {{ form_label(form.societyName, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                    {{ form_widget(form.societyName, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 form-group pull-left">
                                    {{ form_label(form.address1, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                    {{ form_widget(form.address1, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                </div>
                                <div class="col-sm-6 form-group pull-right">
                                    {{ form_label(form.address2, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                    {{ form_widget(form.address2, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4 form-group pull-left">
                                    {{ form_label(form.postalCode, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                    {{ form_widget(form.postalCode, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                </div>
                                <div class="col-sm-8 form-group pull-right">
                                    {{ form_label(form.city, null, {'label_attr':{'class':'g-mb-10'}}) }}
                                    {{ form_widget(form.city, {'attr':{'class':'form-control form-control-md rounded-0'}}) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 form-group text-right mt50">
                                    <button class="btn btn-success pull-right" type="submit">
                                        Enregistrer
                                    </button>
                                </div>
                            </div>
                            {{ form_end(form) }}
                        </div>
                    </div>
                    <div class="panel panel-mint">
                        <div class="panel-heading">
                            <h3 class="panel-title"><label class="control-label">Mon offre</label></h3>
                        </div>

                        <h4 class="mt20">
                            Mon avis de prochain prélèvement : Le {{ invoiceUpcoming.next_payment_attempt|date("d/m/Y") }}.
                        </h4>
                        <div>
                            Offre : {{ site.product.name }} pour la période du {{ invoiceUpcoming.period_start|date("d/m/Y") }} au {{ invoiceUpcoming.period_end|date("d/m/Y") }}.<br/>
                            Montant : {{ (invoiceUpcoming.amount_due / 100) | number_format(2,',',' ') }} € TTC.
                        </div>

                        <h5 class="mt50">
                            Mes moyens de paiements (cartes bancaires) :
                        </h5>
                        <div class="panel-body">

                            <a href="{{ path('bo-account-card-add') }}">
                                <button class="btn btn-success pull-right mb10">
                                    Ajouter une carte
                                </button>
                            </a>
                            <table class="table table-bordered text-center">
                                <thead>
                                <tr>
                                    <th width="100px" class="text-center">Type</th>
                                    <th width="100px" class="text-center">Défaut</th>
                                    <th class="text-center">Titulaire</th>
                                    <th class="text-center">Carte</th>
                                    <th class="text-center">Expiration</th>
                                    <th width="250px" class="text-center">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% if cards|length > 0 %}
                                    {% for card in cards %}
                                        <tr>
                                            <td>
                                                {% if card.brand == 'Visa' %}
                                                    <img src="{{ asset('/assets/img/payment/visa.png') }}" class="img-xs img-circle" alt="VISA">
                                                {% else %}
                                                    {{ card.brand }}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if customer.default_source.id == card.id %}
                                                    <span class="label label-primary">Par défaut</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ card.name }}
                                            </td>
                                            <td>**** {{ card.last4 }}
                                            </td>
                                            <td>{{ card.exp_month }}/{{ card.exp_year }}</td>
                                            <td>
                                                {% if customer.default_source.id != card.id %}
                                                    <a href="{{ path('bo-account-card-default', {'id':card.id}) }}">
                                                        <button class="btn btn-sm btn-primary">
                                                            Définir par défaut
                                                        </button>
                                                    </a>
                                                {% endif %}
                                                <a href="{{ path('bo-account-card-delete', {'id':card.id}) }}">
                                                    <button class="btn btn-sm btn-danger">
                                                        Supprimer
                                                    </button>
                                                </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="4">Aucun carte recensée</td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>

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



{% endblock %}

{% block javascripts %}
    <!--Flot Chart [ OPTIONAL ]-->
    <script src="{{ asset('assets/plugins/flot-charts/jquery.flot.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/flot-charts/jquery.flot.resize.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/flot-charts/jquery.flot.tooltip.min.js') }}"></script>
    <!--Sparkline [ OPTIONAL ]-->
    <script src="{{ asset('assets/plugins/sparkline/jquery.sparkline.min.js') }}"></script>

    <!--Specify page [ SAMPLE ]-->
    <script src="{{ asset('assets/js/demo/dashboard.js') }}"></script>
{% endblock %}