<?php include 'template/header.php' ?>

<div style="margin-top: 50px;">
    <div style="padding: 20px 0; background-color:var(--secondary-color);">
        <div
            style="width: 90%; margin: 0 auto 10px auto; color: transparent !important; -webkit-background-clip: text; background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #e99c05 0%, #f4ae00 8%, #f8bf33 25%, #f8ce19 62.5%, #ffdc02 100%); font-family: Teko-SemiBold; text-align: center; font-size: 24px;">
            TULIS PESAN
        </div>

        <div class="error-check"></div>

        <form method="post" action="funtion/memo-store.php" class="form-memo"
            style="width: 90%; margin: 0 auto 20px auto;">
            <input type="hidden" name="_token" value="Qj59CKinWUf0k9VnTu4v26T07V0DzEeT4KSZR6WQ" autocomplete="off">
            <div style="opacity: 0.66; font-size: 13px; margin-bottom: 4px;">
                Subjek
            </div>
            <div style="margin-bottom: 12px;">
                <input type="text" name="subject" class="form-control" placeholder="Subjek" value="">
                <div class="error-subject" style="color: red; font-size: 13px; margin-top: 4px;"></div>
            </div>

            <div style="opacity: 0.66; font-size: 13px; margin-bottom: 4px;">
                Pesan
            </div>
            <div style="margin-bottom: 12px;">
                <textarea name="message" class="form-control" rows="4" placeholder="Tulis pesan Anda..."></textarea>
                <div class="error-message" style="color: red; font-size: 13px; margin-top: 4px;"></div>
            </div>

            <div style="margin-top: 20px;">
                <button type="submit" class="glowing2 btn btn-primary submit"
                    style="background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #e99c05 0%, #f4ae00 8%, #f8bf33 25%, #f8ce19 62.5%, #ffdc02 100%); color: #fff; border: 0; width: 100%; font-weight: bold; border-radius: 25px; padding: 10px 0;">
                    Kirim
                </button>
            </div>
        </form>
    </div>
</div>

<?php include 'template/footer.php'; ?>

<script>
$(document).ready(function() {
    $('.form-memo').on('submit', function(e) {
        e.preventDefault();

        $('.error-check').html('');
        $('.error-subject').text('');
        $('.error-message').text('');

        const formData = $(this).serialize();

        $.ajax({
            url: 'function/memo-store.php',
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(res) {
                if (res.status === 'success') {
                    $('.error-check').html(
                        `<div style="padding: 10px; background: #28a745; color: white; border-radius: 5px; margin-bottom: 15px; text-align: center;">${res.message}</div>`
                    );
                    $('input[name=subject], textarea[name=message]').val('');
                } else if (res.status === 'error') {
                    if (res.errors) {
                        if (res.errors.subject) $('.error-subject').text(res.errors.subject);
                        if (res.errors.message) $('.error-message').text(res.errors.message);
                    } else {
                        $('.error-check').html(
                            `<div style="padding: 10px; background: #dc3545; color: white; border-radius: 5px; margin-bottom: 15px; text-align: center;">${res.message}</div>`
                        );
                    }
                }
            },
            error: function() {
                $('.error-check').html(
                    `<div style="padding: 10px; background: #dc3545; color: white; border-radius: 5px; margin-bottom: 15px; text-align: center;">Terjadi kesalahan server</div>`
                );
            }
        });
    });
});
</script>