@extends('web.layouts.app')
@section('content')
    <div class="main-chat-container w-100 ml-md-5 overflow-hidden">
        <div class="p-3 p-lg-4 border-top mb-0 main-chat-container-in">
            <a class="nav-link" style="margin-bottom: 15px;font-size: larger;" href="{{ route('web.rules.index') }}">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div class="card">
                        <div class="card-header" style="display: flex;justify-content: space-between;">
                            <h4 class="card-title">@lang('user.edit')</h4>
                        </div>
                        <div class="card-body">
                            <form id="ruleForm_{{ $rule->id }}"
                                action="{{ route('web.rules.update', ['rule' => $rule->id]) }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <div class="modal-body">

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="priority" class="form-label">@lang('user.rule_priority')</label>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" value="{{ $rule->priority }}"
                                                placeholder="@lang('user.rule_priority')" id="priority" name="priority">
                                        </div>
                                        <span class="text-danger" id="error-priority-{{ $rule->id }}"></span>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="name" class="form-label">@lang('user.rule_name')</label>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" value="{{ $rule->name }}"
                                                placeholder="@lang('user.rule_name')" id="name" name="name">
                                        </div>
                                        <span class="text-danger" id="error-name-{{ $rule->id }}"></span>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="name" class="form-label">@lang('user.rule_description')
                                                (@lang('user.optional'))</label>
                                        </div>
                                        <div class="col-md-6">
                                            <textarea type="text" class="form-control" placeholder="@lang('user.rule_description')" name="description">{{ $rule->description }}</textarea>
                                        </div>
                                        <span class="text-danger" id="error-description-{{ $rule->id }}"></span>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label class="form-label">@lang('user.channel')</label>
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-control select2" name="channel">
                                                @if ($rule->channel == 1)
                                                    <option value="1">Whatsapp</option>
                                                @elseif($rule->channel == 2)
                                                    <option value="2">Messenger</option>
                                                @elseif($rule->channel == 3)
                                                    <option value="3">Instagram</option>
                                                @endif
                                            </select>
                                            <span class="text-danger" id="error-channel-{{ $rule->id }}"></span>
                                        </div>
                                    </div>

                                    <div class="container row mb-3">
                                        <div class="col-md-6">
                                            <h2>@lang('user.conditions')</h2>
                                            <p>@lang('user.conditions_des')</p>
                                        </div>
                                        <div class="col-md-6">
                                            <!-- Container to hold the dynamic boxes -->
                                            <div id="box-container-{{ $rule->id }}">
                                                @php
                                                    $childIndex = 0;
                                                    $parentIndex = 0;
                                                @endphp
                                                @if($conditionsArray)
                                                    @foreach ($conditionsArray as $innerKey => $innerValue)
                                                        <div class="condition-box container my-3 p-3 bg-light">
                                                            @foreach ($innerValue as $subArray)
                                                                <div class="form-box container my-3 p-3 bg-light">
                                                                    <span class="remove-box remove-btn"
                                                                        onclick="removeBox(this)"><i
                                                                            class="fas fa-times"></i></span>
                                                                    <h5>{{ $subArray['type'] }}</h5>
                                                                    <div class="form-group">
                                                                        <input type="hidden"
                                                                            name="conditions[{{ $parentIndex }}][{{ $childIndex }}][type]"
                                                                            value="{{ $subArray['type'] }}">
                                                                        <select required
                                                                            name="conditions[{{ $parentIndex }}][{{ $childIndex }}][condition]"
                                                                            class="form-control">
                                                                            <option value="" disabled selected>Select Type
                                                                            </option>
                                                                            @foreach (App\Models\Condition::$conditions as $key => $value)
                                                                                <option value="{{ $key }}"
                                                                                    {{ $subArray['condition'] == $key ? 'selected' : '' }}>
                                                                                    {{ $value }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <input type="text" required
                                                                            placeholder="Enter text..."
                                                                            value="{{ $subArray['value'] }}"
                                                                            name="conditions[{{ $parentIndex }}][{{ $childIndex }}][value]"
                                                                            class="form-control">
                                                                    </div>
                                                                    <span class="and-text"><span
                                                                            class="and-text-in">OR</span></span>
                                                                </div>
                                                                @php $childIndex++;  @endphp
                                                            @endforeach
                                                            <div class="dropdown-content"
                                                                id="child-options{{ $parentIndex }}-{{ $rule->id }}">
                                                                @foreach (App\Models\Rule::$types as $key => $value)
                                                                    @foreach ($value as $key2 => $value2)
                                                                        <p
                                                                            onclick="addAnotherBox('{{ $key2 }}', '{{ $key2 }}', '{{ $parentIndex }}',{{ $rule->id }},{{ $childIndex }})">
                                                                            {{ $value2 }}</p>
                                                                    @endforeach
                                                                @endforeach
                                                            </div>

                                                            <div class="add-another"
                                                                onclick="showBoxTypeOptions('{{ $parentIndex }}',{{ $rule->id }})">
                                                                <i class="fas fa-plus"></i> @lang('user.add_condition')
                                                            </div>
                                                        </div>
                                                        @php
                                                            $parentIndex++;
                                                            $childIndex = 0;
                                                        @endphp
                                                        <span class="and-text"><span class="and-text-in">@lang('user.add')</span></span>
                                                    @endforeach
                                                @endif
                                            </div>

                                            <!-- Custom dropdown to select box type -->
                                            <div class="custom-dropdown" id="box-type-dropdown-{{ $rule->id }}"
                                                onclick="toggleDropdown({{ $rule->id }})">
                                                <span><i class="fas fa-plus"></i> @lang('user.add_condition')</span>
                                                <div class="dropdown-content" id="box-type-options-{{ $rule->id }}">
                                                    @foreach (App\Models\Rule::$types as $key => $value)
                                                        @foreach ($value as $key2 => $value2)
                                                            <p
                                                                onclick="selectBoxType('{{ $key2 }}',{{ $rule->id }},{{ $parentIndex }})">
                                                                {{ $value2 }}</p>
                                                        @endforeach
                                                    @endforeach
                                                </div>
                                            </div>
                                            <input type="hidden" id="box-type-{{ $rule->id }}">
                                        </div>
                                    </div>
                                    <div class="container row mb-3">
                                        <div class="col-md-6">
                                            <h2>@lang('user.actions')</h2>
                                            <p>@lang('user.action_des')</p>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="action-mian">
                                                <!-- Container for the dynamic dropdown -->
                                                <div id="dynamic-container"></div>
                                                <!-- The initial dropdown -->
                                                <div class="dropdownMain-action">
                                                    <select id="main-dropdown" class="form-select">
                                                        <option selected>@lang('user.select') ...</option>
                                                        <option value="team">@lang('user.team')</option>
                                                        <option value="agent">@lang('user.agent')</option>
                                                        <option value="add_tag">@lang('user.add_tag')</option>
                                                        <option value="remove_tag">@lang('user.remove_tag')</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">@lang('user.edit')</button>
                                    {{-- <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">@lang('user.cancel')</button> --}}
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-form-pane main-chat-note fade show active" id="pills-note" role="tabpanel"
        aria-labelledby="pills-note-tab">
        <div class="px-4 ">
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>
                        @lang('notes.rules_note')
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection
@php
    $types = json_encode(App\Models\Rule::$types);
@endphp
@section('script')
    <script>
        var i = 0;
        var j = 0;

        $('form[id^="ruleForm_"]').on('submit', function(e) {
            e.preventDefault();
            // Show loader
            document.querySelector('.loader').style.display = 'inline-block';
            document.querySelector('#loader-overlay').style.display = 'block';
            var formId = $(this).attr('id');
            var ruleId = formId.split('_')[1];

            // Clear previous errors
            $('#' + formId + ' .form-control').removeClass('is-invalid');
            $('#' + formId + ' .text-danger').text('');

            var formData = new FormData(this);
            // Display form data in console
            for (var pair of formData.entries()) {
                console.log(pair[0] + ': ' + pair[1]);
            }
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                success: function(response) {
                    window.location.href = response.redirect;
                },
                error: function(response) {
                    console.log('Error:', response);
                    if (response.status === 422) {
                        let errors = response.responseJSON.errors;
                        for (const [key, value] of Object.entries(errors)) {
                            // Add red border and show error message
                            $('#' + formId + ' [name="' + key + '"]').addClass(
                                'is-invalid');
                            $('#error-' + key + '-' + ruleId).text(value[0]);
                        }
                    }
                },
                 complete: function() {
                    document.querySelector('.loader').style.display = 'none';
                    document.querySelector('#loader-overlay').style.display = 'none';
                },
                cache: false,
                contentType: false,
                processData: false
            });
        });

        function toggleDropdown(modelId) {
            var dropdownContent = document.getElementById('box-type-options-' + modelId);
            dropdownContent.style.display = (dropdownContent.style.display === 'block') ? 'none' : 'block';
        }

        function selectBoxType(boxType, modelId, parentIndex) {
            if (parentIndex) {

                i = parentIndex;
            }

            var newBox = document.createElement('div');
            newBox.classList.add('condition-box', 'container', 'my-3', 'p-3', 'bg-light');
            var types = {!! $types !!};
            var boxTitle;
            // Loop through the outer array
            for (var outerKey in types) {
                if (types.hasOwnProperty(outerKey)) {
                    var innerObject = types[outerKey];
                    for (var innerKey in innerObject) {
                        if (innerObject.hasOwnProperty(innerKey)) {
                            if (innerKey == boxType) {
                                boxTitle = innerObject[innerKey];
                            }
                        }
                    }
                }
            }

            newBox.innerHTML = `
            <span class="and-text"><span class="and-text-in">And</span></span>

                <div class="form-box container my-3 p-3 bg-light">
                    <span class="remove-box" onclick="removeBox(this)"><i class="fas fa-times"></i></span>
                    <h5>${boxTitle}</h5>
                    <div class="form-group">
                        <input type="hidden" name="conditions[${i}][${j}][type]" value="${boxType}">
                        <select  name="conditions[${i}][${j}][condition]" required class="form-control">
                            <option value="" disabled selected>Select Type</option>
                            @foreach (App\Models\Condition::$conditions as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <input type="text" required placeholder ="Enter text..." name="conditions[${i}][${j}][value]" class="form-control">
                    </div>
                    </div>
                    <div class="dropdown-content" id="child-options${i}-${modelId}">
                        @foreach (App\Models\Rule::$types as $key => $value)
                        @foreach ($value as $key2 => $value2)
                        <p onclick="addAnotherBox('${boxType}', '{{ $key2 }}', '${i}',${modelId})">{{ $value2 }}</p>
                        @endforeach
                        @endforeach 
                    </div>
                    
                    <div class="add-another" onclick="showBoxTypeOptions('${i}',${modelId})">
                        <i class="fas fa-plus"></i> @lang('user.add_condition')
                    </div>
                </div>
            `;


            i++;
            document.getElementById('box-container-' + modelId).appendChild(newBox);
        }

        function addAnotherBox(parentType, childType, parentIndex, modelId, childIndex = null) {
            var parentBox = event.target.closest('.condition-box');
            var newBoxType = childType;
            if (childIndex) {

                j = childIndex - 1;
            }
            j++;
            var newBox = document.createElement('div');
            newBox.classList.add('form-box', 'container', 'my-3', 'p-3', 'bg-light');
            var types = {!! $types !!};
            var boxTitle;
            // Loop through the outer array
            for (var outerKey in types) {
                if (types.hasOwnProperty(outerKey)) {
                    var innerObject = types[outerKey];
                    for (var innerKey in innerObject) {
                        if (innerObject.hasOwnProperty(innerKey)) {
                            if (innerKey == newBoxType) {
                                boxTitle = innerObject[innerKey];
                            }
                        }
                    }
                }
            }

            newBox.innerHTML = `
                <span class="remove-box" onclick="removeBox(this)"><i class="fas fa-times"></i></span>
                <h5>${boxTitle}</h5>
                <div class="form-group">
                    <input type="hidden" name="conditions[${parentIndex}][${j}][type]" value="${newBoxType}">
                    <select name="conditions[${parentIndex}][${j}][condition]" required class="form-control">
                        <option value="" disabled selected>@lang('user.select')</option>
                        @foreach (App\Models\Condition::$conditions as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <input type="text" required placeholder ="@lang('user.enter')..." name="conditions[${parentIndex}][${j}][value]" class="form-control">
                    </div>
                    <span class="and-text"><span class="and-text-in">OR</span></span>
                    `;


            // Find the target dropdown-content element
            var targetDropdown = parentBox.querySelector(`#child-options${parentIndex}-${modelId}`);

            if (targetDropdown) {
                // Insert the new box before the dropdown-content
                parentBox.insertBefore(newBox, targetDropdown);
            } else {
                // If target dropdown is not found, append it to the parentBox
                parentBox.appendChild(newBox);
            }
            showBoxTypeOptions(parentIndex, modelId);

        }

        function showBoxTypeOptions(parentIndex, modelId) {
            var childOptions = document.getElementById(`child-options${parentIndex}-${modelId}`);
            childOptions.style.display = (childOptions.style.display === 'block') ? 'none' : 'block';
        }

        function removeBox(element) {
            var boxToRemove = element.parentNode;
            boxToRemove.parentNode.removeChild(boxToRemove);
            j--;
        }

        $(document).ready(function() {

           
            var $mainDropdown = $('#main-dropdown').select2({
                placeholder: "Select an option...",
                allowClear: true,
                width: 'resolve'
            });

            $mainDropdown.on('change', function() {
                var selectedOption = $(this).val();
                if (selectedOption === 'team' || selectedOption === 'agent') {
                    var $newSelect = $(`<select required name="actions[${selectedOption}]" ></select>`)
                        .addClass(
                            'rule-select');
                    var $removeButton = $(
                        `<button type="button" data-selectedOptionName="${selectedOption}" ><i class="fas fa-times"></i></button>`
                    ).addClass('remove-btn');
                    var $andText = $('<span class="and-text"><span class="and-text-in">And</span></span>');
                    var $container = $('<div></div>').addClass('dropdown-container');
                    $container.append($newSelect).append($removeButton).append($andText);
                    $('#dynamic-container').append($container);
                    if (selectedOption) {
                        $mainDropdown.find('option[value="' + selectedOption + '"]').prop('disabled', true);
                    }
                    $mainDropdown.trigger('change.select2');

                    $newSelect.select2({
                        placeholder: `Select a ${selectedOption}...`,
                        // minimumInputLength: 1,
                        allowClear: true,
                        ajax: {
                            url: '/getDropdownData/' + selectedOption,
                            type: 'GET',
                            dataType: 'json',
                            delay: 250, // Delay in milliseconds before the request is sent
                            data: function(params) {
                                return {
                                    q: params.term, // Search term
                                };
                            },
                            processResults: function(data) {
                                return {
                                    results: $.map(data, function(item) {
                                        return {
                                            id: item.id,
                                            text: item.name
                                        };
                                    })
                                };
                            },
                        },
                    });

                    $removeButton.on('click', function() {
                        let enableSelect = $(this).attr('data-selectedOptionName');
                        $mainDropdown.find('option[value="' + enableSelect + '"]').prop('disabled',
                            false);
                        $mainDropdown.trigger('change.select2');
                        $container.remove();
                    });
                } else if (selectedOption === 'add_tag' || selectedOption === 'remove_tag') {
                    var $newSelect = $(
                            `<select required name="actions[${selectedOption}][]" multiple="multiple" ></select>`
                        )
                        .addClass('rule-select');
                    var $removeButton = $(
                        `<button type="button" data-selectedOptionName="${selectedOption}" ><i class="fas fa-times"></i></button>`
                    ).addClass('remove-btn');;
                    var $andText = $('<span class="and-text"><span class="and-text-in">And</span></span>');
                    var $container = $('<div></div>').addClass('dropdown-container');
                    $container.append($newSelect).append($removeButton).append($andText);
                    $('#dynamic-container').append($container);
                    if (selectedOption) {
                        $mainDropdown.find('option[value="' + selectedOption + '"]').prop('disabled', true);
                    }
                    $mainDropdown.trigger('change.select2');
                    $newSelect.select2({
                        placeholder: `Select a ${selectedOption}...`,
                        allowClear: true,
                        tags: true,
                        tokenSeparators: [',', ' '],
                        ajax: {
                            url: '/getDropdownData/' + selectedOption,
                            type: 'GET',
                            dataType: 'json',
                            delay: 250, // Delay in milliseconds before the request is sent
                            data: function(params) {
                                return {
                                    q: params.term, // Search term
                                };
                            },
                            processResults: function(data) {
                                return {
                                    results: $.map(data, function(item) {
                                        return {
                                            id: item.id,
                                            text: item.name
                                        };
                                    })
                                };
                            },
                        },
                    });
                    
                    $removeButton.on('click', function() {
                        var selectedOptionName = $(this).attr('data-selectedOptionName');
                        $mainDropdown.find('option[value="' + selectedOptionName + '"]').prop(
                            'disabled', false);
                        $mainDropdown.trigger('change.select2');
                        $container.remove();
                    });

                    
                }
            });


            // Assume you have fetched your stored data and stored it in a variable called 'storedDataJson'
            var storedDataJson = {!! json_encode($rule->actions ? $rule->actions->action : null) !!};
            // Function to fetch names corresponding to the IDs
            function fetchNames(option, ids, callback) {
                // Make an AJAX request to your Laravel backend to fetch the names
                $.ajax({
                    url: '/fetch-names', // Replace this with your actual route
                    method: 'GET',
                    data: {
                        option: option,
                        ids: ids
                    },
                    success: function(response) {
                        callback(response);
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            }

            // Parse the stored data JSON
            var storedDataObj = JSON.parse(storedDataJson);

            // Iterate through each option in storedDataObj
            Object.keys(storedDataObj).forEach(function(option) {
                var ids = storedDataObj[option];
                // Check if ids is an array
                if (option === 'add_tag' || option === 'remove_tag') {
                    var $newSelect = createTagDropdown(option);
                    // Fetch names corresponding to each ID
                    ids.forEach(function(id) {
                        fetchNames(option, id, function(name) {
                            var selectedValues = {
                                id: parseInt(id),
                                name: id
                            };

                            // If name is an object with a single key-value pair, extract the value
                            if (typeof name === 'object' && Object.keys(name).length === 1) {
                                selectedValues.name = name[Object.keys(name)[0]];
                            }

                            console.log(selectedValues);
                            // Set the selected values for the tag dropdown
                            var option = new Option(selectedValues.name, selectedValues.id, true, true);
                            $newSelect.append(option).trigger('change');
                            
                                
                        });
                    });
                } else if (option === 'team' || option === 'agent') {
                    // If ids is not an array, it's a single ID
                    // Fetch names corresponding to the single ID
                    fetchNames(option, ids, function(name) {
                        var selectedValues = {
                            id: parseInt(ids),
                            name: name
                        };

                        // If name is an object with a single key-value pair, extract the value
                        if (typeof name === 'object' && Object.keys(name).length === 1) {
                            selectedValues.name = name[Object.keys(name)[0]];
                        }

                        createDropdown(option, selectedValues.name, selectedValues.id);
                            
                    });
                }
            });


            // Function to create a dropdown with selected value(s)
            function createDropdown(selectedOption, selectedName, selectedID) {
                var $newSelect = $(`<select required name="actions[${selectedOption}]" ></select>`).addClass(
                    'rule-select');
                var $removeButton = $(
                    `<button type="button" data-selectedOptionName="${selectedOption}" ><i class="fas fa-times"></i></button>`
                ).addClass('remove-btn');
                var $andText = $('<span class="and-text"><span class="and-text-in">And</span></span>');
                var $container = $('<div><label>' + selectedOption + '</label></div>').addClass('dropdown-container');
                $container.append($newSelect).append($removeButton).append($andText);
                $('#dynamic-container').append($container);

                if (selectedOption) {
                    $mainDropdown.find('option[value="' + selectedOption + '"]').prop('disabled', true);
                }

                $newSelect.select2({
                    placeholder: `Select a ${selectedOption}...`,
                    allowClear: true,
                    ajax: {
                        url: '/getDropdownData/' + selectedOption,
                        type: 'GET',
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: $.map(data, function(item) {
                                    return {
                                        id: item.id,
                                        text: item.name
                                    };
                                })
                            };
                        },
                    },
                });

                // Set the selected value for the dropdown
                // $newSelect.val([selectedValue]).trigger('change.select2');

                var option = new Option(selectedName, selectedID, true, true);
                $newSelect.append(option).trigger('change');

                $removeButton.on('click', function() {
                    let enableSelect = $(this).attr('data-selectedOptionName');
                    $mainDropdown.find('option[value="' + enableSelect + '"]').prop('disabled', false);
                    $mainDropdown.trigger('change.select2');
                    $container.remove();
                });
            }



            function createTagDropdown(selectedOption) {
                var $newSelect = $(
                        `<select required name="actions[${selectedOption}][]" multiple="multiple"></select>`)
                    .addClass('rule-select');
                var $removeButton = $(
                    `<button type="button" data-selectedOptionName="${selectedOption}" ><i class="fas fa-times"></i></button>`
                ).addClass('remove-btn');
                var $andText = $('<span class="and-text"><span class="and-text-in">And</span></span>');
                var $container = $('<div><label>' + selectedOption + '</label></div>').addClass('dropdown-container');
                $container.append($newSelect).append($removeButton).append($andText);
                $('#dynamic-container').append($container);

                if (selectedOption) {
                    $mainDropdown.find('option[value="' + selectedOption + '"]').prop('disabled', true);
                }

                $newSelect.select2({
                    placeholder: `Select a ${selectedOption}...`,
                    allowClear: true,
                    tags: true,
                    tokenSeparators: [',', ' '],
                    ajax: {
                        url: '/getDropdownData/' + selectedOption,
                        type: 'GET',
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: $.map(data, function(item) {
                                    return {
                                        id: item.id,
                                        text: item.name
                                    };
                                })
                            };
                        },
                    },
                });

                $removeButton.on('click', function() {
                    var selectedOptionName = $(this).attr('data-selectedOptionName');
                    $mainDropdown.find('option[value="' + selectedOptionName + '"]').prop('disabled',
                        false);
                    $mainDropdown.trigger('change.select2');
                    $container.remove();
                });

                return $newSelect;
            }


            // Button to add a new dropdown
            $('#addNewDropdownBtn').on('click', function() {
                // Add a new dropdown when the "Add New Dropdown" button is clicked
                createDropdown('new_dropdown_' + new Date().getTime(), '');
            });
        });
    </script>
@endsection