<?= $this->extend('template_front'); ?>

<?= $this->section('content'); ?>

<!-- ini buat spasi antara navbar dan greeting section -->
<div class="margin-bottom-50"></div>

<!-- Start Prosedur -->
<section class="prosedur margin-bottom-50">

    <div class="container">
        <div class="row">
            <div class="col">
                <h3 style="text-align: center;">Biaya Pendaftaran Calon Peserta Didik Madrasah Istiqlal Jakarta</h3>

                <hr>

            </div>

        </div>

        <div class="row">

            <?php foreach ($biaya as $biaya) : ?>
                <div class="col-sm-4 mb-3">
                    <a class="lightbox" title="Image <?= $biaya['id']; ?>" href="#">
                        <img src="<?= base_url(); ?>/asset/images/biaya/<?= $biaya['biaya']; ?>" class="img-fluid thumbnail" alt="Responsive image" style="margin: 1em auto;">
                    </a>
                </div>
            <?php endforeach; ?>

        </div>

        <div tabindex="-1" class="modal fade" id="lightbox" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Heading</h3>
                        <button class="close" type="button" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-center">
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>



    </div>

</section>
<!-- /End Prosedur -->
<script>
    $('.lightbox').click(function() {
        var title = $(this).attr('title');
        var src = $(this).children('img').attr("src");
        console.log(src)
        var alt = $(this).children('img').attr("alt") || "";
        var $img = '<img class="center-block img-responsive" alt="' + alt + '" src="' + src + '">';
        $('.modal-title').html(title);
        // $('.modal-body').html('<p>Loading...</p>');
        $('.modal-body').html('<img class="center-block img-responsive" style="width:400px;" src="' + src + '">');
        $('#lightbox').modal({
            show: true
        });

        // $img.load(function() {
        //     $('.modal-body').html($img);
        // })
    });
</script>


<?= $this->endSection(); ?>