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

{% block title %}AFPA-Account{% endblock %}

{% block body %}

{{ include('partials/title_section.html.twig', {'name':'Mon compte !'}) }}

<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4">
                <div class="dashboard_menu">
                    <ul class="nav nav-tabs flex-column" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="false"><i class="ti-layout-grid2"></i>Dashboard</a>
                        </li>
                        {% if is_granted ('ROLE_USER') %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ path('gestion_membre')}}"><i class="ti-lock"></i>Gestion membres</a>
                        </li>
                        {% endif %}
                         
                        {% if codeInvitation is not null %}
                        <li class="nav-item">
                            <a class="nav-link" id="parrainages-tab" data-toggle="tab" href="#parrainages" role="tab" aria-controls="parrainages" aria-selected="false"><i class="ti-user"></i>Mes Parrainages</a>
                        </li>
                        {% endif %}
                        <li class="nav-item">
                            <a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="true"><i class="ti-location-pin"></i>My Address</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="account-detail-tab" data-toggle="tab" href="#account-detail" role="tab" aria-controls="account-detail" aria-selected="true"><i class="ti-id-badge"></i>Account details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ path('app_logout')}}"><i class="ti-lock"></i>Logout</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-9 col-md-8">
                {% for message in app.flashes('address_message') %}
                    <div class="alert alert-success alert-dismissible fade show" role="alert"> {{message}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endfor %}
                {% for message in app.flashes('membre_inscrit') %}
                    <div class="alert alert-success alert-dismissible fade show" role="alert"> {{message}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endfor %}
                <div class="tab-content dashboard_content">
                    <div class="tab-pane fade active show" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
                        <div class="card">
                            <div class="card-header">
                                <h3>{{app.user.prenom | upper }} {{app.user.nom | upper }}</h3>
                            </div>
                            <div class="card-body">
                                <p>Depuis le tableau de bord de votre compte, vous pouvez lister &amp; vérifier vos,
                                    <a href="javascript:void(0);" onclick="$('#parrainages-tab').trigger('click')">recents parrainages</a>,  
                                     <a href="javascript:void(0);" onclick="$('#account-detail-tab').trigger('click')">
                                        modifier votre mot de passe et les détails de votre compte.</a></p>
                                {% if is_granted ('ROLE_ADMIN') %}
                                    <a href="{{path('admin')}}" target="_blank" class="btn btn-fill-out"> Access the backoffice</a>
                                {% endif %}

                                <div class="table-responsive"> 
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>Mois</th>
                                                        <th>Montant</th>
                                                        <th>Payé</th>
                                                        <th>Mode</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Janvier</td> 
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>Février</td> 
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Mars</td> 
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Avril</td> 
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                    <tr>
                                                        <td>5</td>
                                                        <td>Mai</td> 
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                    <tr>
                                                        <td>6</td>
                                                        <td>Juin</td> 
                                                        <td> </td>
                                                        <td>     </td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>7</td>
                                                        <td>Juiellet</td> 
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                    <tr>
                                                        <td>8</td>
                                                        <td>Aout</td> 
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                    <tr>
                                                        <td>9</td>
                                                        <td>Septembre</td> 
                                                        <td> </td>
                                                        <td>     </td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>10</td>
                                                        <td>Octobre</td> 
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                    <tr>
                                                        <td>11</td>
                                                        <td>Novembre</td> 
                                                        <td> </td>
                                                        <td>     </td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>12</td>
                                                        <td>Décembre</td> 
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="table-responsive"> 
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>M-Day</th>
                                                        <th>Date</th>
                                                        <th>Montant</th>
                                                        <th>Payé</th>
                                                        <th>Mode</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% set currentDate = date() %}
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Takbîr-Day</td> 
                                                        <td>    </td>
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>Hamd-Day</td> 
                                                        <td>    </td>
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Tasbîh-Day</td>
                                                        <td>   </td> 
                                                        <td> </td>
                                                        <td>     </td>
                                                        <td>-</td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Muhammad-Day(PSL)</td>
                                                        <td>   </td> 
                                                        <td> </td>
                                                        <td>     </td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td>5</td>
                                                        <td>No-Limit-Days</td>
                                                        <td></td> 
                                                        <td></td>
                                                        <td>     </td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="table-responsive"> 
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>Dons spéciaux</th>
                                                        <th>Date</th>
                                                        <th>Montant</th>
                                                        <th>Payé</th>
                                                        <th>Mode</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Femmes</td> 
                                                        <td>    </td>
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>Enfants</td> 
                                                        <td>    </td>
                                                        <td> </td>
                                                        <td>    </td>
                                                        <td>  </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Personnes Handicapés</td>
                                                        <td>   </td> 
                                                        <td> </td>
                                                        <td>     </td>
                                                        <td>-</td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Personnes Malades</td>
                                                        <td>   </td> 
                                                        <td> </td>
                                                        <td>     </td>
                                                        <td>-</td>
                                                    </tr>
                                                    <tr>
                                                        <td>5</td>
                                                        <td>Religion</td>
                                                        <td>-</td> 
                                                        <td> </td>
                                                        <td>     </td>
                                                        <td>-</td>
                                                    </tr>
                                                </tbody>
                                            </table> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                    <div class="tab-pane fade" id="parrainages" role="tabpanel" aria-labelledby="parrainages-tab">
                        <div class="card">
                            <div class="card-header">
                                <h3>Parrainages</h3>
                            </div>
                            {% if parrainages is not empty %} 
                                {% set num = 0 %}
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th>No</th>
                                                    <th>Prénom</th>
                                                    <th>Nom</th>
                                                    <th>Sexe</th>
                                                    <th>Tél 1</th>
                                                    <th>Email</th>
                                                    <th>Validé</th>
                                                    <th>Actif</th>
                                                    <th>Compte</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for parrain in parrainages %}
                                                {% set num = num + 1 %}
                                                <tr>
                                                    <td>{{ num }}</td>
                                                    <td>{{parrain.prenom}}</td>
                                                    <td>{{parrain.nom}}</td>
                                                    <td>{{parrain.sexe ? 'H' : 'F'}}</td>
                                                    <td>{{parrain.tel1}}</td> 
                                                    <td>{{ parrain.couriel}}</td>
                                                    <td>{{ parrain.isValided ? '<b class="text-success">Yes</b>' : '<b class="text-danger">No</b>' }}</td>
                                                    <td>{{ parrain.isActif ? '<b class="text-success">Yes</b>' : '<b class="text-danger">No</b>'}}</td>
                                                    <td><a href="#" class="btn btn-fill-out btn-sm">View</a></td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            {% else %}
                                <div> 
                                    Désolé {{ app.user.fullName }}! Vous n'avez pas encore parrainé des membres!
                                </div>
                            {% endif %}
                            <div class="card-footer">
                                <div> 
                                    <p> Vous pouvez partager votre lien d'invitation ci-dessous à vos amis: </p>
                                    <div class="row">
                                        <div id="copy_link" style="display:      e;" class="col-md-12 alert alert-success alert-dismissable fade show" role="alert"> Lien copié dans Clipboard!
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="col-lg-12"> 
                                            <a class="copy_text btn btn-fill-out btn-sm"  data-toggle="tooltip" title="Copy to Clipboard" href="http://192.168.43.152:8000/membre/inscription-par-invitation/{{ codeInvitation }}"> Copier le lien d'invatation </a> 
                                             -- OU --
                                            <a href="{{ path('inscription_membre', {'hote':app.user.id})}}" class="btn btn-fill-out btn-sm">Inscrire un membre </a>
                                            
                                           <p> <span>https://mca-sn.com/1millionsMuslim/public/inscription-par-invitation/{{ codeInvitation }}</span></p>
                                            
                                        </div>
                                    </div>
                                </div>
                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                                <script>
                                    $('.copy_text').click(function (e) {
                                        e.preventDefault();
                                        var copyText = $(this).attr('href'); 
                                     
                                        document.addEventListener('copy', function(e) {
                                           e.clipboardData.setData('text/plain', copyText); 
                                           e.preventDefault();
                                        }, true);
                                     
                                        document.execCommand('copy');  
                                        console.log('copied text : ', copyText); 
                                       // alert('copied text: ' + copyText); 
                                       //$('.copy_link').text('Lien invitation copié!');
                                       $('#copy_link').show();
                                      });

                                    
                                </script>
                            </div>
                        </div> 
                    </div>
                    <div class="tab-pane fade" id="address" role="tabpanel" aria-labelledby="address-tab">
                        <div class="row">
                            <div class="col-lg-12">
                                <a href="#" class="btn btn-fill-out mb-3">Add new address</a>
                            </div>
                        </div>
                        <div class="row">
                            {% if app.user.invitationLink is defined %}
                                {% set i = 0 %}
                                {% for addresse in app.user.addresses %}
                                    {% set i = i + 1 %}
                                    <div class="col-lg-6">
                                        <div class="card mb-3 mb-lg-0">
                                            <div class="card-header">
                                                <h3> Your Address # {{ i }}</h3>
                                            </div>
                                            <div class="card-body">
                                                <address> 
                                                    {{ addresse.fullName }}<br>
                                                    {{ addresse.address }} <br>
                                                    {{ addresse.complement }} <br>
                                                    {{ addresse.city }} <br>
                                                    {{ addresse.codePostal }}<br>
                                                    {{ addresse.country }}

                                                </address>
                                                <div class="btn-group">
                                                    <a href="{{ path('address_edit', {'id': addresse.id}) }}" class="btn btn-success">Edit</a>
                                                    {{ include('address/_delete_form.html.twig') }}
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <p>Désolé tu n'as pas encore ajouté des adresses dans ton compte !</p>
                            {% endif %}

                        </div>
                    </div>
                    <div class="tab-pane fade" id="account-detail" role="tabpanel" aria-labelledby="account-detail-tab">
                        <div class="card">
                            <div class="card-header">
                                <h3>Account Details</h3>
                            </div>
                            <div class="card-body">
                                <p>Already have an account? <a href="#">Log in instead!</a></p>
                                <form method="post" name="enq">
                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <label>Prénom <span class="required">*</span></label>
                                            <input required="" value="{{app.user.prenom}}" class="form-control" name="name" type="text">
                                         </div>
                                         <div class="form-group col-md-6">
                                            <label>Nom <span class="required">*</span></label>
                                            <input required="" value="{{app.user.nom}}" class="form-control" name="phone">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>Display Name <span class="required">*</span></label>
                                            <input required="" class="form-control" name="dname" type="text">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>Email Address <span class="required">*</span></label>
                                            <input required="" value="{{app.user.email}}" class="form-control" name="email" type="email">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>Current Password <span class="required">*</span></label>
                                            <input required="" class="form-control" name="password" type="password">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>New Password <span class="required">*</span></label>
                                            <input required="" class="form-control" name="npassword" type="password">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>Confirm Password <span class="required">*</span></label>
                                            <input required="" class="form-control" name="cpassword" type="password">
                                        </div>
                                        <div class="col-md-12">
                                            <button type="submit" class="btn btn-fill-out" name="submit" value="Submit">Save</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}