@props(['task'])

<div id="addTaskBtn" class="service-main_button" data-toggle="modal" data-target="#addTaskModal">
    {{ $task ? 'Редактировать задачу' : 'Добавить задачу' }}
</div>
<div class="modal fade newDesignModal cur_modal" id="addTaskModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ $task ? 'Редактировать задачу' : 'Добавить задачу' }}</h5>
                <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form id="task-form" class="service-form" action="/tasks{{ $task ? '/'.$task->id : ''}}" 
                        method="{{ $task ? 'put' : 'post'}}" enctype="multipart/form-data" name="service-form"
                >
                    @csrf
                    <div class="field req">
                        <label for="title">Наименование</label>
                        <input type="text" name="title" class="service-form__input" value="{{ $task ? $task->title : ''}}" maxlength="225">
                        <div class="field__error">Пожалуйста, заполните поле.</div>
                    </div>
                    <div class="field">
                        <label for="description">Описание</label>
                        <div class="textarea-counter">0/1000</div>
                        <textarea name="description" id="description" maxlength="1000">{{ $task ? $task->description : ''}}</textarea>                        
                        <div class="field__error">Пожалуйста, заполните поле.</div>
                    </div>
                    <div class="attach attach-doc" id="attachPhotoDiv">
                        <div class="attach-title">
                            <label for="doc_file" class="attach-title-text">Прикрепите фото</label>
                        </div>
                        <div class="attach-content">
                            <div class="field">
                                <input type="file" accept="image/*" name="doc_file" id="doc_file" class="service-form__file">
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <label for="plan_date_done_at">Дата</label>
                        <input type="text" name="plan_date_done_at" id="plan_date_done_at" class="service-form__input dateInput" 
                            placeholder="__-__-____" value="{{ $task ? '/'.$task->plan_date_done_at : ''}}" maxlength="10"
                            readonly style="cursor: default" required
                        >
                        <x-calendar />
                        <div class="field__error">Пожалуйста, заполните поле.</div>
                    </div>

                    <div class="field">
                        <label for="plan_time_done_at">Время</label>
                        <x-time-picker />
                        <div class="field__error">Пожалуйста, заполните поле.</div>
                    </div>

                    <div class="field req">
                        <label for="priority">Приоритет</label>
                        <select name="priority" id="prioritySelect2" data-select2-id="priority" class="service-form__select">
                            <option value="low">Низкий</option>
                            <option value="medium">Средний</option>
                            <option value="high">Высокий</option>
                        </select>
                        <div class="field__error">Пожалуйста, заполните поле.</div>
                        <script>
                            $(document).ready(function() {
                                $('#prioritySelect2').select2({
                                    tags: true,
                                    width: '100%',
                                    minimumResultsForSearch: -1
                                });
                            });
                        </script>
                    </div>
                    <input type="submit" form="task-form" value="Сохранить">
                </form>     
                <div id="showNotificationsBtn" class="service-main_button" data-el_id="" data-toggle="modal" data-dismiss="modal" data-target="#showNotificationsModal" hidden>
                    Редактировать уведомления
                </div>    
                <div id="deleteTaskStartBtn" class="service-form__delete_link" data-el_id="{{$task ? $task->id : ''}}" 
                    data-toggle="modal" data-dismiss="modal" data-target="#delTaskModal"
                >
                    Удалить задачу
                </div>                
            </div>
        </div>
    </div>
</div>
<x-notifications-action/>
<x-delete-confirmation 
    :modalId="'delTaskModal'" 
    :buttonId="'delTaskButton'" 
    :text="'Вы дествительно хотите удалить задачу?'"
    :model="'tasks'"
    :redirectUrl="'/'"
/>  
<script>
    $(document).ready(function() {
        $(document).on('submit', '#task-form', function (event) {
            submitModal(event, this, function(xhr, form) {
                if (xhr.responseJSON.errors.title) {
                    form.find('input[name=title]').siblings().find('.field__error').html(xhr.responseJSON.errors.title[0]);
                    form.find('input[name=title]').parent().addClass('error');
                }
                if (xhr.responseJSON.errors.description) {
                    form.find('textarea[name=description]').siblings().find('.field__error').html(xhr.responseJSON.errors.description[0]);
                    form.find('textarea[name=description]').parent().addClass('error');
                }
                if (xhr.responseJSON.errors.plan_date_done_at) {
                    form.find('input[name=plan_date_done_at]').siblings().find('.field__error').html(xhr.responseJSON.errors.plan_date_done_at[0]);
                    form.find('input[name=plan_date_done_at]').parent().addClass('error');
                }
                if (xhr.responseJSON.errors.plan_time_done_at) {
                    form.find('input[name=plan_time_done_at]').siblings().find('.field__error').html(xhr.responseJSON.errors.plan_time_done_at[0]);
                    form.find('input[name=plan_time_done_at]').parent().addClass('error');
                }
                if (xhr.responseJSON.errors.priority) {
                    form.find('#prioritySelect2').siblings().find('.field__error').html(xhr.responseJSON.errors.priority[0]);
                    form.find('#prioritySelect2').parent().addClass('error');
                }

                if (xhr.responseJSON.errors.plan_date_done_at) {
                    form.find('input[name=plan_date_done_at]').siblings().find('.field__error').html(xhr.responseJSON.errors.plan_date_done_at[0]);
                    form.find('input[name=plan_date_done_at]').parent().addClass('error');
                }
            });
        });

        $(document).on('click', '#deleteTaskStartBtn', function (e) {
            if ($(this).attr('disabled')) {
                return;
            }
            var el_id = $(this).data('el_id');
            $(document).find('#delTaskButton').data('el_id', el_id);
        });

        $(document).on('click', '#showNotificationsBtn', function (e) {
            if ($(this).attr('disabled')) {
                return;
            }
            var el_id = $(this).data('el_id');
            const serviceForm = $('#showNotificationsModal').find('.service-form');

            const routeTasksNotifications = "{{ route('tasks.notifications.store', ['task' => ':task_id']) }}";
            serviceForm.attr('action', routeTasksNotifications.replace(':task_id', el_id));

            const routeTasksNotificationsGET = "{{ route('tasks.notifications.show', ['task' => ':task_id']) }}";
            $.ajax({
                url: routeTasksNotificationsGET.replace(':task_id', el_id),
                type: 'GET',
                success: function (response) {
                    if (response.data) {
                        for (let i = 0; i < response.data.length && i < 3; i++) {
                            const time = response.data[i].seconds_to_notify;

                            $(document).find(`#notifications-checkbox${i+1}`).prop('checked', time !== null);
                            $(document).find(`#notifications-label${i+1}`).text(time !== null ? 'Включено' : 'Выключено');
                            const hours = "00" + Math.floor(time / 3600);
                            const minutes = "00" + Math.floor((time % 3600) / 60);
                            $(document).find(`#minutes_to_notify${i+1}`).val(hours.substring(hours.length-2) + minutes.substring(minutes.length-2));
                        }
                    }                    
                },
                error: function (xhr, status, error) {
                    $('.modal-info').addClass('modal-info-active');                    
                    console.error(xhr.responseJSON);
                },
            });
        });

        $('.dateInput').inputmask('99-99-9999', {
            autoUnmask: false,
            showMaskOnHover: false
        });

        $('.timeInput').inputmask('99:99', {
            autoUnmask: false,
            showMaskOnHover: false
        });
    });

    function deleteImage(targetModal, photoName) {
        const routeDeletePhoto = "{{ route('tasks.photo.delete', ':imageName') }}".replace(':imageName', photoName);
        try {
            fetch(routeDeletePhoto, {
                method: 'DELETE',
            });
        } catch (e) {
            console.error(e);
        }

        $(targetModal).find('.attach-content').find('.field').find('.attached-documents').remove();
        $(targetModal).find('#doc_file').attr('disabled', false);
    }
</script>