@extends('survey::layouts.master')

{{-- inject --}}
@inject('helper', 'Modules\Survey\Http\Helpers\ViewHelper')

{{-- Style --}}
@push('links')
<style>
.hidden{
  display: none;
}
</style>
@endpush

{{-- content --}}
@section('content')
<div class="row mb-3">
  <div class="col-md text-center">
    <h2>{{$survey->title}}</h2>
  </div>
</div>
<div class="row mb-3">
  <div class="col-md">
    <form method="POST">
      {{csrf_field()}}
      <div class="row">
        <div class="col-md-8 offset-md-2">
          <table class="w-100">
            @foreach ($survey->questions()->orderBy('sort')->get() as $question)
              <tr style="border-top: 3px solid black;">
                <td class="py-2">{{$question->pivot->sort}}</td>
                <td class="py-2"><b>{{$question->title}}</b>@if(!empty($question->pivot->required))<small class="text-red">(必填)</small>@endif</td>
              </tr>
              <tr>
                <td></td>
                <td class="py-2" style="border-top: 1px solid black;">
                  {!! $helper->renderQuestion($question->id, $question->pivot->required) !!}
                </td>
              </tr>
            @endforeach
          </table>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-md text-center">
          <input type="submit" class="btn btn-success" name="submit" value="儲存" @if($preview=='Y')disabled @endif />
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script>
jQuery(function($) {
  var requiredCheckboxes = $(':checkbox[required]'); requiredCheckboxes.on('change', function(e) { var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]'); var isChecked = checkboxGroup.is(':checked'); checkboxGroup.prop('required', !isChecked); }); requiredCheckboxes.trigger('change');

  $('.other_des').on("click", function() {
    var id = $(this).prop('id');
    if($(this).is(":checked")) {
      $('.'+id+'-section').removeClass('hidden');
      $('#'+id+'-des').attr("required",true);
    }else {
      $('.'+id+'-section').addClass('hidden');
      $('#'+id+'-des').attr("required",false);
    }
  });
  $('.other_des_disable').on("click", function() {
    var id = $(this).prop('id');
    var str = id.split("-");
    var id = str[0]+'-'+str[1]+'-other';
    if($(this).is(":checked")) {
      $('.'+id+'-section').addClass('hidden');
      $('#'+id+'-des').attr("required",false);
    }
  });
});
</script>
@endpush