<section class="articles py-5 wow fadeIn" data-wow-duration="1s" data-wow-delay=".5s">
    <div class="container relative py-5 p-xl-5">
        <div class="text-center mb-5">
            <small class="font-md fw-medium text-secondary letter-space-1 mb-3">{$content4.mconMenuName|upper}</small>
            <h1 class="heading text-capitalize text-hs fw-bold wow zoomIn {if empty($content4.mconDescription)}mb-4{/if}" data-wow-duration="1s" data-wow-delay=".5s">{$content4.mconTitle}</h1>
            {if !empty($content4.mconDescription)}<div class="text-detail text-center">{$content4.mconDescription|html_entity_decode}</div>{/if}

            <div class="subscribeForm px-4 px-md-0">
                <form name="send_data" id="send_data" method="post" class="needs-validation bg-hs form-group rounded-lg p-2 mb-2 d-inline-flex" novalidate>
                    <div class="input-group input-group-sm align-items-center d-flex">
                        <span class="input-group-text text-white pe-0"><i class="bi-envelope"></i></span>
                        <input type="text" name="txtEmail" id="txtEmail" data-inputmask="'alias': 'email'" inputmode="email" placeholder="Your email address" class="form-control text-white">
                    </div>
                    <button class="btn btn-hs btn-sm fw-bold rounded-lg" type="submit">SUBSCRIBE</button>
                </form>
                <p class="errorMsg font-md text-danger mt-1"></p>
            </div>
            <div class="subscribeSuccess bg-light w-50 text-hs text-center shadow-sm rounded-sm py-3 mx-auto d-none"><div class="info"></div></div>
        </div>

        <div class="article-list row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 gy-4 gy-lg-5 pb-5 mb-5">
            {foreach from=$list_news item=news}
            <div class="col">
                <div class="card h-100 border-light shadow-sm rounded-xs over-hidden">
                    <div class="card-header bg-transparent border-bottom-0 p-0">
                        <a href="{$news.url}" class="imgCont relative rounded-sm-top d-block">
                            <img src="{$path}/325x200-{$news.newsImage2}" alt="{$news.newsImage2}" class="font-xs rounded-sm-top card-img">
                            <div class="date bg-hs font-sm absolute text-white rounded shadow-sm py-1 px-2">
                                <i class="bi-calendar-check me-1"></i> {$news.newsReleaseDate|date_format:"%d %b %Y"}</span>
                            </div>
                        </a>
                    </div>
                    <div class="card-body">
                        <h6 class="card-title fw-bold limit-text-3 text-capitalize"><a class="text-hs" href="{$news.url}">{$news.newsTitle|html_entity_decode|lower}</a></h6>
                        <div class="font-sm text-secondary">
                            {if !empty($news.creator)}<a class="text-hs me-4" href="{$news.urlcreator}"><i class="bi-person me-1"></i>{$news.creator}</a>{/if}
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
    </div>
</section>

<script type="text/javascript">
    var subsus = $('.subscribeSuccess'),
        forms = $('.needs-validation'),
        fg = forms.find('.form-group'),
        btns = $("#send_data"),
        erCont = $('.invalid-feedback');

    $(document).ready(function () {
        $('.form-control').inputmask({
            showMaskOnHover: false
        });

        var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
                event.preventDefault();
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
                var path = "{$path}", formdata = new FormData($(this)[0]);

                if (formdata) {
                    $("button:submit").attr("disabled", true);
                    $.ajax({
                        url: path+"/Modules/Front/Newsletter/save",
                        type: "POST",
                        dataType: "JSON",
                        data: formdata,
                        cache: false,
                        processData: false,
                        contentType: false,
                        success: function (obj) {
                            if (obj.status != 'ok') {
                                form.classList.add('was-validated');
                                var errMsg = obj.error[0];
                                fg.removeClass('error');
                                forms.addClass('error').siblings('.errorMsg').text(errMsg);
                            } else {
                                var msgs = '<h2 class="fw-bold text-success"><i class="bi-check-circle-fill fs-3 me-2"></i>Thank You!</h2>' +
                                    '<p class="fs-5">Your have successfully subscribed to our list.</p>';

                                subsus.find('.info').append(msgs);
                                subsus.removeClass('d-none').siblings('.subscribeForm').addClass('d-none');
                                fg.removeClass('error');
                                $("input, textarea, select").not('input[type="radio"]').val("");
                                $('input[type="radio"]').attr('checked', false);

                                setTimeout(function (){
                                    subsus.addClass('d-none').siblings('.subscribeForm').removeClass('d-none');
                                },5000);
                            }
                            $("button:submit").attr("disabled", false);
                        }
                    });
                    return false;
                }
            });
        });


    });
</script>