@extends('admin.layouts.container')
@section('css')
 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')
<div class="side-title">
    <h3>{{ $head ?? '' }}</h3>
</div>

<div class="border-item">
    <form class="form-row" method="post" action="{{ $action }}">
        @if($answer ?? ''  && $answer->id)
            @method('PUT')
        @endif
        @CSRF

       <div class="form-group col-lg-6">
                <label>{{ meta('patients', getCurrentLocale()) ?? __('answers.patients') }} </label>
               
                     
                         <select  onchange="selectpatient(this)" class="js-example-basic-single form-control {{ $errors->has('user_id') ? 'is-invalid' : '' }}" multiple  name="user_id">
                           
                    @foreach($patients as $row)
                    <option @if($answer ?? ''  && $answer->id) @if($row->id == $answer->id) selected @endif @endif value="{{$row->id}}"> {{$row->name}}</option>
                    @endforeach
                    </select>
              
              
                </div>
                
     
                 @if($answer ?? ''  && $answer->id)
                  <div class="form-group col-lg-12">
            <label>الوصف المريض </label>
            <textarea  class="form-control my-editor {{ $errors->has('description') ? 'is-invalid' : '' }}" id="datadescription" name="description" >{{  $description }}</textarea>
        </div>
                 @else
                   <div class="form-group col-lg-12" id="description" style="display:none">
            <label>الوصف المريض </label>
            <textarea  class="form-control my-editor {{ $errors->has('description') ? 'is-invalid' : '' }}" id="datadescription" name="description" ></textarea>
        </div>
                 @endif
       
      
               <div class="row pricing-list-item border-item mb-4 col-12" @if($answer ?? ''  && $answer->id)   @else  style="display:none" @endif  id="answers">
                    @if($answer ?? ''  && $answer->id)
                    <div  class="row pricing-list-item border-item mb-4 col-12"  >
                    @foreach($rows as $key=>$row)
                    
                  
                   <div class="row pricing-list-item border-item mb-4 col-12">
            
                 <div class="form-group col-lg-6">
                <label>{{ __("answers.question") }} </label>
               
                     
                         <select id="answers" class="form-control " onchange="questionselect(this)" data-id="{{$key}}" name="answers[{{$key}}][question_id]">
                             <option selected disabled>{{__('answers.select')}}</option>
                            @foreach($questions as $question)
                            <option @if($question->id == $row->question_id) selected @endif value="{{$question->id}}">{{$question->question}}</option>
                            @endforeach
                    </select>
              
              </div>
               <div class="form-group col-lg-5">
                <label> {{ __("answers.answer") }} </label>
               <select id="answerdata{{$key}}" class="form-control " name="answers[{{$key}}][answer_id]">
                             <option selected disabled>{{__('answers.selectquestion')}}</option>
                            @foreach(answers($row->question_id) as $answer)
                            <option @if($answer->id == $row->answer_id) selected @endif  value="{{$answer->id}}">{{$answer->answer}}</option>
                            @endforeach
                    </select>
              
                </div>
                   <div class="form-group col-lg-1" style="font-size: 30px;margin-top:30px;" onclick="removequestion(this)"><i class="fas fa-times-circle"></i></div>
   
              <div class="form-group col-lg-6">
            <label>{{ meta('date', getCurrentLocale()) ?? __('answers.date') }} </label>
            <input type="date" class="form-control {{ $errors->has('date') ? 'is-invalid' : '' }}" name="answers[{{$key}}][date]" placeholder="{{ meta('date', getCurrentLocale()) ??__('answers.date') }}" value='{{ old("date", $row->date ?? "") }}' >
        </div>
                  <div class="form-group col-lg-12" >
            <label>المحتوي</label>
            <textarea  class="form-control {{ $errors->has('description') ? 'is-invalid' : '' }}" id="datadescription" name="answers[{{$key}}][description]" >{{$row->description}}</textarea>
        </div>
                </div>
         
                    @endforeach
                    </div>
                    @endif
                    
                </div>
<div class="col-lg-12">
       <a style="cursor: pointer;" @if($answer ?? ''  && $answer->id) data-id="{{count($questions)}}" @else   data-id="0" @endif onclick="addquestion(this)" class="btn_1 gray "><i class="fa fa-fw fa-plus-circle"></i>اضافة سؤال</a>
                   
</div>


        <div class="text-center mt-5 col-12">
            <button class="butn"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </form>
</div>

@endsection

@section('inner_js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('.js-example-basic-single').select2({maximumSelectionLength: 1,placeholder: 'ادخل الاسم',});
    $('.select2-search__field').css('font-size','14px');
    $('.selection').attr('class', 'form-control');
});

    function addmealtype(elem){
        var num = $(elem).attr('data-id');
        var code = ''
        $('.parent_container').append(`
        <div class="row col-12 pricing-list-item border-item mb-4">
          <div class="form-group col-lg-6">
            <label>الكود </label>
            <input class="form-control" name="code[`+num+`][name]" placeholder="الكود">
          
        </div>
        <div class="form-group col-lg-6" style="font-size: 30px;margin-top:35px;">
    	<i class="fas fa-times-circle" onclick="remove(this)"></i></div>
       
         <div class="form-group col-lg-12">
          <label>الوجبة </label>
                <textarea name="code[`+num+`][description]" class="appended_text_area"></textarea>
                </div>
               </div>
            `);
            tinymce.init({
                selector: '.appended_text_area',
                plugins: 'image code',
                toolbar: 'undo redo | link image | code',
                image_title: true,
                automatic_uploads: true,
                file_picker_types: 'image',
                file_picker_callback: function (cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

   

    input.onchange = function () {
      var file = this.files[0];

      var reader = new FileReader();
      reader.onload = function () {
       
        var id = 'blobid' + (new Date()).getTime();
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);

        /* call the callback and populate the Title field with the file name */
        cb(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };

    input.click();
  },
                init_instance_callback: function (editor) {
                    editor.on('click', function (e) {
                        console.log('Element clicked:', e.target.nodeName);
                    });
                }
            });
            

        
        
        var newrow = parseInt(num)+1; 
        $(elem).attr('data-id', newrow);
        
       
    }
    function removequestion(elem){
        $(elem).closest('.row').remove();
    }
    function addquestion(elem){
       
        var num = $(elem).attr('data-id'); 
        
        var newrow = parseInt(num)+1; 
        $(elem).attr('data-id', newrow);
        
        //alert(url_question+'/'+num);
        
         $.ajax({
          url : url_question+'/'+num,
          type : 'GET',
          data : 'nothing',
          success:function(data)
          {
             $('#answers').css('display','block');
            $('#answers').append(data);
              
          }
        })
    }
    function questionselect(elem){
       
        var data = $(elem).val();
        var num = $(elem).attr('data-id');
        
         $.ajax({
          url : url_answer+'/'+data,
          type : 'GET',
          data : 'nothing',
          dataType : 'json',
          
          success:function(data)
          {
              
            $('#answerdata'+num).html(data);
               
          }
        })
    }
     function selectpatient(elem){
       
        var num = $(elem).val();
        //alert(url_patient+'/'+num);
         $.ajax({
          url : url_patient+'/'+num,
          type : 'GET',
          data : 'nothing',
          dataType : 'json',
          success:function(data)
          {
              
            $('#description').css('display','block');
            $('#datadescription_ifr').val(data);
          }
        })
    }
    
    </script>
    <!-- Editor JS files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            url_question = "{{url('/')}}/admin/answerdata",
            url_answer   = "{{url('/')}}/admin/answersall",
            url_patient = "{{url('/')}}/admin/patientdata",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
@endsection