<x-app-layout>
    <x-header-h2> Insert Entry for {{$habit->name}}</x-header-h2>

    <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">

        <form action="{{route('entries.store')}}" method="post">
            @csrf

            <div class="sm:px-6 lg:px-8 grid grid-cols-3 items-stretch sm:gap-6 lg:gap-8 py-4 mx-auto">

                <!-- To Do Type -->
                @if($habit->type === 'todo')
                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6 text-gray-900 dark:text-gray-100">

                            <!-- Checkbox -->
                            <div class="flex flex-col gap-y-4 items-stretch">
                                <div>
                                    <x-input-label class="text-center" for="is_done">Habit status</x-input-label>
                                </div>
                                <div class="mx-auto">
                                    <input type="checkbox"
                                           class="rounded w-32 h-32 dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-md
                                                  focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 duration-300"
                                           name="value" id="value" value="1"
                                           onclick="toggleCheckboxText(this)"/>
                                </div>
                                <div>
                                    <div id="done-text" class="text-center text-xl mt-2">
                                        Holder
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Value / Suffix type -->
                @if($habit->type === 'value')
                    Value
                @endif

                <!-- Note and Date -->
                <div class="col-span-2 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg h-full">
                    <div class="p-6 text-gray-900 dark:text-gray-100">
                        <div>
                            <x-input-label for="note">Note</x-input-label>
                            <textarea name="note" id="note" rows="2" placeholder="Adding a note is optional."
                                      class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm disabled:opacity-50"></textarea>
                        </div>
                        <div class="mt-4">
                            <x-input-label for="input-date">Date</x-input-label>
                            <x-text-input type="date" name="input-date" value="{{today()->format('Y-m-d')}}"
                                          max="{{today()->format('Y-m-d')}}">
                            </x-text-input>

                        </div>
                    </div>

                    <input type="hidden" name="habit-id" value="{{$habit->id}}">
                    <div class="float-right mt-auto mr-6">
                        <x-primary-button class="">Insert entry</x-primary-button>
                    </div>
                </div>
            </div>

        </form>
    </div>

    <script>
        var checkboxText = document.getElementById('done-text');

        toggleCheckboxText(document.getElementById('value')); // Run function once to make sure text matches on reload

        function toggleCheckboxText(checkbox) {

            if (checkbox.checked) {
                checkboxText.innerText = "🎉 Done 🎉";
            } else {
                checkboxText.innerText = "Not done";
            }
        }

    </script>
</x-app-layout>

