@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">
                            <h4 class="card-title">@lang('user.edit')</h4>
                        </div>
                        <div class="card-body">
                            <form id="quickRepliesEditForm"
                                action="{{ route('quickReplies.update', ['quickReply' => $quickReply]) }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <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"
                                                    value="{{ $quickReply->short_code }}" class="form-control"
                                                    placeholder="short_code">
                                                <span class="text-danger"
                                                    id="error-short_code_{{ $quickReply->id }}"></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.keywords')</label>
                                                <select class="form-control keywordsselect" name="keywords[]"
                                                    multiple="multiple">
                                                    @foreach (explode(',', $quickReply->keywords) as $keyword)
                                                        <option value="{{ $keyword }}" selected>{{ $keyword }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <span class="text-danger" id="error-keywords_{{ $quickReply->id }}"></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',
                                                    ['' => __('user.select')] + \App\Models\QuickReply::availableToNamesLocalized(),
                                                    $quickReply->available_to,
                                                    ['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">
                                                        @foreach ($teams as $team)
                                                            <option value="{{ $team->id }}">{{ $team->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <span class="text-danger" id="error-teams"></span>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">
                                                    <h4>Body text</h4>
                                                    <p>Type the text that will be the base for your quick reply.</p>
                                                </label>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="whatsapp-editor-container"></div>
                                                <input id="message" name="message" type="hidden"
                                                    value="{{ $quickReply->message }}">

                                                <span class="text-danger" id="error-message_{{ $quickReply->id }}"></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 class="files_container" style="display:flex;margin-bottom:10px">
                                                        @foreach ($quickReply->files as $file)
                                                            @if ($file->type == 'video')
                                                                <div style="margin-right:10px"
                                                                    id="file_{{ $file->id }}">
                                                                    <span class="dot removeFile"
                                                                        data-id="{{ $file->id }}"
                                                                        data-reply_id="{{ $quickReply->id }}">x</span>
                                                                    <video width="70px" height="70px" controls>
                                                                        <source
                                                                            src="{{ asset('storage/' . $file->path . '') }}"
                                                                            type="video/mp4">
                                                                        <source src="{{ $file->name }}" type="video/ogg">
                                                                        Your browser does not support the video tag.
                                                                    </video>
                                                                </div>
                                                            @elseif($file->type == 'image')
                                                                <div style="margin-right:10px"
                                                                    id="file_{{ $file->id }}">
                                                                    <span class="dot removeFile"
                                                                        data-reply_id="{{ $quickReply->id }}"
                                                                        data-id="{{ $file->id }}">x</span>
                                                                    <img id="preview-file-before-upload"
                                                                        src="{{ asset('storage/' . $file->path . '') }}"
                                                                        alt="{{ $file->name }}" width="70px"
                                                                        height="70px" />
                                                                </div>
                                                            @else
                                                                <div style="margin-right:10px"
                                                                    id="file_{{ $file->id }}">
                                                                    <span class="dot removeFile"
                                                                        data-reply_id="{{ $quickReply->id }}"
                                                                        data-id="{{ $file->id }}">x</span>
                                                                    <embed src="{{ asset('storage/' . $file->path . '') }}"
                                                                        alt="{{ $file->name }}" width="70px"
                                                                        height="70px" />
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                        <div id="preview-file-before-upload"></div>
                                                    </div>

                                                    <input type="file" name="files[]" class="form-control files"
                                                        multiple />
                                                    <span class="text-danger error-file_{{ $quickReply->id }}"></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 active" id="pills-note" role="tabpanel"
        aria-labelledby="pills-note-tab">
        <div class="px-4 ">
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>
                        @lang('notes.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
                });
            });

            var reply = {!! json_encode($quickReply) !!}; // Ensure $quickReply is properly encoded

            $('.keywordsselect').select2({
                tags: true,
                placeholder: 'Search the keywords',
                tokenSeparators: [',', ' '],
            });

            // Check if reply is defined and has keywords and teams properties
            if (reply && reply.keywords != null) {
                var storedKeywords = reply.keywords;
                var keywordsArray = storedKeywords.split(',');

                // Preselect keywords options if they match stored keywords
                $('.keywordsselect option').each(function() {
                    var keywordValue = $(this).val();
                    if (keywordsArray.includes(keywordValue)) {
                        $(this).prop('selected', true); // Preselect the option
                    }
                });
            }

            // Check if reply is defined and has teams property
            if (reply && reply.teams != null) {
                var storedTeams = reply.teams;
                var teamsArray = storedTeams.split(',');

                // Preselect teams options if they match stored teams
                $('.teamsSelect option').each(function() {
                    var teamId = $(this).val();
                    if (teamsArray.includes(teamId)) {
                        $(this).prop('selected', true); // Preselect the option
                    }
                });
            }

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

            // Listen for changes in the select with class 'availableToSelect'
            // $('.availableToSelect').on('change', function() {
                var selectedValue = $('.availableToSelect').val();
                var teamsDropdown = $('.teamsDropdown');

                // Show or hide teams dropdown based on selected value
                if (selectedValue == '2') {
                    teamsDropdown.show();
                } else {
                    teamsDropdown.hide();
                }
            // });




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

            $("#quickRepliesEditForm").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