@extends('layouts.app')
@section('content')
<div class="wrapper">
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1><strong>Edit Survey</strong></h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href=" route('survey.index') }}">Home</a></li>
                            <li class="breadcrumb-item active">Survey</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <!-- <div class="row"> -->
                <div class="col-md-12">
                    @if (\Session::has('success'))
                        <div class="alert alert-success">
                            <ul>
                                <li>{!! \Session::get('success') !!}</li>
                            </ul>
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="notification is-danger is-light">
                            <ul>
                                <div class="alert alert-danger">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </div>

                            </ul>
                        </div>
                    @endif

                    <div class="card card-primary">
                        <div class="card-body">
                            <form action="{{ route('survey.update', $survey->id) }}" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>Title: <span class="required">*</span></label>
                                            <input class="form-control" type="text" id="title"
                                                value="{{ ($survey->title) }}" maxlength="20" name="title" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label for="type">Type: <span class="required">*</span></label>
                                            <select class="form-control" id="type" name="type" required>
                                            <option value="general" {{ $survey->type == 'general' ? 'selected' : '' }}>General</option>
                                            <option value="personal" {{ $survey->type == 'personal' ? 'selected' : '' }}>Personal</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 points-div">
                                        <div class="form-group">
                                            <label for="survey_limit">Survey Points:</label>
                                            <input class="form-control" type="number" value="{{ ($survey->points) }}"
                                                id="points" name="points" min="1">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 limit-div">
                                        <div class="form-group">
                                            <label for="survey_limit">Survey Limit:</label>
                                            <input class="form-control" type="number" value="{{ ($survey->limit) }}"
                                                id="survey_limit" name="limit" min="1" max="20">
                                        </div>
                                    </div>

                                    <div class="col-sm-4 interest-div">
                                        <div class="form-group">
                                            <div class="d-flex justify-content-between">
                                                <label for="interest">Interest:</label>
                                                <div class="form-group mb-0">
                                                    <label for="select_all">Select All:</label>
                                                    <input type="checkbox" id="select_all" name="all" value="1"{{ in_array(1, $survey->surveyInterest->pluck('interest_id')->toArray() ?? []) ? 'checked' : '' }}                                           >
                                                </div>
                                            </div>
                                            <select class="form-control" id="interest" name="interest_id[]"
                                                multiple="multiple">
                                                @foreach($interests as $interest)
                                                    <option value="{{ $interest->id }}" {{ in_array($interest->id, $survey->surveyInterest->pluck('interest_id')->toArray() ?? []) ? 'selected' : '' }}>
                                                        {{ ucfirst($interest->title) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 sub-interest-div">
                                        <div class="form-group">
                                            <label for="sub_interest">SubInterest:</label>
                                            <select class="form-control" id="sub_interest" name="sub_interest_id[]"
                                                multiple="multiple">
                                                <!-- <option value="" disabled selected>Select Sub Interest</option> -->
                                                @foreach($sub_interests as $sub_interest)
                                                    <option value="{{ $sub_interest->id }}" {{ in_array($sub_interest->id, $survey->surveySubInterest->pluck('sub_interest_id')->toArray() ?? []) ? 'selected' : '' }}>
                                                        {{ ucfirst($sub_interest->title) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 location-div">
                                        <div class="form-group">
                                            <label for="location">Location: (please select from dropdown)</label>
                                            <input class="form-control" type="text" value="{{ ($survey->location) }}"
                                                id="location" name="location" placeholder="Enter a location">
                                            <input type="hidden" id="latitude" name="latitude"
                                                value="{{$survey->latitude}}">
                                            <input type="hidden" id="longitude" name="longitude"
                                                value="{{$survey->longitude}}">
                                            <input type="hidden" id="timezone" name="timezone" value="">
                                        </div>
                                    </div>
                                    <div class="col-sm-4 start-at-div">
                                        <div class="form-group">
                                            <label for="start_at">Start At:</label>
                                            <input class="form-control" value="{{ ($startAt) }}" type="datetime-local"
                                                id="start_at" name="start_at" onchange="validateDate()">
                                        </div>
                                    </div>

                                    <div class="col-sm-4 ends-at-div">
                                        <div class="form-group">
                                            <label for="ends_at">Ends At: </label>
                                            <input class="form-control" value="{{ ($expiresAt) }}" type="datetime-local"
                                                id="ends_at" name="ends_at" onchange="validateDate()">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label>Description:</label>
                                            <textarea name="description"
                                                style="width: 100%; height: 100px;">{{$survey->description}}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Questions Section -->
                                <div id="questions_container">
                                    <h4><strong>Edit Questions</strong></h4>
                                    @foreach($survey->questions as $index => $question)
                                        <div class="question-section">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                    <label for="question">Question {{ $index + 1 }}:</label>
                                                    <input class="form-control" type="text"
                                                            name="questions[{{ $index }}][question]"
                                                            value="{{ $question->question }}" required>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="questions[{{ $index }}][id]" value="{{ $question->id }}">

                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label for="question_type">Question Type:</label>
                                                        <select class="form-control"
                                                            name="questions[{{ $index }}][question_type]" required
                                                            onchange="toggleOptionsField(this)">
                                                            <option value="multiple_choice" {{ $question->question_type == 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
                                                            <option value="single_choice" {{ $question->question_type == 'single_choice' ? 'selected' : '' }}>Single Choice</option>
                                                            <option value="open_ended" {{ $question->question_type == 'open_ended' ? 'selected' : '' }}>
                                                                Open Ended</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label for="parent_question">Parent Question:</label>
                                                        <select class="form-control parent-question"
                                                            name="questions[{{ $index }}][parent_question_id]"
                                                            onchange="updateParentOptions(this)">
                                                            <option value="">None</option>
                                                            @foreach($survey->questions as $parentQuestion)
                                                                @if($parentQuestion->id !== $question->id)
                                                                    <option value="{{ $parentQuestion->id }}" {{ $question->parent_question_id == $parentQuestion->id ? 'selected' : '' }}>
                                                                        {{ $parentQuestion->question }}
                                                                    </option>
                                                                @endif
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label for="parent_option">Parent Option:</label>
                                                        <select class="form-control parent-option"
                                                            name="questions[{{ $index }}][parent_option_id]">
                                                            <option value="">None</option>
                                                            @if ($question->parent_question_id)
                                                                @foreach($survey->questions as $parentQuestion)
                                                                    @if ($parentQuestion->id == $question->parent_question_id)
                                                                        @foreach($parentQuestion->options as $parentOption)
                                                                            <option value="{{ $parentOption->id }}" {{ $question->parent_option_id == $parentOption->id ? 'selected' : '' }}>
                                                                                {{ $parentOption->option }}
                                                                            </option>
                                                                        @endforeach
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-sm-4">
                                                    <div class="form-group options_field"
                                                        style="{{ $question->question_type == 'open_ended' ? 'display:none;' : '' }}">
                                                        <label for="options">Options:</label>
                                                        @foreach($question->options as $option)
                                                            <input class="form-control mb-2" type="text"
                                                                name="questions[{{ $index }}][options][]"
                                                                value="{{ $option->option }}">
                                                        @endforeach
                                                        <button type="button" class="btn btn-secondary"
                                                            onclick="addOption(this)">Add Another Option</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                    <button type="button" class="btn btn-primary" onclick="addQuestion()">Add Another
                                        Question</button>
                                </div>

                                <div class="col-sm-12 text-right">
                                    <button type="submit" class="btn btn-primary light-green-btn"> Update </button>
                                    <button type="button" class="btn btn-secondary light-secondary-btn"
                                        onclick="window.location.href='{{ route('survey.index') }}'">Cancel</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<style>
    .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        color: #000;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.css" rel="stylesheet">
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdB1v7t7lh_1MkaTotwt-Ynlu7D0mJXmo&libraries=places"></script>
<script>
    let questionCounter = 1; 
    function addQuestion() {
        const questionCount = $('#questions_container .question-section').length + questionCounter;
        const questionSection = `
    <div class="question-section">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="question">Question ${questionCount}:</label>
                    <input class="form-control" type="text" name="questions[${questionCount}][question]" required>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="question_type">Question Type:</label>
                    <select class="form-control" name="questions[${questionCount}][question_type]" required onchange="toggleOptionsField(this)">
                        <option value="">Select question type</option>
                        <option value="multiple_choice">Multiple Choice</option>
                        <option value="single_choice">Single Choice</option>
                        <option value="open_ended">Open Ended</option>
                    </select>
                </div>
            </div>
            
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="parent_question">Parent Question:</label>
                    <select class="form-control parent-question" name="questions[${questionCount}][parent_question_id]" onchange="populateParentOptions(this, ${questionCount})">
                        <option value="">None</option>
                        @foreach($survey->questions as $parentQuestion)
                            <option value="{{ $parentQuestion->id }}">{{ $parentQuestion->question }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="parent_option">Parent Option:</label>
                    <select class="form-control parent-option" name="questions[${questionCount}][parent_option_id]">
                        <option value="">None</option>
                        <!-- Options will be populated dynamically based on parent question selection -->
                    </select>
                </div>
            </div>
    <div class="col-sm-6 d-flex" style="gap: 13px;">             
                <div class="form-group options_field">
                        <label for="options">Options:</label>
                        <input class="form-control" type="text" name="questions[${questionCount}][options][]" required>
                        <button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Another Option</button>
                </div>
                <i class="fas fa-trash delete-question text-danger" style="cursor: pointer; margin-top: 45px;" onclick="removeQuestion(this)" title="Remove Question"></i>

            </div>
        </div>
    </div>`;
        $('#questions_container').append(questionSection);
    }

    function removeQuestion(button) {
    $(button).closest('.question-section').remove();
    }

    // Function to populate parent options based on selected parent question
    function populateParentOptions(selectElement, questionIndex) {
        const selectedParentId = $(selectElement).val();
        const parentOptionsSelect = $(selectElement).closest('.question-section').find('.parent-option');

        parentOptionsSelect.empty().append('<option value="">None</option>');

        if (selectedParentId) {
            // Assuming you have a JS object with questions and their options
            const optionsData = @json($survey->questions->pluck('options', 'id'));

            if (optionsData[selectedParentId]) {
                optionsData[selectedParentId].forEach(option => {
                    parentOptionsSelect.append(`<option value="${option.id}">${option.option}</option>`);
                });
            }
        }
    }


    function removeOption(element) {
        const optionGroups = document.querySelectorAll('.option-group');
        element.closest('.option-group').remove();
    }

    function addOption(button) {
        const questionSection = $(button).closest('.question-section');
        const questionIndex = $('#questions_container .question-section').index(questionSection);
        const optionsCount = questionSection.find('input[name^="questions[' + questionIndex + '][options]"]').length;

        if (optionsCount < 10) {
            const newOption = document.createElement('div');
            newOption.classList.add('option-group', 'd-flex', 'align-items-center', 'mb-2');
            newOption.innerHTML = `
            <input class="form-control" type="text" name="questions[${questionIndex}][options][]" required>
            <i class="fas fa-trash remove-option ml-2 text-danger" style="cursor: pointer;" onclick="removeOption(this)" title="Remove Option"></i>
        `;
        $(newOption).insertBefore($(button));
        } else {
            alert("You can add a maximum of 10 options.");
        }
    }

    function toggleOptionsField(selectElement) {
        const questionType = selectElement.value;
        const questionSection = $(selectElement).closest('.question-section');
        const optionsField = questionSection.find('.options_field');

        if (questionType === 'open_ended') {
            optionsField.hide();
            optionsField.find('input[name="questions[][options][]"]').val('');
        } else {
            optionsField.show();
        }
    }

    $(document).on('change', 'select[name*="[question_type]"]', function () {
        toggleOptionsField(this);
    });

    function updateParentOptions(selectElement) {
        const selectedParentId = selectElement.value;
        const questionSection = $(selectElement).closest('.question-section'); // Ensure this targets the correct section
        const optionsField = questionSection.find('.parent-option');

        // Clear current options
        optionsField.empty().append('<option value="">None</option>');

        // If a parent question is selected, populate the options
        if (selectedParentId) {
            const parentOptions = @json($survey->questions->pluck('options', 'id'));

            // Find the selected parent question's options
            const selectedOptions = parentOptions[selectedParentId] || [];
            selectedOptions.forEach(option => {
                optionsField.append(new Option(option.option, option.id));
            });
        }
    }

    // Event listener for changing parent question
    $(document).on('change', '.parent-question', function () {
        updateParentOptions(this);
    });

    $(document).ready(function () {
        toggleFieldsBasedOnType($('#type').val());
        $('#type').change(function () {
            toggleFieldsBasedOnType($(this).val());
        });
        function toggleFieldsBasedOnType(surveyType) {
            if (surveyType == 'personal') {
                $('.interest-div').hide();
                $('.sub-interest-div').hide();
                $('.location-div').hide();
                $('.limit-div').hide();
                $('.points-div').hide();
               // $('.ends-at-div').hide();
            } else {
                $('.interest-div').show();
                $('.sub-interest-div').show();
                $('.location-div').show();
                $('.limit-div').show();
                $('.points-div').show();
                //$('.ends-at-div').show();
            }
        }
    });

    $(document).ready(function () {
        $('#summernote').summernote({
            toolbar: [
                ['style', ['style']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['color', ['color']],
                ['misc', ['undo', 'redo']]
            ],
        });
    });

    function initAutocomplete() {
        var locationInput = document.getElementById('location');
        var autocomplete = new google.maps.places.Autocomplete(locationInput);
        autocomplete.setFields(['geometry', 'name']);
        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }
            var lat = place.geometry.location.lat();
            var lng = place.geometry.location.lng();

            document.getElementById('latitude').value = lat;
            document.getElementById('longitude').value = lng;
        });
    }
    google.maps.event.addDomListener(window, 'load', initAutocomplete);

    //to disable the past dates
    var now = new Date();
    var formattedNow = now.toISOString().slice(0, 16);
    $('#start_at').attr('min', formattedNow);
    $('#ends_at').attr('min', formattedNow);

    $(document).ready(function () {
        $('#interest').select2();
        $('#sub_interest').select2();
    });

    $(document).ready(function () {
        $('#interest').select2();
        $('#sub_interest').select2();
    });

    function validateDate() {
        const startAt = document.getElementById('start_at').value;
        const endsAt = document.getElementById('ends_at').value;

        if (startAt && endsAt) {
            if (new Date(endsAt) < new Date(startAt)) {
                alert("End date cannot be earlier than Start date.");
                document.getElementById('ends_at').value = '';
            }
        }

        const startDate = new Date(startAt);
        const endDate = new Date(endsAt);
        const timeDifference = endDate - startDate;
        const dayDifference = timeDifference / (1000 * 3600 * 24);

        // Check if the duration exceeds 7 days
        if (dayDifference > 7) {
            alert("Duration between Start and End dates cannot exceed 7 days.");
            document.getElementById('ends_at').value = '';
        }
    }

    //fetch timezone
    document.addEventListener("DOMContentLoaded", function () {
        var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        document.getElementById('timezone').value = timezone;
    });

    $(document).ready(function () {
        $('form').submit(function (e) {
            var interest = $('#interest').val();
            var subInterest = $('#sub_interest').val();
            var location = $('#location').val();
            var surveyType = $('#type').val();
            var endDate = $('#ends_at').val();
            const lat = $('#latitude').val();
            const lng = $('#longitude').val();
            var selectAll = $('#select_all').prop('checked');

            if (surveyType === 'general' &&
                ((!interest || interest.length === 0) &&
                    (!subInterest || subInterest.length === 0) &&
                    !location && !selectAll)) {
                alert("Please fill either Interest, SubInterest, or Location before creating Survey.");
                e.preventDefault();
            }
            if (surveyType === 'general') {
                if (!endDate) {
                    alert("End Date is compulsory for general surveys.");
                    e.preventDefault();
                }
            }
            // Check if latitude and longitude are empty
            if (location && lat == '' && lng == '') {
                alert("Please select a location from dropdown.");
                event.preventDefault();
            }
        });
    });

    $(document).ready(function () {
        $('#select_all').change(function () {
            if ($(this).is(':checked')) {
                $('#interest').prop('disabled', true);
                $('#sub_interest').prop('disabled', true);
            } else {
                $('#interest').prop('disabled', false);
                $('#sub_interest').prop('disabled', false);
            }
        });

        $('#interest, #sub_interest').change(function () {
            let interestCount = $('#interest').val() ? $('#interest').val().length : 0;
            let subInterestCount = $('#sub_interest').val() ? $('#sub_interest').val().length : 0;
            let totalSelected = interestCount + subInterestCount;

            if (totalSelected === 0) {
                $('#select_all').prop('disabled', false);
            } else {
                $('#select_all').prop('disabled', true);
            }
        });
    });

</script>
@endsection