<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            Create new habit
        </h2>
    </x-slot>

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

            <form action="{{route('habits.store') }}" method="post">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
                    @csrf
                    <x-pagecard>
                        <!-- Name -->
                        <div>
                            <x-input-label for="name" :value="__('Name')"/>
                            <x-text-input id="name" class="block mt-1 w-full" type="text" name="name"
                                          placeholder="Swimming" required
                                          :value="old('name')" required autofocus autocomplete="name"/>
                            <x-input-error :messages="$errors->get('name')" class="mt-2"/>
                        </div>

                        <!-- Category input -->
                        <div class="mt-6">
                            <x-input-label for="category" value="Category"/>
                            <x-text-input id="category" class="block mt-1 w-full" type="text" name="category"
                                          placeholder="Exercise"
                                          :value="old('category')" autocomplete="category"/>
                            <x-input-error :messages="$errors->get('category')" class="mt-2"/>
                        </div>

                        <!-- tag input -->
                        <div class="mt-6">
                            <x-input-label for="tag" value="Tags"/>
                            <x-text-input id="tag" class="block mt-1 w-full" type="text" name="tags"
                                          placeholder="Exercise, swimming, health"
                                          :value="old('tag')" autocomplete="tag"/>
                            <x-input-error :messages="$errors->get('tag')" class="mt-2"/>
                        </div>
                    </x-pagecard>

                    <x-pagecard>

                        <!-- Type -->
                        <div class="">
                            <x-input-label for="habit_type" value="Habit Type"></x-input-label>
                            <div class="flex items-center mb-1 mt-1">

                                <!-- Radio button: todo-->
                                <input id="habit-type-1" type="radio" value="todo" name="type"
                                       onclick="toggleHabitValueSuffix(true)" checked
                                       class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                <label for="habit-type-1" class="ml-2">Todo</label>
                            </div>

                            <!-- Radio button: value-->
                            <div class="flex items-center mb-1">
                                <input id="habit-type-2" type="radio" value="value" name="type"
                                       onclick="toggleHabitValueSuffix(false)"
                                       class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                <label for="habit-type-2" class="ml-2 ">Amount and suffix</label>
                            </div>

                            <!-- Radio button: barely know her -->
{{--                            <div class="flex items-center mb-1">--}}
{{--                                <input id="habit-type-3" type="radio" value="track" name="type"--}}
{{--                                       onclick="toggleTracker()"--}}
{{--                                       class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">--}}
{{--                                <label for="habit-type-3" class="ml-2 ">Trackable</label>--}}
{{--                            </div>--}}

                            <!-- Value / Suffix -->
                            <x-input-label for="value" value="Suffix" class="mt-4"
                                           id="habit-suffix-label"/>

                            <x-text-input id="habit-suffix-name" class="inline-block mt-1 disabled:opacity-50 w-1/2"
                                          type="text" name="suffix" disabled required
                                          placeholder="minutes"
                                          :value="old('suffix')" autocomplete="suffix"/>
                            <x-input-error :messages="$errors->get('suffix')" class="mt-2"/>
                        </div>

                        <!-- Schedule -->
                        <div class="mt-6">
                            <x-input-label for="schedule-value" value="Schedule Recurrence"></x-input-label>
                            <div class="text-sm my-2 text-gray-700 mr-20">
                               The recurrence value determines how often you will be inquired about this habit. Note: this is different from setting a goal.
                            </div>
                            <div class="inline-block mt-1 pr-1">
                                Every
                            </div>
                            <x-text-input id="schedule-value" class="inline-block mt-1 w-20" type="number"
                                          placeholder="" min="0" value="1"
                                          name="schedule_value"/>
                            <x-input-error :messages="$errors->get('schedule_value')" class="mt-2"/>

                            <select name="schedule-unit" id="schedule-unit"
                                    class="inline-block w-fit 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">
                                <option value="day">days</option>
                                <option value="week">weeks</option>
                                <option value="month">months</option>
                            </select>

                            <div class="inline-block mt-1 px-1">
                                starting
                            </div>

                            <x-text-input type="date" class="inline-block mt-1" name="schedule_start" id="schedule_start"
                                          value="{{$today}}"
                                          required></x-text-input>

                        </div>
                    </x-pagecard>

                    <!-- Goal -->
                    <x-pagecard>
                        <div class="">
                            <x-input-label value="Goal Type"></x-input-label>
                            <div class="text-sm my-2 text-gray-700">
                                Setting a goal will show you how well you're doing, based on the entries made.
                                If you only want to record the frequency of an activity, you don't need to set a goal.
                            </div>
                            <div class="flex items-center mb-1">
                                <input id="goal-type-1" type="radio" value="none" name="goal_type"
                                       onclick="toggleGoalSchedule(true)" checked
                                       class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                <label for="goal-type-1" class="ml-2">No goal</label>
                            </div>
                            <div class="flex items-center mb-1">
                                <input id="goal-type-2" type="radio" value="schedule" name="goal_type"
                                       onclick="toggleGoalSchedule(true)"
                                       class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                <label for="goal-type-2" class="ml-2 ">Same as schedule</label>
                            </div>
                            <div class="flex items-center mb-1">
                                <input id="goal-type-3" type="radio" value="custom" name="goal_type"
                                       onclick="toggleGoalSchedule(false)"
                                       class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                <label for="goal-type-3" class="ml-2 ">Custom schedule</label>
                            </div>
                        </div>

                        <!-- goal schedule -->
                        <div class="mt-6">
                            <x-input-label for="goal-schedule-unit" value="Goal Recurrence"></x-input-label>
                            <div class="inline-block mt-1 pr-1">
                                Every
                            </div>
                            <x-text-input id="goal-schedule-amount" class="inline-block mt-1 w-20" type="number"
                                          value="1" placeholder="" min="0" disabled required
                                          name="goal_value"/>
                            <x-input-error :messages="$errors->get('goal_value')" class="mt-2"/>

                            <select name="goal_unit" id="goal-schedule-unit"
                                    disabled required
                                    class="inline-block w-fit 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">
                                <option value="day">days</option>
                                <option value="week">weeks</option>
                                <option value="month">months</option>
                            </select>

                            <div class="inline-block mt-1 px-1">
                                starting
                            </div>

                            <x-text-input type="date" class="inline-block mt-1" name="goal-start" id="goal-start"
                                          value="{{$today}}" disabled
                                          required></x-text-input>
                        </div>

                        <!-- Priority -->

                    </x-pagecard>

                </div>

                <!-- Submit -->
                <div class="w-full">
                    <div class=" my-6 float-right">
                        <x-primary-button class="px-20 py-2">Create habit</x-primary-button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script>
        // const habit_value = document.getElementById('habit-value-amount');
        const habit_suffix = document.getElementById('habit-suffix-name');

        const goal_amount = document.getElementById('goal-schedule-amount');
        const goal_unit = document.getElementById('goal-schedule-unit');
        const goal_start = document.getElementById('goal_start');

        function toggleHabitValueSuffix(value) {
            // habit_value.disabled = value;
            habit_suffix.disabled = value;
        }

        function toggleGoalSchedule(value) {
            goal_amount.disabled = value;
            goal_unit.disabled = value;
            goal_start.disabled = value;
        }

        // function toggleTracker() {
        //     habit_value.disabled = true;
        //     habit_suffix.disabled = !value;
        // }
    </script>

</x-app-layout>
