@extends('web.layouts.app')

@push('styles')
  <link rel="stylesheet" href="{{ asset('web/assets/css/whatsapp-editor.css')}}">
@endpush

@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.quickReplies.index') }}">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div class="card">
                        <div class="card-header" style="display: flex;justify-content: space-between;">
                            <h4 class="card-title">@lang('user.add')</h4>
                        </div>
                        <div class="card-body">
                            <form id="quickRepliesAddForm" action="{{ route('web.quickReplies.store') }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="modal-body">
                                    <fieldset>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('user.short_code')</label>
                                                <input type="text" name="short_code" class="form-control"
                                                    placeholder=@lang('user.short_code')>
                                                <span class="text-danger" id="error-short_code_0"></span>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                            </div>
                                            <div class="col-md-6">
                                                <select class="form-control keywordsselect" name="keywords[]"
                                                    multiple="multiple">
                                                </select>
                                                <span class="text-danger" id="error-keywords_0"></span>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">@lang('user.available_to')</label>
                                                {!! Form::select('available_to', \App\Models\QuickReply::availableToNamesLocalized(), null, [
                                                    'class' => 'form-control availableToSelect',
                                                ]) !!}
                                                <div class="mb-3 teamsDropdown" style="display: none;">
                                                    <label class="form-label">@lang('user.teams')</label>
                                                    <select class="form-control teamsSelect" name="teams[]"
                                                        multiple="multiple">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">
                                                    <h4>@lang('user.body_text')</h4>
                                                    <p>@lang('user.replay_body_description')</p>
                                                </label>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="whatsapp-editor-container">
                                                </div>
                                                <input id="message" name="message" type="hidden">
                                                <span class="text-danger" id="error-message_0"></span>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-6">

                                            </div>
                                            <div class="col-md-6">
                                                <label for="files" class="form-label">
                                                    @lang('user.attachment')
                                                </label>
                                                <div class="form-group row">
                                                    <div id="preview-file-before-upload"></div>
                                                    <input type="file" name="files[]" class="form-control files"
                                                        multiple />
                                                    <span class="text-danger error-file_0"></span>
                                                </div>
                                            </div>
                                        </div>

                                    </fieldset>
                                </div>
                                <div class="modal-footer">

                                    <button type="submit" class="btn btn-success waves-effect">@lang('user.confirm')</button>
                                    <button type="button" class="btn btn-danger waves-effect"
                                        data-bs-dismiss="modal">@lang('user.cancel')</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-form-pane main-chat-note fade show">
        <div class="px-4 ">
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>
                        @lang('notes.quick_replies_note')
                    </p>
                </div>
            </div>
        </div>
    </div>
    @endsection
    @section('script')
        <script type="text/javascript" src="{{ asset('web/assets/js/whatsapp-editor.js') . '?v=' . env('APP_VERSION') }}"></script>
        <script type="text/javascript">
            $(document).ready(function() {
    
                $(".whatsapp-editor-container").each(function(index, element) {
                    $('.whatsapp-editor-container').html('');
                    var currentText = $("#message").val();
                    $(element).whatsappEditor({
                        content: currentText
                    });
                });
    
              
                $('.keywordsselect').select2({
                    tags: true,
                    placeholder: 'Search the keywords',
                    tokenSeparators: [',', ' '],
                });
    
              
                $('.teamsSelect').select2({
                    width: '100%',
                    placeholder: 'Select Teams',
                    ajax: {
                        url: "{{ route('web.fetchTeams') }}",
                        dataType: 'json',
                        processResults: function(data) {
                            return {
                                results: data.map(function(team) {
                                    return {
                                        id: team.id,
                                        text: team.name
                                    };
                                })
                            };
                        }
                    }
                });
    
               

                // Change event listener for availableToSelect dropdown
                $('.availableToSelect').change(function() {
                    var selectedValue = $(this).val();
                    var teamsDropdown = $(this).closest('.row').find('.teamsDropdown');
    
                    if (selectedValue == '2') {
                        teamsDropdown.show();
                    } else {
                        teamsDropdown.hide();
                    }
                });
    
                $('.files').change(function() {
                    for (let i = 0; i < this.files.length; i++) {
                        let reader = new FileReader();
                        let file = this.files[i];
    
                        reader.onload = (e) => {
                            let previewElement;
    
                            if (file.type.startsWith('image/')) {
                                // Display image
                                previewElement = $('<img>').attr('src', e.target.result).attr('width',
                                    '70px').attr('height', '70px');
                            } else if (file.type.startsWith('video/')) {
                                // Display video
                                previewElement = $('<video>').attr('src', e.target.result).attr('width',
                                    '70px').attr('height', '70px').attr('controls', true);
                            } else {
                                // Display PDF
                                previewElement = $('<embed>').attr('src', e.target.result).attr('width',
                                    '70px').attr('height', '70px');
                            }
    
                            $('#preview-file-before-upload').append(previewElement);
                        };
    
                        reader.readAsDataURL(file);
                    }
                });
    
                // remove file
                $(document).on('click', '.removeFile', function() {
                    let id = $(this).attr("data-id");
                    let replay_id = $(this).attr("data-reply_id");
                    $(this).parent().remove();
                    $('#file_' + id + '').remove();
                    $.ajax({
                        type: "POST",
                        url: "{{ route('web.quickReplies.deleteFile') }}",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            file_id: id,
                            replay_id: replay_id
                        }
                    });
                });
    
                $("#quickRepliesAddForm").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 currentText = $(".whatsapp-editor").text();
                    $('#message').val(currentText);
    
                    var formData = new FormData(this);
                    $.ajax({
                        url: $(this).attr('action'),
                        type: 'POST',
                        data: formData,
                        success: function(response) {
                            window.location.href = response.redirect;
                        },
                        error: function(response) {
                            console.log('Error:', response);
                            if (response.status === 422) {
                                let errors = response.responseJSON.errors;
                                for (const [key, value] of Object.entries(errors)) {
                                    // Add red border and show error message
                                    $('#' + formId + ' [name="' + key + '"]').addClass(
                                        'is-invalid');
                                    $('#error-' + key + '_' + quickRepliesId).text(value[0]);
                                }
                            }
                        },
                        complete: function() {
                            document.querySelector('.loader').style.display = 'none';
                            document.querySelector('#loader-overlay').style.display = 'none';
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                });
    
            });
        </script>
    @endsection