@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.broadcasts.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">
                            <h4 class="card-title">@lang('user.view_broadcast')</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <fieldset>
                                    <!--Step1  -->
                                    <div id="step1" class="step active">
                                        <h3>@lang('user.broadcast_details')</h3>
                                        <small class="form-text text-muted">@lang('user.broadcast_name_des')</small>
                                        <div class="row mt-3">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="Broadcast-name">@lang('user.name')</label>
                                                    <input type="text" value="{{ $broadcast->name }}" class="form-control" readonly>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="Broadcast-Language">@lang('user.language')</label>
                                                    <input type="text" value="{{$broadcast->lang }}"
                                                    class="form-control" id="Broadcast-name" readonly>
                                                
                                                </div>
                                            </div>
                                            <div class="col-md-12 mt-4">
                                                <div class="form-check">
                                                    <input readonly type="checkbox" {{$broadcast->conversion_tracking == 1?'checked':''}} class="form-check-input"
                                                        name="conversion_tracking" id="exampleCheck1" onclick="return false;">
                                                    <label class="form-check-label" for="exampleCheck1">
                                                        @lang('user.conversion_tracking')<small class="form-text text-muted"> (@lang('user.conversion_des'))</small> </label>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>

                                    <!-- Step2 -->
                                    <div id="step2" class="mt-3">
                                        <h2>@lang('user.recipients')</h2>
                                        <div id="send_to_main" class="send_to_container bg-success">
                                            <h3>@lang('user.sent_to')</h3>
                                            <h5 class="  text-white mb-3 ">@lang('user.recipients_des')</h5>
                                            <div class="count_data_Recipients"> 
                                                <span class="recipients_txt">@lang('user.recipients')</span>
                                                <span class="count_send_to">{{$broadcast->contacts()->wherePivot('send',1)->count() + $broadcast->tags()->wherePivot('send',1)->count()}}</span>
                                                @foreach ($broadcast->contacts()->wherePivot('send',1)->get() as $contact)
                                                    <span class="contact">
                                                        <i class="fas"></i>{{(empty($contact->first_name) && empty($contact->last_name)) ? $contact->mobile : ($contact->first_name . ' ' . $contact->last_name) }}
                                                    </span>
                                                @endforeach
                                                @foreach ($broadcast->tags()->wherePivot('send',1)->get() as $tag)
                                                    <span class="tag">
                                                        <i class="fas"></i>{{$tag->name}}
                                                    </span>
                                                @endforeach
                                            </div>
                                            <div class="count_data_not_Recipients">
                                                <span class="recipients_txt">@lang('user.recipients')</span>
                                                <span class="count_send_to">{{$broadcast->contacts()->wherePivot('send',0)->count() + $broadcast->tags()->wherePivot('send',0)->count()}}</span>
                                                @foreach ($broadcast->contacts()->wherePivot('send',0)->get() as $contact)
                                                    <span class="contact">
                                                        <i class="fas"></i>{{(empty($contact->first_name) && empty($contact->last_name)) ? $contact->mobile : ($contact->first_name . ' ' . $contact->last_name) }}
                                                    </span>
                                                @endforeach
                                                @foreach ($broadcast->tags()->wherePivot('send',0)->get() as $tag)
                                                    <span class="tag">
                                                        <i class="fas"></i>{{$tag->name}}
                                                    </span>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Step3 -->
                                    <div id="step3" class="mt-3">
                                        <hr>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>@lang('user.schedule_date')</label>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="input-group date" id="datetimepicker1"
                                                    data-target-input="nearest">
                                                    <input type="date" value="{{date('Y-m-d', strtotime($broadcast->schedule_date))}}" name="schedule_date"
                                                        class="form-control" disabled />
                                                </div>
                                            </div>
                                        </div>
                                </fieldset>
                            </div>
                        </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 ">
            <ul id="templates-view">
                <li class="template-result template-result-{{ $broadcast->template->id }}" data-templateid="{{ $broadcast->template->id }}" data-category="{{ $broadcast->template->category_name }}" data-language="{{ $broadcast->template->lang }}" data-body="{{ $broadcast->template->body }}" data-media="{{ $broadcast->template->media_type }}">
                    <h3 class="template-name">{{ $broadcast->template->name }}</h3>
                    <span class="template-title">{{ $broadcast->template->title }}</span>
                    @if ($broadcast->template->media_type == 1)
                        <div class="media_type media_type_{{ $broadcast->template->media_type_name }}">
                            @if(isset($broadcast->file))
                                <img style="width: 300px;height: 121px;" src="{{asset('storage/'.$broadcast->file->path)}}">
                            @endif
                        </div>
                    @endif
                    <p class="template-body">
                        @php
                            $string = $broadcast->template->body;
                        @endphp
                        @if($broadcast->template->body_sample)
                            @foreach (json_decode($broadcast->template->body_sample) as $index => $value)
                                @if ($index == 'buttons')
                                    @continue
                                @endif
                                @php
                                    $placeholder = '{{' . ($index + 1) . '}}';
                                    $string = str_replace($placeholder, $value,$string);
                                @endphp
                            @endforeach
                        @endif
                        {{$string}}
                     </p>
                    @if ($broadcast->template->buttons)
                        <div class="buttons-container">
                            @foreach (json_decode($broadcast->template->buttons) as $button)
                                @if ($button)
                                    @if ($button->type === 'PHONE_NUMBER')
                                        <button class="btn btn-primary btn-PHONE_NUMBER">{{ $button->text }}</button>
                                    @elseif ($button->type === 'URL')
                                        <a href="javascript:void(0)" class="btn btn-primary btn-URL">{{ $button->text ?? 'Visit' }}</a>
                                    @elseif ($button->type === 'QUICK_REPLY')
                                        <a href="javascript:void(0)" class="btn btn-primary btn-URL">{{ $button->text ?? 'Visit' }}</a>
                                    @elseif ($button->type === 'otp')
                                        <a href="javascript:void(0)" class="btn btn-primary btn-URL">{{ $button->text ?? 'Visit' }}</a>
                                    @endif
                                @endif
                            @endforeach
                        </div>
                    @endif
                </li>
            </ul>
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>
                        @lang('notes.broadcasts_note')
                    </p>
                </div>
            </div>
        </div>
    </div>
    <style>
        #templates-results .media_type.media_type_image::after, #templates-view .media_type.media_type_image::after{
            content: '';
        }
    </style>
@endsection
@section('script')
    <script>
        $(document).ready(function() {

            function handleFileUpload(event) {
                var file = event.target.files[0];
                var reader = new FileReader();

                reader.onload = function(e) {
                    var mediaDiv = $('#templates-view .template-result.templateSelected .media_type');
                    var mediaType = getFileType(file.type); // Determine the type of media
                    console.log(mediaType);
                    // Clear previous content in the media div
                    mediaDiv.empty();

                    // Display the uploaded media based on its type
                    if (mediaType === 'image') {
                        var image = $('<img>').attr('src', e.target.result);
                        // image.css({'width': '200px', 'height': '200px'}); // Set size to 200px by 200px
                        mediaDiv.append(image);
                    } else if (mediaType === 'video') {
                        var video = $('<video>').attr('controls', '').append(
                            $('<source>').attr('src', e.target.result).attr('type', file.type));
                        video.css({
                            'width': '100$',
                            'height': '121px'
                        }); // Set size to 200px by 200px
                        mediaDiv.append(video);
                    }
                    // Update the background color of media_type to unset
                    // mediaDiv.css('background-color', 'unset');
                    // Remove the icon represented by ::after pseudo-element
                    mediaDiv.removeClass('media_type_' + mediaType).removeClass('media_type').addClass(
                        'media-preview');
                };

                reader.readAsDataURL(file);
            }

            function getFileType(mimeType) {
                if (mimeType.startsWith('image/')) {
                    return 'image';
                } else if (mimeType.startsWith('video/')) {
                    return 'video';
                } else {
                    return 'other';
                }
            }
            $(document).on('change', 'input[type=file]', handleFileUpload);


            $.get('{{ url('/api/fetch-template-data') }}', function(templates) {
                const apiResults = $('#templates-results');
                templates.forEach(item => {
                    const li = $('<li>').addClass('template-result').addClass('template-result-' +
                            item.id)
                        .attr('data-templateid', item.id)
                        .attr('data-category', item.category_name)
                        .attr('data-language', item.lang)
                        .attr('data-body', item.body)
                        .attr('data-media', item.media_type);

                    const name = $('<h3>').addClass('template-name').text(item.name);
                    li.append(name);
                    const title = $('<span>').addClass('template-title').text(item.title);
                    li.append(name);
                    if (item.media_type == 1) {
                        const media_type = $('<div>').addClass('media_type').addClass(
                            'media_type_' + item.media_type_name);
                        li.append(media_type);
                    }

                    const body = $('<p>').addClass('template-body').text(item.body);
                    li.append(body);

                    if (item.buttons) {
                        var alluttons = JSON.parse(item.buttons);
                        const buttonsContainer = $('<div>').addClass('buttons-container');
                        alluttons.forEach(button => {
                            if (button) {
                                if (button.type === 'PHONE_NUMBER') {
                                    const phoneNumberButton = $('<button>').addClass(
                                        'btn btn-primary btn-PHONE_NUMBER').text(button
                                        .phone_number);
                                    buttonsContainer.append(phoneNumberButton);
                                } else if (button.type === 'URL') {
                                    const urlButton = $('<a>').addClass(
                                        'btn btn-primary btn-URL').attr('href', button
                                        .url).text(button.text || 'Visit');
                                    buttonsContainer.append(urlButton);
                                }
                                li.append(buttonsContainer);
                            }
                        });


                    }

                    if(item.id == '{{$broadcast->template_id}}'){
                        li.addClass('templateSelected');
                        // $('#templates-view').append(li);
                    }

                    apiResults.append(li);
                });

                // Filter the templates based on user input

                $('#languageSelect').change(function() {
                    const selectedLanguage = $(this).val();
                    $('#template-search').val('');
                    filterTemplates();
                });


                $('#template-search').on('input', filterTemplates);

                // Filter function
                function filterTemplates() {
                    const searchTerm = $('#template-search').val().toLowerCase();
                    const selectedLanguage = $('#languageSelect').val();
                    $('.template-result').hide();
                    if (!searchTerm && !selectedLanguage) {
                        $('.template-result').show();
                        return;
                    }

                    $('.template-result').filter(function() {
                        const templateLang = $(this).data('language');
                        const templateName = $(this).text().toLowerCase();
                        if (selectedLanguage == 'all') {
                            if (templateName.includes(searchTerm)) {
                                return true;
                            }
                        } else {
                            if (templateLang === selectedLanguage && templateName.includes(
                                    searchTerm)) {
                                return true;
                            }
                        }
                        return false;
                    }).show();

                }

                // Function to generate input elements based on placeholders
                function generateVariables(templateBody, templateMedia) {
                    var templateVariables = $('#template-variables');
                    templateVariables.empty(); // Clear previous inputs

                    // Regular expression to match placeholders like {{ 1 }}, {{ 2 }}, etc.
                    var placeholderRegex = /@{{ (\d + ) }}/g;
                    var match;
                    var index = 1;
                    while ((match = placeholderRegex.exec(templateBody)) !== null) {
                        var placeholderIndex = match[1];

                        // Create label
                        var label = $('<label>').text('@{{ ' + index + ' }}');

                        // Create input element
                        var input = $('<input>')
                            .attr('type', 'text')
                            .addClass('form-control')
                            .attr('name', 'template_variable[]')
                            .attr('placeholder', 'Enter value for placeholder ' + placeholderIndex);

                        // Append label and input to templateVariables div
                        templateVariables.append(label, input, $('<br>'));

                        index++;
                    }

                    // Create input file element if templateMedia is not equal to 0
                    if (templateMedia != 0) {
                        // Create label for file input
                        var fileLabel = $('<label>').text('Upload Media File:');

                        // Create file input element
                        var fileInput = $('<input>')
                            .attr('type', 'file')
                            .addClass('form-control')
                            .attr('name', 'file');

                        // Append file label and input to templateVariables div
                        templateVariables.append(fileLabel, fileInput, $('<br>'));
                    }
                }



                $(document).on('click', '.template-result', function() {
                    // Get the template ID from the clicked element's data
                    var templateID = $(this).data('templateid');
                    var templateBody = $(this).data('body');
                    var templateMedia = $(this).data('media');
                    $(this).addClass('templateSelected');
                    $('#template-selected').val(templateID).trigger('change');
                    $('.template-result').not(this).removeClass('templateSelected');
                    // $('.template-result').not(this).hide().removeClass('templateSelected');
                    generateVariables(templateBody, templateMedia);
                    const selectedResults = $('#templates-view');
                    // Clone the selected item
                    var clone = $(this).clone();
                    selectedResults.html(clone);

                });





            }).fail(function() {
                console.error('Error fetching templates:');
            });

            // $('#template-selected').change(function() {
            //     // console.log('template change');

            //     if ($(this).val() != "") {
            //         $('#next1').prop('disabled', false);
            //     } else {
            //         $('#next1').prop('disabled', true);
            //     }
            // });

            // $('#Send_to').change(function() {
            //     // console.log('Send_to change');
            //     if ($(this).val() != "") {
            //         $('#next2').prop('disabled', false);
            //     } else {
            //         $('#next2').prop('disabled', true);
            //     }
            // });

            $('#next1').click(function(event) {
                event.preventDefault();
                $('#step1').removeClass('active');
                $('#step2').addClass('active');
            });

            $('#back1').click(function(event) {
                event.preventDefault();
                $('#step2').removeClass('active');
                $('#step1').addClass('active');
            });

            $('#next2').click(function(event) {
                event.preventDefault();
                $('#step2').removeClass('active');
                $('#step3').addClass('active');
            });

            $('#back2').click(function(event) {
                event.preventDefault();
                $('#step3').removeClass('active');
                $('#step2').addClass('active');
            });


        });


        $(document).ready(function() {
            let tags = [];
            let contacts = [];
            let send_to = {
                tags: [],
                contacts: []
            };
            let currentFilter = 'all'; // 'all', 'tags', 'contacts'

            let sendToData = {}; // Initialize sendToData as an empty object

            // Parse the JSON string if $('#send_to').val() is not empty
            let sendToVal = $('#send_to').val();
            if (sendToVal) {
                sendToData = JSON.parse(sendToVal);
            }

            // Fetch data from the API
            $.getJSON('{{ url('/api/fetch-data') }}', function(data) {
                // Separate and sort data
                data.forEach(function(item) {
                    if (item.type === 'tag') {
                        tags.push(item);
                    } else if (item.type === 'contact') {
                        contacts.push(item);
                    }
                });

                tags.sort(function(a, b) {
                    return a.name.localeCompare(b.name);
                });

                // Initially display all items
                displayItems(tags.concat(contacts));
            });

            function displayItems(items) {
                let container = $('#list-container-send-to');
                container.empty(); // Clear the list

                items.forEach(function(item) {
                    let div = $('<div>').addClass('item').addClass('item-' + item.type).attr('data-id', item
                        .id).attr('data-type', item.type);
                    let nameSpan = $('<span>').addClass('name').text(item.name);
                    let Icon = $('<i>').addClass('fas');
                    let sendToButton = $('<button>').addClass('send-to-btn').text('Send to');
                    let notSendToButton = $('<button>').addClass('not-send-to-btn').text('Not Send to');
                    div.append(Icon, nameSpan, sendToButton, notSendToButton);
                    container.append(div);
                });
            }

            // Search function
            $('#search').on('keyup', function() {
                let searchVal = $(this).val().toLowerCase();
                let filteredList;

                if (currentFilter === 'tags') {
                    filteredList = tags.filter(item => item.name.toLowerCase().includes(searchVal));
                } else if (currentFilter === 'contacts') {
                    filteredList = contacts.filter(item => item.name.toLowerCase().includes(searchVal));
                } else {
                    filteredList = tags.concat(contacts).filter(item => item.name.toLowerCase().includes(
                        searchVal));
                }

                displayItems(filteredList);
            });

            // Filter display items
            function filterItems() {
                let itemsToDisplay;
                if (currentFilter === 'tags') {
                    itemsToDisplay = tags;
                } else if (currentFilter === 'contacts') {
                    itemsToDisplay = contacts;
                } else {
                    itemsToDisplay = tags.concat(contacts);
                }
                displayItems(itemsToDisplay);
            }

            // Filter buttons click event handlers
            $('#filter-tags').on('click', function(event) {
                event.preventDefault();
                currentFilter = 'tags';
                filterItems();
            });
            
            $('#filter-all').on('click', function(event) {
                event.preventDefault();
                currentFilter = 'all';
                filterItems();
            });

            $('#filter-contacts').on('click', function(event) {
                event.preventDefault();
                currentFilter = 'contacts';
                filterItems();
            });

            // Click event to send items to #send_to with send: true
            $('#list-container-send-to').on('click', '.send-to-btn', function(event) {
                event.preventDefault();

                $(this).addClass('selected');
                $(this).siblings('.not-send-to-btn').removeClass('selected');
                let id = $(this).parent().data('id');
                let type = $(this).parent().data('type');
                let newData = {
                    type: type,
                    id: id,
                    send: true
                };
                updateSendToData(newData);
                addToRecipientsList(id, type);

                updateSendToValue();
                // Enable $('#next2')
                $('#next2').prop('disabled', false);
                // console.log($('#send_to').val());
            });

            // Click event to send items to #send_to with send: false
            $('#list-container-send-to').on('click', '.not-send-to-btn', function(event) {
                event.preventDefault();

                $(this).addClass('selected');
                $(this).siblings('.send-to-btn').removeClass('selected');
                let id = $(this).parent().data('id');
                let type = $(this).parent().data('type');
                let newData = {
                    type: type,
                    id: id,
                    send: false
                };
                updateSendToData(newData);
                addToNotRecipientsList(id, type);
                // console.log($('#send_to').val());
                updateSendToValue();
                // Enable $('#next2')
                $('#next2').prop('disabled', false);


            });

            function updateSendToValue() {
                $('#send_to').val(JSON.stringify(send_to)).trigger('change');
            }
            // Function to update send_to data
            function updateSendToData(newData) {
                let index;
                if (newData.type === 'tag') {
                    // console.log('update tag');
                    index = send_to.tags.findIndex(item => item.id === newData.id);
                    if (index !== -1) {
                        send_to.tags.splice(index, 1);
                    }
                    send_to.tags.push(newData);
                    // send_to.tags.push(newData);
                } else if (newData.type === 'contact') {
                    index = send_to.contacts.findIndex(item => item.id === newData.id);
                    if (index !== -1) {
                        send_to.contacts.splice(index, 1);
                    }
                    send_to.contacts.push(newData);
                }
                $('#send_to').val(JSON.stringify(send_to)).trigger('change');
                updateSelectedItemsCount();
            }

            // Function to update count of selected items
            function updateSelectedItemsCount() {
                let selectedData = JSON.parse($('#send_to').val());

                // Filter tags where send is true and false
                let sendTags = selectedData.tags.filter(tag => tag.send);
                let notSendTags = selectedData.tags.filter(tag => !tag.send);

                // Filter contacts where send is true and false
                let sendContacts = selectedData.contacts.filter(contact => contact.send);
                let notSendContacts = selectedData.contacts.filter(contact => !contact.send);

                // Calculate total counts for tags and contacts
                let totalSendCount = sendTags.length + sendContacts.length;
                let totalNotSendCount = notSendTags.length + notSendContacts.length;

                // Update text for count of selected items where send is true and false
                $('.count_send_to').text(totalSendCount);
                $('.count_not_send_to').text(totalNotSendCount);
            }

            // Function to add tag or contact to the recipients list
            function addToRecipientsList(id, type) {
                let item = (type === 'tag') ? tags.find(item => item.id === id) : contacts.find(item => item.id ===
                    id);
                let existingItem = $('.count_data_Recipients').find(`[data-id='${id}'][data-type='${type}']`);
                let NotExistingItem = $('.count_data_not_Recipients').find(
                    `[data-id='${id}'][data-type='${type}']`);
                NotExistingItem.remove();
                if (existingItem.length === 0) {
                    let sendType = true;
                    let span = $('<span>').attr('data-id', id).attr('data-type', type).attr('data-send', sendType)
                        .addClass(type).text(item.name);
                    let removeIcon = $('<i>').addClass('fa fa-times remove-icon');
                    let addIcon = $('<i>').addClass('fas');
                    span.prepend(addIcon);
                    span.append(removeIcon);
                    $('.count_data_Recipients').append(span);
                }
            }

            // Function to remove tag or contact from the recipients list
            function removeFromRecipientsList(id, type) {
                $('.count_data_Recipients').find(`[data-id='${id}'][data-type='${type}']`).remove();
            }

            // Function to add tag or contact to the not recipients list
            function addToNotRecipientsList(id, type) {
                let item = (type === 'tag') ? tags.find(item => item.id === id) : contacts.find(item => item.id ===
                    id);
                let existingItem = $('.count_data_not_Recipients').find(`[data-id='${id}'][data-type='${type}']`);
                let NotExistingItem = $('.count_data_Recipients').find(`[data-id='${id}'][data-type='${type}']`);
                NotExistingItem.remove();

                if (existingItem.length === 0) {
                    let sendType = false;
                    let span = $('<span>').attr('data-id', id).attr('data-type', type).attr('data-send', sendType)
                        .addClass(type).text(item.name);
                    let removeIcon = $('<i>').addClass('fa fa-times remove-icon');
                    let addIcon = $('<i>').addClass('fas');
                    span.prepend(addIcon);
                    span.append(removeIcon);
                    $('.count_data_not_Recipients').append(span);
                }
            }

            // Function to remove tag or contact from the not recipients list
            function removeFromNotRecipientsList(id, type) {
                $('.count_data_not_Recipients').find(`[data-id='${id}'][data-type='${type}']`).remove();
            }

            // Click event to remove tag or contact from the recipients list
            $('.count_data_Recipients').on('click', '.remove-icon', function(event) {
                event.preventDefault();

                let id = $(this).parent().data('id');
                let type = $(this).parent().data('type');
                let sendType = $(this).parent().data('send');
                removeFromRecipientsList(id, type);
                let newData = {
                    type: type,
                    id: id,
                    send: sendType
                };

                // Remove the item from send_to
                let sendToData = JSON.parse($('#send_to').val());
                if (type === 'tag') {
                    send_to.tags = send_to.tags.filter(item => !(item.type == type && item.id == id));
                    // console.log('this tag', send_to.tags);
                } else if (type === 'contact') {
                    send_to.contacts = send_to.contacts.filter(item => !(item.type == type && item.id ==
                        id));
                    // console.log('this contact', send_to.contacts);


                }
                // Stringify the modified object again
                $('#send_to').val(JSON.stringify(send_to)).trigger('change');

                // console.log($('#send_to').val());

                // updateSendToData(newData);
                updateSelectedItemsCount();
                $(this).parent().remove();


                updateSendToValue();
                if ($('#send_to').val().trim() !== "") {
                    $('#next2').prop('disabled', false);
                } else {
                    $('#next2').prop('disabled', true);
                }

                $('#list-container-send-to').find(`[data-id='${id}'][data-type='${type}']`).find(
                    '.send-to-btn').removeClass('selected');
            });

            // Click event to remove tag or contact from the not recipients list
            $('.count_data_not_Recipients').on('click', '.remove-icon', function(event) {
                event.preventDefault();

                let id = $(this).parent().data('id');
                let type = $(this).parent().data('type');
                let sendType = $(this).parent().data('send');

                removeFromNotRecipientsList(id, type);
                let newData = {
                    type: type,
                    id: id,
                    send: sendType
                };


                // Remove the item from send_to
                let sendToData = JSON.parse($('#send_to').val());
                if (type === 'tag') {
                    send_to.tags = send_to.tags.filter(item => !(item.type == type && item.id == id));
                    // console.log('this tag', send_to.tags);
                } else if (type === 'contact') {
                    send_to.contacts = send_to.contacts.filter(item => !(item.type == type && item.id ==
                        id));
                }
                // Stringify the modified object again
                $('#send_to').val(JSON.stringify(send_to)).trigger('change');
                // console.log($('#send_to').val());
                updateSelectedItemsCount();
                // updateSendToData(newData);
                $(this).parent().remove();

                updateSendToValue();
                if ($('#send_to').val().trim() != "" || $('#send_to').val().trim() !=
                    '{"tags":[],"contacts":[]}') {
                    $('#next2').prop('disabled', false);
                } else {
                    $('#next2').prop('disabled', true);
                }

                $('#list-container-send-to').find(`[data-id='${id}'][data-type='${type}']`).find(
                    '.not-send-to-btn').removeClass('selected');
            });

            // Initialize count
            updateSelectedItemsCount();


        });
    </script>
@endsection