@extends('layouts.app')

@section('content')
@include('layouts.title-header', [
    'title' => 'Sistema de Puntos y Niveles', 
    'breadcrumbs' => [
        ['text' => 'Inicio', 'url' => route('home')],
        ['text' => 'Sistema de Puntos']
    ]
])

<div class="main-content">

    <!-- Points System Overview -->
    <section class="points-overview-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h2 class="text-center mb-4">
                                <i class="fa fa-trophy text-violet-red"></i>
                                ¿Cómo Funciona el Sistema de Puntos?
                            </h2>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="info-card">
                                        <h4><i class="fa fa-lightbulb text-warning"></i> ¿Qué son los Puntos?</h4>
                                        <p>Los puntos son una forma de recompensar tu actividad en nuestra plataforma. Cuanto más participes, más puntos ganarás y más beneficios obtendrás.</p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-card">
                                        <h4><i class="fa fa-level-up text-success"></i> ¿Qué son los Niveles?</h4>
                                        <p>Los niveles representan tu progreso en la plataforma. A medida que acumules puntos, subirás de nivel y desbloquearás increíbles descuentos y beneficios.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How to Earn Points -->
    <section class="earn-points-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fa fa-plus-circle text-success"></i> ¿Cómo Ganar Puntos?</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-lg-3 mb-4">
                                    <div class="earn-point-card">
                                        <div class="earn-point-icon">
                                            <i class="fa fa-calendar-check fa-3x text-success"></i>
                                        </div>
                                        <h5>Completar Citas</h5>
                                        <p class="points-amount">+50 puntos</p>
                                        <p class="points-description">Por cada cita que completes exitosamente</p>
                                        <div class="incentive-text">
                                            <i class="fa fa-arrow-up text-success"></i>
                                            <strong>¡La forma más rápida de ganar puntos!</strong>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6 col-lg-3 mb-4">
                                    <div class="earn-point-card">
                                        <div class="earn-point-icon">
                                            <i class="fa fa-camera fa-3x text-info"></i>
                                        </div>
                                        <h5>Subir Imágenes</h5>
                                        <p class="points-amount">+20 puntos</p>
                                        <p class="points-description">Por cada imagen que subas de tu cita</p>
                                        <div class="incentive-text">
                                            <i class="fa fa-star text-warning"></i>
                                            <strong>¡Comparte tu talento!</strong>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6 col-lg-3 mb-4">
                                    <div class="earn-point-card">
                                        <div class="earn-point-icon">
                                            <i class="fa fa-heart fa-3x text-danger"></i>
                                        </div>
                                        <h5>Recibir Likes</h5>
                                        <p class="points-amount">+5 puntos</p>
                                        <p class="points-description">Por cada like que recibas en tus fotos</p>
                                        <div class="incentive-text">
                                            <i class="fa fa-thumbs-up text-primary"></i>
                                            <strong>¡Tu trabajo es apreciado!</strong>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6 col-lg-3 mb-4">
                                    <div class="earn-point-card">
                                        <div class="earn-point-icon">
                                            <i class="fa fa-thumbs-up fa-3x text-warning"></i>
                                        </div>
                                        <h5>Dar Likes</h5>
                                        <p class="points-amount">+1 punto</p>
                                        <p class="points-description">Por cada like que des a otras imágenes de uñas</p>
                                        <div class="incentive-text">
                                            <i class="fa fa-handshake text-success"></i>
                                            <strong>¡Apoya a la comunidad!</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Levels System -->
    <section class="levels-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fa fa-layer-group text-violet-red"></i> Sistema de Niveles</h3>
                            <p class="mb-0">Descubre todos los niveles disponibles y sus increíbles beneficios</p>
                        </div>
                        <div class="card-body">
                            <div class="levels-grid">
                                @foreach($levels as $level)
                                <div class="level-card">
                                    <div class="level-header">
                                        <div class="level-badge">
                                            <span class="level-icon">{{ $level->badge }}</span>
                                        </div>
                                        <h4>{{ $level->name }}</h4>
                                        <div class="level-requirements">
                                            <i class="fa fa-star text-warning"></i>
                                            <span>{{ number_format($level->min_points) }} puntos mínimos</span>
                                        </div>
                                    </div>
                                    
                                    <div class="level-benefits">
                                        @if($level->discount_percentage > 0)
                                        <div class="benefit-item discount">
                                            <i class="fa fa-percent text-success"></i>
                                            <span><strong>{{ $level->discount_percentage }}% de descuento</strong> en todos los servicios</span>
                                        </div>
                                        @endif
                                        
                                        @if($level->benefits)
                                            @foreach($level->benefits as $benefit)
                                            <div class="benefit-item">
                                                <i class="fa fa-check text-success"></i>
                                                <span>{{ $benefit }}</span>
                                            </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    
                                    <div class="level-progress">
                                        @if(auth()->check())
                                            @php
                                                $userPoints = auth()->user()->userPoints;
                                                $progress = $userPoints->points >= $level->min_points ? 100 : 
                                                           ($userPoints->points / $level->min_points) * 100;
                                            @endphp
                                            <div class="progress">
                                                <div class="progress-bar bg-violet-red" style="width: {{ $progress }}%"></div>
                                            </div>
                                            <small>
                                                @if($userPoints->points >= $level->min_points)
                                                    <i class="fa fa-check-circle text-success"></i> ¡Nivel alcanzado!
                                                @else
                                                    Te faltan {{ number_format($level->min_points - $userPoints->points) }} puntos
                                                @endif
                                            </small>
                                        @else
                                            <small class="text-muted">Inicia sesión para ver tu progreso</small>
                                        @endif
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Tips Section -->
    <section class="tips-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fa fa-lightbulb text-warning"></i> Consejos para Ganar Más Puntos</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="tip-item">
                                        <div class="tip-icon">
                                            <i class="fa fa-calendar-alt text-primary"></i>
                                        </div>
                                        <div class="tip-content">
                                            <h5>Programa Citas Regularmente</h5>
                                            <p>Las citas completadas son la forma más rápida de ganar puntos. ¡Cada cita te da 50 puntos!</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="tip-item">
                                        <div class="tip-icon">
                                            <i class="fa fa-camera text-info"></i>
                                        </div>
                                        <div class="tip-content">
                                            <h5>Comparte tus uñas</h5>
                                            <p>Sube fotos de calidad de tus uñas. Cada foto te da 20 puntos y puede recibir likes.</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="tip-item">
                                        <div class="tip-icon">
                                            <i class="fa fa-heart text-danger"></i>
                                        </div>
                                        <div class="tip-content">
                                            <h5>Interactúa con la Comunidad</h5>
                                            <p>Da likes a otros trabajos y recibe likes en los tuyos. ¡Cada interacción suma puntos!</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="tip-item">
                                        <div class="tip-icon">
                                            <i class="fa fa-bullseye text-success"></i>
                                        </div>
                                        <div class="tip-content">
                                            <h5>Establece Metas</h5>
                                            <p>Fíjate objetivos para alcanzar el siguiente nivel. ¡Los descuentos te esperan!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="cta-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="cta-card text-center">
                        <h3><i class="fa fa-rocket text-violet-red"></i> ¡Comienza a Ganar Puntos Hoy!</h3>
                        <p>Únete a nuestra comunidad y comienza a disfrutar de increíbles beneficios</p>
                        <div class="cta-buttons">
                            <a href="{{ route('user.citas.create') }}" class="btn violet-red--btn tra-black--hover btn-lg me-3">
                                <i class="fa fa-calendar-plus me-2"></i>
                                Reservar Cita
                            </a>
                            <a href="{{ route('cita-imagenes.create') }}" class="btn btn-outline-violet-red tra-black--hover btn-lg">
                                <i class="fa fa-camera me-2"></i>
                                Subir Foto
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@push('styles')
<style>
/* Estilos para la página de guía */
.header-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0;
}

.header-content h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.points-overview-section,
.earn-points-section,
.levels-section,
.tips-section,
.cta-section {
    padding: 60px 0;
}

.info-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    border-left: 4px solid #667eea;
}

.info-card h4 {
    color: #333;
    margin-bottom: 15px;
}

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

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

.earn-point-icon {
    margin-bottom: 15px;
}

.earn-point-card h5 {
    color: #333;
    margin-bottom: 10px;
}

.points-amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
    margin-bottom: 10px;
}

.points-description {
    color: #666;
    margin-bottom: 15px;
}

.incentive-text {
    background: #e3f2fd;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.level-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.level-card:hover {
    border-color: #667eea;
    transform: translateY(-3px);
}

.level-header {
    text-align: center;
    margin-bottom: 20px;
}

.level-badge {
    margin-bottom: 15px;
}

.level-icon {
    font-size: 2rem;
}

.level-header h4 {
    color: #333;
    margin-bottom: 10px;
}

.level-requirements {
    color: #666;
    font-size: 0.9rem;
}

.level-benefits {
    margin-bottom: 20px;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 0;
}

.benefit-item i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.benefit-item.discount {
    background: #e8f5e8;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.level-progress {
    text-align: center;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.tip-icon {
    margin-right: 15px;
    font-size: 1.5rem;
    margin-top: 5px;
}

.tip-content h5 {
    color: #333;
    margin-bottom: 10px;
}

.tip-content p {
    color: #666;
    margin-bottom: 0;
}

.cta-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 50px;
    border-radius: 20px;
}

.cta-card h3 {
    margin-bottom: 20px;
}

.cta-card p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.cta-buttons {
    margin-top: 30px;
}

.btn-outline-violet-red {
    color: white;
    border-color: white;
    background: transparent;
}

.btn-outline-violet-red:hover {
    background: white;
    color: #667eea;
}

@media (max-width: 768px) {
    .levels-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .cta-buttons .btn {
        margin-bottom: 10px;
        margin-right: 0 !important;
    }
}
</style>
@endpush
@endsection