@extends('layout.index')

@if (isset($chartId))
    @section('title', 'Edit Chart Tab')
@else
    @section('title', 'Add Chart Tab')
@endif
<!-- Dashboard Ecommerce start -->
@section('content')
    <section>

        <div class="content-body">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12 d-flex">
                            <h2 class="content-header-title float-start mb-0">Add Chart Tab                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if ($message = Session::get('error'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        {{-- <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> --}}
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif
        @if ($message = Session::get('success'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif

        <div class="content-body">
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form" action="" method="post" id="form">
                                    @csrf
                                    <input type="hidden" name="form_type" value="assign_tab_question">
                                    <input type="hidden" id="chartId" name="chartId" value="{{ $chartId }}">
                                    <input type="hidden" id="iId" name="id" value="{{ $iId }}">
                                    
                                    <h4 class="m-1 text-primary">Tab Details of {{ $tabTitle }}</h4>
                                    <div class="col-sm-3">
											<label class="form-label" for="validationCustom04">Chart Type<span style="color:red;"> *</span></label>

											
											<select class="form-select form-control" name='chartType' id="chartType"   onchange="set_question()">
												<option value=''>Select Chart Type</option>
																							</select>
                                            											<h5><small class="text-danger" id="chartType_err"></small></h5>
											@error('chartType')
												<span class="text-danger">{{ $message }}</span>
											@enderror
									</div>
                                        <hr>  
                                    <div class="row">
                                        
                                        
                                        <div class="col-sm-3">
                                            <label class="form-label" for="validationCustom04">Form Name:<span
                                                    style="color:red;"> *</span></label>
                                                                                        <select class="form-select form-control" name='masterForm' id="masterForm"
                                                onchange="get_Question(); get_chart_title();">
                                                <option value='0'>Select Form</option>
                                                                                            </select>
                                            <h5><small class="text-danger" id="masterForm_err"></small></h5>
                                            @error('masterForm')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-sm-4">
                                            <label class="form-label" for="validationCustom04">Questions :<span
                                                    style="color:red;"> *</span></label>

                                            <select class="form-select form-control select2" name='question[]'
                                                id="question" onchange="get_chart_title(); set_options();">
                                                <option value='0' @php
                                                    (isset($question) && $aData['question']==0)?'selected':'';
                                                @endphp>
                                                    Select Question                                                </option>
                                                                                                <input type="hidden" name="questionText[{{ $value->id }}]" value="{{ $value->name_description }}">
                                            </select>

                                            <h5><small class="text-danger" id="question_err"></small></h5>
                                            @error('question')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="col-md-3 col-12">
                                            <div class="form-group">
                                                <label for="chartTitle">Chart Title <span style="color:red;">
                                                        *</span></label>
                                                <input type="text" id="chartTitle" class="form-control"
                                                    placeholder="Enter Chart Title" name="chartTitle" autocomplete="off"
                                                    value="{{ old('chartTitle', $aData['chartTitle']) }}" />

                                                <h5><small class="text-danger" id="chartTitle_err"></small></h5>
                                                @error('chartTitle')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-2 col-12">
                                            <div class="form-group">
                                                <label for="sortOrder">Sort Order <span style="color:red;">
                                                        *</span></label>
                                                <input type="text" id="sortOrder" class="form-control"
                                                    placeholder="Enter Tab Title" name="sortOrder" autocomplete="off"
                                                    value="{{ old('sortOrder', $aData['sortOrder']) }}" />

                                                <h5><small class="text-danger" id="sortOrder_err"></small></h5>
                                                @error('sortOrder')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-sm-3">
                                            <label class="form-label" for="validationCustom04">Chart Width:<span
                                                    style="color:red;"> *</span></label>
                                                                                        <select class="form-select form-control" name='chartWidth' id="chartWidth">
                                                <option value='0'>Select Width</option>
                                                                                            </select>
                                            <h5><small class="text-danger" id="chartWidth_err"></small></h5>
                                            @error('chartWidth')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <div class="col-12 text-center mt-1">

                                            <button type="submit" class="btn btn-primary mr-1"
                                                onClick="return Validation(,);">Submit</button>
                                            <a href="{{ url('/chart_management') }}" type="reset"
                                                class="btn btn-outline-secondary ">Cancel</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Sr. No</th>
                                                <th class="text-left">Form Name</th>
                                                <th class="text-left">Question Name</th>
                                                <th class="text-left">Chart Title</th>
                                                <th class="text-left">Chart Type</th>
                                                <th class="text-center">Sort Order</th>
                                                <th class="text-center">Action</th>
        
                                            </tr>
                                        </thead>
                                        <tbody class="text-left">
                                                                                            <tr>
                                                    <td colspan="8" style="text-align:center; color:red;">No Record Found</td>
                                                </tr>
                                                                                    </tbody>
                                        
                                    </table>
                                    
                                </div>
                            </div>
                        </div>
                       
                    </div>
                </div>
            </section>
        </div>
        <div class="modal fade" id="edit_option_text" tabindex="-1" role="dialog" aria-labelledby="edit_option_text" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
              <div class="modal-content">
                <div class="col-xl-12">
                  <div class="social-profile mb-0">
               
                    <div class="card-body" >
                        <form class="form" id="model" action="" method="post">
                            @csrf
                            <div id="edit_option_text_body">
                                
                            </div>
                        </form>
                    </div>         
                    <br>
                  </div>
                </div>  
              </div>
            </div>
        </div>
    </section>
    <script>
        var aQuestion = [];
        var selectedQue=0;
        $(document).ready(function () {
            set_question();
        });

        function set_question(){
            var typeofChart = $('#chartType').val();
            
            if (typeofChart == 0) {
                $('#question').removeAttr('multiple'); // Single select
            } else if (typeofChart == 1) {
                $('#question').attr('multiple', 'multiple'); // Multi-select
            } else if (typeofChart === '') {
                $('#chartType').parent().addClass('has-error');
                $('#chartType_err').html('Please Select Chart Type.');
                $('#chartType').focus();
                
                $('#chartType').change(function () {
                    $('#chartType').parent().removeClass('has-error');
                    $('#chartType_err').html('');
                });

                return false;
            }

            // Reinitialize Select2 to reflect changes
            $('#question').select2();
            // Fetch questions when the document loads
            get_Question();
        }

      
        function get_Question() {
            var id=$('#iId').val();
            if(id == 0){
                if ($('#chartType').val() == "") {
                    $('#chartType').parent().addClass('has-error');
                    $('#chartType_err').html('Please Select Chart Type.');
                    $('#chartType').focus();
                    $('#chartType').change(function() {
                        $('#chartType').parent().removeClass('has-error');
                        $('#chartType_err').html('');
                    });
                    return false;
                }
            }

            var typeofChart = $('#chartType').val();
            var formId = $('#masterForm').val();
            var hasQuestions = false; // Flag to check if there are questions for the selected form
            var sQuestionOptions = ''; // Start with an empty options list
            
            var selectedArr = [];
            if (typeof selectedQue === "string") {
                selectedArr = selectedQue.split(",");
            }
            var aFilteredQuestions = []; 
            // Loop through questions
            $.each(aQuestion, function (key, question_obj) {
                if (typeofChart !== '' && typeofChart == 0) {
                    if (question_obj.type === 'radio' || question_obj.type === 'checkbox') {
                        aFilteredQuestions.push(question_obj); // Store matched questions
                    }
                } else if (typeofChart == 1) {
                    if (question_obj.options_inline) {
                        var options = JSON.parse(question_obj.options_inline);
                        if (options['Yes'] !== undefined && options['No'] !== undefined) {
                            aFilteredQuestions.push(question_obj); // Store matched questions
                        }
                    }
                }
            });
            
            $.each(aFilteredQuestions, function (key, question_obj) {
                if (question_obj.form_id == formId) {
                    hasQuestions = true;

                    // Check if this question is selected
                    var selected = selectedArr.includes(question_obj.id.toString()) ? 'selected' : '';

                    // Append option
                    sQuestionOptions += '<option value="' + question_obj.id + '" ' + selected + '>' + question_obj.name_description + '</option>';
                }
            })
            

            // Handle 'All Question' option
            if (hasQuestions) {
                var optionValue = (typeofChart == 1) ? 'All Question' : 'Select Question';
                var selectedAll = '';

                // Check: if selectedQue is exactly 0 (number or string)
                if (selectedQue == 0 || selectedQue === "0") {
                    selectedAll = 'selected';
                }

                sQuestionOptions = '<option value="0" ' + selectedAll + '>' + optionValue + '</option>' + sQuestionOptions;
            }

            // Update the select dropdown
            $('#question').html(sQuestionOptions);

            // Reinitialize Select2
            $('#question').select2();
        }

        function openEditModal(questionId,chartId,form_name)
        {
        
            var url;
            var tabId = $('#chartId').val();
            
            $.ajax({
                url: "