@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.new_broadcast') </h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form class="Broadcast-form" id="broadcastForm"
                                    action="{{ route('web.broadcasts.store') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <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" name="name" class="form-control"
                                                            id="Broadcast-name" placeholder=@lang('user.name')>
                                                            <span class="text-danger" id="error-name"></span>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="Broadcast-Language">@lang('user.language')</label>
                                                        <select name="lang" class="form-select select2"
                                                            id="languageSelect">
                                                            <option value="all">@lang('user.all')</option>
                                                            <option value="en_US">English</option>
                                                            <option value="ar">عربي</option>
                                                        </select>
                                                        <span class="text-danger" id="error-lang"></span>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mt-4">
                                                    <div class="form-check">
                                                        <input type="checkbox" value="0" class="form-check-input"
                                                            name="conversion_tracking" id="exampleCheck1">
                                                            <span class="text-danger" id="error-conversion_tracking"></span>
                                                        <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 class="template-main mt-5">
                                                    <div class="row">
                                                        <div class="col">
                                                            <h3>@lang('user.select_template')</h3>
                                                            <small class="form-text text-muted"></small>

                                                        </div>
                                                        <div class="col">
                                                            <div class="input-group mb-3">
                                                                <input type="text" class="form-control"
                                                                    id="template-search" placeholder="Search">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text"><i
                                                                            class="fas fa-search"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="template-results">
                                                            <ul id="templates-results"></ul>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <button id="next1" class="btn btn-primary mt-3" disabled>@lang('user.add_recipients')</button>
                                        </div>

                                        <!-- Step2 -->
                                        <div id="step2" class="step">
                                            <h2>@lang('user.add_recipients')</h2>
                                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link active" id="single-tab" data-bs-toggle="tab"
                                                        data-bs-target="#single" type="button" role="tab"
                                                        aria-controls="single"
                                                        aria-selected="true">@lang('user.single')</button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="multiple-tab" data-bs-toggle="tab"
                                                        data-bs-target="#multiple" type="button" role="tab"
                                                        aria-controls="multiple"
                                                        aria-selected="false">@lang('user.multiple')</button>
                                                </li>
                                            </ul>
                                            <div class="tab-content" id="myTabContent">
                                                <div class="tab-pane fade show active" id="single" role="tabpanel"
                                                    aria-labelledby="single-tab">
                                                    <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">0</span> </div>
                                                        <div class="count_data_not_Recipients"> <span
                                                                class="recipients_txt"> @lang('user.not_send')</span> <span class="count_not_send_to">0</span>
                                                        </div>
                                                        <div class="recipients-container">
                                                            <div id="selected_send_to"></div>
                                                            <input type="text" id="search" class="search_send"
                                                                data-type="send_to"
                                                                placeholder="Search tags...">
                                                            <div class="btn-group" role="group"
                                                                aria-label="Basic example">
                                                                {{-- <button id="filter-all" data-type="send_to"
                                                                    class="filter-btn filter-all btn btn-secondary">@lang('user.all')</button> --}}
                                                                <button id="filter-tags" data-type="send_to"
                                                                    class="filter-btn filter-tags btn btn-secondary active">@lang('user.tags')</button>
                                                                <button id="filter-contacts" data-type="send_to"
                                                                    class="filter-btn filter-contacts btn btn-secondary">@lang('user.contacts')</button>
                                                            </div>
                                                            <div id="list-container-send-to"></div>
                                                        </div>
                                                        <!-- recipients-container -->
                                                    </div>
                                                    <div>
                                                        <button
                                                            class="btn btn-secondary mt-3 back1">@lang('user.back')</button>
                                                        <button id="next2" class="btn btn-primary mt-3">@lang('user.next')</button>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="multiple" role="tabpanel"
                                                    aria-labelledby="multiple-tab">
                                                    <div class="container mt-5">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <!-- Instruction 1 -->
                                                                <div class="d-flex align-items-center mb-3">
                                                                    <div class="flex-grow-1 ms-3">
                                                                        @lang('user.broadcast_file_download')
                                                                    </div>
                                                                    <div class="">
                                                                        <button type="button" id="getSelectedTemplate"
                                                                            class="btn btn-secondary"> @lang('user.download')</button>
                                                                    </div>
                                                                </div>
                                                                <!-- Instruction 2 -->
                                                                <div class="d-flex align-items-center">
                                                                    <div class="flex-grow-1 ms-3"> </div>
                                                                    <div class="form-group mb-3">
                                                                        <label> @lang('user.upload')</label>
                                                                        <input id="fileInput" type="file" name="import" class="form-control"
                                                                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                                                                        <span class="text-danger d-block" id="error-import"></span>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <label>@lang('user.media')</label>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group mb-3">
                                                                            <div id="multiple-template-variables"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <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">
                                                                            <input  id="multiple-schedule_date" type="datetime-local" class="form-control"
                                                                            value="{{ date('Y-m-d\TH:i') }}"
                                                                            placeholder="{{ __('user.schedule_date') }}" name="schedule_date">
                                                                           
                                                                        </div>
                                                                    </div>
                                                                    <input type="hidden" id="is-multiple" name="multiple" value="1" disabled>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>
                                                        <div>
                                                            <button class="btn btn-secondary mt-3 back1">@lang('user.back')</button>
                                                            <button type="submit" class="btn btn-primary mt-3">@lang('user.submit')</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Step3 -->
                                        <div id="step3" class="step">
                                            <div id="template-variables-box" class="row">
                                                <div class="col-md-6" >
                                                    <label>@lang('user.template_variables')</label>
                                                </div>
                                                <div class="col-md-6">
                                                    <div id="template-variables"></div>
                                                </div>
                                                <br>
                                                <hr>
                                            </div>
                                            <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  id="schedule_date" type="datetime-local" class="form-control"
                                                        value="{{ date('Y-m-d\TH:i') }}"
                                                        placeholder="{{ __('user.schedule_date') }}" name="schedule_date">
                                                    </div>
                                                </div>
                                                <div>
                                                    <button id="back2" class="btn btn-secondary mt-3">@lang('user.back')</button>
                                                    <button type="submit" class="btn btn-primary mt-3">@lang('user.submit')</button>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <input type="hidden" id="send_to" name="recipients">
                                    <input type="hidden" name="template_id" id="template-selected">
                                </form>
                            </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"></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>
        /* CSS for dropdown menu */
        .dropdown {
          position: relative;
          display: block;
        }
       
        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f9f9f9;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
        }
        
        .dropdown-content a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
        }
        
        .dropdown-content a:hover {
          background-color: #f1f1f1;
        }
        
        .dropdown.open .dropdown-content {
          display: block;
        }
        
        .dropdown .dropbtn {
            background-color: #f7f7ff;
            cursor: pointer;
            border: none;
            padding: 8px 12px;
            width: 100%;
        }
        .template-header{
            text-align: center;
            padding: 10px;
        }
        .template-footer{
            text-align: center;
            padding: 10px;
        }
        </style>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" integrity="sha512-r22gChDnGvBylk90+2e/ycr3RVrDi8DIOkIGNhJlKfuyQM4tIRAI062MaV8sfjQKYVGjOBaZBOA87z+IhZE9DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

@section('script')
    <script>
        var i = 0;
        var j = 0;
        $('#broadcastForm').on('submit', function(e) {
            e.preventDefault();

            // Show loader
            document.querySelector('.loader').style.display = 'inline-block';
            document.querySelector('#loader-overlay').style.display = 'block';
            // Clear previous errors
            $('.form-control').removeClass('is-invalid');
            $('.text-danger').text('');

            var formData = new FormData(this);
           
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                success: function(response) {
                    document.querySelector('.loader').style.display = 'none';
                    document.querySelector('#loader-overlay').style.display = 'none';
                    window.location.href = response.redirect;
                },
                error: function(response) {
                    
                    if (response.status === 422) {
                        let errors = response.responseJSON.errors;
                        for (const [key, value] of Object.entries(errors)) {
                            // Check if the value is an array
                            if (Array.isArray(value)) {
                                // If it's an array, iterate over each error message
                                value.forEach(function(errorMessage, index) { 
                                    // Add red border and show error message
                                    $('[name^="' + key + '"]').eq(index)
                                        .addClass('is-invalid');
                                   document.getElementById('error-'+key).textContent = errorMessage;
                                });
                            } else {
                                // Add red border and show error message
                                $(' [name="' + key + '"]').addClass(
                                    'is-invalid');
                                $('#error-' + key ).text(value[0]);
                            }
                        }
                    }
                },
                complete: function() {
                    document.querySelector('.loader').style.display = 'none';
                    document.querySelector('#loader-overlay').style.display = 'none';
                },
                cache: false,
                contentType: false,
                processData: false
            });
        });

        
        $(document).ready(function() {
            
            $(document).on('click', '#multiple-tab', function(){
                $('#next2').prop('disabled', true);
                $('#next2').hide();
                $('#is-multiple').prop('disabled', false);
                $('#schedule_date').prop('disabled', true);
                $('#multiple-schedule_date').prop('disabled', false);
                $('.template_variable').prop('disabled', true);
                $('#send_to').prop('disabled', true);
            });

            $(document).on('click', '#single-tab', function(){
                $('#next2').prop('disabled', false);
                $('#next2').show();
                $('#is-multiple').prop('disabled', true);
                $('#schedule_date').prop('disabled', false);
                $('#multiple-schedule_date').prop('disabled', true);
                $('.template_variable').prop('disabled', false);
                $('#send_to').prop('disabled', false);
            });

             // Bind to Bootstrap's tab shown event
            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
                var selectedTabId = e.target.getAttribute('aria-controls');
                if (selectedTabId === 'multiple') {
                    // Disable inputs in single tab
                    $('#single input').prop('disabled', true);
                    $('#multiple input').prop('disabled', false);
                } else if (selectedTabId === 'single') {
                    // Disable inputs in multiple tab
                    $('#multiple input').prop('disabled', true);
                    $('#single input').prop('disabled', false);
                }
            });
            
            // Bind to Bootstrap's tab hide event
            $('a[data-bs-toggle="tab"]').on('hide.bs.tab', function (e) {
                var hiddenTabId = e.target.getAttribute('aria-controls');
                if (hiddenTabId === 'multiple') {
                    // Enable inputs in single tab when hiding multiple tab
                    $('#single input').prop('disabled', false);
                } else if (hiddenTabId === 'single') {
                    // Enable inputs in multiple tab when hiding single tab
                    $('#multiple input').prop('disabled', false);
                }
            });

            // Define s2ab function
            function s2ab(s) {
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i < s.length; i++) {
                    view[i] = s.charCodeAt(i) & 0xFF;
                }
                return buf;
            }

            $(document).on('click', '#getSelectedTemplate', function(){
                var templateID = $('#template-selected').val();
                var token = $('meta[name="csrf-token"]').attr('content'); // Get CSRF token from meta tag

                $.ajax({
                    url: "{{ url('fetch-template-data') }}", // Adjust the URL to your backend route
                    method: 'GET',
                    data:{
                        template_id:templateID,
                        business_id: "{{ $business->id }}"
                    },
                    success: function(response) {
                        let $template = response; // Assuming your backend returns the template object
                        let string = $template.body;
                        let pattern = /\{\{\d+\}\}/g;
                        let matches = string.match(pattern);
                        let numberOfMatches = matches ? matches.length : 0;
                        // Now you can work with the template data

                         // Create a new workbook
                        var workbook = XLSX.utils.book_new();
                        var header = [];
                        var data = [];
                        var $columnA='(Must have country code as shown) WhatsApp Number';
                        header.push($columnA);
                        data.push("919586538447")
                        
                        var $columnB = '';
                        if ($template['media_type'] == 1) {
                            $columnB = '@{{1}}-Paste Link to IMAGE file';
                        } else if($template['media_type'] == 2) {
                            $columnB = '@{{1}}-Paste Link to VIDEO file';
                        } else if ($template['media_type'] == 3) {
                            $columnB = '@{{1}}-Paste Link to DOCUMENT file';
                        }
                        
                        var start = 1;
                        //if ($template['media_type'] != 0) {
                        //    header.push($columnB);
                        //    numberOfMatches++;
                        //    start = 2;
                        //    data.push("DATA FOR @{{1}}")
                        //}
                        
                        for (var i = start; i <= numberOfMatches; i++) {
                            header.push("@{{" + i + "}} Fill in variable (required)")
                            data.push("DATA FOR @{{"+i+"}}")
                        }
                        // Add a worksheet
                        var worksheet = XLSX.utils.aoa_to_sheet([
                            header,
                            data
                        ]);
                        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

                        // Generate Excel file in binary form
                        var excelFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });

                        // Convert binary Excel data to a Blob
                        var blob = new Blob([s2ab(excelFile)], { type: 'application/octet-stream' });

                        // Get the current time in seconds
                        var currentTime = Math.floor(Date.now() / 1000);

                        // Create the file name using the current time
                        var fileName = 'broadcast_' + currentTime + '.xlsx';

                        // Create a download link and trigger the download
                        var link = document.createElement('a');
                        link.href = URL.createObjectURL(blob);
                        link.download = fileName;
                        link.click();
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        // Handle errors
                    }
                });

               
            });


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

            // Function to toggle dropdown
            function toggleDropdown(clickedElement) {
                if (!event.target.matches('.dropdown')) {
                                var dropdowns = document.getElementsByClassName("dropdown");
                                for (var i = 0; i < dropdowns.length; i++) {
                                var openDropdown = dropdowns[i];
                                if (openDropdown.classList.contains('open')) {
                                    openDropdown.classList.remove('open');
                                }
                                }
                            }
                var dropdown = $(clickedElement).closest('.dropdown');
                $(dropdown).toggleClass('open');
            }

            // Function to add item to the input value
            function addItem(id,item, dropdown) {
                var input = $(dropdown).find('.dropbtn');
                input.val(item);
                var heddinInput = $(dropdown).find('.drophidden');
                heddinInput.val(id);
            }

            $(document).on('click', '.dropdown-content a', function() {
                var id = $(this).attr('id');
                var item = $(this).text();
                var dropdown = $(this).closest('.dropdown');
                addItem(id,item, dropdown);
            });

            // Close the dropdown menu if the user clicks outside of it
            $(document).on('click', function(event) {
                if (!event.target.matches('.dropdown')) {
                    var dropdowns = document.getElementsByClassName("dropdown");
                    for (var i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('open')) {
                        openDropdown.classList.remove('open');
                    }
                    }
                }
            });
            var businessId = {!! auth()->check() && auth()->user()->businesses->count() > 0 ? auth()->user()->businesses[0]->id : 'null' !!};

            $.get('{{ url('/api/fetch-template-data') }}', { business_id: businessId }, 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-body_sample', item.body_sample)
                        .attr('data-media', item.media_type);

                    const header = $('<h3>').addClass('template-header').text(item.title);
                    li.append(header);

                    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').html(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 type="button">').addClass(
                                        'btn btn-primary btn-PHONE_NUMBER').text(button
                                        .text);
                                    buttonsContainer.append(phoneNumberButton);
                                } else if (button.type === 'URL') {
                                    const urlButton = $('<a>').addClass(
                                        'btn btn-primary btn-URL').attr('href', 'javascript:void(0);').text(button.text || 'Visit');
                                    buttonsContainer.append(urlButton);
                                }
                                li.append(buttonsContainer);
                            }
                        });


                    }
                    const footer = $('<h3>').addClass('template-footer').text(item.footer);
                    li.append(footer);
                    apiResults.append(li);
                });

                // Filter the templates based on user input

                $('#languageSelect').change(function() {
                    const selectedLanguage = $(this).val();
                    console.log(selectedLanguage);
                    $('#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) {
                    //     $('.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,templateBodySample) {
                    var templateVariables = $('#template-variables');
                    var multipleTemplateVariables = $('#multiple-template-variables');
                    templateVariables.empty(); // Clear previous inputs
                    multipleTemplateVariables.empty();
                    // Regular expression to match placeholders like {{ 1 }}, {{ 2 }}, etc.
                    var placeholderRegex = /@{{(\d+)}}/g;
                    var match;
                    var index = 1;
                    var j=0;
                    while ((match = placeholderRegex.exec(templateBody)) !== null) {
                        var placeholderIndex = match[1];
                        
                        // Create label
                        var label = $('<label>').text('@{{ ' + index + ' }}');

                        // Create dropdown container div
                        var dropdownContainer = $('<div>').addClass('dropdown');

                        // Create input field for the dropdown
                        var inputField = $('<input>')
                            .attr('type', 'text')
                            .addClass('dropbtn')
                            .attr('name', 'template_variable[]')
                            .attr('autocomplete', 'off')
                            .attr('placeholder', "{{__('user.dropdown')}}")
                            .on('click', function(event) {
                                toggleDropdown(this);
                                event.stopPropagation();
                            });

                            // var heddinInputField = $('<input>')
                            // .attr('type', 'hidden')
                            // .addClass('drophidden template_variable')
                            // .attr('name', 'template_variable[]');
                            
                            var errorSpan = $('<span>')
                                .addClass('text-danger')
                                .attr('id', 'error-template_variable.'+j);

                        // Create dropdown content div
                        var dropdownContent = $('<div>').addClass('dropdown-content');

                        // Add dropdown items
                       
                        var options = [
                            '@{{customer.name}}',
                            '@{{customer.first_name}}',
                            '@{{customer.last_name}}',
                            '@{{customer.email}}',
                            '@{{customer.phone}}'
                        ];

                        // Add dropdown items
                        for (var i = 0; i < options.length; i++) {
                            var optionText = options[i];
                            dropdownContent.append($('<a>').text(optionText).attr('href', '#').attr('id', i));
                        }

                        // Append input field and dropdown content to dropdown container
                        dropdownContainer.append(label);
                        dropdownContainer.append(inputField, dropdownContent);
                        // dropdownContainer.append(heddinInputField, dropdownContent);
                        dropdownContainer.append(errorSpan);
                        // Append dropdown container to templateVariables div
                        templateVariables.append(dropdownContainer, $('<br>'));


                        index++;
                        j++;
                    }

                    // 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');
                        var mediaInput = $('<input>')
                            .attr('type', 'hidden')
                            .attr('value', templateMedia)
                            .addClass('form-control')
                            .attr('name', 'media_type');
                        var errorSpan = $('<span>')
                                .addClass('text-danger')
                                .attr('id', 'error-file');

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

                        // Create file input element
                        var fileInput = $('<input>')
                            .attr('type', 'file')
                            .addClass('form-control')
                            .attr('name', 'multiple-file');
                        var errorSpan = $('<span>')
                                .addClass('text-danger')
                                .attr('id', 'error-multiple-file');

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


                        console.log(templateMedia);
                    }
                    if(typeof templateBodySample === 'undefined' && templateMedia == 0 || templateBodySample === null && templateMedia == 0){
                        $('#template-variables-box').css('display', 'none');
                        $('#multiple-template-variables').css('display', 'none');
                    }else{
                        $('#template-variables-box').css('display', 'flex');
                        $('#multiple-template-variables').css('display', 'block');
                    }
                }

               

                $(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');
                    var templateBodySample = $(this).data('body_sample');
                    $(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,templateBodySample);
                    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() {
                if ($(this).val() != "" & $('#Broadcast-name').val() != "") {
                    $('#next1').prop('disabled', false);
                } else {
                    $('#next1').prop('disabled', true);
                }
            });

            $('#Broadcast-name').keyup(function() {
                if ($(this).val() != "" & $('#template-selected').val() != "") {
                    $('#next1').prop('disabled', false);
                } else {
                    $('#next1').prop('disabled', true);
                }
            });


            $('#Send_to').change(function() {
                
                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');
            });



        // Function to convert binary string to ArrayBuffer
        function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i < s.length; i++) {
                view[i] = s.charCodeAt(i) & 0xFF;
            }
            return buf;
        }


            let tags = [];
            let contacts = [];
            let all = [];
            let send_to = {
                tags: [],
                contacts: [],
                all: []
            };
            let currentFilter = 'tags'; // 'all', 'tags', 'contacts'
            let hasMoreTags = false;

            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') }}', { business_id: businessId, type: 'tags' },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);
                });

                if (tags.length == 100) {
                    hasMoreTags = true;
                }

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

            function displayItems(items) {
                let container = $('#list-container-send-to');
                container.empty(); // Clear the list
                let div = $('<div>').addClass('item').addClass('item-all').attr('data-id',0).attr('data-type', 'all');
                let nameSpan = $('<span>').addClass('name').text("{{__('user.all')}}");
                let Icon = $('<i>').addClass('fas');
                let sendToButton = $('<button>').addClass('send-to-btn').text("{{__('user.send_to_all')}}");
                div.append(Icon, nameSpan, sendToButton);
                container.append(div);
                
                if (currentFilter === 'contacts' && items.length == 0) {
                    div.append('<div class="alert alert-warning mt-2 text-center"><b>{{__('user.serach_to_get_contacts')}}</b></div>');
                } else if (currentFilter === 'tags' && hasMoreTags) {
                    div.prepend('<div class="alert alert-warning mt-2 text-center"><b>{{__('user.serach_to_get_tags')}}</b></div>');
                }

                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("{{__('user.send_to')}}");
                    let notSendToButton = $('<button>').addClass('not-send-to-btn').text("{{__('user.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') {
                    if (hasMoreTags) {
                        if (searchVal.length > 3) {
                            $.getJSON('{{ url('/api/search-tags') }}', { business_id: businessId, keyword: searchVal },function(data) {
                                let filteredTags = [];
                                data.forEach(function(item) {
                                    filteredTags.push(item);
                                    tags.push(item);
                                });
                                
                                filteredTags.sort(function(a, b) {
                                    return a.name.localeCompare(b.name);
                                });

                                filteredList = filteredTags;
                                displayItems(filteredList);
                            });
                        } else if (searchVal.length == 0) {
                            filteredList = tags;
                            displayItems(filteredList);
                        }
                    } else {
                        filteredList = tags.filter(item => item.name.toLowerCase().includes(searchVal));
                        displayItems(filteredList);
                    }
                } else if (currentFilter === 'contacts' && searchVal.length > 3) {
                    $.getJSON('{{ url('/api/search-contacts') }}', { business_id: businessId, keyword: searchVal },function(data) {
                        // Separate and sort data
                        let filteredContacts = [];
                        data.forEach(function(item) {
                            filteredContacts.push(item);
                            contacts.push(item);
                        });

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

                        filteredList = filteredContacts;

                        displayItems(filteredList);
                    });
                    // 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';
                $('.filter-btn').removeClass('active');
                $(this).addClass('active');
                $('#search').attr('placeholder', 'Search tags...');
                $('#search').val('');
                filterItems();
            });

            $('#filter-all').on('click', function(event) {
                event.preventDefault();
                currentFilter = 'all';
                $('.filter-btn').removeClass('active');
                $(this).addClass('active');
                filterItems();
            });

            $('#filter-contacts').on('click', function(event) {
                event.preventDefault();
                currentFilter = 'contacts';
                $('.filter-btn').removeClass('active');
                $(this).addClass('active');
                $('#search').attr('placeholder', 'Search contacts...');
                $('#search').val('');
                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
                };
                addToRecipientsList(id, type);
                updateSendToData(newData);

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

            // 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
                };
                addToNotRecipientsList(id, type);
                updateSendToData(newData);
                
                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') {
                    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);
                }else if(newData.type === 'all'){
                    send_to.all = [1];
                }
               
                $('#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;
                
                totalSendCount = $('.count_data_Recipients').children().length - 2;
                totalNotSendCount = $('.count_data_not_Recipients').children().length - 2;
                /*if(selectedData.all.length > 0){
                    totalSendCount += 1;
                }*/

                // 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 = {}; // Initialize item as an empty object
                if (type === 'tag') {
                    item = tags.find(item => item.id === id);
                } else if (type === 'contact') {
                    item = contacts.find(item => item.id === id);
                } else {
                    item['name'] = "All"; // Set a default value for 'name' property when 'type' is neither 'tag' nor 'contact'
                    type = 'all';
                }
                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();
            }


            if ($('#send_to').val().trim() !== "") {
                    $('#next2').prop('disabled', false);
                } else {
                    $('#next2').prop('disabled', true);
                }
            // 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));
                } else if (type === 'contact') {
                    send_to.contacts = send_to.contacts.filter(item => !(item.type == type && item.id ==
                        id));
                }else{
                    send_to.all = [];
                }
                
                // Stringify the modified object again
                $('#send_to').val(JSON.stringify(send_to)).trigger('change');

                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));
                } 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');
                updateSelectedItemsCount();
                $(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');
            });

        });
    </script>
@endsection