@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' => 'Individual Session Results'])
            <!-- <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="card-body mt-1 pt-1">
        <h2 class="text-center mb-4">Individual Session Results</h2>
        
        <div class="d-flex justify-content-center">
    <div class="mb-3">
        <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($groups 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) -->
        <div class="d-flex justify-content-center">
    <div class="mb-6" id="studentDropdown">
        <label for="studentSelect" class="form-label d-block text-center">Select Student:</label>
        <select id="studentSelect" class="form-select" style="width:300px;">
            <option value="">-- Select Student --</option>
        </select>
    </div>
</div>
<div class="d-flex justify-content-center mt-3">
    <div class="mb-6">
        <label for="startDate" class="form-label d-block text-center">Start Date:</label>
        <input type="date" id="startDate" class="form-control" style="width: 200px;">
    </div>
    <div class="mb-6 mx-3">
        <label for="endDate" class="form-label d-block text-center">End Date:</label>
        <input type="date" id="endDate" class="form-control" style="width: 200px;">
    </div>
    <div class="mb-6 mx-3">
      
        <button id="filterBtn" class="btn btn-primary mt-4">Search Date wise</button>
    </div>
</div>



<div id="questionsContainer" class="mt-4"></div>

          
            <div class="row">
                <div class="col-lg-3"></div>
                <div class="col-lg-6 mb-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 id="questionsContainer" style="margin-top: 20px; padding: 10px; ">
  
  </div>
            


@endsection

@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(){

        })
    </script>
      <script>
    $(document).ready(function() {
    $('#filterBtn').on('click', function() {
        var user_id = $('#studentSelect').val(); // Get selected student ID
        var grp = $('#grp').val(); // Get selected group ID
        var startDate = $('#startDate').val(); // Get start date
        var endDate = $('#endDate').val(); // Get end date

        console.log("Selected Student ID:", user_id);
        console.log("Selected Group ID:", grp);
        console.log("Start Date:", startDate);
        console.log("End Date:", endDate);

        if (user_id && grp) {
            kelvis_date(user_id, grp, startDate, endDate);
        } else {
            alert("Please select a student and group.");
        }
        // $('#studentSelect').on('change', function() {
        var user_id = $(this).val(); // Get the selected student ID
        console.log("Selected Student ID:", user_id);
        var grp_id = $(this).val();
        
        // Call first function
    
        createPaths_date();
       
        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;
        });

       

        function createPaths_date() {

            // 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(); -->
            console.log(user_id);
            var fd = new FormData();

            fd.append('userId',user_id);

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

            $.ajax({

                url: '{{route('fetchshapes_date')}}',
                type: 'post',
                data:fd,
                contentType: false,
                processData: false,
                success: function(response){
                    
                    if (response.success)
                    {
                        console.log("succeed");
                        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_date')}}',
                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 kelvis_date(user_id, grp, startDate, endDate) {
        $.ajax({
            url: '/getStudentAnswers_date_wise', // Laravel route to fetch answers
            type: 'GET',
            data: { 
                user_id: user_id, 
                grp: grp, 
                start_date: startDate, 
                end_date: endDate 
            },
            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) {
            data.forEach(question => {
                let answersHTML = question.answers.map(ans => `<p><strong>Answer:</strong> ${ans}</p>`).join('');
                
                let questionHTML = `
                    <div class="question-item">
                        <p><strong>Question:</strong> ${question.question_text}</p>
                        ${answersHTML} 
                    </div>
                `;
                $('#questionsContainer').append(questionHTML);
            });
        } else {
            $('#questionsContainer').append('<p>No answers found.</p>');
        }
    }
});
</script>
    <script>
        $(document).ready(function() {
            $('#groupSelect').change(function() {
                var groupId = $(this).val(); // Get selected group ID
                console.log(groupId);
                if (groupId) {
                    $('#studentDropdown').show(); // Show student dropdown

                    // Clear previous student options
                    $('#studentSelect').html('<option id="UserId" name="UserId"  value="">-- Select Student --</option>');

                    // Get students for the selected group
                    var students = @json($groups);
                    var selectedGroup = students.find(g => g.group_id == groupId);

                    if (selectedGroup && selectedGroup.students.length > 0) {
                        selectedGroup.students.forEach(student => {
                            $('#studentSelect').append('<option  value="'+ student.student_id +'">'+ student.firstname +'</option>');
                        });
                    } else {
                        $('#studentSelect').append('<option value="">No students available</option>');
                    }
                } else {
                    // $('#studentDropdown').hide(); // Hide student dropdown
                }
            });
        });
        $(document).ready(function() {
    $('#studentSelect').on('change', function() {
        var user_id = $(this).val(); // Get selected student ID
        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, not FormData
            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) {
    let container = $('#questionsContainer');
    container.empty();

    
    const emojiMap = {
        '1': '😭',  
        '2': '😕',  
        '3': '😐',  
        '4': '🙂',  
        '5': '🤩'   
    };

    if (data.length > 0) {
        let tableHTML = `
            <table class="table table-bordered text-center align-middle">
                <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>Question</th>
                        <th>Answers</th>
                    </tr>
                </thead>
                <tbody>
        `;

        data.forEach((question, index) => {
            let answersHTML = question.answers.map((ans, i) => {
                // Only show emoji for first 17 questions
                if (index < 17 && emojiMap[ans]) {
                    return `<div class="fs-4">${emojiMap[ans]}</div>`;
                } else {
                    return `<div>${ans}</div>`; // Show normal answer
                }
            }).join('');

            tableHTML += `
                <tr>
                    <td>${index + 1}</td>
                    <td>${question.question_text}</td>
                    <td>${answersHTML}</td>
                </tr>
            `;
        });

        tableHTML += `
                </tbody>
            </table>
        `;

        container.html(tableHTML);
    } else {
        container.html('<p class="text-center text-muted">No answers found.</p>');
    }
}


});

    </script>
    <script type="text/paperscript" canvas="mycanvas">
    $('#studentSelect').on('change', function() {
        var user_id = $(this).val(); // Get the selected student ID
        console.log("Selected Student ID:", user_id);
        var grp_id = $(this).val();
        
        // Call first function
        <!-- kelvis(); -->
        createPaths();
       
        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;
        });

       

        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(); -->
            console.log(user_id);
            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