{% extends "base.html" %}
{% load static %}
{% block content %}
    <link rel="stylesheet"
          type="text/css"
          href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script type="module"
            src="https://cdn.jsdelivr.net/npm/emoji-picker-element@latest/index.js"></script>
    <div class="container mx-auto p-6">
        {% include "includes/sidenav.html" %}
        <div class="main-content w-full py-8">
            <div class="mb-6">
                <h1 class="text-4xl font-semibold text-gray-800 text-center">Add Sizzle Check-In</h1>
            </div>
            <div class="flex justify-center">
                <form id="checkInForm"
                      method="post"
                      action="{% url 'sizzle_daily_log' %}"
                      class="w-full max-w-5xl bg-white shadow-sm rounded-lg p-6"
                      {% if not request.user.is_authenticated %}style="display:none;"{% endif %}>
                    {% csrf_token %}
                    <div class="form-group mb-10">
                        <label for="previous_work_card" class="block text-gray-700 font-medium mb-2">What did you work on previously?</label>
                        <textarea id="previous_work_card"
                                  name="previous_work"
                                  rows="5"
                                  class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
                                  required></textarea>
                    </div>
                    <div class="form-group mb-10">
                        <label for="next_plan_card" class="block text-gray-700 font-medium mb-2">What do you plan to do next?</label>
                        <textarea id="next_plan_card"
                                  name="next_plan"
                                  rows="5"
                                  class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
                                  required></textarea>
                    </div>
                    <div class="form-group mb-10">
                        <label for="blockers_card" class="block text-gray-700 font-medium mb-2">Do you have any blockers?</label>
                        <textarea id="blockers_card"
                                  name="blockers"
                                  rows="5"
                                  class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"></textarea>
                    </div>
                    {% if yesterday_report %}
                        <div class="mb-5 bg-gray-100 py-4 px-2 rounded-lg">
                            <p>
                                <strong>Yesterday's plan:</strong> {{ yesterday_report.next_plan }}
                            </p>
                            <p>
                                <strong>Yesterday's blockers:</strong> {{ yesterday_report.blockers }}
                            </p>
                        </div>
                    {% else %}
                        <div class="mb-10 bg-gray-100 rounded-lg">
                            <p>No report available for yesterday.</p>
                        </div>
                    {% endif %}
                    <div class="form-group mb-10 flex items-center">
                        <label for="goal_accomplished_card"
                               class="text-gray-700 font-medium mr-6 mt-4">
                            Did you accomplish your goals for yesterday?
                        </label>
                        <input type="checkbox"
                               id="goal_accomplished_card"
                               name="goal_accomplished"
                               class="w-15 h-15 border border-gray-300 rounded scale-150 focus:outline-none focus:ring-2 focus:ring-blue-400">
                    </div>
                    <div class="form-group mb-10">
                        <label for="feeling_card" class="block text-gray-700 font-medium mb-2">How are you feeling today?</label>
                        <div class="emoji-picker-container relative">
                            <textarea id="feeling_card"
                                      name="feeling"
                                      rows="5"
                                      class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400"></textarea>
                            <button id="emoji-trigger"
                                    type="button"
                                    class="mt-2 px-4 py-2 text-white rounded border border-red-600 hover:bg-red-600">
                                😊
                            </button>
                            <emoji-picker id="emoji-picker" class="absolute bottom-full right-0 hidden"></emoji-picker>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit"
                                class="submit-button bg-red-500 text-white font-bold py-2 px-6 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300">
                            Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const textarea = document.getElementById('feeling_card');
            const emojiTrigger = document.getElementById('emoji-trigger');
            const emojiPicker = document.getElementById('emoji-picker');
            const container = document.querySelector('.emoji-picker-container');

            emojiTrigger.addEventListener('click', () => {
                emojiPicker.classList.toggle('hidden');
            });

            document.addEventListener('click', (event) => {
                if (!container.contains(event.target)) {
                    emojiPicker.classList.add('hidden');
                }
            });

            emojiPicker.addEventListener('emoji-click', (event) => {
                const emoji = event.detail.emoji.unicode;
                textarea.value += emoji;
                textarea.focus();
            });
        });
    </script>
{% endblock content %}