@extends('layouts.app')

@section('content')
   <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' => 'Home'])
            <!-- <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>
                <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">
                        <a class="nav-link {{ Route::currentRouteName() == 'user-profile' ? 'active' : '' }}" href="{{ route('user-profile') }}">
                            <span class="sidenav-mini-icon"> <i class="fa fa-cog" style="color:white;"></i> </span>
                            <span class="sidenav-normal text-bold" style="color:black;"> </span>
                        </a>
                    </li>


                </ul>
            </div>
        </div>
    </nav>
    <!-- End Navbar -->
 <div class="card mx-1 my-1 mt-1 pt-1" id="basic-info">
  <div class="mx-3" style="text-align: left; margin-top: 20px;">
    <a href="/default_home" class="btn btn-secondary">← Back to Dashboard</a>
  </div>

  <div class="card-header text-center mt-3">
    <h4 class="fw-bold text-uppercase">ABOUT YOURSELF</h4>
  </div>

  <div class="card-body">
    <form action="{{ route('user_answers.store') }}" method="POST">
      @csrf

      @foreach($questions as $questionGroup)
        @php
            $question = $questionGroup->first();
            $qs_id = $question->question_id;
            $emojiMap = [
                '1' => '😭',
                '2' => '😕',
                '3' => '😐',
                '4' => '🙂',
                '5' => '🤩',
            ];
            $visibleAnswers = $questionGroup->filter(fn($a) => $a->answer !== 'text' && $a->answer !== '6');
        @endphp

        <!-- Desktop Table Row -->
        <div class="question-card d-none d-md-block">
          <table class="table table-bordered text-center align-middle mb-3">
            <thead class="table-light">
              <tr>
                <th>Question</th>
                <th>Option 1</th>
                <th>Option 2</th>
                <th>Option 3</th>
                <th>Option 4</th>
                <th>Option 5</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="fw-semibold text-start">{{ $question->question }}</td>
                @foreach($visibleAnswers as $ans)
                  <td>
                    <label class="option-label">
                      <input type="radio"
                             class="custom-radio"
                             name="selected_answers[{{ $qs_id }}]"
                             value="{{ $ans->ans_id }}">
                      @if($question->question_id == 17 && isset($emojiMap[$ans->answer]))
                        <span class="emoji-option">{{ $emojiMap[$ans->answer] }}</span>
                      @else
                        <span class="text-option">{{ $ans->answer }}</span>
                      @endif
                    </label>
                  </td>
                @endforeach
              </tr>
            </tbody>
          </table>
        </div>

        <!-- ✅ Mobile View: stacked layout -->
        <div class="question-mobile-card d-block d-md-none mb-3 p-3 border rounded shadow-sm">
          <p class="fw-semibold mb-2">{{ $question->question }}</p>
          <div class="d-flex justify-content-between flex-wrap gap-2">
            @foreach($visibleAnswers as $ans)
              <label class="option-label-mobile text-center flex-fill">
                <input type="radio"
                       class="custom-radio"
                       name="selected_answers[{{ $qs_id }}]"
                       value="{{ $ans->ans_id }}">
                @if($question->question_id == 17 && isset($emojiMap[$ans->answer]))
                  <span class="emoji-option fs-4">{{ $emojiMap[$ans->answer] }}</span>
                @else
                  <span class="text-option small">{{ $ans->answer }}</span>
                @endif
              </label>
            @endforeach
          </div>

          @foreach($questionGroup as $ans)
            @if($ans->answer === 'text' || $ans->answer === '6')
              <textarea class="form-control mt-2"
                        name="text_answers[{{ $qs_id }}]"
                        placeholder="Enter your response"></textarea>
            @endif
          @endforeach
        </div>
      @endforeach

      <div class="text-center mt-4">
        <button type="submit" id="btnSave" class="btn btn-primary px-4">Submit</button>
      </div>
    </form>
  </div>
</div>

<style>
/* General look */
.card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Desktop table adjustments */
.table th, .table td {
  vertical-align: middle;
}

/* ✅ Mobile view styles */
@media (max-width: 768px) {
  .question-mobile-card {
    background-color: #fff;
  }

  .fw-semibold {
    font-size: 14px;
  }

  .emoji-option {
    display: block;
    font-size: 1.8em;
  }

  .option-label-mobile input[type="radio"] {
    margin-bottom: 4px;
  }

  .text-option {
    font-size: 12px;
    display: block;
  }

  textarea.form-control {
    font-size: 13px;
  }

  .btn {
    width: 100%;
  }
}
</style>


            
        <!-- <div class="card-header  mx-1 pt-1"style="text-align: center; margin-top: 20px;">
            <h5 style="text-align: center; font-size: 30px;">Session Form</h5>
            <input type="hidden" id="UserId" name="UserId" value="{{auth()->user()->id}}">
        </div>

        <div class="card-body mt-1 pt-1">
            {{-- <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-2  mt-2">
                    <label class="form-label">Date</label>
                    <div>
                        <input type="text" class="form-control" id="date" name="date"
                            placeholder="Date" value="27-01-2026" >
                    </div>
                    <p id="date_error" class='text-danger text-xs pt-1 errmsg'></p>
                </div>
                <div class="col-lg-4  mt-2">
                    <label class="form-label">Teacher</label>
                    <div>
                        <input type="text" class="form-control" id="teacher" name="teacher"
                            placeholder="Teacher" value="{{ old('teacher') }}" >
                    </div>
                    <p id="date_error" class='text-danger text-xs pt-1 errmsg'></p>
                </div>
                <div class="col-lg-4  mt-2">
                    <label class="form-label">Participant Name</label>
                    <div>
                        <input type="text" class="form-control" id="participant" name="participant"
                            placeholder="Participant Name" value="{{ old('participant') }}" >
                    </div>
                    <p id="date_error" class='text-danger text-xs pt-1 errmsg'></p>
                </div>
                <div class="col-lg-1"></div>
            </div> --}}
            <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-10 text-center mt-1 me-1">
                    <label class="form-label">Please shade in where you having pain or other problems : </label>
                </div>
            </div>
            <div class="row table-responsive">
                <div class="col-lg-3"></div>
                <div class="col-lg-6 table-responsive">
                    <table class="table table-striped" id="workOrderTable">
                        <tbody>
                            <tr class="mt-2">
                                <td class="text-sm text-center font-weight-normal text-middle">
                                    <label class="form-label">Severe</label>
                                    <input type="button" name="severe" id="severe" class="btn btn-sm ms-1 mt-3"
                                    style="background-color:#FF0000;border: 0px solid green;" />

                                    <label class="form-label">Moderate</label>
                                    <input type="button" name="moderate" id="moderate" class="btn btn-sm ms-1 mt-3"
                                    style="background-color:#FF8300;border: 0px solid green;"/>

                                    <label class="form-label">Mild</label>
                                    <input type="button" name="mild" id="mild" class="btn btn-sm ms-1 mt-3"
                                    style="background-color:#FFE400;border: 0px solid green;"/>
                                </td>
                                <td>
                                    <input type="button" name="clear" id="clear"
                                    class="btn btn-secondary btn-sm ms-1 mt-3" value="Clear" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-lg-3"></div>
            </div>
            <div class="row">
                <div class="col-lg-3"></div>
                <div class="col-lg-6">
                    <canvas id="mycanvas"  width="599" height="721">
                        <img id="anatomy" class="visuallyhidden" src="/assets/img/anatomy.png" >
                    </canvas>
                </div>
                <div class="col-lg-3"></div>
            </div>


                 </div>

                
                        <div class="d-flex justify-content-center mt-3">
                            {{ $questions->links('pagination::bootstrap-4') }}

                        </div>
                </div>
            </div>
        </div> -->
     


            {{-- Submit button outside the loop, at the bottom of the form --}}
          
        
        </form>

        {{-- Pagination Links --}}
        {{-- <div style="text-align: center; margin-top: 20px;">
            {{ $questions->links() }}
        </div> --}}
   </div>
    </tbody>
</table>

</table>

@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 */
    }
 .form-check-label {
    font-size: 2rem; /* Large emojis */
    cursor: pointer;
    margin-right: 10px;
}
.form-check {
    display: inline-block;
    margin-right: 15px;
}.option-container {
    display: flex;
    flex-direction: column;
    gap: 10px;  /* Adjusts the spacing between options */
}

.option-label {
    display: flex;
    align-items: center;
    gap: 5px;  /* Space between the radio button and text */
    cursor: pointer;
}

.custom-radio {
    margin-right: 10px;  /* Spacing between radio button and label text */

}

.emoji-option {
    font-size: 2.5em;  /* Adjust the size of emoji if needed */
}

.text-option {
    font-size: 1.25em;  /* Adjust the size of text option */
}


</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 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() {
        var user_id = @json(auth()->id()); // ✅ Properly encode Laravel variable
        var grp = "pi_001"; // 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 radio = $(`input[type="radio"][name="selected_answers[${questionId}]"][value="${answerId}"]`);
            if (radio.length) {
                radio.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">




        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();

            var fd = new FormData();

            fd.append('userId',user_id);
            fd.append('selectedShapes', JSON.stringify(list_SelectedShapes));

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

            $.ajax({
                url: '{{route('saveshapes')}}',
                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
                        });
                    }

                },
            });
        });

        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