@extends('layouts.app')
@section('title', $title = __('task.add'))
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => __('task.index'), 'url' => route('tasks.index')],
                ['label' => $title, 'url' => '']
            ]"/>
        </x-slot>
    </x-page-header>

    <x-hr/>

    <form action="{{ route('tasks.store') }}" method="post" class="mb-0">
        @csrf
        <div class="grid gap-6 mb-6 md:grid-cols-4">
            <div>
                <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.name') }}
                </label>
                <input type="text" id="name" name="name" required
                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                       placeholder="{{ __('forms.required') }}"/>
            </div>
            <div>
                <label for="start" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('task.StartTime') }}
                </label>
                <x-date-picker
                    name="start"
                    id="start"
                    :from="'today'"
                    :onlyDate="false"
                />
            </div>
            <div id="end">
                <label for="end" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('task.EndTime') }} ({{ __('forms.optional') }})
                </label>
                <x-date-picker
                    name="end"
                    id="end"
                    :from="'today'"
                    :required="false"
                    :onlyDate="false"
                />
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('task.active') }}
                </label>
                <select name="active"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    <option value="false">
                        {{ __('forms.false') }}
                    </option>
                    <option value="true">
                        {{ __('forms.true') }}
                    </option>
                </select>
            </div>
        </div>
        <div class="grid gap-6 mb-6 md:grid-cols-1">
            <div>
                <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.description') }}
                </label>
                <textarea id="description" name="description" rows="1"
                          class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                          placeholder="{{ __('forms.optional') }}"></textarea>
            </div>
        </div>
        <div class="grid gap-6 mb-6 md:grid-cols-1">
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('task.WeekDays') }}
                </label>
                <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    @foreach($WeekDays as $key => $WeekDay)
                        <li class="w-full border-b border-gray-200 sm:border-b-0 sm:[&:not(:last-child)]:border-e dark:border-gray-600">
                            <div class="flex items-center ps-3">
                                <input type="checkbox" id="{{ $key }}" name="week_days[]" value="{{ $key }}"
                                       class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                                <label for="{{ $key }}"
                                       class="w-full py-3 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                                    {{ __('forms.WeekDays.' . $key) }}
                                </label>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        <div class="flex justify-between items-center my-5">
            <h3 class="text-2xl">
                {{ __('task.tasks') }}
            </h3>
            <button type="button" onclick="AddTask()"
                    class="flex items-center justify-center space-x-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                <i class="bi bi-plus-circle-fill"></i>
                <span class="hidden sm:block">
                    {{ __('task.AddTask') }}
                </span>
            </button>
        </div>
        <ul id="subs" class="space-y-2">
            @include('tasks.partial.sub')
        </ul>

        <x-hr/>

        <button type="submit"
                class="flex items-center justify-center space-x-2 text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-check-circle-fill" viewBox="0 0 16 16">
                <path
                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
            </svg>
            <span>
                {{ __('forms.submit') }}
            </span>
        </button>
    </form>
    @include('tasks.partial.script')
@endsection