@extends('template.layouts.simple.master')
@section('content')
    <div class="page-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                                                        <h4>Add Activity Answer</h4>


                        </div>
                        <div class="modal fade" id="user_assigned_model" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModal" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <div class="modal-toggle-wrapper">
                                            <h4 id="model_title"></h4>
                                            <div class="table-responsive theme-scrollbar">
                                                <table id="user_render_table" class="table">
                                                    <thead>
                                                    <tr>
                                                        <th>Sn</th>
                                                        <th id="user_type"></th>
                                                        <th>Assigned Value</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{--                    @dd($get_draft_values)--}}
                        <div class="card-body">
                            <div class="table-card">
                                <h5>Data Upload Details</h5>
                                <table class="table mb-0">
                                    <thead>
                                    </thead>
                                    <tbody>
                                    @foreach($related_values as $r_values)

                                        <tr>
                                            <td class="fw-medium">{{$r_values->getHeadName->template_head_name}}</td>
                                            <td>{{$r_values->value}}</td>
                                        </tr>
                                    @endforeach


                                    </tbody>
                                </table>
                                <!--end table-->
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="table-card">
                            <h5 class="mt-2 p-2">Activity Questions @if(count($previous_responses) >0)
                                    <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal"
                                            data-bs-target="#previous_data_modal">Previous Data
                                    </button>
                                @endif</h5>
                            <div class="modal fade" id="previous_data_modal" tabindex="-1" role="dialog"
                                 aria-labelledby="exampleModal" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <div class="modal-toggle-wrapper">
                                                <h4 id="model_title"></h4>
                                                                                               <div class="table-responsive theme-scrollbar">
                                                    <table id="user_render_table" class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>Activity</th>
                                                            <th>Question</th>
                                                            <th>Answer</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        @foreach($previous_responses as $previous_response)
                                                            @php
                                                                $previousAct = null; // Initialize a variable to store the previous iteration data
                                                                $other_act = null;
                                                            @endphp
                                                            @foreach($previous_response as $user_response)
                                                                @if($loop->iteration > 1)
                                                                    @if($user_response->template_id == $previousAct)
                                                                        @php  $other_act = 0; @endphp
                                                                    @else
                                                                        @php
                                                                            $other_act = 1;
                                                                            $previousAct = $user_response->template_id;
                                                                        @endphp
                                                                    @endif
                                                                @else
                                                                    @php $previousAct = $user_response->template_id; @endphp
                                                                @endif
                                                                @if($other_act == 1 || $loop->iteration == 1)
                                                                    <tr class="submitted-by">
                                                                         <td colspan="2">{{$user_response->get_activity_info->template_name}} Submitted By - {{$user_response->getUser->name}} &nbsp;&nbsp;<span class="sub-arrow"><i class="fa fa-angle-right"></i></span> </td>
                                                                        <td > <button data-info="{{$user_response}}"  class="remark_model_show btn btn-sm btn-primary">Add&nbsp;Remark</button></td>
                                                                    </tr>
                                                                @endif
                                                                <tr class="response-row">
                                                                    <td>{{$user_response->get_activity_info->template_name}}</td>
                                                                    <td>{{$user_response->getQuestionInfo->question}}</td>
                                                                    <td>
                                                                        @if($user_response->getQuestionInfo->question_type == "Image")
                                                                            <img class="img-fluid table-avatar" src="{{ asset($user_response->user_answer) }}" alt="Image">
                                                                        @elseif($user_response->getQuestionInfo->question_type == "File Upload")
                                                                            <a href="{{ route('download', ['file' => $user_response->user_answer]) }}">Download</a>
                                                                        @elseif($user_response->getQuestionInfo->question_type == "Video")
                                                                            <div class="video-container">
                                                                                <video controls>
                                                                                    <source src="{{ asset($user_response->user_answer) }}" type="video/mp4">
                                                                                    Your browser does not support the video tag.
                                                                                </video>
                                                                            </div>
                                                                        @else
                                                                            {{$user_response->user_answer}}
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>

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

                            <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <div class="modal-toggle-wrapper">
                                                <ul class="modal-img">
{{--                                                    <li> <img src="../assets/images/gif/danger.gif" alt="error"></li>--}}
                                                </ul>
                                                <div>
                                                    <form id="remark_form">

                                                    <input class="form-control" type="hidden" id="row_id" name="row_id" value="">
                                                    <input class="form-control" type="hidden" id="activity_id" name="activity_id" value="">
                                                    <input class="form-control" type="hidden" id="activity_group_name_id" name="activity_group_name_id" value="">
                                                    <input class="form-control" type="hidden" id="activity_sequence" name="activity_sequence" value="">
                                                    <input class="form-control" type="hidden" id="user_id" name="user_id" value="">
                                                    <label for="remark" >Enter Remark</label>
                                                    <textarea class="form-control btn-square"  rows="3" id="remark" name="remark"></textarea>
                                                    </form>
                                                </div>
                                                <div class="mt-3">
                                                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                                                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal" id="send_remark">Send Remark</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <form id="activityForm" method="post" action="{{route('user.activityQuestionAnswers')}}"
                                  enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="row_id" value="{{$r_values->row_id}}">
                                <input type="hidden" name="template_id"
                                       @if(count($related_questions)>0) value="{{$related_questions[0]->template_id}}" @endif >
                                <input type="hidden" name="group_id" value="{{$group_info->id}}">
                                <input type="hidden" name="sequence" value="{{$sequence}}">
                                <table class="table mb-0">
                                    <thead>
                                    </thead>
                                    <tbody>
                                        

    <tr class="d-none">
                                        <td class="col-md-6 fw-medium">
                                            Select Role
                                        </td>
                                        <td class="col-md-6">
                                            <label class="form-label" for="role">Select user Role<span class="txt-danger"></span></label>
                                            <select name="role" class="form-select" id="role" disabled>
                                                <option value="">Select User Role--</option>
                                                @foreach($roles as $role)
                                                    <option value="{{$role->name}}">{{$role->name}}</option>
                                                @endforeach
                                            </select>
                                        </td>

                                    </tr> 
                                    <tr class="d-none">
                                        <td class="col-md-6 fw-medium">
                                            Select User
                                        </td>
                                        <td class="col-md-6">
                                            <label class="form-label" for="user_id">Select User<span class="txt-danger"></span></label>
                                            <select name="user_id" class="form-select" id="user_id" disabled>
                                                <option value="">Select User</option>
                                               
                                            </select>
                                        </td>

                                    </tr>
                                    @foreach($related_questions as $related_question)

                                        <tr>
                                            <td class="col-md-6 fw-medium">{{$related_question->question}}</td>
                                            <td class="col-md-6">
                                                @php
                                                    $d_value = '';
                                                    foreach($get_draft_values as $draft_value) {
                                                        if ($draft_value->question_id == $related_question->id) {
                                                            $d_value = $draft_value->user_answer;
                                                            break; // Stop the loop once a match is found
                                                        }
                                                    }
                                                @endphp


                                                @switch($related_question->question_type)
                                                    @case('Image')
                                                        <input name="{{$related_question->id}}" type="file"
                                                               accept="image/*"   class="form-control">
                                                        @if($d_value)
                                                            <img class="img-fluid table-avtar"

                                                                 src="{{ asset($d_value) }}" alt="Image">
                                                        @endif
                                                        @break
                                                    @case('Free Text')
                                                        <input type="text" value="{{$d_value}}"
                                                               name="{{$related_question->id}}"
                                                               class="form-control">
                                                        @break
                                                    @case('Yes / No')
                                                        <select class="form-select" name="{{$related_question->id}}">
                                                            <option value="">Select ..</option>
                                                            <option value="Yes" @if("Yes" == $d_value) selected @endif>
                                                                Yes
                                                            </option>
                                                            <option value="No" @if("No" == $d_value) selected @endif>
                                                                No
                                                            </option>
                                                        </select>
                                                        @break
                                                    @case('Subjective')
                                                        <input type="text" value="{{$d_value}}"
                                                               name="{{$related_question->id}}" class="form-control">
                                                        @break
                                                    @case("Dropdown")
                                                        <select class="form-select" name="{{$related_question->id}}">
                                                            <option value="">Select ..</option>
                                                            @foreach($related_question->getOptions as $questionOption)
                                                                <option value="{{$questionOption->option}}"
                                                                        @if($questionOption->option == $d_value) selected @endif>
                                                                    {{$questionOption->option}}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @break
                                                    @case("Date")
                                                        <input type="date" value="{{$d_value}}"
                                                               name="{{$related_question->id}}" class="form-control">
                                                        @break
                                                    @case("File Upload")
                                                       <input type="file" name="{{$related_question->id}}"
                                                               class="form-control">
                                                        @break
                                                          @case("Video")
                                                        <input type="file" name="{{$related_question->id}}"
                                                               accept="video/*" class="form-control">
                                                        @break
                                                    @default
                                                        <input type="text" value="{{$d_value}}" class="form-control"
                                                               name="{{$related_question->id}}">
                                                @endswitch

                                            </td>
                                        </tr>
                                    @endforeach


                                    </tbody>
                                </table>

                                <button id="saveDraft" name="save_draft" class="btn btn-primary float-end">Save Draft
                                </button>
                                <button id="save" name="save" class="btn btn-primary float-end">Submit</button>
                            </form>
                            <!--end table-->
                        </div>
                    </div>
                </div>
                {{--@foreach($get_draft_values as $values)--}}
                {{--   <pre> {{$values}}</pre>--}}
                {{--@endforeach--}}
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script>
      



    $(document).ready(function () {
        
          // this is to hide all the rows of the table leaving on the first tr of each activity
            $('.response-row').hide();

            // Toggle visibility of response rows when a "submitted-by" row is clicked
            $('.submitted-by').on('click', function() {

                $(this).nextUntil('.submitted-by').toggle();
                $(this).find('.fa-angle-right, .fa-angle-down').toggleClass('fa-angle-right fa-angle-down');
            });
          // Function to remove required attribute from form fields
            function removeRequired() {
                $('#activityForm input, #activityForm select').removeAttr('required');
            }

            // Function to add required attribute to form fields
            function addRequired() {
                $('#activityForm input, #activityForm select').attr('required', 'required');
            }

            // On click of Save Draft button, remove required attribute
            $('#saveDraft').click(function () {
                removeRequired();
            });

            // On click of Submit button, add required attribute
            $('#save').click(function () {
                addRequired();
            });
            
            $(".remark_model_show").click(function (event){
               $("#exampleModalCenter1").modal('show');
               $("#previous_data_modal").modal('toggle');
                let info = $(this).data('info');
                $("#user_id").val(info.user_id);
                $("#row_id").val(info.row_id)
                $("#activity_group_name_id").val(info.activity_group_name_id)
                $("#activity_sequence").val(info.activity_sequence)
                $("#activity_id").val(info.template_id)
            })
           // this is to submit the remark request
            $("#send_remark").click(function (){
                const remark_val = $("#remark").val().trim();
                if(remark_val !=""){
                    // Serialize form data into an object
                    const formData = $("#remark_form").serializeArray().reduce(function(obj, item) {
                        obj[item.name] = item.value;
                        return obj;
                    }, {});
                    if (formData){
                        $.ajax({
                            url : "{{route('userAnswerRemark.add')}}",
                            type : "POST",
                            data : {
                                "_token" : '{{csrf_token()}}',
                                'form_data' : formData
                            },
                            success : function (response){
                                                                console.log(response)

                                if(response.message == "success"){
                                    Swal.fire({
                                        position: "top-center",
                                        icon: "success",
                                        title: "Remark sent successfull",
                                        showConfirmButton: false,
                                        timer: 1000
                                    });
                                }
                                else if(response.message=="Already Remarked"){
                                    Swal.fire({
                                        icon: "error",
                                        title: "Oops...",
                                        text: "You have already sent remark!",
                                    });
                                }
                                else{
                                    Swal.fire({
                                        icon: "error",
                                        title: "Oops...",
                                        text: "Something went wrong!",
                                    });

                                }
                            }

                        })
                    }


                    // You can now send formData via AJAX or perform other actions

                }else{
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: "Remark Can not be empty!",
                    });
                }
            })
        
            function render_users(zones){
                let user_select = $("#user_id");
                user_select.empty();
                user_select.append($('<option>').text('Choose...').attr('disabled', 'disabled').attr('selected', 'selected').val(''));
                $.each(zones, function (index, value){
                    user_select.append($('<option>').text(value.name).val(value.id));
                })
            }
            $("#role").change(function (e){
                const selectedRole = $(this).val();
                if(selectedRole){
                    $.ajax({
                        url:'{{route('get_roles_users')}}',
                        type:"POST",
                        data: {
                            "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                            "id":selectedRole
                        },
                        success:function (response){
                            if(response.message=="Success"){
                                render_users(response.related_users);
                            }
                        }
                    })
                }
            })

        })

    </script>
@endsection