<!-- =====================================================
     POSTPONE MODAL
===================================================== -->

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

    <div class="modalBox small">

        <!-- HEADER -->
        <div class="modalHead">
            <div>
                <h3>Postpone Event</h3>
                <p class="sub">
                    Update the event schedule
                </p>
            </div>

            <span
                class="closeBtn"
                onclick="closeModal('postponeModal')">
                ×
            </span>
        </div>

        <!-- BODY -->
        <div class="modalBody">

            <form
                id="postponeForm"
                class="formGrid">

                <input
                    type="hidden"
                    id="postpone_id"
                    name="event_id">

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

                    <label>
                        New Date
                    </label>

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

                </div>

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

                    <label>
                        Start Time
                    </label>

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

                </div>

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

                    <label>
                        End Time
                    </label>

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

                </div>

            </form>

        </div>

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

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

                Cancel
            </button>

            <button
                type="button"
                class="create"
                onclick="submitPostpone()">

                Update Schedule
            </button>

        </div>

    </div>

</div>



<script>
/* =====================================================
   POSTPONE JS
===================================================== */

function openPostponeModal(
    id,
    date,
    start,
    end
){

    document.getElementById(
        "postpone_id"
    ).value = id;

    document.getElementById(
        "postpone_date"
    ).value = date;

    document.getElementById(
        "postpone_start"
    ).value = start;

    document.getElementById(
        "postpone_end"
    ).value = end;

    openModal(
        "postponeModal"
    );
}



async function submitPostpone(){

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

    const start =
        document.getElementById(
            "postpone_start"
        ).value;

    const end =
        document.getElementById(
            "postpone_end"
        ).value;

    if(end <= start){
        showToast(
            "End time must be later than start time",
            "error"
        );
        return;
    }

    const f =
        new FormData(form);

    f.append(
        "postpone_event",
        1
    );

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

    showToast(
        data.msg,
        data.status
    );

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

        closeModal(
            "postponeModal"
        );

        setTimeout(()=>{
            location.reload();
        },1000);
    }
}
</script>