<?php

use chillerlan\QRCode\QRCode;

$participante = (new Participante)->and('participante_cpf', $_SESSION['participante_cpf'])->consultar();


if (
    $participante->participante_nome == '' ||
    $participante->participante_telefone == '' ||
    $participante->participante_endereco == '' ||
    $participante->participante_email == ''
) { ?>
    <form action="#" class="signup-form" method="POST">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group d-flex align-items-center form_inscricao">
                    <label class="label" for="name">Nome Completo (Obrigatório)</label>
                    <input type="text" class="form-control" placeholder="João Silva" value="<?= $participante->participante_nome ?>"
                        name="participante_nome" required>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group d-flex align-items-center form_inscricao">
                    <label class="label" for="phone">Telefone (Obrigatório)</label>
                    <input type="text" class="form-control telefone" placeholder="(63) 99999-9999"
                        value="<?= $participante->participante_telefone ?>" name="participante_telefone" maxlength="16" required>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group d-flex align-items-center form_inscricao">
                    <label class="label" for="name">Empresa (opcional)</label>
                    <input type="text" class="form-control" placeholder="Empresa que trabalho"
                        value="<?= $participante->participante_empresa ?>" name="participante_empresa">
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group d-flex align-items-center form_inscricao">
                    <label class="label" for="email">Endereço (Obrigatório)</label>
                    <input type="text" class="form-control" placeholder="Av. Paulista n° 777"
                        value="<?= $participante->participante_endereco ?>" name="participante_endereco" required>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group d-flex align-items-center form_inscricao">
                    <label class="label" for="website">Email (Obrigatório)</label>
                    <input type="email" class="form-control" placeholder="exemplo@exemplo.com.br"
                        value="<?= $participante->participante_email ?>" name="participante_email" required>
                </div>
            </div>

            <div class="col-md-12 mt-0">
                <div class="form-group text-center ">
                    <input type="hidden" name="participante_id" value="<?= $_SESSION['usuario_id'] ?>">
                    <input type="hidden" name="participante_cpf" value="<?= $_SESSION['participante_cpf'] ?>">
                    <input type="hidden" name="acao" value="editar">
                    <input type="hidden" name="participante_senha" value="123456">
                    <button type="button" class="btn btn-secondary p-3 finalizarInscricao">Finalizar Cadastro</button>
                </div>
            </div>
        </div>
    </form>

    <style>
        .form_inscricao {
            display: flex;
            flex-direction: row;
            align-items: left;
            gap: 1em;
            margin-bottom: 1em;
            /* Adiciona um gap de 1em entre os elementos */
        }

        .form_inscricao label {
            flex: 1;
            padding: 0.3em;
        }

        .form_inscricao input {
            flex: 2;
            padding: 0.3em;
            background-color: #e0e0e0;
            border-color: black 1px solid;
            border-radius: 15px;
            padding-left: 20px;

        }

        .form_inscricao input:focus {
            background-color: #add8f1;
            border-color: #80a4d9 1px solid !important;

        }

        @media (max-width: 768px) {
            .form_inscricao {
                flex-direction: column;
                gap: 0.2em;
                /* Muda para coluna */
            }
        }
    </style>
    <script>
        $(document).ready(function() {
            mascaras();
            $('.finalizarInscricao').on('click', function() {
                var dadosForm = $(this).closest('form');
                var dados = new FormData(dadosForm[0]);
                if (
                    $('[name="participante_cpf"]').val() != '' &&
                    $('[name="participante_nome"]').val() != '' &&
                    $('[name="participante_telefone"]').val() != '' &&
                    $('[name="participante_endereco"]').val() != '' &&
                    $('[name="participante_senha"]').val() != ''
                ) {
                    $.ajax({
                        type: "POST",
                        enctype: "multipart/form-data",
                        url: "<?= __URLSITE__ ?>modulos/participante/controller.php",
                        data: dados,
                        processData: false,
                        contentType: false,
                        cache: false,
                        timeout: 600000,
                        success: function(dados) {
                            if (JSON.parse(dados).msg_type == 'Sucesso') {
                                alert('Cadastro Finalizao com Sucesso!');
                                location.href = '<?= __URLSITE__ ?>';
                                var url = '<?= __URLSITE__ ?>';
                                $(location).attr('href', url);
                            }
                        }
                    });
                } else {
                    alert('Preencha todos os campos obrigatórios')
                }
            });
        });
    </script>

<?php } else { ?>



    <!-- Full screen modal -->
    <!-- Modal -->
    <div class="modal fade" id="modalPagamento" tabindex="-1" aria-labelledby="modalPagamentoLabel" aria-hidden="true">
        <div class="modal-dialog  modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header bg-dark">
                    <h5 class="modal-title " id="modalIngressoPagamento">Ingresso: <span class="ingresso_selecionado"></span></h5>
                    <button type="button" class="btn-close bg-white fecharModal" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="d-flex align-items-center justify-content-between mb-4 text-dark text-center">
                        <h6 class="mb-1 mt-1 text-dark text-center" style="width: 100%" ;>Escolha a Forma de Pagamento</h6>
                    </div>
                    <?php
                    $pagamentos = (new FormaPagamento)->orderBy('forma_pagamento_id ASC')->listar();
                    ?>
                    <div class="offset-2 col-8">
                        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 forma-pagamento">
                            <?php foreach ($pagamentos as $pagamento): ?>
                                <div class="col">
                                    <div class="card p-2">
                                        <img
                                            src="<?= base_url . 'img/' . ($pagamento->forma_pagamento_imagem != "" ? $pagamento->forma_pagamento_imagem : 'pagamento_padrao.png') ?>"
                                            class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <div class="card-info-pagamento">
                                                <h3 class="card-title text-dark mt-2 mb-2"><?= $pagamento->forma_pagamento_nome ?></h3>
                                                <button class="btn btn-secondary escolher_pagamento"
                                                    data-pagamento="<?= $pagamento->forma_pagamento_nome ?>">Escolher</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach ?>
                        </div>
                    </div>

                    <div class="pagamento_escolha p-3">

                    </div>
                </div>
                <div class="modal-footer bg-dark">
                    <button type="button" class="btn btn-secondary fecharModal" data-bs-dismiss="modal">Sair</button>
                </div>
            </div>
        </div>
    </div>



    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-sm-6 col-xl-6">
                <div class="bg-secondary rounded d-flex align-items-center justify-content-between p-4">
                    <i class="fa fa-receipt fa-3x text-primary"></i>
                    <div class="ms-3">
                        <p class="mb-2">Stands Visitados</p>
                        <h6 class="mb-0 text-center"><?= 0 ?></h6>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-6">
                <div class="bg-secondary rounded d-flex align-items-center justify-content-between p-4">
                    <i class="fa fa-qrcode fa-3x text-primary"></i>
                    <div class="ms-3">
                        <p class="mb-2">Palestras Assistidas</p>
                        <h6 class="mb-0  text-center"><?= 0 ?></h6>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-sm-12 col-xl-6">
                <div class="bg-secondary text-center rounded p-4">
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <h6 class="mb-0 w-100">Meu QR CODE</h6>
                    </div>
                    <?php
                    $data = [
                        'participante_cpf' => $_SESSION['participante_cpf'],
                        'participante_id' => $_SESSION["usuario_id"]
                    ];
                    $data = json_encode($data, true);

                    echo '
                        <div class="text-center">
                            <img src="' . (new QRCode)->render($data) . '" alt="QR Code" style="width:90%; max-width:400px;"/>
                        </div>    
                        ';
                    ?>
                </div>
            </div>
            <div class="col-sm-12 col-xl-6">
                <div class="bg-secondary text-center rounded p-4">
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <h6 class="mb-0">Fazer Doação</h6>
                    </div>
                    <?php
                    $ingressos = (new Ingresso)->limite(5)->listar();
                    ?>
                    <?php foreach ($ingressos as $ingresso): ?>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <h6 class="m-2"><?= $ingresso->ingresso_nome ?></h6>
                            <button class="m-2 btn btn-primary comprar" data-id="<?= $ingresso->ingresso_id ?>"
                                data-ingresso="<?= $ingresso->ingresso_id ?>">
                                <i class="fa fa-shopping-cart text-white"></i> Doar
                            </button>
                        </div>
                    <?php endforeach ?>
                </div>
            </div>

            <div class="col-12">
                <div class=" bg-secondary text-center rounded p-4">
                    <h6 class="mb-4 mt-2 text-left">Programações</h6>
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <div class="container-fluid">
                            <div class="d-grid gap-2 col-6 mx-auto">
                                <a class="btn btn-primary text-white" type="button" href="https://feneva.tec.br/page8.html"
                                    target="_blank">
                                    <i class="fa fa-calendar fa-3x text-white mt-2 mb-2"></i><br>
                                    <span>Clique aqui para Acessar as Programações</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php } ?>


<script>
    $(document).ready(function() {
        $('.fecharModal').on('click', function() {
            $('.forma-pagamento').show();
        });
        $('.escolher_pagamento').on('click', function() {
            $('.pagamento_escolha').html('');
            $('.forma-pagamento').hide();

            var tipo_pagamento = $(this).data('pagamento');
            var ingresso_selecionado = $('.ingresso_selecionado').text();

            $.ajax({
                type: "POST",
                url: "<?= __URLSITE__ ?>modulos/ingresso_participante/registrar_ingresso.php",
                data: {
                    tipo_pagamento: tipo_pagamento,
                    ingresso_selecionado: ingresso_selecionado
                },
                success: function(dados) {
                    $('.pagamento_escolha').html(dados);
                }
            });
        });
        $('.comprar').on('click', function() {
            $('#modalPagamento').modal('show');
            $('#modalPagamento').find('.ingresso_selecionado').html($(this).data('ingresso'));
        });
    });
</script>

<style>
    .forma-pagamento>.col>.card>img {
        max-width: 120px;
        max-height: 120px;
        width: 120px;
        height: 120px;
        margin: 0 auto !important;
    }

    .forma-pagamento button {
        max-width: 120px !important;
        width: 120px !important;
    }

    .forma-pagamento .card-info-pagamento {
        width: 100%;
        text-align: center;
    }
</style>