@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.add')</h4>
                        </div>
                        <div class="card-body">
                            <form id="ruleForm_0"
                                action="{{ route('web.rules.store') }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <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 lang="en" type="number" class="form-control" required 
                                                placeholder="@lang('user.rule_priority')" id="priority" name="priority">
                                        </div>
                                        <span class="text-danger" id="error-priority-0"></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"
                                                placeholder="@lang('user.rule_name')" id="name" name="name" required>
                                        </div>
                                        <span class="text-danger" id="error-name-0"></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" required></textarea>
                                        </div>
                                        <span class="text-danger" id="error-description-0"></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">
                                                <option value="1">Whatsapp</option>
                                                <option value="2">Messenger</option>
                                                <option value="3">Instagram</option>
                                            </select>
                                            <span class="text-danger" id="error-channel-0"></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">
                                            <span class="text-danger" id="error-conditions"></span>
                                            <!-- Container to hold the dynamic boxes -->
                                            <div id="box-container-0"></div>

                                            <!-- Custom dropdown to select box type -->
                                            <div class="custom-dropdown" id="box-type-dropdown-0"
                                                onclick="toggleDropdown(0)">
                                                <span><i class="fas fa-plus"></i> @lang('user.add_condition')</span>
                                                <div class="dropdown-content" id="box-type-options-0">
                                                    @foreach (App\Models\Rule::$types as $key => $value)
                                                        @foreach ($value as $key2 => $value2)
                                                            <p
                                                                onclick="selectBoxType('{{ $key2 }}',0,0)">
                                                                {{ $value2 }}</p>
                                                        @endforeach
                                                    @endforeach
                                                </div>
                                            </div>
                                            <input type="hidden" id="box-type-0">
                                        </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">
                                            <span class="text-danger" id="error-actions"></span>
                                            <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">Team</option>
                                                        <option value="agent">Agent</option>
                                                        <option value="add_tag">Add Tag</option>
                                                        <option value="remove_tag">Remove Tag</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">@lang('user.create')</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]);
                        }
                    }else{
                        if (response.responseJSON.conditions) {
                            $('#error-conditions').text(response.responseJSON.conditions);
                        }

                        if (response.responseJSON.actions) {
                            $('#error-actions').text(response.responseJSON.actions);
                        }
                        
                    }
                },
                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>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[${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');
                        console.log('asd', selectedOptionName);
                        $mainDropdown.find('option[value="' + selectedOptionName + '"]').prop(
                            'disabled', false);
                        $mainDropdown.trigger('change.select2');
                        $container.remove();
                    });
                }
            });
        });
    </script>
@endsection