{extends file='customer/page.tpl'}

{block name='page_title'}
    <h1 class="text-center">MySo Points</h1>
{/block}

{extends file='customer/page.tpl'}

{block name='page_title'}
    <h1 class="text-center">MySo Points</h1>
{/block}

{block name='page_content'}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-11 col-md-12">
            
            {* Messages de succès/erreur *}
            {if $success_messages}
                {foreach $success_messages as $message}
                    <div class="alert alert-success text-center">
                        {$message}
                    </div>
                {/foreach}
            {/if}
            
            {if $error_messages}
                {foreach $error_messages as $message}
                    <div class="alert alert-danger text-center">
                        {$message}
                    </div>
                {/foreach}
            {/if}
            
            {* Section principale MySo Points *}
            <div class="myso-account-section">
                <div class="myso-account-header">
                    <h2 class="myso-account-title">Mon solde MySo Points</h2>
                    <p class="myso-account-subtitle">Gérez vos points de fidélité et tokens enfant</p>
                    
                    {* Carte de solde principal *}
                    <div class="myso-balance-card">
                        <div class="myso-balance-info">
                            <div class="myso-balance-label">Points disponibles</div>
                            <div class="myso-balance-amount">{$points_data.points_balance}</div>
                            <div class="myso-balance-value-eur">≈ {$points_value|string_format:"%.2f"} {$currency.sign}</div>
                        </div>
                        <div class="myso-balance-actions">
                            <a href="#conversion" class="myso-btn myso-btn-primary">
                                <i class="fa fa-recycle"></i> Convertir
                            </a>
                            <a href="#transactions" class="myso-btn myso-btn-secondary">
                                <i class="fa fa-history"></i> Historique
                            </a>
                        </div>
                    </div>
                </div>

                {* Statistiques *}
                <div class="myso-stats-grid">
                    <div class="myso-stat-item">
                        <div class="myso-stat-icon">♻️</div>
                        <div class="myso-stat-value">{$points_data.tokens_enfant}</div>
                        <div class="myso-stat-label">Tokens enfant</div>
                    </div>
                    <div class="myso-stat-item">
                        <div class="myso-stat-icon">📈</div>
                        <div class="myso-stat-value">{$points_data.lifetime_points}</div>
                        <div class="myso-stat-label">Points gagnés au total</div>
                    </div>
                    <div class="myso-stat-item">
                        <div class="myso-stat-icon">🌟</div>
                        <div class="myso-stat-value">
                            {if $points_data.vip_level == 1}VIP{else}Standard{/if}
                        </div>
                        <div class="myso-stat-label">Niveau</div>
                    </div>
                    <div class="myso-stat-item">
                        <div class="myso-stat-icon">🎯</div>
                        <div class="myso-stat-value">{$tokens_available}</div>
                        <div class="myso-stat-label">Tokens disponibles</div>
                    </div>
                </div>
            </div>

            {* Section de conversion *}
            <div id="conversion" class="myso-deposit-form">
                <div class="myso-deposit-header">
                    <h3 class="myso-deposit-title">♻️ Conversion en tokens enfant</h3>
                    <p class="myso-deposit-subtitle">Transformez vos points en tokens pour vos enfants</p>
                </div>

                {* Estimateur de points *}
                <div class="myso-points-estimator">
                    <div class="myso-estimator-label">Points à convertir</div>
                    <div class="myso-estimator-value" id="conversion-points">{$conversion_rate}</div>
                    <div class="myso-estimator-details">
                        <div class="myso-estimator-detail">
                            <i class="fa fa-info-circle"></i>
                            <span>{$conversion_rate} points = 1 token</span>
                        </div>
                        <div class="myso-estimator-detail">
                            <i class="fa fa-check-circle"></i>
                            <span>Tokens disponibles: {$tokens_available}</span>
                        </div>
                    </div>
                </div>

                {if $points_data.points_balance >= $conversion_rate}
                    <form method="post" class="text-center">
                        <div class="form-group mb-4">
                            <input type="range" 
                                   name="points_to_convert" 
                                   class="myso-slider" 
                                   min="{$conversion_rate}" 
                                   max="{$points_data.points_balance}" 
                                   step="{$conversion_rate}"
                                   value="{$conversion_rate}"
                                   id="conversion-slider">
                        </div>
                        <button type="submit" class="myso-btn myso-btn-primary myso-btn-lg">
                            <i class="fa fa-recycle"></i> Convertir en tokens
                        </button>
                    </form>
                {else}
                    <div class="text-center">
                        <p class="text-muted">Vous avez besoin d'au moins {$conversion_rate} points pour convertir</p>
                        <a href="#" class="myso-btn myso-btn-secondary">
                            <i class="fa fa-shopping-cart"></i> Gagner plus de points
                        </a>
                    </div>
                {/if}
            </div>

            {* Historique des transactions *}
            <div id="transactions" class="myso-account-section">
                <div class="myso-transactions-section">
                    <h3 class="myso-section-title">
                        <i class="fa fa-history"></i>
                        Historique des transactions
                    </h3>

                    {* Filtres *}
                    <div class="myso-transactions-filters">
                        <button class="myso-filter-btn active" data-filter="all">Tous</button>
                        <button class="myso-filter-btn" data-filter="gain">Gains</button>
                        <button class="myso-filter-btn" data-filter="depense">Dépenses</button>
                        <button class="myso-filter-btn" data-filter="conversion">Conversions</button>
                    </div>

                    {if $transactions}
                        <div class="myso-transactions-list">
                            {foreach $transactions as $transaction}
                                <div class="myso-transaction-item" data-type="{$transaction.type|lower}">
                                    <div class="myso-transaction-left">
                                        <div class="myso-transaction-icon {$transaction.type|lower}">
                                            {if $transaction.type == 'GAIN'}
                                                <i class="fa fa-plus"></i>
                                            {elseif $transaction.type == 'DEPENSE'}
                                                <i class="fa fa-minus"></i>
                                            {elseif $transaction.type == 'CONVERSION'}
                                                <i class="fa fa-recycle"></i>
                                            {else}
                                                <i class="fa fa-cog"></i>
                                            {/if}
                                        </div>
                                        <div class="myso-transaction-info">
                                            <div class="myso-transaction-title">{$transaction.description}</div>
                                            <div class="myso-transaction-date">
                                                {$transaction.date_add|date_format:'%d/%m/%Y à %H:%M'}
                                                {if $transaction.site_origine} - {$transaction.site_origine}{/if}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="myso-transaction-amount {if $transaction.type == 'GAIN'}positive{else}negative{/if}">
                                        {if $transaction.type == 'GAIN'}+{else}-{/if}{$transaction.points} pts
                                    </div>
                                </div>
                            {/foreach}
                        </div>
                    {else}
                        <div class="text-center py-5">
                            <i class="fa fa-inbox" style="font-size: 48px; color: #ccc; margin-bottom: 20px;"></i>
                            <p class="text-muted">Aucune transaction trouvée</p>
                        </div>
                    {/if}
                </div>
            </div>

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

<style>
/* Override des couleurs pour le thème vert recyclage */
:root {
    --myso-primary: #22c55e !important;
    --myso-secondary: #16a34a !important;
    --myso-success: #22c55e !important;
    --myso-danger: #ef4444 !important;
    --myso-gradient: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    --myso-gradient-soft: linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(22,163,74,0.1) 100%) !important;
}

/* Ajustements supplémentaires pour le slider */
.myso-slider {
    margin: 20px 0;
}

.myso-btn-lg {
    padding: 15px 30px;
    font-size: 16px;
}

/* Animation pour le slider de conversion */
#conversion-slider:input {
    background: var(--myso-gradient-soft);
}

/* Centrage du contenu */
.container-fluid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .myso-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .myso-estimator-details {
        flex-direction: column;
        gap: 10px;
    }
    
    .myso-transaction-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .myso-transaction-amount {
        align-self: flex-end;
        margin-top: 10px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gestion du slider de conversion
    const slider = document.getElementById('conversion-slider');
    const pointsDisplay = document.getElementById('conversion-points');
    
    if (slider && pointsDisplay) {
        slider.addEventListener('input', function() {
            pointsDisplay.textContent = this.value;
        });
    }
    
    // Gestion des filtres de transactions
    const filterButtons = document.querySelectorAll('.myso-filter-btn');
    const transactions = document.querySelectorAll('.myso-transaction-item');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Retirer la classe active de tous les boutons
            filterButtons.forEach(btn => btn.classList.remove('active'));
            // Ajouter la classe active au bouton cliqué
            this.classList.add('active');
            
            const filter = this.dataset.filter;
            
            transactions.forEach(transaction => {
                if (filter === 'all' || transaction.dataset.type === filter) {
                    transaction.style.display = 'flex';
                } else {
                    transaction.style.display = 'none';
                }
            });
        });
    });
    
    // Smooth scroll pour les ancres
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>
{/block}

<style>
/* Couleurs MySo - Vert recyclage et blanc */
:root {
    --myso-green: #22c55e;
    --myso-dark-green: #16a34a;
    --myso-light-green: #dcfce7;
    --myso-white: #ffffff;
    --myso-light-gray: #f8fafc;
}

.myso-points-account {
    max-width: 100%;
    margin: 0;
    padding: 20px 0;
}

/* Centrage parfait */
.container-fluid {
    max-width: 1400px;
    margin: 0 auto;
}

/* Cartes principales */
.myso-main-card, .myso-action-card {
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
    border: 1px solid var(--myso-light-green);
    border-radius: 12px;
}

.myso-header {
    background: linear-gradient(135deg, var(--myso-green), var(--myso-dark-green));
    color: white;
    border-bottom: none;
    border-radius: 12px 12px 0 0 !important;
}

.myso-header h3, .myso-header h4 {
    margin: 0;
    font-weight: 600;
}

/* Statistiques */
.myso-stat-card {
    text-align: center;
    padding: 25px 15px;
    background: var(--myso-white);
    border: 2px solid var(--myso-light-green);
    border-radius: 12px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

.myso-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.15);
    border-color: var(--myso-green);
}

.stat-value {
    font-size: 2.8em;
    font-weight: bold;
    color: var(--myso-green);
    margin-bottom: 8px;
}

.stat-value.recycling {
    color: var(--myso-dark-green);
}

.stat-label {
    font-size: 0.95em;
    color: #374151;
    font-weight: 500;
    margin-bottom: 5px;
}

.stat-sub {
    font-size: 0.85em;
    color: var(--myso-green);
    font-weight: 500;
}

/* Badges */
.vip-badge {
    background: linear-gradient(45deg, #ffd700, #ffed4a);
    color: #333;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
}

.standard-badge {
    background: var(--myso-light-green);
    color: var(--myso-dark-green);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
}

/* Boutons */
.btn-recycling {
    background: linear-gradient(135deg, var(--myso-green), var(--myso-dark-green));
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-recycling:hover {
    background: linear-gradient(135deg, var(--myso-dark-green), var(--myso-green));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    color: white;
}

/* Badges dans le tableau */
.badge-recycling {
    background-color: var(--myso-green);
    color: white;
}

.badge-warning {
    background-color: #f59e0b;
    color: white;
}

.badge-info {
    background-color: #3b82f6;
    color: white;
}

/* Textes colorés */
.text-recycling {
    color: var(--myso-green) !important;
}

.recycling {
    color: var(--myso-green) !important;
}

/* Liste des conseils */
.myso-tips li {
    padding: 8px 0;
    font-size: 1em;
}

.myso-tips i {
    margin-right: 10px;
    font-size: 1.2em;
}

/* Tableau */
.myso-table {
    border-radius: 8px;
    overflow: hidden;
}

.myso-table thead th {
    background-color: var(--myso-light-green);
    color: var(--myso-dark-green);
    font-weight: 600;
    border: none;
}

.myso-table tbody tr:hover {
    background-color: var(--myso-light-green);
}

/* Responsive */
@media (max-width: 768px) {
    .stat-value {
        font-size: 2.2em;
    }
    
    .myso-stat-card {
        padding: 20px 10px;
        height: auto;
        min-height: 120px;
        margin-bottom: 15px;
    }
    
    .container-fluid {
        padding: 0 10px;
    }
}

@media (max-width: 576px) {
    .stat-value {
        font-size: 2em;
    }
    
    .myso-stat-card {
        height: auto;
        min-height: 100px;
    }
}

/* Animation d'entrée */
.myso-points-account {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar personnalisée */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--myso-light-green);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--myso-green);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--myso-dark-green);
}
</style>
{/block}