@php
    $addTaskCategoryPermission = user()->permission('add_task_category');
    $addEmployeePermission = user()->permission('add_employees');
    $addTaskFilePermission = user()->permission('add_task_files');
    $editTaskPermission = user()->permission('edit_tasks');
    $viewTaskCategoryPermission = user()->permission('view_task_category');
@endphp

<style>
.bootstrap-select>.dropdown-toggle{
    white-space: normal;
}
</style>
<link rel="stylesheet" href="{{ asset('vendor/css/dropzone.min.css') }}">

<div class="row">
    <div class="col-sm-12">
        <x-form id="save-task-data-form" method="POST">
            <div class="add-client bg-white rounded">
                {{-- <h4 class="mb-0 p-20 f-21 font-weight-normal text-capitalize border-bottom-grey">
                    @lang('Assign Technician')</h4> --}}
                @foreach ($task->project->serviceOrder->items as $item1)
                    <div class="row pl-20 pr-20 pb-10">

                        <div class="col-md-12 col-lg-6 d-none">
                            <x-forms.label class="my-3" fieldId="project-id" :fieldLabel="__('app.project')">
                            </x-forms.label>
                            <x-forms.input-group>
                                <select class="form-control select-picker" name="project_id" id="project-id"
                                    data-live-search="true" data-size="8">
                                    <option value="">--</option>
                                    @foreach ($projects as $project)
                                        <option @if ($project->id == $task->project_id) selected @endif
                                            value="{{ $project->id }}">
                                            {{ mb_ucwords($project->project_name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </x-forms.input-group>
                        </div>
                        <div class="col-md-3 product-category-filter">
                            <div class="form-group c-inv-select my-3">
                                <x-forms.label fieldId="services" :fieldLabel="__('Service')">
                                </x-forms.label>
                                <div class="font-weight-bold">
                                    {{ $item1->item_name }} <input id="service_id" name="service_id[]"
                                        value="{{ $item1->product_id }}" type="hidden" /></div>
                                {{-- <x-forms.input-group>

                                    <select class="form-control select-picker pr-2" data-live-search="true"
                                        data-size="8" id="add-protection-service" title="{{ __('Select a Service') }}">
                                        @foreach ($task->project->serviceOrder->items as $item)
                                            <option
                                                data-content="{{ $item->item_name }}{{ $item->unit_price ? ' -/ ' . $item->unit_price : '' }}"
                                                value="{{ $item->id }}">
                                                {{ $item->item_name }}{{ $item->unit_price ? ' -/ ' . $item->unit_price : '' }}
                                            </option>
                                        @endforeach
                                    </select>

                                </x-forms.input-group>  --}}
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <x-forms.label class="my-3" fieldId="category_id" :fieldLabel="__('Department')" fieldRequired="true">
                            </x-forms.label>
                            <x-forms.input-group>
                                <select class="form-control select-picker" name="category_id[]" id="employee_category"
                                    data-live-search="true">
                                    <option value="">--</option>
                                    @foreach ($employeeCategories as $category)
                                        <option value="{{ $category->id }}" @if(isset($service_user_summary['category'])&&$service_user_summary['category'][$item1->product_id] ==$category->id ) selected @endif>{{ $category->name }}</option>
                                    @endforeach
                                </select>

                            </x-forms.input-group>
                        </div>
                        <div class="col-md-4 col-lg-4">
                            <div class="form-group my-3">
                                <x-forms.label fieldId="selectAssignee" :fieldLabel="__('modules.tasks.assignTo')">
                                </x-forms.label>
                                {{-- {{ $item1->id }} --}}
                                <x-forms.input-group>
                                    <select class="form-control  multiple-users" multiple
                                        name="user_id[{{ $item1->product_id }}][]"
                                        id="selectAssignee-{{ $item1->id }}" data-live-search="true" data-size="8">
                                        @foreach ($employees as $employee)
                                            @php
                                                $selected = '';
                                            @endphp

                                            {{-- @foreach ($task->users as $item) --}}
                                                @if (isset($service_user_summary['users']) && in_array($employee->id,$service_user_summary['users'][$item1->product_id]))
                                                    @php
                                                        $selected = 'selected';
                                                    @endphp
                                                @endif
                                            {{-- @endforeach --}}
                                            <x-user-option :user="$employee" :pill=true :selected="$selected" />
                                        @endforeach
                                    </select>

                                </x-forms.input-group>
                            </div>
                        </div>

                    </div>
                @endforeach

                <h4 class="mb-0 p-20 f-21 font-weight-normal text-capitalize border-top-grey  d-none">
                    @lang('modules.client.clientOtherDetails')
                </h4>

                <x-forms.custom-field :fields="$fields" :model="$task"></x-forms.custom-field>

                <x-form-actions>
                    <x-forms.button-primary id="save-task-form" class="mr-3" icon="check">@lang('app.save')
                    </x-forms.button-primary>
                    <x-forms.button-cancel :link="route('tasks.index')" class="border-0">@lang('app.cancel')
                    </x-forms.button-cancel>
                </x-form-actions>

            </div>
        </x-form>

    </div>
</div>

<script src="{{ asset('vendor/jquery/dropzone.min.js') }}"></script>
<script>
    var add_task_files = "{{ $addTaskFilePermission }}";

    $(document).ready(function() {

        let projectId = document.getElementById('project-id').value;

        (projectId != 'all' && projectId != '') ? projectClient(projectId): '';

        $(".select-picker").selectpicker();

        $('.custom-date-picker').each(function(ind, el) {
            datepicker(el, {
                position: 'bl',
                ...datepickerConfig
            });
        });

        $(document).on('change', '#project-id', function() {

            ($(this).val() != '') ? $('#clientDetails').show(): $('#clientDetails').hide();

            let id = $(this).val();
            if (id === '') {
                return '';
            }
            projectClient(id);

        });

        function projectClient(id) {

            let url = "{{ route('tasks.clientDetail') }}";

            $.easyAjax({
                url: url,
                type: "GET",
                data: {
                    id: id,
                },
                success: function(response) {
                    $('#clientDetails').html(response.data);
                }
            });
        }

        if (add_task_files == "all" || add_task_files == "added") {

            Dropzone.autoDiscover = false;
            //Dropzone class
            taskDropzone = new Dropzone("div#task-files-upload-dropzone", {
                dictDefaultMessage: "{{ __('app.dragDrop') }}",
                url: "{{ route('task-files.store') }}",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                paramName: "file",
                maxFilesize: DROPZONE_MAX_FILESIZE,
                maxFiles: DROPZONE_MAX_FILES,
                autoProcessQueue: false,
                uploadMultiple: true,
                addRemoveLinks: true,
                parallelUploads: DROPZONE_MAX_FILES,
                acceptedFiles: DROPZONE_FILE_ALLOW,
                init: function() {
                    taskDropzone = this;
                }
            });
            taskDropzone.on('sending', function(file, xhr, formData) {
                var ids = "{{ $task->id }}";
                formData.append('task_id', ids);
                $.easyBlockUI();
            });
            taskDropzone.on('uploadprogress', function() {
                $.easyBlockUI();
            });
            taskDropzone.on('queuecomplete', function() {
                var msgs = "@lang('messages.recordSaved')";
                window.location.href = "{{ route('tasks.index') }}"
            });
            taskDropzone.on('removedfile', function() {
                var grp = $('div#file-upload-dropzone').closest(".form-group");
                var label = $('div#file-upload-box').siblings("label");
                $(grp).removeClass("has-error");
                $(label).removeClass("is-invalid");
            });
            taskDropzone.on('error', function(file, message) {
                taskDropzone.removeFile(file);
                var grp = $('div#file-upload-dropzone').closest(".form-group");
                var label = $('div#file-upload-box').siblings("label");
                $(grp).find(".help-block").remove();
                var helpBlockContainer = $(grp);

                if (helpBlockContainer.length == 0) {
                    helpBlockContainer = $(grp);
                }

                helpBlockContainer.append('<div class="help-block invalid-feedback">' + message +
                    '</div>');
                $(grp).addClass("has-error");
                $(label).addClass("is-invalid");

            });
        }

        @foreach ($task->project->serviceOrder->items as $item1)
            $("#selectAssignee-" + {{ $item1->id }}).selectpicker({
                actionsBox: true,
                selectAllText: "{{ __('modules.permission.selectAll') }}",
                deselectAllText: "{{ __('modules.permission.deselectAll') }}",
                multipleSeparator: " ",
                selectedTextFormat: "count > 8",
                countSelectedText: function(selected, total) {
                    return selected + " {{ __('app.membersSelected') }} ";
                }
            });
        @endforeach

        // $("#selectAssignee").selectpicker({
        //     actionsBox: true,
        //     selectAllText: "{{ __('modules.permission.selectAll') }}",
        //     deselectAllText: "{{ __('modules.permission.deselectAll') }}",
        //     multipleSeparator: " ",
        //     selectedTextFormat: "count > 8",
        //     countSelectedText: function(selected, total) {
        //         return selected + " {{ __('app.membersSelected') }} ";
        //     }
        // });
        // $("#selectAssignee20").selectpicker({
        //     actionsBox: true,
        //     selectAllText: "{{ __('modules.permission.selectAll') }}",
        //     deselectAllText: "{{ __('modules.permission.deselectAll') }}",
        //     multipleSeparator: " ",
        //     selectedTextFormat: "count > 8",
        //     countSelectedText: function(selected, total) {
        //         return selected + " {{ __('app.membersSelected') }} ";
        //     }
        // });


        const atValues = @json($userData);

        //quillMention(atValues, '#description');


        $('#save-task-form').click(function() {
            //var note = document.getElementById('description').children[0].innerHTML;

            //document.getElementById('description-text').value = note;
            // var usesr = $('#description span[data-id]').map(function() {
            //     return $(this).attr('data-id')
            // }).get();

            //var mention_user_id = $.makeArray(usesr);
            //$('#mentionUserId').val(mention_user_id.join(','));

            var taskData = $('#save-task-data-form').serialize();

            //var data = taskData += '&mention_user_id=' + mention_user_id;
            var data = taskData;
            const url = "{{ route('tasks.assign-technician-save', $task->id) }}";

            $.easyAjax({
                url: url,
                container: '#save-task-data-form',
                type: "POST",
                disableButton: true,
                blockUI: true,
                file: true,
                buttonSelector: "#save-task-form",
                data: data,
                success: function(response) {
                    if ((add_task_files == "all" || add_task_files == "added") &&
                        taskDropzone.getQueuedFiles().length > 0) {
                        taskDropzone.processQueue();
                    } else if ($(RIGHT_MODAL).hasClass('in')) {
                        document.getElementById('close-task-detail').click();
                        if ($('#allTasks-table').length) {
                            window.LaravelDataTables["allTasks-table"].draw(false);
                        } else {
                            window.location.href = response.redirectUrl;
                        }
                    } else {
                        window.location.href = response.redirectUrl;
                    }

                }
            });
        });

        $('#create_task_category').click(function() {
            const url = "{{ route('taskCategory.create') }}";
            $(MODAL_LG + ' ' + MODAL_HEADING).html('...');
            $.ajaxModal(MODAL_LG, url);
        });

        $('#department-setting').click(function() {
            const url = "{{ route('departments.create') }}";
            $(MODAL_LG + ' ' + MODAL_HEADING).html('...');
            $.ajaxModal(MODAL_LG, url);
        });

        $('#client_view_task').change(function() {
            $('#clientNotification').toggleClass('d-none');
        });

        $('#without_duedate').click(function() {
            $('.dueDateBox').toggle();
        });

        $('#set_time_estimate').change(function() {
            $('#set-time-estimate-fields').toggleClass('d-none');
        });

        $('#repeat-task').change(function() {
            $('#repeat-fields').toggleClass('d-none');
        });

        $('#dependent-task').change(function() {
            $('#dependent-fields').toggleClass('d-none');
        });


        $('#project-id').change(function() {
            var id = $(this).val();
            if (id == '') {
                id = 0;
            }
            var url = "{{ route('milestones.by_project', ':id') }}";
            url = url.replace(':id', id);

            $.easyAjax({
                url: url,
                container: '#save-task-data-form',
                type: "GET",
                blockUI: true,
                success: function(response) {
                    if (response.status == 'success') {
                        $('#milestone-id').html(response.data);
                        $('#milestone-id').selectpicker('refresh');
                    }
                }
            });
        });

        $('#project-id').change(function() {
            let id = $(this).val();
            if (id === '') {
                id = 0;
            }
            let url = "{{ route('projects.members', ':id') }}";
            url = url.replace(':id', id);
            $.easyAjax({
                url: url,
                type: "GET",
                container: '#save-task-data-form',
                blockUI: true,
                redirect: true,
                success: function(data) {
                    $('#selectAssignee').html(data.data);
                    $('.projectId').text(data.unique_id);
                    $('#selectAssignee').selectpicker('refresh');
                }
            })
        });

        $('#project-id').change(function() {
            let id = $(this).val();
            if (id === '') {
                id = 0;
            }
            let url = "{{ route('tasks.project_tasks', ':id') }}";
            url = url.replace(':id', id);
            $.easyAjax({
                url: url,
                type: "GET",
                container: '#save-task-data-form',
                blockUI: true,
                redirect: true,
                success: function(data) {
                    $('#dependent_task_id').html(data.data);
                    $('.projectId').text(data.unique_id);
                    $('#dependent_task_id').selectpicker('refresh');
                }
            })
        });

        $('#save-task-data-form').on('change', '#project_id', function() {
            let id = $(this).val();
            if (id === '') {
                id = 0;
            }
            let url = "{{ route('projects.labels', ':id') }}";
            url = url.replace(':id', id);
            $.easyAjax({
                url: url,
                type: "GET",
                container: '#save-task-data-form',
                blockUI: true,
                redirect: true,
                success: function(data) {
                    var atValues = data.userData;
                    // destory_editor('#description')
                    // quillMention(atValues, '#description');
                    $('#task_labels').html(data.data);
                    $('#task_labels').selectpicker('refresh');
                }
            })
        });


        $('#createTaskLabel').click(function() {
            const url = "{{ route('task-label.create') }}?task_id={{ $task->id }}";
            $(MODAL_XL + ' ' + MODAL_HEADING).html('...');
            $.ajaxModal(MODAL_XL, url);
        });

        $('#add-project').click(function() {
            $(MODAL_XL).modal('show');

            const url = "{{ route('projects.create') }}";

            $.easyAjax({
                url: url,
                blockUI: true,
                container: MODAL_XL,
                success: function(response) {
                    if (response.status == "success") {
                        $(MODAL_XL + ' .modal-body').html(response.html);
                        $(MODAL_XL + ' .modal-title').html(response.title);
                        init(MODAL_XL);
                    }
                }
            });
        });

        $('#add-employee').click(function() {
            $(MODAL_XL).modal('show');

            const url = "{{ route('employees.create') }}";

            $.easyAjax({
                url: url,
                blockUI: true,
                container: MODAL_XL,
                success: function(response) {
                    if (response.status == "success") {
                        $(MODAL_XL + ' .modal-body').html(response.html);
                        $(MODAL_XL + ' .modal-title').html(response.title);
                        init(MODAL_XL);
                    }
                }
            });
        });

        init(RIGHT_MODAL);
    });

    function checkboxChange(parentClass, id) {
        var checkedData = '';
        $('.' + parentClass).find("input[type= 'checkbox']:checked").each(function() {
            checkedData = (checkedData !== '') ? checkedData + ', ' + $(this).val() : $(this).val();
        });
        $('#' + id).val(checkedData);
    }
</script>