@extends('layouts.app')

@section('content')
<div class="main-content">
    <!-- Header Section -->
    <section class="header-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="header-content">
                        <h1>Mis Puntos y Logros</h1>
                        <p>Descubre tus logros y progreso en Morita Nails</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Points Overview Section -->
    <section class="points-overview-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="points-card">
                        <div class="points-header">
                            <h2><i class="fa fa-star text-violet-red"></i> Tu Progreso</h2>
                        </div>
                        <div class="points-display">
                            <div class="current-points">
                                <span class="points-number">{{ $userPoints->points }}</span>
                                <span class="points-label">puntos totales</span>
                            </div>
                            <div class="level-progress">
                                <h4>Nivel {{ $userPoints->level }} - {{ $user->getLevelTitle() }}</h4>
                                <div class="progress-container">
                                    <div class="progress">
                                        <div class="progress-bar bg-violet-red" style="width: {{ $progressToNextLevel }}%"></div>
                                    </div>
                                    <small>{{ $pointsForNextLevel }} puntos para el siguiente nivel</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <div class="stats-card">
                        <h3><i class="fa fa-chart-bar text-violet-red"></i> Estadísticas</h3>
                        <div class="stats-grid">
                            <div class="stat-item">
                                <i class="fa fa-calendar-check"></i>
                                <div class="stat-info">
                                    <span class="stat-number">{{ $userPoints->total_citas_completadas }}</span>
                                    <span class="stat-label">Citas Completadas</span>
                                </div>
                            </div>
                            <div class="stat-item">
                                <i class="fa fa-camera"></i>
                                <div class="stat-info">
                                    <span class="stat-number">{{ $userPoints->total_fotos_subidas }}</span>
                                    <span class="stat-label">Fotos Subidas</span>
                                </div>
                            </div>
                            <div class="stat-item">
                                <i class="fa fa-heart"></i>
                                <div class="stat-info">
                                    <span class="stat-number">{{ $userPoints->total_likes_recibidos }}</span>
                                    <span class="stat-label">Likes Recibidos</span>
                                </div>
                            </div>
                            <div class="stat-item">
                                <i class="fa fa-thumbs-up"></i>
                                <div class="stat-info">
                                    <span class="stat-number">{{ $userPoints->total_likes_dados }}</span>
                                    <span class="stat-label">Likes Dados</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Achievements Section -->
    <section class="achievements-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-header">
                        <h2><i class="fa fa-trophy text-violet-red"></i> Logros Desbloqueados</h2>
                        <p>¡Felicidades por estos logros!</p>
                    </div>
                </div>
            </div>
            
            <div class="row">
                @forelse($logros as $logro)
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="achievement-card unlocked">
                        <div class="achievement-icon">
                            <i class="fa {{ $logro['icono'] }}"></i>
                        </div>
                        <div class="achievement-info">
                            <h4>{{ $logro['titulo'] }}</h4>
                            <p>{{ $logro['descripcion'] }}</p>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-12">
                    <div class="no-achievements">
                        <i class="fa fa-trophy fa-3x text-muted"></i>
                        <h4>Aún no tienes logros</h4>
                        <p>¡Completa citas, sube fotos y recibe likes para desbloquear logros!</p>
                    </div>
                </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Next Achievements Section -->
    <section class="next-achievements-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-header">
                        <h2><i class="fa fa-target text-violet-red"></i> Próximos Logros</h2>
                        <p>¡Sigue así para desbloquear más logros!</p>
                    </div>
                </div>
            </div>
            
            <div class="row">
                @forelse($proximosLogros as $logro)
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="achievement-card locked">
                        <div class="achievement-icon">
                            <i class="fa {{ $logro['icono'] }}"></i>
                        </div>
                        <div class="achievement-info">
                            <h4>{{ $logro['titulo'] }}</h4>
                            <p>{{ $logro['descripcion'] }}</p>
                            <div class="progress-mini">
                                <div class="progress">
                                    <div class="progress-bar bg-violet-red" style="width: {{ ($logro['progreso'] / $logro['objetivo']) * 100 }}%"></div>
                                </div>
                                <small>{{ $logro['progreso'] }}/{{ $logro['objetivo'] }}</small>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-12">
                    <div class="all-achievements-unlocked">
                        <i class="fa fa-crown fa-3x text-warning"></i>
                        <h4>¡Todos los logros desbloqueados!</h4>
                        <p>¡Felicidades! Has desbloqueado todos los logros disponibles.</p>
                    </div>
                </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section class="benefits-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-header">
                        <h2><i class="fa fa-gift text-violet-red"></i> Beneficios por Nivel</h2>
                        <p>Descubre los beneficios que obtienes según tu nivel</p>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="benefit-card {{ $userPoints->level >= 1 ? 'active' : '' }}">
                        <div class="benefit-icon">
                            <i class="fa fa-user"></i>
                        </div>
                        <h4>Cliente Regular</h4>
                        <p>Nivel 1-5</p>
                        <div class="benefit-details">
                            <ul>
                                <li>Acceso a galería de imágenes</li>
                                <li>Sistema de likes</li>
                                <li>Puntos por actividades</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="benefit-card {{ $userPoints->level >= 6 ? 'active' : '' }}">
                        <div class="benefit-icon">
                            <i class="fa fa-star"></i>
                        </div>
                        <h4>Cliente Frecuente</h4>
                        <p>Nivel 6-10</p>
                        <div class="benefit-details">
                            <ul>
                                <li>5% de descuento</li>
                                <li>Prioridad en citas</li>
                                <li>Acceso a logros especiales</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="benefit-card {{ $userPoints->level >= 11 ? 'active' : '' }}">
                        <div class="benefit-icon">
                            <i class="fa fa-crown"></i>
                        </div>
                        <h4>Cliente VIP</h4>
                        <p>Nivel 11-15</p>
                        <div class="benefit-details">
                            <ul>
                                <li>10% de descuento</li>
                                <li>Citas prioritarias</li>
                                <li>Servicios exclusivos</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="benefit-card {{ $userPoints->level >= 16 ? 'active' : '' }}">
                        <div class="benefit-icon">
                            <i class="fa fa-diamond"></i>
                        </div>
                        <h4>Cliente Premium</h4>
                        <p>Nivel 16+</p>
                        <div class="benefit-details">
                            <ul>
                                <li>15% de descuento</li>
                                <li>Servicios premium</li>
                                <li>Tratamiento VIP</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@push('styles')
<style>
.points-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.points-header h2 {
    margin-bottom: 30px;
    color: #333;
}

.points-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.current-points {
    text-align: center;
}

.points-number {
    font-size: 64px;
    font-weight: bold;
    color: #6c5ce7;
    display: block;
}

.points-label {
    color: #666;
    font-size: 18px;
}

.level-progress {
    flex: 1;
    margin-left: 30px;
}

.level-progress h4 {
    margin-bottom: 15px;
    color: #333;
}

.progress-container {
    margin-bottom: 10px;
}

.progress {
    height: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.stats-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.stats-card h3 {
    margin-bottom: 25px;
    color: #333;
}

.stats-grid {
    display: grid;
    gap: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
}

.stat-item i {
    font-size: 24px;
    color: #6c5ce7;
    margin-right: 15px;
}

.stat-info {
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.stat-label {
    font-size: 14px;
    color: #666;
}

.achievement-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
    height: 100%;
}

.achievement-card:hover {
    transform: translateY(-5px);
}

.achievement-card.unlocked {
    border: 3px solid #00b894;
}

.achievement-card.locked {
    border: 3px solid #ddd;
    opacity: 0.7;
}

.achievement-icon {
    margin-bottom: 20px;
}

.achievement-icon i {
    font-size: 48px;
    color: #6c5ce7;
}

.achievement-card.unlocked .achievement-icon i {
    color: #00b894;
}

.achievement-info h4 {
    margin-bottom: 10px;
    color: #333;
}

.achievement-info p {
    color: #666;
    margin-bottom: 15px;
}

.progress-mini {
    margin-top: 15px;
}

.progress-mini .progress {
    height: 6px;
    margin-bottom: 5px;
}

.progress-mini small {
    color: #666;
    font-size: 12px;
}

.benefit-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

.benefit-card.active {
    border: 3px solid #6c5ce7;
    transform: scale(1.05);
}

.benefit-card:not(.active) {
    opacity: 0.6;
}

.benefit-icon {
    margin-bottom: 20px;
}

.benefit-icon i {
    font-size: 48px;
    color: #6c5ce7;
}

.benefit-card.active .benefit-icon i {
    color: #6c5ce7;
}

.benefit-card h4 {
    margin-bottom: 10px;
    color: #333;
}

.benefit-card p {
    color: #666;
    margin-bottom: 20px;
}

.benefit-details ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.benefit-details li {
    padding: 5px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
}

.benefit-details li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #00b894;
    font-weight: bold;
}

.no-achievements, .all-achievements-unlocked {
    text-align: center;
    padding: 50px 20px;
    color: #666;
}

.no-achievements i, .all-achievements-unlocked i {
    margin-bottom: 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    color: #333;
    margin-bottom: 10px;
}

.section-header p {
    color: #666;
}
</style>
@endpush