@extends('layouts.app')

@section('content')
    <!-- Navbar -->
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl z-index-sticky" id="navbarBlur" data-scroll="false">
        <div class="container-fluid py-1 px-3">
            @include('layouts.navbars.auth.topnav', ['title' => 'Create Individual Session'])
            <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none">
                <a href="javascript:;" class="nav-link p-0">
                    <div class="sidenav-toggler-inner">
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                    </div>
                </a>
            </div>
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                    <div class="input-group">
                        <span class="input-group-text text-body"><i class="fas fa-search" aria-hidden="true"></i></span>
                        <input type="text" class="form-control" placeholder="Search...">
                    </div>
                </div>
                <ul class="navbar-nav justify-content-end">
                    <li class="nav-item d-flex align-items-center">
                        @include('auth.logout')
                    </li>
                    <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="iconNavbarSidenav">
                            <div class="sidenav-toggler-inner">
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item px-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0">
                            <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                        </a>
                    </li>
                    <li class="nav-item position-relative pe-2 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell cursor-pointer"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
                            <li class="mb-2">
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="my-auto">
                                            <img src="../../assets/img/team-2.jpg" class="avatar avatar-sm me-3" alt="user image">
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                <span class="font-weight-bold">New message</span> from Laur
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i> 13 minutes ago
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="mb-2">
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="my-auto">
                                            <img src="../../assets/img/small-logos/logo-spotify.svg" class="avatar avatar-sm bg-gradient-dark me-3" alt="logo spotify">
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                <span class="font-weight-bold">New album</span> by Travis Scott
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i> 1 day
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- End Navbar -->

    <!-- Card for Creating Individual Session -->
    <div class="card mx-1 my-1 mt-4 pt-1" id="basic-info">
        <div class="card-body mt-1 pt-1">
            <h2 class="text-center mb-4">Create Individual Session</h2>
            <div class="d-flex justify-content-center mb-3" id="studentDropdown" style="display: none;">
                <div class="col-md-6 mb-3 d-flex flex-column align-items-center">
                    <label for="userName" class="form-label d-block text-center mt-3"></label>
                    <input type="text" id="userName" class="form-control" value="{{ Auth::user()->firstname . ' ' . Auth::user()->lastname }}" readonly style="width: 300px;">
                </div>
            </div>

            <!-- Group Selection -->
            <div class="d-flex justify-content-center mb-3">
                <div class="mb-3 d-flex flex-column align-items-center">
                    <label for="groupSelect" class="form-label d-block text-center">Select Group:</label>
                    <select id="groupSelect" class="form-select" style="width:300px;">
                        <option value="">Select Group</option>
                        @foreach($firstGroups as $group)
                            <option id="grp" name="grp" value="{{ $group->group_id }}" data-group="{{ $group->grp_name }}">
                                {{ $group->grp_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>


            <!-- Student Name Dropdown (Hidden by Default) -->
            

            <!-- Canvas for Anatomy or Custom Content -->
            <form action="{{ route('user_answers.store') }}" method="POST">
    @csrf
    @php
        // Grouping questions by heading first, then by question_id
        $groupedHeadings = $questionsGrouped;
    @endphp

    <div class="row justify-content-center">
        <div class="col-lg-10 mt-1 me-1 table-responsive justify-content-center">
            <table class="table table-flush justify-content-center" id="datatable-basic">
                <thead class="thead-light">
                    <tr>
                        <th class="px-4">S.No</th> <!-- Adding horizontal padding -->
                        <th class="px-6">Question</th> <!-- Adding horizontal padding -->
                        <th class="px-8">Select</th> <!-- Adding horizontal padding -->
                    </tr>
                </thead>
                <tbody>
                    @php $sl = 1; @endphp
                    @foreach($questionsGrouped as $qs_id => $questionGroup)
                        @php
                            $question = $questionGroup->first(); // Get the first question from the group
                        @endphp
                        <tr>
                            <td class="px-4">{{ $sl }}</td> <!-- Adding horizontal padding -->
                            <td class="px-6">
                                <input type="hidden" name="questions[{{ $qs_id }}][question_id]" value="{{ $question->question_id }}">
                             
                                {{ $question->question }}
                            </td>
                            <td class="px-8">
                                <input type="checkbox" name="questions[{{ $qs_id }}][selected]" value="1">
                            </td>
                        </tr>
                        @php $sl++ @endphp
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</form>


            <!-- Submit Button for the Form -->
            <div class="text-center mt-4">
            <button type="button" class="btn btn-info" onclick="insertQuestion()">Insert Selected Questions</button>
            </div>
        </div>
    </div>
@endsection





<style>
    /* Ensures table columns have a fixed layout */
    #datatable-basic {
        table-layout: fixed;
        width: 100%;
    }

    /* Adjusting column widths */
    #datatable-basic th:nth-child(1),
    #datatable-basic td:nth-child(1) {
        width: 15%; /* S.No column */
        text-align: center;
    }

    #datatable-basic th:nth-child(2),
    #datatable-basic td:nth-child(2) {
        width: 80%; /* Question column */
        word-wrap: break-word;
        white-space: normal;
    }

    #datatable-basic th:nth-child(3),
    #datatable-basic td:nth-child(3) {
        width: 55%; /* Options column */
    }
</style>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Load previously selected answers
        loadAnswers();

        // Save checkboxes on change
        document.querySelectorAll(".form-check-input").forEach(input => {
            input.addEventListener("change", function () {
                saveAnswers();
            });
        });

        // Save textareas on input
        document.querySelectorAll("textarea").forEach(textarea => {
            textarea.addEventListener("input", function () {
                saveAnswers();
            });
        });
    });
    
//     function insertQuestion() {
//     // Collect selected questions
//     var selectedQuestions = [];

//     // Loop through each checkbox to check if it's selected
//     $('input[name^="questions"][type="checkbox"]:checked').each(function() {
//         var questionId = $(this).closest('tr').find('input[name^="questions"][name$="[question_id]"]').val();
//         var groupName = $(this).closest('tr').find('input[name^="questions"][name$="[group_name]"]').val(); // Get group name
        
//         // Push the questionId and groupName to the selectedQuestions array
//         selectedQuestions.push({
//             question_id: questionId,
//             group_name: groupName
//         });
//     });

//     // If no questions are selected, show an alert
//     if (selectedQuestions.length === 0) {
//         alert("Please select at least one question.");
//         return;
//     }
    
//     var grp = $('#groupSelect').val(); // Get selected group ID from the dropdown (instead of using $('#grp'))
//     console.log('Selected Group:', grp);
    
//     // Send the selected questions to the server via AJAX
//     $.ajax({
//         url: '{{ route('savequestion') }}', // Adjust this route accordingly
//         type: 'POST',
//         data: {
//             _token: '{{ csrf_token() }}', // CSRF token for protection
//             group_id: grp, // Send selected group ID to the server
//             questions: selectedQuestions, // Send the selected questions
//         },
//         success: function(response) {
//             console.log('Success Response:', response);
//             if (response.success) {
//                 alert(response.message);
//             } else {
//                 alert('Error: ' + response.message);
//             }
//         },
//         error: function(xhr, status, error) {
//             console.error('Request Error:', xhr.responseText); // Log error response
//             alert('Error with the request: ' + error); // Display error message
//         }
//     });
// }
function insertQuestion() {
    // Collect selected questions
    var selectedQuestions = [];

    // Loop through each checkbox to check if it's selected
    $('input[name^="questions"][type="checkbox"]:checked').each(function() {
        var questionId = $(this).closest('tr').find('input[name^="questions"][name$="[question_id]"]').val();
        var groupName = $(this).closest('tr').find('input[name^="questions"][name$="[group_name]"]').val(); // Get group name
        
        // Push the questionId and groupName to the selectedQuestions array
        selectedQuestions.push({
            question_id: questionId,
            group_name: groupName
        });
    });

    // If no questions are selected, show an alert
    if (selectedQuestions.length === 0) {
        alert("Please select at least one question.");
        return;
    }
    
    var grp = $('#groupSelect').val(); // Get selected group ID from the dropdown (instead of using $('#grp'))
    console.log('Selected Group:', grp);
    
    // Send the selected questions to the server via AJAX
    $.ajax({
        url: '{{ route('savequestion') }}', // Adjust this route accordingly
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}', // CSRF token for protection
            group_id: grp, // Send selected group ID to the server
            questions: selectedQuestions, // Send the selected questions
        },
        success: function(response) {
            console.log('Success Response:', response);
            if (response.success) {
                alert(response.message); // Show success message
                location.reload(); // Reload the page to reflect the changes
            } else {
                alert('Error: ' + response.message); // Show error message if any
            }
        },
        error: function(xhr, status, error) {
            console.error('Request Error:', xhr.responseText); // Log error response
            alert('Error with the request: ' + error); // Display error message
        }
    });
}







    function saveAnswers() {
        let answers = {};

        // Save checkboxes
        document.querySelectorAll(".form-check-input:checked").forEach(input => {
            let qid = input.name.match(/\d+/)[0]; // Extract question ID
            if (!answers[qid]) answers[qid] = [];
            answers[qid].push(input.value);
        });

        // Save textareas
        document.querySelectorAll("textarea").forEach(textarea => {
            let qid = textarea.name.match(/\d+/)[0]; // Extract question ID
            answers[qid] = textarea.value;
        });

        localStorage.setItem("saved_answers", JSON.stringify(answers));
    }

    function loadAnswers() {
        let savedAnswers = JSON.parse(localStorage.getItem("saved_answers") || "{}");

        // Restore checkboxes
        document.querySelectorAll(".form-check-input").forEach(input => {
            let qid = input.name.match(/\d+/)[0];
            if (savedAnswers[qid] && savedAnswers[qid].includes(input.value)) {
                input.checked = true;
            }
        });

        // Restore textareas
        document.querySelectorAll("textarea").forEach(textarea => {
            let qid = textarea.name.match(/\d+/)[0];
            if (savedAnswers[qid]) {
                textarea.value = savedAnswers[qid];
            }
        });
    }
    </script>

@push('js')
    <script src="../../assets/js/plugins/chartjs.min.js"></script>
    <script src="/assets/js/core/jquery.min.js"></script>
    <script src="../../assets/js/paper/paper.js"></script>
    <script src="/assets/js/plugins/sweetalert.min.js"></script>
    <script>

    $(document).ready(function() {
        // $('#').change(function()){
        var user_id = @json(auth()->id()); // ✅ Properly encode Laravel variable
        var grp = $('#grp').val(); // Get selected group ID

        console.log("Selected Student ID:", user_id);
        console.log("Selected Group ID:", grp);

        if (user_id && grp) {
            kelvis(user_id, grp);
        }

        function kelvis(user_id, grp) {
            $.ajax({
                url: '/get-student-answers', // Laravel route to fetch answers
                type: 'GET',
                data: { user_id: user_id, grp: grp }, // ✅ Use data object
                success: function(response) {
                    console.log("Full Response:", response);
                    if (response.success && response.questions.length > 0) {
                        updateFields(response.questions);
                    } else {
                        console.log("No questions available");
                        $('#questionsContainer').html('<p>No questions available.</p>');
                    }
                },
                error: function(error) {
                    console.log("Error fetching data:", error);
                }
            });
        }

        // function updateFields(data) {
        //     $('#questionsContainer').empty(); // Clear previous questions

        //     if (data.length === 0) {
        //         $('#questionsContainer').append('<p>No questions available.</p>');
        //         return;
        //     }

        //     data.forEach(q => {
        //         let questionHTML = `
        //             <div class="question-item">
        //                 <p><strong>${q.question_text}</strong></p>
        //                 <p>Answer: ${q.answer}</p>
        //             </div>
        //         `;
        //         $('#questionsContainer').append(questionHTML);
        //     });
        // }

        function updateFields(data) {
    // Loop through each question in the response
    data.forEach(q => {
        let questionId = q.qs_id; // Assuming 'qs_id' is the question ID
        let answerId = q.ans_id; // Assuming 'ans_id' is the selected answer ID


        if (answerId !== null) {
            let checkbox = $(`input[type="checkbox"][name="selected_answers[${questionId}][]"][value="${answerId}"]`);
            if (checkbox.length) {
                checkbox.prop('checked', true);
            }
        }

        // If it's a text answer, fill in the corresponding text area
        if (q.answer === 'text' || q.answer === '6') {
            let textarea = $(`textarea[name="text_answers[${questionId}]"]`);
            if (textarea.length) {
                textarea.val(q.text); // Assuming 'text' contains the saved response
            }
        }
    });
}

    });
</script>

    <script type="text/paperscript" canvas="mycanvas">


    <!-- $(document).ready(function() { -->

<!-- }); -->

        var hitOptions = {
            fill: true,
            tolerance: 5
        };

        var user_id;
        var shape_id;
        var list_SelectedShapes = new Array();

        var pain_level_color = '#FF0000';
        var pain_level = 1;
        $('#severe').css('border-width', '3px');

        var isClearClicked = false;

        $('#severe').click(function(){
            pain_level_color = '#FF0000';
            pain_level = 1;
            $('#severe').css('border-width', '3px');
            $('#moderate').css('border-width', '0px');
            $('#mild').css('border-width', '0px');
        });

        $('#moderate').click(function(){
            pain_level_color = '#FF8300';
            pain_level = 2;
            $('#severe').css('border-width', '0px');
            $('#moderate').css('border-width', '3px');
            $('#mild').css('border-width', '0px');
        });

        $('#mild').click(function(){
            pain_level_color = '#FFE400';
            pain_level = 3;
            $('#severe').css('border-width', '0px');
            $('#moderate').css('border-width', '0px');
            $('#mild').css('border-width', '3px');
        });

        $('#clear').click(function(){
            isClearClicked = true;
        });

        createPaths();

        function createPaths() {

            // Create a raster item using the image tag with id='img1'
            var raster = new Raster('anatomy');
            // Move the raster to the center of the view
            raster.position = view.center;
            // Scale the raster by 50%
            raster.scale(1.25);

            user_id = $('#UserId').val();

            var fd = new FormData();

            fd.append('userId',user_id);

            fd.append('_token','{{csrf_token()}}');

            $.ajax({

                url: '{{route('fetchshapes')}}',
                type: 'post',
                data:fd,
                contentType: false,
                processData: false,
                success: function(response){

                    if (response.success)
                    {
                        list_SelectedShapes = new Array();

                        for(var i = 0; i < response.selectedshapes.length; i++)
                        {
                            var object = new Object();
                            object.user_id = response.selectedshapes[i].user_id;
                            object.shape_id = response.selectedshapes[i].shape_id;
                            object.pain_level = response.selectedshapes[i].pain_level;

                            list_SelectedShapes.push(object);
                        }

                        for(var cnt = 0; cnt < response.shapes.length; cnt++)
                        {
                            var isSelected = false;
                            var filltoColor = 'lightyellow';

                            for(var i = 0; i < list_SelectedShapes.length; i++)
                            {
                                if (list_SelectedShapes[i].shape_id == cnt+1)
                                {
                                    isSelected = true;
                                    if(list_SelectedShapes[i].pain_level == 1)
                                        filltoColor = '#FF0000';
                                    if(list_SelectedShapes[i].pain_level == 2)
                                        filltoColor = '#FF8300';
                                    if(list_SelectedShapes[i].pain_level == 3)
                                        filltoColor = '#FFE400';
                                }

                            }
                            if(isSelected)
                            {
                                var path = new Path({
                                    strokeColor: 'lightyellow',
                                    fillColor: filltoColor
                                });

                                path.name = cnt+1;

                                var ptList = response.shapes[cnt].points.split(',');

                                path.moveTo(new Point(parseFloat(ptList[0]), 721-parseFloat(ptList[1])));

                                for(var i = 2; i < ptList.length; i+=2)
                                {
                                    path.lineTo(new Point(parseFloat(ptList[i]), 721-parseFloat(ptList[i+1])));
                                }

                                path.closed = true;
                            }
                            else
                            {
                                var path = new Path({
                                    strokeColor: 'lightyellow',
                                    fillColor: 'lightyellow'
                                });

                                path.name = cnt+1;

                                var ptList = response.shapes[cnt].points.split(',');

                                path.moveTo(new Point(parseFloat(ptList[0]), 721-parseFloat(ptList[1])));

                                for(var i = 2; i < ptList.length; i+=2)
                                {
                                    path.lineTo(new Point(parseFloat(ptList[i]), 721-parseFloat(ptList[i+1])));
                                }

                                path.closed = true;

                                // When the mouse enters the item, set its fill color to red:
                                /*path.onMouseEnter = function(event) {
                                    this.fillColor = 'pink';
                                }

                                // When the mouse leaves the item, set its fill color to black:
                                path.onMouseLeave = function(event) {
                                    this.fillColor = 'lightyellow';
                                }*/
                            }

                        }
                    }
                    else
                    {

                    }

                },
            });

        }

        $('#btnSave').click(function() {
    user_id = $('#UserId').val();

    // Collect selected question IDs (where checkbox is checked)
    var selectedQuestions = [];
    $('input[name^="questions"]:checked').each(function() {
        var question_id = $(this).closest('tr').find('input[name^="questions"][name$="[question_id]"]').val();
        selectedQuestions.push(question_id);
    });

    var fd = new FormData();

    // Append userId and selected question IDs
    fd.append('userId', user_id);
    fd.append('selectedQuestions', JSON.stringify(selectedQuestions));

    fd.append('_token', '{{ csrf_token() }}');

    $.ajax({
        url: '{{ route('savequestion') }}',
        type: 'post',
        data: fd,
        contentType: false,
        processData: false,
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Session',
                    text: response.message,
                    showCancelButton: false,
                    customClass: {
                        confirmButton: 'btn btn-success mx-2'
                    },
                    buttonsStyling: false
                });
            } else {
                Swal.fire({
                    icon: 'warning',
                    title: 'Session',
                    text: response.message,
                    showCancelButton: false,
                    customClass: {
                        confirmButton: 'btn btn-success mx-2'
                    },
                    buttonsStyling: false
                });
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX Error: ', error);
        }
    });
});


        var hitItem = null;

        function onMouseDown(event) {

            hitItem = null;
            var hitResult = project.hitTest(event.point);

            if (!hitResult)
                return;

            if (hitResult) {
                hitItem = hitResult.item;
            }

            if (hitResult.type == 'fill') {
                currentAction = 'move';

                if(isClearClicked)
                {
                    isClearClicked = false;

                    if(hitItem.fillColor != 'lightyellow')
                    {
                        var idx = -1;

                        for(var i = 0; i < list_SelectedShapes.length; i++) {
                            if (list_SelectedShapes[i].shape_id == hitItem.name) {
                                idx = i;
                                break;
                            }
                        }

                        if (idx > -1)
                        {
                          list_SelectedShapes.splice(idx, 1);
                        }

                        hitItem.fillColor = 'lightyellow';
                        return;
                    }
                }

                if(hitItem.fillColor == 'lightyellow')
                {
                    hitItem.fillColor = pain_level_color;

                    var object = new Object();
                    object.user_id = user_id;
                    object.shape_id = hitItem.name;
                    object.pain_level = pain_level;

                    list_SelectedShapes.push(object);

                }
                else
                {
                    for(var i = 0; i < list_SelectedShapes.length; i++) {
                        if (list_SelectedShapes[i].shape_id == hitItem.name)
                        {
                            if (hitItem.fillColor == pain_level_color) {
                                break;
                            }
                            else
                            {
                                hitItem.fillColor = pain_level_color;
                                if(hitItem.fillColor == '#FF0000')
                                {
                                    list_SelectedShapes[i].pain_level = 1;
                                }
                                if(hitItem.fillColor == '#FF8300')
                                {
                                    list_SelectedShapes[i].pain_level = 2;
                                }
                                if(hitItem.fillColor == '#FFE400')
                                {
                                    list_SelectedShapes[i].pain_level = 3;
                                }

                            }
                        }

                    }

                    //hitItem.fillColor = 'lightyellow';
                }

                console.log(list_SelectedShapes.length);

            }
        }

        var lastSelected = null;

        function onMouseMove(event) {

            if (lastSelected != null)
            {
                lastSelected.strokeColor = lastSelected.fillColor;
                lastSelected.strokeWidth = 1;
                lastSelected = null;
            }

            hitItem = null;
            var hitResult = project.hitTest(event.point);
            if (hitResult != null && hitResult.item != null)
            {
                hitResult.item.strokeColor = 'blue';
                hitResult.item.strokeWidth = 3;
                lastSelected = hitResult.item;
            }
        }

        /*function onMouseDrag(event) {
            if (!hitItem) {
                return;
            }
            if (currentAction == 'move') {
                hitItem.position += event.delta;
            }
        }*/

    </script>

@endpush