<?php 
$page_id = null;
$comp_model = new SharedController;
$current_page = $this->set_current_page_link();
?>
<div>
    <div  class="">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-sm-10 comp-grid">
                    <h6 ><center>
                        <span class="badge badge-warning">Peserta yang Hadir</span>
                    </center></h6>
                    <div  class="">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-sm-5 card comp-grid">
                                    <h5 class="mb-1">ZONA 1 <small><span class="badge badge-success">Target Kehadiran : 79 orang</span></small></h5>
                                    <?php $rec_count = $comp_model->getcount_lakilaki();  ?>
                                    <a class="animated zoomIn record-count card bg-primary text-dark"  href="<?php print_link("absen_remaja/absen") ?>">
                                        <div class="row">
                                            <div class="col-2">
                                                <img width="50" height="50" src="https://png.pngtree.com/png-clipart/20231226/original/pngtree-cartoon-of-muslim-student-child-png-image_13940067.png" />
                                            </div>
                                            <div class="col-10">
                                                <div class="flex-column justify-content align-center">
                                                    <div class="title">Laki-Laki</div>
                                                    <small class=""></small>
                                                </div>
                                            </div>
                                            <h4 class="value"><strong><?php echo $rec_count; ?></strong></h4>
                                        </div>
                                    </a>
                                    <?php $rec_count = $comp_model->getcount_perempuan();  ?>
                                    <a class="animated zoomIn record-count card bg-danger text-dark"  href="<?php print_link("absen_remaja/absen") ?>">
                                        <div class="row">
                                            <div class="col-2">
                                                <img width="50" height="50" src="https://static.vecteezy.com/system/resources/previews/036/044/840/original/ai-generated-innocent-joy-of-adorable-standing-muslim-child-with-a-smile-isolated-transparent-illustration-free-png.png" />
                                            </div>
                                            <div class="col-10">
                                                <div class="flex-column justify-content align-center">
                                                    <div class="title">Perempuan</div>
                                                    <small class=""></small>
                                                </div>
                                            </div>
                                            <h4 class="value"><strong><?php echo $rec_count; ?></strong></h4>
                                        </div>
                                    </a>
                                    <?php $rec_count = $comp_model->getcount_jumlah();  ?>
                                    <a class="animated zoomIn record-count card bg-light text-dark"  href="<?php print_link("absen_remaja?search=Zona 1") ?>">
                                        <div class="row">
                                            <div class="col-2">
                                                <img width="25" height="25" src="https://img.icons8.com/color/48/open-book--v1.png" alt="open-book--v1"/>
                                            </div>
                                            <div class="col-10">
                                                <div class="flex-column justify-content align-center">
                                                    <div class="title">Jumlah</div>
                                                    <div class="progress mt-2">
                                                        <?php 
                                                        $perc = ($rec_count / 79) * 100 ;
                                                        ?>
                                                        <div class="progress-bar bg-success text-dark" role="progressbar" aria-valuenow="<?php echo $rec_count; ?>" aria-valuemin="0" aria-valuemax="79" style="width:<?php echo $perc ?>%">
                                                            <span class="progress-label"><?php echo round($perc,2); ?>%</span>
                                                        </div>
                                                    </div>
                                                    <small class="small desc">Tingkat Kehadiran %</small>
                                                </div>
                                            </div>
                                            <h4 class="value"><strong><?php echo $rec_count; ?></strong></h4>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-sm-5 card comp-grid">
                                    <h5 class="mb-1">ZONA 2   <small><span class="badge badge-success">Target Kehadiran : 140  orang</span></small></h5>
                                    <?php $rec_count = $comp_model->getcount_lakilaki_2();  ?>
                                    <a class="animated zoomIn record-count card bg-primary text-dark"  href="<?php print_link("absen_remaja/absen") ?>">
                                        <div class="row">
                                            <div class="col-2">
                                                <img width="50" height="50" src="https://png.pngtree.com/png-clipart/20231226/original/pngtree-cartoon-of-muslim-student-child-png-image_13940067.png" />
                                            </div>
                                            <div class="col-10">
                                                <div class="flex-column justify-content align-center">
                                                    <div class="title">Laki-Laki</div>
                                                    <small class=""></small>
                                                </div>
                                            </div>
                                            <h4 class="value"><strong><?php echo $rec_count; ?></strong></h4>
                                        </div>
                                    </a>
                                    <?php $rec_count = $comp_model->getcount_perempuan_2();  ?>
                                    <a class="animated zoomIn record-count card bg-danger text-dark"  href="<?php print_link("absen_remaja/absen") ?>">
                                        <div class="row">
                                            <div class="col-2">
                                                <img width="50" height="50" src="https://static.vecteezy.com/system/resources/previews/036/044/840/original/ai-generated-innocent-joy-of-adorable-standing-muslim-child-with-a-smile-isolated-transparent-illustration-free-png.png" />
                                            </div>
                                            <div class="col-10">
                                                <div class="flex-column justify-content align-center">
                                                    <div class="title">Perempuan</div>
                                                    <small class=""></small>
                                                </div>
                                            </div>
                                            <h4 class="value"><strong><?php echo $rec_count; ?></strong></h4>
                                        </div>
                                    </a>
                                    <?php $rec_count = $comp_model->getcount_jumlah_2();  ?>
                                    <a class="animated zoomIn record-count card bg-light text-dark"  href="<?php print_link("absen_remaja?search=Zona 2") ?>">
                                        <div class="row">
                                            <div class="col-2">
                                                <img width="25" height="25" src="https://img.icons8.com/color/48/open-book--v1.png" alt="open-book--v1"/>
                                            </div>
                                            <div class="col-10">
                                                <div class="flex-column justify-content align-center">
                                                    <div class="title">Jumlah</div>
                                                    <div class="progress mt-2">
                                                        <?php 
                                                        $perc = ($rec_count / 140) * 100 ;
                                                        ?>
                                                        <div class="progress-bar bg-success text-dark" role="progressbar" aria-valuenow="<?php echo $rec_count; ?>" aria-valuemin="0" aria-valuemax="140" style="width:<?php echo $perc ?>%">
                                                            <span class="progress-label"><?php echo round($perc,2); ?>%</span>
                                                        </div>
                                                    </div>
                                                    <small class="small desc">Tingkat Kehadiran %</small>
                                                </div>
                                            </div>
                                            <h4 class="value"><strong><?php echo $rec_count; ?></strong></h4>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
