@php
  $due_diligence_id = $due_diligence->id;
  $due_diligence_title = $due_diligence->title;
@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";
    }

    $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.'" />
      <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" 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" 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 }}"/>

<div class="offcanvas-header">
  <h5 id="offcanvas_add_due_diligence_question_label" class="offcanvas-title">Add Question ({{$due_diligence_title}})</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="add_due_diligence_questions_form" action="{{ route('admin.master.due_diligence.store_question') }}" 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"/>
    </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" data-ofcanvas_id="offcanvas_add_due_diligence_question">
        @foreach($question_type_arr as $type => $caption)
          <option value="{{ $type }}" >{{ $caption }}</option>
        @endforeach
      </select>
    </div> 

    <div class="control-group mb-3" id="option_container">  
      
    </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"></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="1" 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" />
          <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="add_due_diligence_questions_form_submit" form="add_due_diligence_questions_form" class="btn btn-primary btn-sm submit">
      Add
    </button>
    <button type="reset" form="add_due_diligence_questions_form" class="btn btn-sm btn-secondary" data-bs-dismiss="offcanvas">
      Cancel
    </button>
  </div>
</div>
<!--End footer -->