

<style>
    .grupo-fazendinha {
        cursor: pointer;
        width: 25%;
        height: 150px;
        background-size: cover;
        /* margin-left: 10px !important; */
        margin-top: 5px;
    }

    @media (max-width: 768px) {
        .grupo-fazendinha {
            height: 100px !important;
        }

        .pago{
            height: 100%;
        }

        .reservado{
            height: 100%;
        }
    }

    .reservado {
        background-color: #ffc10775;
        width: 100%;
        height: 90%;
    }

    .pago {
        background-color: #0094f0b3;
        width: 100%;
        height: 90%;
    }

    .selected-group {
        opacity: 0.5;
    }

    .h150 {
        height: 150px;
        background-size: 50%;
        background-repeat: no-repeat
    }
</style>

<div class="font-weight-600 mb-4 d-flex text-center justify-content-center" style="flex-wrap: wrap">
    <?php $__currentLoopData = $productModel->numbers(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $numero): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($numero->statusFormated() == 'disponivel'): ?>
            <div class="grupo-fazendinha <?php echo e('fazenda-'. $numero->statusFormated()); ?>" data-grupo="<?php echo e($numero->grupoFazendinha()); ?>"
                onclick="selectFazendinha('<?php echo e($numero->number); ?>')" id="<?php echo e($numero->number); ?>"
                style="background-image: url('<?php echo e(asset('images/bixos/' . $numero->number . '.webp')); ?>'); background-size: 100%;background-repeat: no-repeat">
            </div>
        <?php else: ?>
            <div title="<?php echo e($numero->status); ?> por <?php echo e($numero->participante()->name); ?>" onclick="info('<?php echo e($numero->status); ?> por <?php echo e($numero->participante()->name); ?>')" class="grupo-fazendinha <?php echo e('fazenda-'. $numero->statusFormated()); ?>" data-grupo="<?php echo e($numero->grupoFazendinha()); ?>" id="<?php echo e($numero->number); ?>"
                style="background-image: url('<?php echo e(asset('images/bixos/' . $numero->number . '.webp')); ?>'); background-size: 100%;background-repeat: no-repeat">
                <div class="<?php echo e($numero->statusFormated()); ?>"></div>
            </div>
        <?php endif; ?>
        
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>

<div class="d-flex justify-content-center">
    <div class="payment" id="payment" style="display: none; width: 500px !important;margin-bottom: 10px;">
        <div class="row justify-content-center">
            <div class="col-md-12 col-9" style="background-color: #fff; color: #000; border-radius: 10px;">
                <div class="container">
                    <div class="row">
                        <div class="col-12 text-center" style="width: 100%">
                            <span id="numberSelected" class="scrollmenu"></span>
                        </div>
                    </div>
                    <div class="row"
                        style="text-align: center;background-color: #fff; margin-top: 5px; justify-content-center; margin-bottom: 10px;">
                        <div class="col-12 d-flex justify-content-center">
                            <center style="width: 400px;">
                                <button type="button" class="btn btn-danger reservation blob"
                                    style="border: none;color: #fff;font-weight: bold;width: 100%;background-color: green"
                                    data-toggle="modal" onclick="openModalCheckout()"><i
                                        class="far fa-check-circle"></i>&nbsp;Participar do
                                    sorteio
                                    <span style="font-size: 14px; float:right"><span
                                            id="numberSelectedTotal"></span></span></button>
                            </center>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<br><br><br>

<script>
    function info(msg){
        Swal.fire(msg)
    }
</script>
<?php /**PATH /home4/mest8837/modelo10.mestredarifa.com/resources/views/rifas/fazendinha.blade.php ENDPATH**/ ?>