{% extends "base.html" %}
{% load static %}
{% block title %}
    Sizzle
{% endblock title %}
{% block description %}
    View and manage your Sizzle reports. Track your time, review daily status updates, and see leaderboard rankings to monitor your progress.
{% endblock description %}
{% block keywords %}
    Sizzle Report, Time Tracking, Daily Status Report, Leaderboard, Work Progress, Track Time
{% endblock keywords %}
{% block og_title %}
    Sizzle Report - Monitor Your Progress
{% endblock og_title %}
{% block og_description %}
    Access your Sizzle reports to track time, review daily status updates, and view leaderboard rankings. Stay on top of your work progress.
{% endblock og_description %}
{% block content %}
    <link rel="stylesheet"
          type="text/css"
          href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <div class="container mx-auto p-6">
        <!-- Include the left navigation -->
        {% include "includes/sidenav.html" %}
        <!-- Main Content Section -->
        <div class="main-content w-full">
            <div class="flex justify-between items-center mb-8 mt-8">
                <h1 class="text-4xl font-semibold text-gray-800 mb-8">Your Sizzle Report</h1>
                {% if user.is_authenticated %}
                    <div class="flex space-x-2">
                        <input type="text"
                               name="daterange"
                               id="daterange"
                               class="bg-red-500 text-white py-2 px-6 rounded-md shadow-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 cursor-pointer"
                               readonly />
                    </div>
                {% endif %}
            </div>
            <div class="flex space-x-10 items-center mb-8 mt-8">
                <a href="{% url 'sizzle-docs' %}"
                   class="bg-red-500 text-white py-2 px-6 rounded-md shadow-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 cursor-pointer">
                    Sizzle Docs
                </a>
                {% if user.is_authenticated %}
                    <a href="{% url 'time_logs' %}"
                       class="bg-red-500 text-white py-2 px-6 rounded-md shadow-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 cursor-pointer">
                        Start Tracking
                    </a>
                    <a href="{% url 'sizzle_daily_log' %}"
                       class="bg-red-500 text-white py-2 px-6 rounded-md shadow-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 cursor-pointer">
                        Daily Status Report
                    </a>
                {% endif %}
            </div>
            <!-- Report and Leaderboard Section -->
            <div class="flex flex-col lg:flex-row lg:space-x-10">
                <!-- Report Table -->
                {% if user.is_authenticated %}
                    <div id="report-table" class="lg:w-1/2">
                        <div class="bg-white shadow-lg rounded-lg overflow-hidden"
                             id="report-item">
                            <div class="bg-red-500 text-white text-center py-4 text-lg font-semibold border-b border-gray-400">
                                {% if sizzle_data %}
                                    {{ sizzle_data.date }}
                                {% else %}
                                    No Data
                                {% endif %}
                            </div>
                            <table class="min-w-full bg-white">
                                <thead>
                                    <tr class="bg-red-500 text-white text-sm uppercase tracking-wider">
                                        <th class="text-left py-3 px-4 border-b border-gray-200">Issue Title</th>
                                        <th class="text-left py-3 px-4 border-b border-gray-200">Started</th>
                                        <th class="text-left py-3 px-4 border-b border-gray-200">Total</th>
                                        <th class="text-left py-3 px-4 border-b border-gray-200">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="py-3 px-4 border-b border-gray-200">
                                            {% if sizzle_data %}
                                                {{ sizzle_data.issue_title }}
                                            {% else %}
                                                No Data
                                            {% endif %}
                                        </td>
                                        <td class="py-3 px-4 border-b border-gray-200">
                                            {% if sizzle_data %}
                                                {{ sizzle_data.start_time }}
                                            {% else %}
                                                No Data
                                            {% endif %}
                                        </td>
                                        <td class="py-3 px-4 border-b border-gray-200">
                                            {% if sizzle_data %}
                                                {{ sizzle_data.duration }}
                                            {% else %}
                                                No Data
                                            {% endif %}
                                        </td>
                                        <td class="py-3 px-4 border-b border-gray-200">
                                            {% if user.is_authenticated %}
                                                <button class="delete-entry bg-red-500 text-white py-1 px-3 rounded"
                                                        data-id="{{ sizzle_data.id }}">Delete</button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% endif %}
                <!-- Leaderboard Section -->
                <div class="mt-8 lg:mt-0 lg:w-1/2">
                    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                        <div class="bg-red-500 text-white text-center py-4 text-lg font-semibold border-b border-gray-400">Leaderboard</div>
                        <table class="min-w-full bg-white">
                            <thead>
                                <tr class="bg-red-500 text-white text-sm uppercase tracking-wider">
                                    <th class="text-left py-3 px-4 border-b border-gray-200">Username</th>
                                    <th class="text-left py-3 px-4 border-b border-gray-200">Total Duration</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for user in leaderboard %}
                                    <tr>
                                        <td class="py-3 px-4 border-b border-gray-200">
                                            <a href="{% url 'user_sizzle_report' user.username %}"
                                               class="text-blue-500 hover:underline">{{ user.username }}</a>
                                        </td>
                                        <td class="py-3 px-4 border-b border-gray-200">{{ user.formatted_duration }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if user.is_authenticated %}
        <script type="text/javascript"
                src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
        <script type="text/javascript"
                src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script type="text/javascript"
                src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
        <script type="text/javascript">
           $(function() {
                // Initialize daterange picker
                $('input[name="daterange"]').daterangepicker({
                    opens: 'left',
                    locale: {
                        format: 'YYYY-MM-DD'
                    }
                }, function(start, end, label) {
                    $('#report-date').text(start.format('D.M.YYYY') + ' - ' + end.format('D.M.YYYY') + ' Report');

                    // Fetch and update report logs
                    $.ajax({
                        url: '{% url "timelogsreport" %}',
                        data: {
                            start_date: start.format('YYYY-MM-DDTHH:mm:ssZ'),
                            end_date: end.format('YYYY-MM-DDTHH:mm:ssZ')
                        },
                        success: function(data) {
                            // Clear existing content and append the new data
                            $('#report-table').empty();
                            data.forEach(function(item) {
                                $('#report-table').append(`
                                    <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-8">
                                        <div class="bg-red-500 text-white text-center py-4 text-lg font-semibold">
                                            ${item.date}
                                        </div>
                                        <table class="min-w-full bg-white">
                                            <thead>
                                                <tr class="bg-red-500 text-white text-sm uppercase tracking-wider">
                                                    <th class="text-left py-3 px-4 border-b border-gray-200">Issue Title</th>
                                                    <th class="text-left py-3 px-4 border-b border-gray-200">Started</th>
                                                    <th class="text-left py-3 px-4 border-b border-gray-200">Total</th>
                                                    <th class="text-left py-3 px-4 border-b border-gray-200">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="py-3 px-4 border-b border-gray-200">${item.issue_title}</td>
                                                    <td class="py-3 px-4 border-b border-gray-200">${item.start_time}</td>
                                                    <td class="py-3 px-4 border-b border-gray-200">${item.duration}</td>
                                                    <td class="py-3 px-4 border-b border-gray-200">
                                                        <button class="delete-entry bg-red-500 text-white py-1 px-3 rounded" data-id="${item.id}">
                                                            Delete
                                                        </button>
                                                        <span>Item ID: ${item.id}</span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                `);
                            });
                        },
                        error: function(xhr, status, error) {
                            alert('An error occurred while fetching the report logs.');
                        }
                    });
                });

                // Event delegation for dynamically added delete buttons
                $(document).on('click', '.delete-entry', function() {
                    var entryId = $(this).data('id');
                    if (!entryId) {
                        console.error("Entry ID is missing or empty.");
                        return;
                    }
                    if (confirm("Are you sure you want to delete this time entry?")) {
                        fetch("{% url 'delete_time_entry' %}", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/x-www-form-urlencoded",
                                "X-CSRFToken": "{{ csrf_token }}",
                            },
                            body: new URLSearchParams({ id: entryId }),
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                console.log("Success");
                                // Remove the row from the table if the delete was successful
                                this.closest("tr").remove();
                            } else {
                                console.log("Failed");
                                alert("Failed to delete time entry.");
                            }
                        });
                    }
                });
            });
        </script>
    {% endif %}
{% endblock content %}