@extends('layouts.master')
@section('contain')
    <style>
        .tox .tox-statusbar {
            align-items: center;
            background-color: #fff;
            border-top: 1px solid #e3e3e3;
            color: rgba(34, 47, 62, .7);
            display: flex;
            flex: 0 0 auto;
            font-size: 14px;
            font-weight: 400;
            height: 0px;
            overflow: hidden;
            padding: 0 8px;
            position: relative;
            text-transform: none
        }

        .tox.tox-tinymce {
            height: 60px !important;
        }

        .tox .tox-editor-container {
            display: inline-flex;
            flex: 1 1 auto;
            flex-direction: row-reverse;
            overflow: hidden;
        }

        .tox:not([dir=rtl]) {
            direction: ltr;
            text-align: left;
            /* height: 9vh !important; */
        }

        .input-wrapper {
            display: flex;
            align-items: center;
            position: relative;
        }

        .input-wrapper input {
            flex: 1;
            margin-right: 5.4%;
        }

        .input-wrapper .emoji-image {
            position: absolute;
            right: 2%;
            width: 40px;
            /* Fixed width */
            height: 40px;
            /* Fixed height */
            top: 50%;
            transform: translateY(-50%);
            border-bottom-right-radius: 18%;
            border-top-right-radius: 18%;
        }
    </style>
    <!-- Page titles -->
    <div class="row page-titles">
        <!-- Title based on whether you're updating or adding a poll -->
        <div class="col-md-5 align-self-center">
            @if (isset($poll))
                <h4 class="card-title">Update poll</h4>
            @else
                <h4 class="card-title">Add poll</h4>
            @endif
        </div>
        <div class="col-md-7 align-self-center text-end">
            <!-- Breadcrumbs -->
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li class="breadcrumb-item active"><a class="text-cyan" href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active"><a class="text-cyan" href="{{ Route('poll.index') }}">polls</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <!-- End Page titles -->

    <!-- poll Form -->
    <div class="card">
        <div class="card-body">
            <h4 class="card-title"></h4>
            @if (isset($poll))
                <!-- Form for updating an existing poll -->
                @php
                    $questionCount = count($poll['answers']);
                @endphp
                <form method="POST" action={{ Route('poll.update', $poll->id) }} enctype="multipart/form-data"
                    data-parsley-validate>
                    @csrf
                    {{-- @method('PUT') --}}
                @else
                    <!-- Form for adding a new poll -->
                    <form action="{{ Route('poll.add') }}" method="POST" enctype="multipart/form-data"
                        data-parsley-validate>
                        @csrf
            @endif
            <div class="form-row col-md-12">
                <div class="faqs_list col-md-12 mb-2">
                    {{-- @if (@isset($poll))
                        @php
                            $questionCount = count($poll['answers']);
                        @endphp
                        <div class="row dynamic-wrap">
                            <div class="col-md-11 mb-2">
                                <label class="font-bold">Question*</label>
                                <div style="position: relative;">
                                    <input required data-parsley-required-message="question field is required"
                                        data-parsley-errors-container="#questionerrorContainer"
                                        style="border-color: #00cbff;" type='text' name="question"
                                        value="{{ $poll->question ?? old('question') }}"
                                        class="form-control @error('subtitle') is-invalid @enderror"
                                        placeholder="Enter question" />
                                </div>
                                <div id="questionerrorContainer" class="text-danger"></div>
                            </div>
                            @foreach ($poll['answers'] as $answerIndex => $answer)
                                <div class="answer-main-div col-md-10 mb-2">
                                    <label class="font-bold">Answer*</label>
                                    <div style="position: relative;">
                                        <input id="mytextarea" required
                                            data-parsley-required-message="answer field is required"
                                            data-parsley-errors-container="#answererrorContainer{{ $answerIndex }}"
                                            type='text' name="answer[{{ $answerIndex }}][answer]"
                                            value="{{ $answer->answer ?? old('subtitle') }}"
                                            class="form-control @error('subtitle') is-invalid @enderror"
                                            data-parsley-maxlength="25" placeholder="Enter answer">
                                        <input type="hidden" name="answer[{{ $answerIndex }}][id]"
                                            value="{{ $answer->id }}" class="deleted_ids">
                                        @if ($answerIndex > 0)
                                            <input name="answer[{{ $answerIndex }}][color]" title="select color"
                                                type="color" value="{{ $answer->color ? $answer->color : '#009dff' }}"
                                                style="position: absolute; right: -6%;width: 5.4%; height: 8vh; top: 50%; transform: translateY(-50%);">
                                            <button
                                                style="position: absolute;height: 8vh;right: -10.6%; top: 50%; transform: translateY(-50%);"
                                                class="btn btn-success btn-increment btn-add-answer"
                                                type="button">+</button>
                                            <button
                                                style="position: absolute;height: 8vh;right: -14.8%; width:4%; top: 50%;transform: translateY(-50%);"
                                                class="btn btn-danger btn-decrement btn-answer-minus"
                                                type="button">-</button>
                                        @else
                                            <button
                                                style="position: absolute; right: -14%;width: 7.4%;    height: 8vh; top: 50%; transform: translateY(-50%);"
                                                class="btn btn-success btn-add-answer" type="button">+</button>
                                            <input name="answer[{{ $answerIndex }}][color]" title="select color"
                                                type="color" value="{{ $answer->color ? $answer->color : '#009dff' }}"
                                                style="position: absolute; right: -6%;width: 5.4%; height: 8vh; top: 50%; transform: translateY(-50%);">
                                        @endif
                                    </div>
                                    <div id="answererrorContainer{{ $answerIndex }}" class="text-danger"></div>
                                </div>
                            @endforeach
                        </div>
                    @else --}}
                    <div class="row dynamic-wrap" id="dynamic-wrap-0" data-index="0">
                        <div class="col-md-11 mb-2">
                            <label class="font-bold">Question*</label>
                            <div style="position: relative;">
                                <input required data-parsley-required-message="question field is required"
                                    data-parsley-errors-container="#questionerrorContainer" style="border-color: #00cbff;"
                                    type='text' name="question"
                                    value="{{ isset($poll) && isset($poll->question) ? $poll->question : '' }}"
                                    class="form-control @error('subtitle') is-invalid @enderror" data-parsley-maxlength="100"
                                    placeholder="Enter question" />
                                {{-- <button
                                        style="position: absolute; right: -79px;width: 9%; top: 50%; transform: translateY(-50%);"
                                        class="btn btn-success btn-add btn-question" type="button">+</button> --}}
                            </div>
                            <div id="questionerrorContainer" class="text-danger"></div>
                        </div>
                        <div class="answer-main-div col-md-10 mb-2">
                            <label class="font-bold">Answer*</label>
                            <div class="input-wrapper uk-margin-large" style="position: relative;">
                                <input required data-parsley-required-message="answer field is required"
                                    data-parsley-maxlength="100"
                                    data-parsley-maxlength-message="The answer cannot exceed 100 characters"
                                    data-parsley-errors-container="#answererrorContainer0" type='text'
                                    name="answer[0][answer]"
                                    value="{{ isset($poll) && isset($poll->answers[0]) ? $poll->answers[0]['answer'] : '' }}"
                                    class="form-control @error('subtitle') is-invalid @enderror one uk-textarea uk-margin uk-height-medium"
                                    placeholder="Enter answer">
                                <img style="background-color:#3bb649;"
                                    class="emoji-image"src="{{ url('/images/extremely exited.png') }}" alt="">
                            </div>
                            <div id="answererrorContainer0" class="text-danger"></div>
                            <input type="hidden" value="#3bb649" name="answer[0][color]">
                            <input type="hidden" value="answer/extremely exited.png" name="answer[0][image]">
                            <input type="hidden" value="1" name="answer[0][grade]">
                            <input type="hidden" name="answer[0][id]"
                                value="{{ isset($poll) && isset($poll->answers[0]) ? $poll->answers[0]['id'] : 0 }}"
                                class="deleted_ids">
                        </div>

                        <div class="answer-main-div col-md-10 mb-2">
                            <label class="font-bold">Answer*</label>
                            <div class="input-wrapper uk-margin-large" style="position: relative;">
                                <!-- Answer Input -->
                                <input required data-parsley-required-message="answer field is required"
                                    data-parsley-maxlength="100"
                                    data-parsley-maxlength-message="The answer cannot exceed 100 characters"
                                    data-parsley-errors-container="#answererrorContainer1" type="text"
                                    name="answer[1][answer]"
                                    value="{{ isset($poll) && isset($poll->answers[1]) ? $poll->answers[1]['answer'] : '' }}"
                                    class="form-control @error('subtitle') is-invalid @enderror one uk-textarea uk-margin uk-height-medium"
                                    placeholder="Enter answer">
                                <img style="background-color:#91ca5f;" class="emoji-image"
                                    src="{{ url('/images/exited.png') }}" alt="">
                            </div>
                            <div id="answererrorContainer1" class="text-danger"></div>
                            <input type="hidden" value="#91ca5f" name="answer[1][color]">
                            <input type="hidden" value="answer/exited.png" name="answer[1][image]">
                            <input type="hidden" value="2" name="answer[1][grade]">
                            <input type="hidden" name="answer[1][id]"
                                value="{{ isset($poll) && isset($poll->answers[1]) ? $poll->answers[1]['id'] : 0 }}"
                                class="deleted_ids">
                        </div>

                        <div class="answer-main-div col-md-10 mb-2">
                            <label class="font-bold">Answer*</label>
                            <div class="input-wrapper uk-margin-large" style="position: relative;">
                                <input required data-parsley-required-message="answer field is required"
                                    data-parsley-maxlength="100"
                                    data-parsley-maxlength-message="The answer cannot exceed 100 characters"
                                    data-parsley-errors-container="#answererrorContainer2" type='text'
                                    name="answer[2][answer]"
                                    value="{{ isset($poll) && isset($poll->answers[2]) ? $poll->answers[2]['answer'] : '' }}"
                                    class="form-control @error('subtitle') is-invalid @enderror one uk-textarea uk-margin uk-height-medium"
                                    placeholder="Enter answer">
                                <input type="hidden" value="#fab140" name="answer[2][color]">
                                <input type="hidden" value="answer/not exited.png" name="answer[2][image]">
                                <input type="hidden" value="3" name="answer[2][grade]">
                                <input type="hidden" name="answer[2][id]"
                                    value="{{ isset($poll) && isset($poll->answers[2]) ? $poll->answers[2]['id'] : 0 }}"
                                    class="deleted_ids">
                                <img style="background-color:#fab140;" class="emoji-image"
                                    src="{{ url('/images/not exited.png') }}" alt="">
                            </div>
                            <div id="answererrorContainer2" class="text-danger"></div>
                        </div>
                        <div class="answer-main-div col-md-10 mb-2">
                            <label class="font-bold">Answer*</label>
                            <div class="input-wrapper uk-margin-large" style="position: relative;">
                                <input required data-parsley-required-message="answer field is required"
                                    data-parsley-maxlength="100"
                                    data-parsley-maxlength-message="The answer cannot exceed 100 characters"
                                    data-parsley-errors-container="#answererrorContainer3" type='text'
                                    name="answer[3][answer]"
                                    value="{{ isset($poll) && isset($poll->answers[3]) ? $poll->answers[3]['answer'] : '' }}"
                                    class="form-control @error('subtitle') is-invalid @enderror one uk-textarea uk-margin uk-height-medium"
                                    placeholder="Enter answer">
                                <input type="hidden" value="#f45829" name="answer[3][color]">
                                <input type="hidden" value="answer/not interested.png" name="answer[3][image]">
                                <input type="hidden" value="4" name="answer[3][grade]">
                                <input type="hidden" name="answer[3][id]"
                                    value="{{ isset($poll) && isset($poll->answers[3]) ? $poll->answers[3]['id'] : 0 }}"
                                    class="deleted_ids">
                                <img style="background-color:#f45829;"
                                    class="emoji-image"src="{{ url('/images/not interested.png') }}" alt="">
                            </div>
                            <div id="answererrorContainer3" class="text-danger"></div>
                        </div>
                        <div class="answer-main-div col-md-10 mb-2">
                            <label class="font-bold">Answer*</label>
                            <div class="input-wrapper uk-margin-large" style="position: relative;">
                                <input required data-parsley-required-message="answer field is required"
                                    data-parsley-maxlength="100"
                                    data-parsley-maxlength-message="The answer cannot exceed 100 characters"
                                    data-parsley-errors-container="#answererrorContainer4" type='text'
                                    name="answer[4][answer]"
                                    value="{{ isset($poll) && isset($poll->answers[4]) ? $poll->answers[4]['answer'] : '' }}"
                                    class="form-control @error('subtitle') is-invalid @enderror one uk-textarea uk-margin uk-height-medium"
                                    placeholder="Enter answer">
                                <input type="hidden" value="#e22225" name="answer[4][color]">
                                <input type="hidden" value="answer/hate.png" name="answer[4][image]">
                                <input type="hidden" value="5" name="answer[4][grade]">
                                <input type="hidden" name="answer[4][id]"
                                    value="{{ isset($poll) && isset($poll->answers[4]) ? $poll->answers[4]['id'] : 0 }}"
                                    class="deleted_ids">
                                <img style="background-color:#e22225" class="emoji-image"
                                    src="{{ url('/images/hate.png') }}" alt="">
                            </div>
                            <div id="answererrorContainer4" class="text-danger"></div>
                        </div>

                        <div class="answer-main-div col-md-6 mb-2">
                            <label class="font-bold">End Date</label>
                            <!-- Input for the fdp (read-only) -->
                            <input required data-parsley-required-message="end date field is required" type="date"
                                name="end_date" value="{{ $poll->end_date ?? old('end-date') }}"
                                class="form-control @error('fdp') is-invalid @enderror" autocomplete="off"
                                placeholder="Enter End Date">
                            @error('fdp')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    {{-- @endif --}}
                </div>
                <input type="hidden" name="delete_able_ids" id="delete_able_ids">
                <!-- Submit button -->
                <div class="col-md-12">
                    @if (isset($poll))
                        <button type="submit" class="btn btn-info me-2 text-white">Update</button>
                    @else
                        <button type="submit" class="btn btn-success me-2 text-white">Submit</button>
                    @endif
                </div>
                </form>
            </div>
        </div>
    </div>


    {{-- <script>
        document.addEventListener('DOMContentLoaded', function () {
            const picker = new EmojiButton();
            const answerInput = document.getElementById('answer');
            const emojiButton = document.getElementById('emoji-button');

            picker.on('emoji', selection => {
                answerInput.value += selection.emoji;
            });

            emojiButton.addEventListener('click', () => {
                picker.togglePicker(emojiButton);
            });
        });
    </script> --}}
    <script>
        var answerIndex = {{ isset($poll) ? @$answerIndex : 0 }};
        $(document).ready(function() {
            @if (@isset($poll))
                var start = {{ $questionCount }};
            @else
                var start = 1;
            @endif
            var errorindex = 1;

            function cloneAnswer(button, index) {
                // alert(answerIndex);
                answerIndex++
                errorindex++
                console.log("Index : " + errorindex);

                var answerDiv = '<div class="answer-main-div col-md-10 mb-2">';
                answerDiv += '<label class="font-bold">Answer*</label>';
                answerDiv += '<div style="position: relative;" class="uk-margin-large' + errorindex + '">';
                answerDiv +=
                    '<input id="mytextarea' + errorindex +
                    '" required data-parsley-required-message="answer field is required" data-parsley-maxlength="25" data-parsley-errors-container="#answererrorContainer-' +
                    errorindex +
                    '" type="text" name="answer[' + answerIndex +
                    '][answer]" value="{{ $poll->subtitle ?? old('subtitle') }}" class=" form-control @error('subtitle') is-invalid @enderror " placeholder="Enter answer">';

                answerDiv +=
                    ' <input value="#009dff" name="answer[' + answerIndex +
                    '][color]" title="select color" type="color" style="position: absolute; right: -6%;width: 5.4%;    height: 8vh; top: 50%; transform: translateY(-50%);">'
                answerDiv +=
                    '<input type="hidden" name="answer[' + answerIndex + '][id]" value="0" id="">'

                answerDiv +=
                    '<button style="position: absolute;height: 8vh;right: -14.8%; width:4%; top: 50%;transform: translateY(-50%);" class="btn btn-danger btn-add btn-answer-minus" type="button">-</button>';
                answerDiv +=
                    '<button style="position: absolute;height: 8vh;right: -10.6%; top: 50%; transform: translateY(-50%);" class="btn btn-success btn-add-answer" type="button">+</button>';
                answerDiv += '</div>';
                answerDiv += '<div id="answererrorContainer-' + errorindex + '" class="text-danger"></div>';

                answerDiv += '</div>';

                // Append the answer fields after the button's parent answer-list div
                button.closest('.answer-main-div').after(answerDiv);
                // initializeEmojiPicker(errorindex)

                tinymce.init({
                    selector: "#mytextarea" + errorindex,
                    plugins: "emoticons",
                    toolbar: "emoticons",
                    height: "10",
                    // toolba_location: "bottom",
                    menubar: false
                });
            }
            tinymce.init({
                selector: "#mytextarea",
                plugins: "emoticons",
                toolbar: "emoticons",
                height: "10",
                // toolbar_location: "bottom",
                menubar: false
            });
            $(".btn-question").on("click", function() {
                cloneQuestion();
                start++;
            });
            // $(".btn-question-updte").on("click", function() {
            //     cloneQuestionUpdate();
            //     start++;
            // });

            $('.faqs_list').on('click', '.btn-question-minus', function() {
                $(this).closest('.dynamic-wrap').remove();

                // Re-index the questions
                $('.dynamic-wrap').each(function(index) {
                    $(this).attr('id', 'dynamic-wrap-' + index);
                    $(this).find('input[name^="question"]').each(function() {
                        var newName = $(this).attr('name').replace(/\[(\d+)\]/, '[' +
                            index + ']');
                        $(this).attr('name', newName);
                    });
                    start = index;
                });
                start++;
            });
            // Event delegation for answer buttons
            $('.faqs_list').on('click', '.btn-answer-minus', function() {
                // Retrieve the ID from the hidden input field
                var id = $(this).closest('.answer-main-div').find('.deleted_ids').val();
                // Remove the corresponding .answer-main-div element
                $(this).closest('.answer-main-div').remove();
                // Append the ID to a hidden input field array
                $('<input>').attr({
                    type: 'hidden',
                    name: 'deleted_able_ids[]',
                    value: id
                }).appendTo('form'); // Append to the form or a specific container if needed
            });
            // Event delegation for answer buttons
            $('.faqs_list').on('click', '.btn-add-answer', function() {
                var index = $(this).closest('.dynamic-wrap').data('index');
                cloneAnswer($(this), index);
            });
        });
    </script>
    <script>
        $("#emoji-button-1").on("click", function(e) {
            // alert('fff');
        });
    </script>
@endsection