<!-- =====================================================
     CREATE EVENT MODAL
===================================================== -->

<div id="createModal" class="modal">

    <div class="modalBox">

        <!-- HEADER -->
        <div class="modalHead">

            <div>

                <h3>Create New Event</h3>

                <p class="sub">
                    Enter event details below
                </p>

            </div>

            <span
                class="closeBtn"
                onclick="closeModal('createModal')">

                ×
            </span>

        </div>

        <!-- FORM -->
        <form
            id="createForm"
            class="formGrid"
            enctype="multipart/form-data">

            <!-- POSTER -->
            <div class="formGroup full">

                <img
                    id="posterPreview"
                    class="posterPreview"
                    style="display:none;">

                <label>
                    Event Poster
                    (PNG/JPG/WEBP • Max 5MB)
                </label>

                <input
                    type="file"
                    name="poster"
                    accept="image/*"
                    onchange="previewPoster(event)">

                <small class="hint">
                    Recommended 1200 × 675
                </small>

            </div>

            <!-- TITLE -->
            <div class="formGroup full">

                <label>Event Title</label>

                <input
                    type="text"
                    name="title"
                    required>

            </div>

            <!-- DATE -->
            <div class="formGroup">

                <label>Date</label>

                <input
                    type="date"
                    name="event_date"
                    min="<?= date('Y-m-d') ?>"
                    required>

            </div>

            <!-- MODE -->
            <div class="formGroup">

                <label>Mode</label>

                <select
                    name="mode"
                    id="mode"
                    onchange="toggleMode()">

                    <option value="Physical">
                        Physical
                    </option>

                    <option value="Online">
                        Online
                    </option>

                </select>

            </div>

            <!-- START -->
            <div class="formGroup">

                <label>Start Time</label>

                <input
                    type="time"
                    name="start_time"
                    required>

            </div>

            <!-- END -->
            <div class="formGroup">

                <label>End Time</label>

                <input
                    type="time"
                    name="end_time"
                    required>

            </div>

            <!-- VENUE -->
            <div
                class="formGroup full"
                id="venue_box">

                <label>Venue</label>

                <input
                    type="text"
                    name="venue">

            </div>

            <!-- MEETING -->
            <div
                class="formGroup full"
                id="meeting_box"
                style="display:none;">

                <label>Meeting Link</label>

                <input
                    type="text"
                    name="meeting_link">

            </div>

            <!-- FEE -->
            <div class="formGroup full feeRow">

                <div class="feeCol">

                    <label>Fee Type</label>

                    <select
                        name="fee_type"
                        id="fee_type"
                        onchange="toggleFee()">

                        <option value="Free">
                            Free
                        </option>

                        <option value="Paid">
                            Paid
                        </option>

                    </select>

                </div>

                <div
                    class="feeCol"
                    id="fee_amount_box"
                    style="display:none;">

                    <label>Amount (RM)</label>

                    <input
                        type="number"
                        name="fee_amount"
                        min="0"
                        step="0.01">

                </div>

            </div>

            <!-- SLOT -->
            <div class="formGroup full">

                <label>
                    Max Participants
                </label>

                <input
                    type="number"
                    name="max_participant"
                    min="1">

            </div>

            <!-- BUTTON -->
            <div class="modalBtn full">

                <button
                    type="button"
                    class="cancel"
                    onclick="closeModal('createModal')">

                    Cancel
                </button>

                <button
                    type="submit"
                    class="create">

                    Create Event
                </button>

            </div>

        </form>

    </div>

</div>

<script>
/* =====================================================
   CREATE JS
===================================================== */

function toggleMode(){

    const mode =
        document.getElementById("mode").value;

    const venue =
        document.getElementById("venue_box");

    const meeting =
        document.getElementById("meeting_box");

    if(mode === "Online"){

        venue.style.display = "none";
        meeting.style.display = "block";

    }else{

        venue.style.display = "block";
        meeting.style.display = "none";
    }
}

function toggleFee(){

    const fee =
        document.getElementById("fee_type").value;

    const box =
        document.getElementById("fee_amount_box");

    box.style.display =
        (fee === "Paid")
        ? "block"
        : "none";
}

function previewPoster(event){

    const file =
        event.target.files[0];

    const preview =
        document.getElementById("posterPreview");

    if(!file) return;

    const reader =
        new FileReader();

    reader.onload = function(e){

        preview.src =
            e.target.result;

        preview.style.display =
            "block";
    };

    reader.readAsDataURL(file);
}


document.addEventListener(
"DOMContentLoaded",
function(){

    toggleMode();
    toggleFee();

    const form =
        document.getElementById("createForm");

    if(!form) return;

    /* ================================
       FEE INPUT VALIDATION (FIXED)
    ================================ */

    const feeInput =
        document.querySelector('input[name="fee_amount"]');

    if (feeInput) {

        feeInput.addEventListener("input", function () {

            let value = this.value;

            // allow only numbers + decimal
            if (!/^\d*\.?\d*$/.test(value)) {
                this.value = value.slice(0, -1);
                return;
            }

            // limit to 2 decimal places
            if (value.includes(".")) {

                let parts = value.split(".");

                if (parts[1].length > 2) {
                    this.value =
                        parts[0] + "." +
                        parts[1].substring(0, 2);
                }
            }
        });
    }

    /* ================================
       SUBMIT
    ================================ */

    form.addEventListener(
    "submit",
    async function(e){

        e.preventDefault();

        let f = new FormData(form);

        f.append("create_event", 1);

        let data = await postJSON(
            "event_action.php",
            f
        );

        showToast(data.msg, data.status);

        if (data.status === "success") {

            setTimeout(() => {
                location.reload();
            }, 1200);
        }
    });

});
</script>