@php
  $due_diligence_id = $due_diligence->id;
  $due_diligence_title = $due_diligence->title;

  $due_diligence_question_id = $due_diligence_question->id;
  $title = $due_diligence_question->title;
  $field_type = $due_diligence_question->field_type;
  $selected_file_type_arr = @json_decode(@$due_diligence_question->file_type) ?? [];
  $have_option = $due_diligence_question->have_option;
  $order = $due_diligence_question->order;
  $is_required = $due_diligence_question->is_required;
  $message = $due_diligence_question->message;
  $option_for_repeater = [];
  if($have_option == "Y")
  {
    foreach($due_diligence_question_options as $key => $record)
    {
      $option_for_repeater[$key]['caption'] = $record->caption;
      $option_for_repeater[$key]['have_field'] = $record->have_field;
      $option_for_repeater[$key]['field_type'] = $record->field_type;
    } 
  }
@endphp
@php
  $file_type_html =
  '
  <label for="file_type" class="form-label">
    <span>File Type ?</span>
  </label>
  ';
  $file_type_html = $file_type_html. 
  '
  <div class="mb-3">
  ';
  foreach($file_type_arr as $type => $caption)
  {
    $switch_class = "switch-primary";
    $check_class="file_type";
    
    if($type == 'all')
    {
      $switch_class = "switch-success";  
      $check_class="select_all_file_type";
    }

    //for edit only
    $checked = @in_array($type,$selected_file_type_arr) ? "checked" : "";

    $file_type_html = $file_type_html.
    ' 
    <label class="switch '.$switch_class.' mb-1">
      <input type="checkbox" class="switch-input '.$check_class.'" name="file_type[]" value="'.$type.'" 
      '.$checked.' />
      <span class="switch-toggle-slider">
        <span class="switch-on"></span>
        <span class="switch-off"></span>
      </span>
      <span class="switch-label">'.$caption.'</span>
    </label>
    ';
  }
  $file_type_html = $file_type_html. 
  '
  </div>
  ';

    $sub_question = ' 
    <div class="mb-3 control-group">
      <label  class="form-label">
        <span>Question Type</span>
        <span class="text-danger"></span>
      </label>
      <select id="question-sub_field_type-1" name="sub_field_type" class="sub_field_type form-select" data-allow-clear="true" data-placeholder="Select Question type" >
        <option value=""></option>';
      foreach($question_type_arr as $type => $caption)
      {
        if($type == 'select' || $type == 'radio' || $type == 'checkbox')
        {
          continue;
        }
        $sub_question = $sub_question.'<option value="'.$type.'" >'.$caption.'</option>';
      }
  $sub_question = $sub_question.
      '</select>
    </div>';

  $add_option_with_field_html = '
  <div class="form-repeater">
    <div class="d-flex align-items-center gap-2">
      <label for="file_type" class="form-label mb-0">
        <span>Add Options</span>
      </label>
      <a href="javascript:void(0)" class="btn btn-primary btn-sm py-1 add_repeater" data-repeater-create>
        <i class="ti ti-circle-plus ti-xxl me-1"></i>
        Add
      </a>
    </div>

    <div data-repeater-list="option">
      <div data-repeater-item>
        <div class="row">
          <div class="col-5"> 
            <div class="mb-3 col-10 mb-0 control-group">
              <label class="form-label" for="question-option-1">
                Caption
                <span class="text-danger">*</span>
              </label>
              <input type="text" id="question-option-1" name="caption" class="form-control required_validation" placeholder="Caption" />
            </div>
          </div>

          <div class="col-5"> 
            '.$sub_question.'
          </div>

          <div class="col-2 d-flex align-items-center mb-0">
            <a href="javascript:void(0);" class="text-danger" data-repeater-delete>
              <i class="ti ti-trash ti-md"></i>
            </a>
          </div>

        </div>
      </div>
    </div>
  </div>';

  $add_option_html = '
  <div class="form-repeater">
    <div class="d-flex align-items-center gap-2">
      <label for="file_type" class="form-label mb-0">
        <span>Add Options</span>
      </label>
      <a href="javascript:void(0)" class="btn btn-primary btn-sm py-1 add_repeater" data-repeater-create>
        <i class="ti ti-circle-plus ti-xxl me-1"></i>
        Add
      </a>
    </div>

    <div data-repeater-list="option">
      <div data-repeater-item>
        <div class="row">
          <div class="mb-3 col-10 mb-0 control-group">
            <label class="form-label" for="question-option-1">
              Caption
              <span class="text-danger">*</span>
            </label>
            <input type="text" id="question-option-1" name="caption" class="form-control required_validation" placeholder="Caption" />
          </div>
 
          <div class="col-2 d-flex align-items-center mb-0">
            <a href="javascript:void(0);" class="text-danger" data-repeater-delete>
              <i class="ti ti-trash ti-md"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>';
@endphp
<input type="hidden" id="file_type_html" value="{{ $file_type_html }}"/>
<input type="hidden" id="add_option_html" value="{{ $add_option_html }}"/>
<input type="hidden" id="add_option_with_field_html" value="{{ $add_option_with_field_html }}"/>
<input type="hidden" id="option_for_repeater" value="{{ json_encode($option_for_repeater) }}"/>

<div class="offcanvas-header">
  <h5 id="offcanvas_edit_due_diligence_question_label" class="offcanvas-title">Edit Question</h5>
  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body mx-0 py-0">
  <form id="edit_due_diligence_questions_form" action="{{ tokenize_url(route('admin.master.due_diligence.update_question'),['due_diligence_question_id' => $due_diligence_question_id]) }}" method="post" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="due_diligence_id" value="{{ $due_diligence_id }}">
    <div class="mb-3 control-group">
      <label class="form-label" for="title">
        <span>Title</span>
        <span class="text-danger">*</span>
      </label>
      <input type="text" class="form-control" id="title" name="title" placeholder="Title" value="{{ $title }}"/>
    </div>

    <div class="mb-3 control-group">
      <label for="field_type" class="form-label">
        <span>Question Type</span>
        <span class="text-danger">*</span>
      </label>
      <select id="field_type" name="field_type" class="select2 form-select form-select-lg" data-allow-clear="true"data-placeholder="Select Question type" >
        @foreach($question_type_arr as $type => $caption)
          @php
            $selected = "";
            if($field_type == $type)
            {
              $selected = "selected";
            }
          @endphp
          <option value="{{ $type }}" {{ $selected }}>{{ $caption }}</option>
        @endforeach
      </select>
    </div> 

    <div class="control-group mb-3" id="option_container">  
      @if($field_type == 'file')
        {!! $file_type_html !!}
      @elseif($have_option == 'Y')
        @if($field_type == 'select' || $field_type == 'radio')
          {!! $add_option_with_field_html !!}
        @else
          {!! $add_option_html !!}
        @endif
      @endif
    </div>

    <div class="mb-3 control-group">
      <label class="form-label" for="message">
        <span>Message</span>
      </label>
      <textarea class="form-control" id="message" name="message" placeholder="Message">{{ $message }}</textarea>
    </div>

    <div class="mb-3 control-group">
      <label class="form-label" for="order">
        <span>Question Order</span>
        <span class="text-danger">*</span>
      </label>
      
      <input class="form-control" type="number" min="1" value="{{ $order }}" id="order" name="order" style="width:10rem;"/>
    </div>

    <div class="mb-3 control-group">
      <label for="is_required" class="form-label">
        <span>Is Required</span>
      </label>
      <!--  -->
      <div class="">
        <label class="switch switch-danger">
          <input id="is_required" type="checkbox" class="switch-input" name="is_required" value="Y"
           {{ $is_required == 'Y' ? "checked" : "" }}/>
          <span class="switch-toggle-slider">
            <span class="switch-on"></span>
            <span class="switch-off"></span>
          </span>
          <span class="switch-label">Yes</span>
        </label>
      </div>
      <!--  -->
    </div> 
  </form>
</div>
<!-- Begin fotter -->
<div class="offcanvas-footer px-4 pb-3">
  <div class="d-flex align-items-center gap-2">
    <button id="edit_due_diligence_questions_form_submit" form="edit_due_diligence_questions_form" class="btn btn-primary btn-sm submit">
      Update
    </button>
    <button type="reset" form="edit_due_diligence_questions_form" class="btn btn-sm btn-secondary" data-bs-dismiss="offcanvas">
      Cancel
    </button>
  </div>
</div>
<!--End footer -->