@extends('layouts.master')

@section('title', 'Points History')

@section('content')

<div class="default account bg-white">

    <section class="section pb-0">
        <div class="container-custom">
            <div class="row">
                <div class="offset-lg-1 col-lg-3">
                    
                    @include('pages.shop.account.includes.sidenav')

                </div>
                <div class="col-lg-7">

                    <div class="text-center">
                        <h2>42 Pontos</h2>
                        <p class="text-grey"><small>A sua subscrição será renovada a 17/02/2023</small></p>  
                    </div> 
                    
                    <div class="account-accordion">
                        <div class="accordion accordion-flush" id="accordionFlushExample">
                            <div class="accordion-item">
                               <h2 class="accordion-header" id="flush-headingOne">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                        <p class="text-uppercase"><b>Pontos</b></p>
                                        <p><b>42 p</b></p>
                                    </button>
                               </h2>
                               <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        {{-- Pontos --}}
                                        <div class="d-flex justify-content-between mb-2">
                                            <p>Compra</p>
                                            <p class="pe-4">42 pt</p>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <p>Convidei um amigo</p>
                                            <p class="pe-4">0 pt</p>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <p>Adicionei os meus dados pessoais</p>
                                            <p class="pe-4">0 pt</p>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <p>Outro</p>
                                            <p class="pe-4">0 pt</p>
                                        </div>
                                        
                                        {{-- Info --}}
                                        <div class="d-flex mt-4">
                                            <i class="bi bi-credit-card"></i>
                                            <div>
                                                <p><b>Compra</b></p>
                                                <p>Sempre que compra online ou em lojas, ganha pontos. 1,00 € = 1 pontos.</p>                                                
                                            </div>
                                        </div>
                                        <div class="d-flex mt-4">
                                            <i class="bi bi-person-plus"></i>
                                            <div>
                                                <p><b>Adicionei um amigo</b></p>
                                                <p>Convide um amigo para aderir e ganhe 50 pontos quando o seu amigo concluir a sua primeira compra. <a href="#" class="link">Convide agora</a>.</p>                                                
                                            </div>
                                        </div>
                                        <div class="d-flex mt-4">
                                            <i class="bi bi-clipboard-check"></i>
                                            <div>
                                                <p><b>Adicionei os meus dados pessoais</b></p>
                                                <p>Complete o seu perfil de membro e ganhe 20 pontos.</p>                                                
                                            </div>
                                        </div>
                                        <div class="d-flex mt-4">
                                            <i class="bi bi-three-dots"></i>
                                            <div>
                                                <p><b>Outro</b></p>
                                                <p>Quando recebe pontos por correções, registos após compras em lojas ou atividades semelhantes.</p>
                                            </div>
                                        </div>
                                    </div>
                               </div>
                            </div>                            
                         </div>
                    </div>

                    <div class="text-center mt-size-md">
                        <h2>Ainda não tem pontos</h2>
                        <p>Consulte os separadores Pontos Conscious e Pontos para mais informações.</p>
                    </div>
                
                </div>
            </div>
        </div>
    </section>

</div>

@endsection