@extends('layouts.app2')

<style>
    body {
        background-color: #132439 !important;
    }
</style>

@section('title', 'Page Title')

@section('sidebar')

@stop

@section('content')
    <div class="container">
        <div class="title">
            <h3 style="color: #fff;">MINHAS RESERVAS</h3>
        </div>
        <div class="row" style="margin-bottom: 130px;">
            <div class="col-md-7" style="margin-bottom: 20px;">
                <div class="card" style="border: none;">
                    <div class="card-body" style="background-color: #020f1e;">
                        <h5 class="card-title" style="color: #fff;"><i class="bi bi-cash"></i> Informações da Reserva</h5>
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td style="color: #fff;">Participante:
                                        {{ $participantDetail == null ? '' : $participantDetail->name }}</td>
                                    <td style="color: #fff;"></td>
                                </tr>
                                <tr>
                                    <td style="color: #fff;">Telefone:
                                        {{ $participantDetail == null ? '' : $participantDetail->telephone }}</td>
                                    <td style="color: #fff;"></td>
                                </tr>
                                <tr>
                                    <td style="color: #fff;">Meu(s) bilhete(s) pago(s):</td>
                                    <td>
                                        @foreach ($resultRafflesALLs as $resultRafflesALL)
                                            <b
                                                style="background-color: #28a745;color: #fff;border-radius: 10px;padding: 5px;">
                                                {{ $resultRafflesALL->number }}<br>
                                            </b><br>
                                        @endforeach
                                    </td>
                                </tr>
                                <tr>
                                    <td style="color: #fff;">
                                        Meu(s) bilhete(s) reservado(s):
                                    </td>
                                    <td>

                                        @foreach ($participantReserveds as $participantReserved)
                                            <b
                                                style="background-color: #ff9800;color: #fff;border-radius: 10px;padding: 5px;">

                                                <br>                                            </b><br>
                                        @endforeach

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        @if ($participantReserveds == '[]')
                        @else
                            <!--<button type="button" class="btn btn-success blob" style="width: 100%;margin-top: 10px;margin-bottom: 10px;height: 120px;font-size: 20px;text-transform: uppercase;" data-toggle="modal" data-target="#staticBackdrop">Clique para pagar sua reserva<br> R$: {{ $priceBR }}</button>-->


                            <div style="color: #fff;text-align: center;">CHAVE PIX<br></div>

                            <img src="/images/seguro.png" style="width: 100%;">
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-5" style="margin-bottom: 20px;">
                <div class="card checkout" style="border: none;">
                    <div class="card-body" style="background-color: #020f1e;">
                        <h5 class="card-title" style="color: #fff;"><i class="bi bi-trophy"></i> Informações do Sorteio</h5>
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td style="color: #fff;">Sorteio:</td>
                                    <td style="color: #fff;">{{ $product->name }}</td>
                                </tr>
                                <!--<tr>
                                    <td>Data do Sorteio:</td>
                                    <td>
                                        @if ($product->draw_date == null)
    Data do sorteio será marcada e divulgada após a venda de todas as cotas!
@else
    {{ $product->draw_date }}
    @endif
                                    </td>
                                </tr>-->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true" style="z-index: 999999999;">
        <div class="modal-dialog">
            <div class="modal-content" style="border: none;">
                <div class="modal-header" style="background-color: #132439;color: #fff;">
                    <h5 class="modal-title" id="staticBackdropLabel">PAGAMENTO VIA PIX
                        <!--<img src="{{ asset('images/pix-106.png') }}" style="width: 80px;margin-bottom: 5px;">-->
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="background-color: #132439;">

                    <div class="title">
                        <h5 style="color: #fff;margin-top: 10px;">Reserva aguardando pagamento...</h5>
                    </div>

                    <div class="card" style="border: none;">
                        <div class="card-body" style="background-color: #020f1e;color: #fff;">
                            <b>CHAVE PIX</b><br>
                            FAVORECIDO: FABIO FERREIRA DESENVOLVIMENTO DE SISTEMAS EIRELI<br>
                            CNPJ: 39.790.457/0001-82
                        </div>
                    </div><br>

                    <div class="card alert alert-success" style="margin-top: 10px;">
                        <div class="card-body"
                            style="text-align: center;display: flex;flex-direction: column;padding: 0px!important;">
                            <span style="font-size: 20px;color: #333;">Já fez o pagamento? Envie o comprovante de pagamento
                                para nós!!! Envie pelo
                                <a href="https://api.whatsapp.com/send/?phone=55{{ $telephone->telephone }}&text=Olá,%20segue%20meu%20comprovante%20do%20sorteio%20{{ $product->name }}%20da(s)%20cota(s)%20{{ $numberReserveds }}"
                                    target="_blank" style="font-size: 25px;color: #333;text-decoration: none;"> <span
                                        style="background-color: #28a745;
    padding: 5px;
    border-radius: 5px;
    color: #ffffff;">Whatsapp</span></a></span>
                        </div>
                    </div>

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

    <script>
        function copiar(e) {

            console.log(e);

            var copyText = document.getElementById("brcodepix" + e);
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            document.execCommand("copy");
            document.getElementById("clip_btn" + e).innerHTML = 'COPIADO';

            /*$('#clip_btn').click(function() {
                $('#brcodepix').removeAttr('disabled');
                $('#brcodepix').select();
                document.execCommand("copy");
                $('#brcodepix').attr('disabled', 'disabled');
            });*/


            alert("Código PIX copiado com sucesso.");

        }


        function copiarCNPJ() {
            var copyText = document.getElementById("codeCNPJ");
            copyText.select();
            copyText.setSelectionRange(0, 99999); /* For mobile devices */
            document.execCommand("copy");
            document.getElementById("clip_btn_CNPJ").innerHTML = '<i class="bi bi-clipboard-check"></i> Copiado';

            //document.getElementById("card").style.display = "block";

            alert("CHAVE CNPJ copiada, agora pague no APP do seu banco!");

        }
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>
        //aqui vai sempre ser a hora atual
        var startDate = new Date();
        //como exemplo vou definir a data de fim com base na data atual
        var endDate = new Date();
        endDate.setDate(endDate.getDate() + 1);

        //aqui é a diferenca entre as datas, basicamente é com isso que voce calcula o tempo restante
        var dateDiff;
        var days, hours, minutes, seconds;
        var $day = $('#dias');
        var $hour = $('#horas');
        var $minute = $('#minutos');
        var $second = $('#segundos');
        var $debug = $('#debug');
        var timer;

        function update() {
            dateDiff = endDate - startDate;
            dateDiff = dateDiff / 1000;

            seconds = Math.floor((dateDiff % 60));

            dateDiff = dateDiff / 60;
            minutes = Math.floor((dateDiff % 60));

            dateDiff = dateDiff / 60;
            hours = Math.floor((dateDiff % 24));

            days = Math.floor(dateDiff / 24);

            $day.text(days);
            $hour.text(hours);
            $minute.text(minutes);
            $second.text(seconds);

            startDate.setSeconds(startDate.getSeconds() + 1);
        }
        update();
        timer = setInterval(update, 1000);
    </script>
@stop