@extends('app')
@section('content')
    <style>
        .question-inline {
            display: flex;
            align-items: center;
            direction: rtl;
            margin-top: 15px;
            margin-bottom: 15px;
            /* Arabic layout */
        }

        .question-label {
            white-space: nowrap;
            min-width: 90px;
            text-align: right;
        }

        .q-options-input {
            flex: 1;
        }

        .calendars-month-header {
            height: 1.9em !important;
        }

        .calendars-month-year {
            height: auto !important;
            min-height: auto !important;
            width: auto !important;
        }
    </style>
    @php
        $isEdit = isset($survey) && $action === 'Edit';
    @endphp


    <link href="{{ asset('assets/cpanel/css/calendar-multi.css') }}" rel="stylesheet" type="text/css" media="screen" />
    <script src="{{ asset('assets/js/custom.js') }}"></script>
    <div class="page-title"> <a href="{{ URL('/admin/survey') }}"><i class="icon-custom-right"></i></a>
        <h3>استطلاع - <span class="semi-bold">{{ $action == 'Add' ? 'أضافة' : 'تحرير' }}</span></h3>
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="grid simple">
                <div class="grid-body">
                    <div class="row m-b-20">
                        <div class="col-md-12">
                            <h3 class="text-center">العنوان والوصف</h3>
                        </div>
                    </div>
                    <form
                        action="{{ $isEdit ? route('admin.survey.updateSurvey', $survey->id) : route('admin.survey.storeSurvey') }}"
                        id="surveyForm" method="POST" enctype="multipart/form-data">
                        {{-- <form action="{{ route('admin.survey.storeSurvey') }}" id="surveyForm" method="POST"
                        enctype="multipart/form-data"> --}}
                        @csrf
                        <input type="hidden" name="saveDraft" id="saveDraft" value="0">
                        <input type="hidden" name="sendPush" id="sendPush" value="0">
                        @if ($isEdit)
                            <input type="hidden" name="editSurveyId" value="{{ $survey->id }}">
                        @endif
                        <div class="form-group row">
                            <div class="input-with-icon col-md-6 col-md-offset-3 col-sm-12">
                                <input type="text" name="title" id="title_field" class="form-control"
                                    placeholder="عنوان الاستطلاع" required maxlength="60"
                                    value="{{ old('title', $isEdit ? $survey->title : '') }}">
                                <span class="help"><span id="title_char_count">60</span> @lang('helpers.char_count_text')</span><br>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="form-label">العنوان</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="input-with-icon col-md-6 col-md-offset-3 col-sm-12">
                                <textarea name="description" id="description_field" class="form-control textarea" placeholder="اكتب الوصف الخاص بك هنا"
                                    rows="3" required>{{ old('description', $isEdit ? $survey->description : '') }}</textarea>
                                <span class="help"><span id="description_char_count">1000</span>
                                    @lang('helpers.char_count_text')</span><br>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="form-label">وصف الاستطلاع</label>
                            </div>
                        </div>

                        <div class="row m-b-20">
                            <div class="col-md-12">
                                <h3 class="text-center">أسئلة الاستطلاع</h3>
                            </div>
                        </div>

                        {{-- container div for rendering the questions  --}}
                        <div id="p_scents">

                        </div>

                        <div class="form-group row">
                            <div class="col-md-6 col-md-offset-3 col-sm-12 text-left">
                                <button type="button" class="btn btn-primary btn-lg btn-cons open-model-btn"
                                    id="addScnt">إضافة سؤال</button>
                            </div>
                        </div>



                        <div class="row m-b-20">
                            <div class="col-md-12">
                                <h3 class="text-center">فترة الاستطلاع</h3>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class='radio-group inline col-md-6 col-md-offset-3 col-sm-12'>
                                <div class="radio">
                                    <input type="radio" value="open" name="survey_expiry_type" id="open"
                                        {{ !$isEdit || ($isEdit && $survey->type === 'open') ? 'checked' : '' }}>
                                    <label class="f-s-15" for="open">بدون تاريخ انتهاء</label>
                                    <input type="radio" value="date" name="survey_expiry_type" id="date"
                                        {{ $isEdit && $survey->type === 'close' ? 'checked' : '' }}>
                                    <label class="f-s-15" for="date">التاريخ</label>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="form-label">فترة الاستطلاع</label>
                            </div>
                        </div>

                        <div class="form-group row"
                            style="{{ $isEdit && $survey->type !== 'open' ? '' : 'display: none;' }}" id="selectDateInput">
                            <div class="input-with-icon col-md-2 col-md-offset-7 col-sm-12">

                                {{-- <input type="text" placeholder="" name="expiry_date" class="normal_calendar form-control"
                                    id="expiry_date"
                                    value="{{ old('end_date', $isEdit && $survey->end_date ? $survey->end_date : '') }}"> --}}
                                <input type="text" name="expiry_date" class="normal_calendar form-control"
                                    id="expiry_date"
                                    value="{{ old('end_date', $isEdit && $survey->end_date ? \Carbon\Carbon::parse($survey->end_date)->format('Y-m-d') : '') }}">

                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="form-label">تاريخ انتهاء التصويت</label>
                            </div>
                        </div>

                        <div class="form-actions">
                            <a href="{{ URL::route('survey.index') }}" class="btn btn-default btn-cons">إلغاء</a>
                            <div class="pull-right markaction">
                                @if (Auth::user()->can('survey-destroy'))
                                    {{-- <button type="submit" class="btn btn-info btn-cons btn-cons">التالي</button> --}}
                                    <button type="submit" id="save_and_publish" class="btn btn-primary">نشر الآن</button>
                                    <button type="button" id="save_push_publish" class="btn btn-primary">إنشر مع رسالة
                                        تنبيه</button>
                                    <button type="button" id="save_as_draft" class="btn btn-primary">إرسال إلى
                                        المسودة</button>
                                @endif
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection
@section('page_script')
    <script>
        const existingQuestions = @json($isEdit ? $survey->survey_questions : []);
    </script>

    <script src="{{ asset('assets/cpanel/js/calendar-multi.js') }}" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $("#saveDraft").val(0);
            $("#sendPush").val(0);
            $('#save_as_draft').on('click', function() {
                $("#saveDraft").val(1); // change value from 0 to 1
                // optionally submit the form if needed
                $(this).closest('form').submit();
            });

            $("#sendPush").val(0);
            $('#save_push_publish').on('click', function() {
                $("#sendPush").val(1);
                // optionally submit the form if needed
                $(this).closest('form').submit();
            });
            $('.normal_calendar').calendarsPicker({
                dateFormat: 'dd/mm/YYYY',
                minDate: 0
            });
            let labelCount = 0; // tracks option number
            const scntDiv = $('#p_scents');

            function addOption(showRemove = true, question = null, answerType = 'rating') {

                const removeHTML = showRemove ?
                    `  <a id="del" href="javascript:void(0)" class="btn btn-danger removeOptionJQ" style="margin-right:10px;">حذف</a>` :
                    '';

                const value = question ? question.question : '';

                const optionHTML = `
<div class="row form-group opj">
    <div class="input-with-icon col-md-7 col-md-offset-3 col-sm-12">
        ${question && question.id ? `<input type="hidden" name="question_ids[]" value="${question.id}">` : ''}

        <div class="question-inline">
            <label class="form-label question-label">
                نص السؤال
            </label>

            <input type="text"
                name="questions[]"
                class="form-control q-options-input"
                data-limit="200"
                value="${value}"
                required>
            ${removeHTML}
        </div>

        <span class="help">
            <span class="counter">200</span> {{ __('helpers.char_count_text') }}
        </span>


        <div class="form-group row">
            <div class="inline m-l-20">
                <label class="form-label">نوع الإجابة</label>
            </div>
            <div class="radio-group inline">
                <div class="radio">
                    <input type="radio"  value="rating" ${answerType === 'rating' ? 'checked' : ''}>
                    <label class="f-s-15">إجابة تقييم</label>

                    <input type="radio" value="text" ${answerType === 'text' ? 'checked' : ''}>
                    <label class="f-s-15">إجابة نصية</label>
                </div>
            </div>
        </div>

        
    </div>
</div>`;


                scntDiv.append(optionHTML);
                scntDiv.find('.q-options-input').last().each(function() {
                    updateCharCounter(this);
                });
                reIndexQuestions();
            }


            /* ===============================
               EDIT MODE → Load DB Questions
               =============================== */
            if (existingQuestions.length > 0) {
                existingQuestions.forEach((q, index) => {
                    addOption(index >= 1, q, q.answer_type ?? 'rating');
                });
            } else {
                /* ===============================
                   CREATE MODE → Default 2 options
                   =============================== */
                for (let i = 0; i < 1; i++) {
                    addOption(false);
                }
            }
            // Add option on button click (with remove button)
            $('#addScnt').on('click', function() {
                addOption(true);
            });

            // Remove option
            $(document).on('click', '.removeOptionJQ', function() {
                $(this).closest('.opj').remove();
                reIndexQuestions();
            });
            $('input[type="radio"]').click(function() {
                if ($(this).attr("value") == "date") {
                    //$("#selectDateInput").hide();
                    $("#selectDateInput").show();
                } else {
                    $("#selectDateInput").hide();
                }
            });
            $(document).on('input', '.q-options-input', function() {
                updateCharCounter(this);
            });

        });

        function updateCharCounter(input) {
            const limit = parseInt(input.dataset.limit);
            const counter = input.closest('.input-with-icon')
                .querySelector('.counter');

            if (input.value.length > limit) {
                input.value = input.value.substring(0, limit);
            }

            counter.textContent = limit - input.value.length;

            // Optional warning color
            counter.style.color = (limit - input.value.length <= 10) ? 'red' : '';
        }

        function reIndexQuestions() {
            $('.opj').each(function(index) {
                const arabicIndex = toArabicNumber(index + 1);

                // Update placeholder & label
                $(this).find('.q-options-input')
                    .attr('placeholder', 'نوع الإجابة ' + arabicIndex);

                $(this).find('.question-label')
                    .text('نص السؤال ' + arabicIndex);

                // Update radio names & ids
                $(this).find('input[type="radio"]').each(function() {
                    const type = $(this).val(); // rating / text
                    const newId = type + 'Radio__' + index;

                    $(this)
                        .attr('name', `answer_type[${index}]`)
                        .attr('id', newId);

                    $(this).next('label')
                        .attr('for', newId);
                });
            });
        }
        updateCharLimit('title_field', 'title_char_count', 60);
        $("#title_field").keyup(function(event) {
            updateCharLimit('title_field', 'title_char_count', 60);
        });

        updateCharLimit('description_field', 'description_char_count', 1000);
        $("#description_field").keyup(function(event) {
            updateCharLimit('description_field', 'description_char_count', 1000);
        });
        $('#surveyForm').on('submit', function(e) {
            e.preventDefault(); // prevent default submission for validation

            let valid = true;
            let errors = [];

            // Check title
            const title = $('#title_field').val().trim();
            if (title === '') {
                valid = false;
                errors.push('يرجى إدخال عنوان الاستطلاع.');
            }

            // Check description
            const description = $('#description_field').val().trim();
            if (description === '') {
                valid = false;
                errors.push('يرجى إدخال وصف الاستطلاع.');
            }

            // Check at least one question exists
            const questions = $('input[name="questions[]"]').map(function() {
                return $(this).val().trim();
            }).get();
            if (questions.length === 0) {
                valid = false;
                errors.push('يرجى إضافة سؤال واحد على الأقل.');
            }

            // Check all questions are not empty
            for (let i = 0; i < questions.length; i++) {
                if (questions[i] === '') {
                    valid = false;
                    errors.push(`السؤال رقم ${i+1} فارغ.`);
                }
            }

            if (!valid) {
                alert(errors.join("\n"));
                return false;
            }

            // Everything ok, submit form
            this.submit();


        });
    </script>
@endsection