{% extends 'cPanel/base.html' %}
{% load blog_tags %}
{% block content %}
<main class="p-6 sm:p-10 space-y-6">
    <div class="flex flex-col space-y-6 md:space-y-0 md:flex-row justify-between">
        <div class="mr-6">
            <h1 class="text-4xl font-semibold mb-2">Dashboard</h1>
            <!-- <h2 class="text-gray-600 ml-0.5">Mobile UX/UI Design course</h2> -->
        </div>
        {% if user.is_superuser %}
        <!-- Hidden -->
        <div class="flex flex-wrap items-start justify-end -mb-3">
            <a href="/usr_list/"
                class="inline-flex px-5 py-3 text-blue-600 hover:text-blue-700 focus:text-blue-700 hover:bg-blue-100 focus:bg-blue-100 border border-blue-600 rounded-md mb-3">
                <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    class="flex-shrink-0 h-5 w-5 -ml-1 mt-0.5 mr-2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                </svg>
                Manage Users
            </a>
            <a href="/add_user/"
                class="inline-flex px-5 py-3 text-white bg-blue-600 hover:bg-purple-700 focus:bg-blue-700 rounded-md ml-6 mb-3">
                <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    class="flex-shrink-0 h-6 w-6 text-white -ml-1 mr-2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                Create new users
            </a>
        </div>
        {% endif %}
    </div>
    {% if user.is_superuser %}
    <section class="flex w-full items-center   gap-6">


        <a href="{% url 'enq' %}" class="w-[30%] text-4xl flex items-center p-8 bg-white shadow rounded-lg">
            <div
                class="inline-flex flex-shrink-0 items-center justify-center h-16 w-16 text-blue-600 bg-blue-100 rounded-full mr-6">
                &#x2709;

            </div>
            <div>
                <span class="block text-2xl font-bold">{{totalEnq}}</span>
                <span class="block text-gray-500">Enquiry</span>
            </div>
        </a>





        <div class="w-[70%] flex justify-center">

            <canvas id="myChart"></canvas>

            <script>
                var ctx = document.getElementById('myChart').getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: ['Pending', 'Follow up', 'Viewed', 'Done'],
                        datasets: [{
                            data: [{{ PendingEnq }},{{FollowupEnq}},{{ViewedEnq}},{{DoneEnq}}],
                            // data: [{{ PendingEnq }}, {{ FollowupEnq }}, {{ ViewedEnq }}, { { DoneEnq } }],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'green'
                ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'green'
                    ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                        maintainAspectRatio: false,
                            legend: {
                        position: 'bottom',
                            labels: {
                            fontColor: 'black',
                                fontSize: 14,
                                    padding: 20
                        }
                    }
                }
            });
            </script>

        </div>
    </section>

    <section class="flex w-full items-center">

        <a href="{% url 'blog_comment_list' %}" class="w-[30%] text-4xl flex items-center p-8 bg-white shadow rounded-lg">
            <div
                class="inline-flex flex-shrink-0 items-center justify-center h-16 w-16 text-blue-600 bg-blue-100 rounded-full mr-6">
                &#x2709;

            </div>
            <div>
                <!-- <span class="block text-2xl font-bold">{{totalEnq}}</span> -->
                <span class="block text-gray-500">Blog Comment</span>
            </div>
        </a>

     


    </section>
    {% endif %}

    <!-- USER Section -->


    <section class="hidden md:block w-full">

        <div class="rounded border w-full mx-auto mt-0.5">
            <!-- Tabs -->
            <ul id="tabs" class="inline-flex pt-2 px-1 w-full grid grid-cols-2 border-b">
                <li
                    class="bg-white px-4 text-gray-800 font-semibold py-2 rounded-t border-t border-r border-l -mb-px">
                    <a id="default-tab" href="#first">Latest</a>
                </li>
                <li class="px-4 text-gray-800 font-semibold py-2 rounded-t border "><a
                        href="#second">Favourite</a>
                </li>
            </ul>

            <!-- Tab Contents -->
            <div id="tab-contents">
                <div id="first" class="py-2">
                    <article class="w-full py-1 px-2 h-auto shadow">
                        Latest
                        {% if trending %}
                        <ul>
                            {% for post in trending %}
                            <li class="my-1 flex justify-start border-b">
                                <a href="{% url 'blog_detail' post.slug %}"
                                    class="flex w-full justify-center items-center gap-1 ">
                                    <div class="h-16 w-[20%]">

                                        <img src="{{post.titleImage.file.url}}" alt="{{post.title}}"
                                            class="h-full w-full" loading="lazy" />
                                    </div>
                                    <h3 class="w-[80%] line-clamp-3">

                                        {{ post.prod|truncatewords:10 }}
                                    </h3>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </article>
                </div>
                <div id="second" class="hidden py-2">
                    <article class="w-full py-1 px-2 h-auto shadow">
                        {% fav_post user as favPostlist %}
                        {% if favPostlist %}
                        <ul id="favList">
                            {% for post in favPostlist %}
                            <li class="flex w-full justify-between border py-2 rounded px-4" id="bookmrk">
                                <a href="{{post.blog.url}}">

                                        {{ post.blog.title }}
                                </a>
                               
                               
                                <form hx-post="/bookmark/" >
                                    {% csrf_token %}
                                    <input type="number" name="post" id="" value="{{post.id}}" hidden >
                                    <button type="submit" aria-label="delete-fav-post">
                                        <i class="fa fa-times" aria-hidden="true"></i>

                                    </button>
                                </form>
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </article>
                </div>
            </div>
        </div>

    </section>




</main>


<script>
    let tabsContainer = document.querySelector("#tabs");

    let tabTogglers = tabsContainer.querySelectorAll("#tabs a");

    console.log(tabTogglers);

    tabTogglers.forEach(function (toggler) {
        toggler.addEventListener("click", function (e) {
            e.preventDefault();

            let tabName = this.getAttribute("href");

            let tabContents = document.querySelector("#tab-contents");

            for (let i = 0; i < tabContents.children.length; i++) {

                tabTogglers[i].parentElement.classList.remove("border-t", "border-r", "border-l", "-mb-px", "bg-white"); tabContents.children[i].classList.remove("hidden");
                if ("#" + tabContents.children[i].id === tabName) {
                    continue;
                }
                tabContents.children[i].classList.add("hidden");

            }
            e.target.parentElement.classList.add("border-t", "border-r", "border-l", "-mb-px", "bg-white");
        });
    });

</script>
{% endblock content %}