@extends('afiliados.layout.menuAfiliados')
@section('title-page')
    Meus Ganhos
@endsection
@section('css')
    <link rel="stylesheet" href="{{ asset('css/vendor/datatables.min.css') }}" />
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12 text-center">
           <div class="row">
      
      
      
    </div>
            <div class="row g-2">
                        <div class="col-6 col-md-4 col-lg-2">
                            <div class="card h-100 hover-scale-up cursor-pointer">
                                <div class="card-body d-flex flex-column align-items-center">
                                    <div class="sw-6 sh-6 rounded-xl d-flex justify-content-center align-items-center border border-primary mb-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-dollar text-primary"><circle cx="10" cy="10" r="8"></circle><path d="M8.2474 12.7882C9.21854 13.0238 10.3165 13.1347 11.255 12.7328C11.8747 12.4349 12.0341 11.9499 11.9943 11.3645C11.9508 10.4361 10.8492 10.0759 10.023 9.97886C9.37073 9.86455 8.53367 9.66016 8.15681 9.09552C7.83068 8.47891 8.00824 7.59903 8.73659 7.25954C9.4 6.95033 10.8166 6.87849 11.6536 7.25954"></path><path d="M10 5.5V7M10 13V14.5"></path></svg>
                                    </div>
                                    <div class="mb-1 d-flex align-items-center text-alternate text-small lh-1-25">GANHO TOTAL</div>
                                    <div class="text-primary cta-4">R$ {{ number_format($valor_do_ganho_total, 2, ",", ".") }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-4 col-lg-2">
                            <div class="card h-100 hover-scale-up cursor-pointer">
                                <div class="card-body d-flex flex-column align-items-center">
                                    <div class="sw-6 sh-6 rounded-xl d-flex justify-content-center align-items-center border border-primary mb-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-cart text-primary"><path d="M13.7152 4C15.3994 4 16.2415 4 16.7847 4.42543C17.0181 4.60826 17.208 4.84069 17.3405 5.10592C17.649 5.72312 17.4809 6.54828 17.1447 8.19862L16.7373 10.1986C16.5044 11.3422 16.3879 11.9139 16.0437 12.3107C15.8937 12.4836 15.7151 12.6294 15.5158 12.7419C15.0583 13 14.4748 13 13.3078 13L9.8076 13C8.65996 13 8.08615 13 7.63315 12.7484C7.43567 12.6387 7.25821 12.4963 7.1083 12.3273C6.76438 11.9397 6.6399 11.3796 6.39095 10.2593L5.9465 8.25926C5.57521 6.58845 5.38957 5.75305 5.69441 5.12578C5.82533 4.85642 6.01506 4.61989 6.24962 4.43366C6.79581 4 7.65159 4 9.36316 4L11.5 4L13.7152 4Z"></path><path d="M6 8.5 5.05341 4.24035C5.01794 4.08072 4.96302 3.92604 4.88989 3.77978L4.82918 3.65836C4.321 2.64201 3.28221 2 2.1459 2H2M10 7V10M14 7V10"></path><path d="M7 15.5C7 14.6716 7.67158 14 8.5 14V14C9.32843 14 10 14.6716 10 15.5V15.5C10 16.3284 9.32842 17 8.5 17V17C7.67157 17 7 16.3284 7 15.5V15.5zM13 15.5C13 14.6716 13.6716 14 14.5 14V14C15.3284 14 16 14.6716 16 15.5V15.5C16 16.3284 15.3284 17 14.5 17V17C13.6716 17 13 16.3284 13 15.5V15.5z"></path></svg>
                                    </div>
                                    <div class="mb-1 d-flex align-items-center text-alternate text-small lh-1-25">PENDENTES</div>
                                    <div class="text-primary cta-4">{{ $tix_valoreceber }}</div>
                                </div>
                            </div>
                            
                        </div>
                        <div class="col-6 col-md-4 col-lg-2">
                            <div class="card h-100 hover-scale-up cursor-pointer">
                                <div class="card-body d-flex flex-column align-items-center">
                                    <div class="sw-6 sh-6 rounded-xl d-flex justify-content-center align-items-center border border-primary mb-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-user text-primary"><path d="M10.0179 8C10.9661 8 11.4402 8 11.8802 7.76629C12.1434 7.62648 12.4736 7.32023 12.6328 7.06826C12.8989 6.64708 12.9256 6.29324 12.9789 5.58557C13.0082 5.19763 13.0071 4.81594 12.9751 4.42106C12.9175 3.70801 12.8887 3.35148 12.6289 2.93726C12.4653 2.67644 12.1305 2.36765 11.8573 2.2256C11.4235 2 10.9533 2 10.0129 2V2C9.03627 2 8.54794 2 8.1082 2.23338C7.82774 2.38223 7.49696 2.6954 7.33302 2.96731C7.07596 3.39365 7.05506 3.77571 7.01326 4.53982C6.99635 4.84898 6.99567 5.15116 7.01092 5.45586C7.04931 6.22283 7.06851 6.60631 7.33198 7.03942C7.4922 7.30281 7.8169 7.61166 8.08797 7.75851C8.53371 8 9.02845 8 10.0179 8V8Z"></path><path d="M16.5 17.5L16.583 16.6152C16.7267 15.082 16.7986 14.3154 16.2254 13.2504C16.0456 12.9164 15.5292 12.2901 15.2356 12.0499C14.2994 11.2842 13.7598 11.231 12.6805 11.1245C11.9049 11.048 11.0142 11 10 11C8.98584 11 8.09511 11.048 7.31945 11.1245C6.24021 11.231 5.70059 11.2842 4.76443 12.0499C4.47077 12.2901 3.95441 12.9164 3.77462 13.2504C3.20144 14.3154 3.27331 15.082 3.41705 16.6152L3.5 17.5"></path></svg>
                                    </div>
                                    <div class="mb-1 d-flex align-items-center text-alternate text-small lh-1-25">AFILIADOS</div>
                                    <div class="text-primary cta-4">{{ $affiliados_tix }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-4 col-lg-2">
                            <div class="card h-100 hover-scale-up cursor-pointer">
                                <div class="card-body d-flex flex-column align-items-center">
                                    <div class="sw-6 sh-6 rounded-xl d-flex justify-content-center align-items-center border border-primary mb-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-arrow-top-left text-primary"><path d="M7 12L2.35355 7.35355C2.15829 7.15829 2.15829 6.84171 2.35355 6.64645L7 2"></path><path d="M18 18V11C18 9.93913 17.5786 8.92172 16.8284 8.17157C16.0783 7.42143 15.0609 7 14 7H2.5"></path></svg>
                                    </div>
                                    <div class="mb-1 d-flex align-items-center text-alternate text-small lh-1-25">SAQUES</div>
                                    <div class="text-primary cta-4">{{ $tix_solicita }}</div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <br>
                     <style>
        /* Estilize o botão conforme desejar */
        .button {
            background-color: #25D366;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            animation: blink 1s infinite; /* Adicione a animação 'blink' */
        }

        /* Defina a animação 'blink' */
        @keyframes blink {
            0%, 50%, 100% {
                opacity: 1;
            }
            25%, 75% {
                opacity: 0;
            }
        }
    </style>
                    <h1><b>Tutorial</b></h1>
                    <br>
                    @if ($tix_youtube && $tix_youtube->tix_tutoriado)
    <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ $tix_youtube->tix_tutoriado }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
@else
    <p><a href="https://api.whatsapp.com/send?phone=15996139173" target="_blank">
        <button class="button">Suporte</button>
    </a></p>
@endif

                    <hr>
        </div>
    </div>
@endsection