@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;
}
.remove-row {
  margin-top: 0;
  height: 30px;
}
</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> --}}

                    <div class="assign-rows-container">
                    <div class="row pl-20 pr-20 pb-10 assign-row">

                        <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>

                                </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>

                                <x-forms.input-group>
                                    <select class="form-control select-picker pr-2 service-select" data-live-search="true" name="service_id[]"
                                        data-size="8" id="add-protection-service" title="{{ __('Select a Service') }}">
                                        @foreach ($task->project->serviceOrder->items as $item)
                                            <option
                                                data-content="{{ $item->item_name }}"
                                                value="{{ $item->product_id }}" @if($task->taskUsers[0]->service_id == $item->product_id) selected="selected" @endif>
                                                {{ $item->item_name }}
                                            </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 category-select" name="category_id[]" id="employee_category"
                                    data-live-search="true">
                                    <option value="">--</option>
                                    @foreach ($employeeCategories as $category)

                                        <option value="{{ $category->id }}" @if($task->taskUsers[0]->category_id == $category->id) selected="selected" @endif>{{ $category->name }}</option>
                                    @endforeach
                                </select>

                            </x-forms.input-group> <input type="hidden" name="row_index[]" id="row_index" value="0" >
                        </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>
                                <x-forms.input-group>
                                    <select class="form-control  multiple-users user-select" multiple
                                        name="user_id[0][]"
                                        id="selectAssignee" data-live-search="true" data-size="8">
                                        @foreach ($employees as $employee)
                                            @php
                                                $selected = '';
                                            @endphp
                                              @if (isset($service_user_summary['users']) &&array_key_exists($task->taskUsers[0]->service_id, $service_user_summary['category'] ) )
                                              @if(in_array($employee->id,$service_user_summary['users'][$task->taskUsers[0]->service_id]))
                                                  @php
                                                      $selected = 'selected';
                                                  @endphp
                                              @endif
                                              @endif
                                            <x-user-option :user="$employee" :pill=true :selected="$selected" />
                                        @endforeach
                                    </select>

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

                    </div>
                     </div> {{--end assign rows --}}



                <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() {

        $('#add-row-btn').click(function() {
            // Get a unique index for the new row
            let rowIndex = $('.assign-row').length;
            let rowIndexIncr = rowIndex+1;
            // Create the HTML for a new row
            let newRowHtml = `
            <div class="row pl-20 pr-20 pb-10 assign-row">
                <div class="col-md-3 product-category-filter">
                    <div class="form-group c-inv-select my-3">
                        <x-forms.label fieldId="services-${rowIndex}" fieldLabel="Service">
                        </x-forms.label>
                        <x-forms.input-group>
                            <select class="form-control select-picker service-select pr-2" data-live-search="true" name="service_id[${rowIndex}]"
                                data-size="8" id="add-protection-service-${rowIndex}" title="Select a Service">
                                ${$('#add-protection-service option').clone().wrapAll('<div>').parent().html()}
                            </select>
                        </x-forms.input-group>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <x-forms.label class="my-3" fieldId="category_id-${rowIndex}" fieldLabel="Department" fieldRequired="true">
                    </x-forms.label>
                    <x-forms.input-group>
                        <select class="form-control select-picker" name="category_id[${rowIndex}]" id="employee_category-${rowIndex}"
                            data-live-search="true">
                            <option value="">--</option>
                            ${$('#employee_category option').clone().wrapAll('<div>').parent().html()}
                        </select>
                    </x-forms.input-group> <input type="hidden" name="row_index[]" id="row_index" value="${rowIndex}" >
                </div>
                <div class="col-md-4 col-lg-3">
                    <div class="form-group my-3">
                        <x-forms.label fieldId="selectAssignee-${rowIndex}" fieldLabel="Assign To">
                        </x-forms.label>
                        <x-forms.input-group>
                            <select class="form-control multiple-users user-select" multiple
                                name="user_id[${rowIndex}][]"
                                id="selectAssignee-${rowIndex}" data-live-search="true" data-size="8">
                                ${$('#selectAssignee option').clone().wrapAll('<div>').parent().html()}
                            </select>
                        </x-forms.input-group>
                    </div>
                </div>
                <div class="col-md-1 col-lg-1">
                    <div class="form-group my-3 d-flex align-items-center h-100">
                        <button type="button" class="btn btn-danger btn-sm remove-row mt-4" data-row-index="${rowIndex}">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>`;

            // Append the new row
            $('.assign-rows-container').append(newRowHtml);

            // Initialize selectpickers
            $(`#add-protection-service-${rowIndex}, #employee_category-${rowIndex}`).selectpicker();

            // Initialize multiple select with special options
            $(`#selectAssignee-${rowIndex}`).selectpicker({
                actionsBox: true,
                selectAllText: "Select All",
                deselectAllText: "Deselect All",
                multipleSeparator: " ",
                selectedTextFormat: "count > 8",
                countSelectedText: function(selected, total) {
                    return selected + " members selected";
                }
            });
        });

        // Add event handler for remove button (use event delegation since buttons are added dynamically)
        $(document).on('click', '.remove-row', function() {
            // Get the closest assign-row and remove it
            $(this).closest('.assign-row').remove();

            // Optional: Renumber remaining rows if needed
            renumberRows();
        });

        // Function to renumber rows after removal
        function renumberRows() {
            $('.assign-rows-container .assign-row').each(function(index) {
                // Update input names and IDs if necessary
                let rowIndex = index;

                // Update service select
                let serviceSelect = $(this).find('[id^="add-protection-service-"]');
                if (serviceSelect.length) {
                    serviceSelect.attr('id', 'add-protection-service-' + rowIndex);
                    serviceSelect.attr('name', 'service_id[' + rowIndex + ']');

                    // Get the current service ID
                    let serviceId = serviceSelect.val();

                    // Update user select name based on service ID if available
                    let userSelect = $(this).find('.user-select');
                    if (serviceId) {
                        userSelect.attr('name', 'user_id[' + serviceId + '][]');
                    } else {
                        userSelect.attr('name', 'user_id[' + rowIndex + '][]');
                    }
                }

                // Update department select
                let deptSelect = $(this).find('[id^="employee_category-"]');
                if (deptSelect.length) {
                    deptSelect.attr('id', 'employee_category-' + rowIndex);
                    deptSelect.attr('name', 'category_id[' + rowIndex + ']');
                }

                // Update assignee select ID (name is handled above based on service)
                let assigneeSelect = $(this).find('[id^="selectAssignee-"]');
                if (assigneeSelect.length) {
                    assigneeSelect.attr('id', 'selectAssignee-' + rowIndex);
                }

                // Update remove button data attribute
                $(this).find('.remove-row').attr('data-row-index', rowIndex);
            });
        }
        // $('#add-row-btn').click(function() {
        //     console.log('Add row button clicked');

        //     let container = $('.assign-rows-container');
        //     console.log('Container:', container);

        //     let rowCount = container.children('.assign-row').length;
        //     console.log('Row count:', rowCount);

        //     if (rowCount > 0) {
        //         let newRow = container.children('.assign-row').first().clone();
        //         console.log('Cloned row:', newRow);

        //         newRow.find('select').each(function() {
        //             console.log('Resetting select field:', $(this));
        //             $(this).val('');
        //             $(this).selectpicker('destroy');
        //         });

        //         newRow.find('select.service-select').attr('id', 'add-protection-service-' + rowCount).attr('name', 'service_id[]');
        //         newRow.find('select.category-select').attr('id', 'employee_category-' + rowCount).attr('name', 'category_id[]');
        //         newRow.find('select.user-select').attr('id', 'selectAssignee-' + rowCount).attr('name', 'user_id[' + rowCount + '][]');

        //         console.log('Updated select fields:', newRow.find('select'));

        //         newRow.find('select').selectpicker();
        //         console.log('Reinitialized selectpicker');

        //         container.append(newRow);
        //         console.log('Appended cloned row to container');
        //     } else {
        //         console.log('No rows to clone');
        //     }
        // });

        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
            });
        });

        $('body').on('click', '.remove-assign-row', function() {
            var id = $(this).data('row-index');
            Swal.fire({
                title: "@lang('messages.sweetAlertTitle')",
                text: "@lang('messages.recoverRecord')",
                icon: 'warning',
                showCancelButton: true,
                focusConfirm: false,
                confirmButtonText: "@lang('messages.confirmDelete')",
                cancelButtonText: "@lang('app.cancel')",
                customClass: {
                    confirmButton: 'btn btn-primary mr-3',
                    cancelButton: 'btn btn-secondary'
                },
                showClass: {
                    popup: 'swal2-noanimation',
                    backdrop: 'swal2-noanimation'
                },
                buttonsStyling: false
            }).then((result) => {
                if (result.isConfirmed) {
                    var url = "{{ route('tasks.delete-task-users', ':id') }}";
                    url = url.replace(':id', id);

                    var token = "{{ csrf_token() }}";

                    $.easyAjax({
                        type: 'POST',
                        url: url,

                        data: {
                            '_token': token,
                            '_method': 'DELETE'
                        },
                        success: function(response) {
                            if (response.status == "success") {
                                location.reload();
                            }
                        }
                    });
                }
            });
        });
        $(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>