<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-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-md sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100">
<div class="w-1/2">
<form action="{{route('habits.store') }}" method="post">
<!-- 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="Habit name" required
:value="old('name')" required autofocus autocomplete="name"/>
<x-input-error :messages="$errors->get('name')" class="mt-2"/>
</div>
<!-- Type -->
<div class="mt-6">
<x-input-label value="Habit Type"></x-input-label>
<div class="flex items-center mb-1">
<!-- Radio button 1 -->
<input id="habit-type-1" type="radio" value="todo" name="habit-type"
onclick="toggleHabitValueSuffix(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="habit-type-1" class="ml-2">Todo / done</label>
</div>
<div class="flex items-center mb-1">
<input id="habit-type-2" type="radio" value="value" name="habit-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 ">Value / suffix</label>
</div>
<!-- Value / Suffix -->
<x-input-label for="suffix" value="Value and suffix" class="mt-4" id="habit-suffix-label"/>
<x-text-input id="habit-value-amount" class="inline-block mt-1" type="number"
placeholder="Numeric value" min="0"
name="habit-value-amount" disabled/>
<x-text-input id="habit-suffix-name" class="inline-block mt-1 disabled:opacity-50"
type="text" name="habit-suffix-name" disabled
placeholder="Suffix"
:value="old('suffix')" required autofocus autocomplete="suffix"/>
<x-input-error :messages="$errors->get('suffix')" class="mt-2"/>
</div>
<!-- Schedule -->
<div class="mt-6">
<x-input-label for="schedule-unit" value="Schedule"></x-input-label>
<x-text-input id="schedule-amount" class="inline-block mt-1" type="number"
placeholder="Numeric value" min="0"
name="schedule-amount"/>
<select name="schedule-unit" id="schedule-unit"
class="inline-block w-1/2 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>
<!-- Goal -->
<div class="mt-6">
<x-input-label value="Goal Type"></x-input-label>
<div class="text-sm my-3">
Adding a goal changes the display mode from the value and suffix to a calculated percentage.
</div>
<div class="flex items-center mb-1">
<input id="goal-type-1" type="radio" value="none" 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-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"
checked="checked" 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 Schedule"></x-input-label>
<x-text-input id="goal-schedule-amount" class="inline-block mt-1" type="number"
placeholder="Numeric value" min="0" disabled
name="goal-schedule-amount"/>
<select name="goal-schedule-unit" id="goal-schedule-unit"
disabled
class="inline-block w-1/2 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>
<!-- Priority -->
</form>
</div>
</div>
</div>
</div>
</div>
<script>
function toggleHabitValueSuffix(value) {
document.getElementById('habit-value-amount').disabled = value;
document.getElementById('habit-suffix-name').disabled = value;
}
function toggleGoalSchedule(value) {
document.getElementById('goal-schedule-amount').disabled = value;
document.getElementById('goal-schedule-unit').disabled = value;
}
</script>
</x-app-layout>