</div> <!-- END main -->

<?php 
$currentPage = $_SERVER['REQUEST_URI'];

// =========================
// MODAL PROFILE
// =========================
if (
    !empty($needProfile) &&
    strpos($currentPage, 'profile') === false
): 
?>

<div class="modal-warning">
    <div class="modal-content">

        <h2>⚠️ Lengkapi Profil Anda</h2>

        <p>
            Data profil Anda belum lengkap.<br>
            Silakan lengkapi terlebih dahulu untuk melanjutkan.
        </p>

        <a href="/membership/profile" class="btn btn-primary">
            Lengkapi Sekarang
        </a>

    </div>
</div>

<?php endif; ?>
</div> <!-- END layout -->

<script>
document.addEventListener("DOMContentLoaded", function () {

    const btn = document.getElementById("menuToggle");
    const sidebar = document.querySelector(".sidebar");

    btn.addEventListener("click", function () {
        sidebar.classList.toggle("active");
    });

});
</script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<script>
function downloadMiniCard(){
    html2canvas(document.getElementById("miniCard")).then(canvas=>{
        let link = document.createElement("a");
        link.download = "member-card.png";
        link.href = canvas.toDataURL();
        link.click();
    });
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function(){

    console.log("JS READY");

    const images = document.querySelectorAll(".flyer-click");
    const modal = document.getElementById("flyerModal");
    const modalImg = document.getElementById("flyerImage");
    const closeBtn = document.querySelector(".flyer-close");

    // ❗ VALIDASI ELEMENT
    if(!modal || !modalImg){
        console.log("MODAL TIDAK DITEMUKAN");
        return;
    }

    // CLICK IMAGE
    images.forEach(img => {
        img.addEventListener("click", function(){
            console.log("CLICK OK");

            const src = this.getAttribute("data-img");
            modalImg.src = src;
            modal.classList.add("show");
        });
    });

    // CLOSE BUTTON (AMAN)
    if(closeBtn){
        closeBtn.addEventListener("click", function(){
            modal.classList.remove("show");
        });
    }

    // CLICK OUTSIDE
    modal.addEventListener("click", function(e){
        if(e.target === modal){
            modal.classList.remove("show");
        }
    });

});
</script>
<script>
document.addEventListener("DOMContentLoaded", function(){

    const daftarBtns = document.querySelectorAll(".btn-daftar");

    daftarBtns.forEach(btn => {
        btn.addEventListener("click", function(){

            const eventId = this.getAttribute("data-id");

            // CONFIRM BOX
            const confirmDaftar = confirm("Yakin mau daftar event ini?");

            if(confirmDaftar){
                window.location.href = "/membership/event-daftar?id=" + eventId;
            }

        });
    });

});
</script>
<!-- ================= CROPPER JS ================= -->
<script>
document.addEventListener("DOMContentLoaded", function(){

    let cropper = null;

    const input = document.getElementById('inputImage');
    const cropModal = document.getElementById('cropModal');
    const cropImageEl = document.getElementById('cropImage');
    const preview = document.getElementById('imagePreview');
    const btnCrop = document.getElementById('btnCrop');

    // VALIDASI ELEMENT
    if(!input || !cropModal || !cropImageEl || !btnCrop){
        console.log("CROPPER ELEMENT TIDAK ADA");
        return;
    }

    console.log("CROPPER READY");

    input.addEventListener('change', function(e) {

        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();

        reader.onload = function(event) {

            cropImageEl.src = event.target.result;

            cropModal.style.display = 'flex';
            document.body.style.overflow = 'hidden';

            cropImageEl.onload = function(){

                if (cropper) cropper.destroy();

                cropper = new Cropper(cropImageEl, {
                    aspectRatio: 1,
                    viewMode: 1
                });
            };
        };

        reader.readAsDataURL(file);
    });

    btnCrop.addEventListener('click', function() {

        if (!cropper) return;

        const canvas = cropper.getCroppedCanvas({
            width: 300,
            height: 300
        });

        const base64 = canvas.toDataURL("image/jpeg");

        document.getElementById('croppedImage').value = base64;
        preview.src = base64;

        cropper.destroy();
        cropper = null;

        cropModal.style.display = 'none';
        document.body.style.overflow = '';
    });

    // klik luar modal
    cropModal.addEventListener('click', function(e){
        if(e.target === cropModal){
            cropModal.style.display = 'none';
            document.body.style.overflow = '';

            if(cropper){
                cropper.destroy();
                cropper = null;
            }
        }
    });

});

cropper = new Cropper(cropImageEl, {
    aspectRatio: 1,
    viewMode: 1,
    responsive: true,
    autoCropArea: 1,
    movable: true,
    zoomable: true,
    scalable: false
});
</script>
<!-- ================= CROPPER MODAL ================= -->
<div id="cropModal" class="crop-modal">
    <div class="crop-box">

        <div class="crop-wrapper">
            <img id="cropImage">
        </div>

        <br>

        <button type="button" id="btnCrop" class="btn btn-primary">
            Crop & Gunakan
        </button>

    </div>
</div>
</body>
</html>