{% load static %}
{% load crispy_forms_tags %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>All About IT News</title>
    <link rel="icon" type="image/x-icon" href="{% static 'newApp/assets/favicon_newApp.ico' %}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link href="{% static 'newApp/css/styles_newApp.css' %}" rel="stylesheet" />
</head>
<body>
    <div id="main-content" class="d-flex flex-column">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
            <div class="container px-4 px-lg-5">
                <a class="navbar-brand" href="{% url 'redirect_to_today_post' %}">All About IT News</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto py-4 py-lg-0">
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{% url 'redirect_to_today_post' %}" style="color: red;">홈</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{% url 'index' %}">뉴스 모음</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4">구독자 수: {{ subscriber_count }}</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Page Header-->
        <header class="bg-dark py-5" style="align-items: center; text-align: center;">
            <div class="container px-4 px-lg-5 my-5 text-center">
                <div class="text-center text-white mx-auto">
                    <h1 class="display-4 fw-bolder">{{ display_date }}</h1>
                    <p class="lead fw-normal text-white-50 mb-0">다섯개의 뉴스를 한눈에 확인하세요!</p>
                </div>
            </div>
        </header>
        <!-- Main Content-->
        <div class="content flex-fill vertical-align text-center">
            <div class="container">
                <article class="mb-4">
                    <div class="container px-4 px-lg-5 text-center">
                        <div class="row gx-4 gx-lg-5 justify-content-center">

                        <!-- Subscription Message -->
                        <div class="text-center" style="margin-top: 60px; text-align: center;">
                            <p style="font-size: 30px; font-weight: bold; margin-bottom: 5px;">
                                🔥 매일 아침 6시에 최신 
                                <span style="color: red;">IT 뉴스</span> 5가지를 무료로 받아보세요 🔥
                            </p>
                            <p style="font-size: 14px; color: gray; margin-top: 5px; margin-bottom: 10px;">
                                {{ display_date }} | 조회 수 : <span id="views-count">{{ views_count }}</span>
                            </p>
                        </div>

                        <h3 style="text-align: center; margin-top: 60px;">오늘의 뉴스 한줄요약 </h3>
                        <div class="summary-box mx-auto" style="background-color: #e9ecef;
                        border-radius: 10px;
                        margin: 20px 0;
                        padding: 0px 15px 0px 15px;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                        text-align: left;
                        font-family: 'Roboto', sans-serif;
                        font-size: 14px;">
                            {% for article in articles %}
                            <p style="margin-top: 24px; margin-bottom: 24px;">✅ {{ article.title }}</p>
                            {% endfor %}
                        </div>
                        {% for article in articles %}
                            <div class="col-md-10 col-lg-8 col-xl-7 mx-auto" id="article-{{ forloop.counter }}">
                                <h2 class="section-heading" style="text-align: center; margin-top: 70px;">{{ article.title }}</h2>
                                <a><img class="img-fluid post-image" src="{{ article.image }}" alt="..." /></a>
                                <div class="article-link"><p>출처: <b><a href="{{ article.link }}" style="text-decoration: none; color: gray;">{{ article.info }}</a></b></p></div>
                                <div class="article-summary" style="  
                                background-color: #ffffff;
                                padding: 15px;
                                border-radius: 5px;
                                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                                text-align: left;
                                font-family: 'Roboto', sans-serif;">
                                    <p>✅ {{ article.summary.first_sentence }}</p>
                                    <p style="margin-top: 20px;">✅ {{ article.summary.second_sentence }}</p>
                                    <p style="margin-top: 20px;">✅ {{ article.summary.third_sentence }}</p>
                                </div>
                            </div>
                        {% endfor %}
                        </div>
                    </div>
                </article>
                <hr style="width: 728px; color:gray; border: none; border-top: 1px solid gray; margin: 0 auto; margin-top: 100px; " />
                <!-- Subscription Form -->
                <div class="text-center my-5">
                    <h2 style="margin-top: 100px;">뉴스레터 구독하기</h2>
                    <div style="font-size: small;">📢 뉴스레터를 <b>이메일</b>로 받아보고 싶다면 구독해보세요!</div>
                    <div class="subscribe-box mx-auto">
                        <form method="POST" action="{% url 'post' date_str=date_str %}" id="subscriptionForm">
                            {% csrf_token %}
                            {{ form|crispy }}
                            <button class="btn btn-primary text-uppercase" id="submitButton" type="submit" style="background-color: black;">구독하기</button>
                        </form>                      
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer-->
    <footer class="border-top">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="small text-center text-muted fst-italic" style="font-size: 17.5px; font-family: Apple SD Gothic Neo;">Copyright &copy; All About IT News</div>
                </div>
            </div>
        </div>
    </footer>

    <button id="backToTopBtn" title="Go to top">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="{% static 'newApp/js/scripts_newApp.js' %}"></script>
    <!-- Smooth Scroll JS-->
    <script>
        let mybutton = document.getElementById("backToTopBtn");

        window.onscroll = function() {
            scrollFunction();
        };

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                mybutton.style.display = "block";
            } else {
                mybutton.style.display = "none";
            }
        }

        mybutton.onclick = function() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        };

        {% if success %}
            alert("등록이 완료되었습니다.");
        {% endif %}
        {% if error_message %}
            alert("{{ error_message }}");
        {% endif %}
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#subscriptionForm').on('submit', function(event) {
                event.preventDefault();

                $.ajax({
                    url: $(this).attr('action'),
                    method: $(this).attr('method'),
                    data: $(this).serialize(),
                    success: function(response) {
                        if (response.success) {
                            alert("등록이 완료되었습니다.");
                            $('#subscriptionForm')[0].reset();
                        } else {
                            displayErrors(response.error_message);
                        }
                    },
                    error: function(xhr, status, error) {
                        alert("문제가 발생했습니다. 다시 시도해주세요.");
                    }
                });
            });
            function displayErrors(errors) {
                alert(errors);
            }
        });
    </script>
</body>
</html>
