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

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

{{-- Breadcrumbs --}}
@section('breadcrumbs')
  @if(class_exists('Breadcrumbs') && Breadcrumbs::exists(Route::currentRouteName()))
    <h2>{{ Breadcrumbs::render(Route::currentRouteName(), Route::current()->parameters) }}</h2>
  @endif
@endsection

{{-- Style --}}
@push('links')
<style nonce="{{ csp_nonce() }}">
  #title-th{
    width: 40%;
  }
</style>
@endpush

{{-- content --}}
@section('content')
@include('custom::component.reply-btn', ['url' => route('admin.survey.index')])
<div class="row mb-3">
  {{-- 基本資料 --}}
  <div class="col-md-5">
    <div class="card">
      <h5 class="card-header align-middle">
        基本資料
        <a class="btn btn-light choose float-right mx-2 my-n1 py-1 text-dark" href="{{route('admin.survey.edit', $survey->id)}}">
          <span class="fas fa-edit">&ensp;</span>編輯
        </a>
      </h5>
      <div class="card-body px-3">
        <table class="table table-bordered card-tabledata m-0 mb-3">
          <tbody>
            <tr>
              <th id="title-th" scope="row">標題</th>
              <td scope="row">{{$survey->title}}</td>
            </tr>
            <tr>
              <th scope="row">狀態</th>
              <td scope="row">
                <form method="POST" action="{{ route('admin.survey.status', $survey->id)}}" id="formStatus">
                  {{csrf_field()}}
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" class="custom-control-input radio-status" name="status" value="1" id="radioYes"
                      {{($survey->status == 1)? 'checked':''}}
                    />
                    <label class="custom-control-label" for="radioYes">啟用</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" class="custom-control-input radio-status" name="status" value="0" id="radioNo"
                      {{($survey->status == 0)? 'checked':''}}
                    />
                    <label class="custom-control-label" for="radioNo">停用</label>
                  </div>
                </form>
              </td>
            </tr>
            <tr>
              <th scope="row" class="align-middle">填寫時間</th>
              <td scope="row">
                <div>{{$helper->formatDate($survey->started_at)}}</div>
                <div>{{$helper->formatDate($survey->finished_at)}}</div>
              </td>
            </tr>
            <tr>
              <th scope="row" class="align-middle">回答數</th>
              <td scope="row" class="align-middle">
                <div class="d-flex justify-content-between align-items-center">
                <span>{{$survey->replies()->count()}}</span>
                <a href="{{route('admin.survey.answer.index', ['survey'=>$survey->id])}}" class="btn btn-primary py-1">詳細</a>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row" class="align-middle">問卷網址</th>
              <td>
                <a id="publicUrl" target="_blank" href="{{route('survey.preface', ['survey_uuid'=>$survey->uuid])}}"line-break:anywhere;">{{route('survey.preface', ['survey_uuid'=>$survey->uuid])}}</a>
              </td>
            </tr>
          </tbody>
        </table>
        <div>
          <a type="button" class="btn btn-dark btn-block py-1" href="{{route('survey.preface', ['survey_uuid'=>$survey->uuid,'preview'=>'Y'])}}" target="_blank">
            <span class="fas fa-eye">&ensp;</span>預覽問卷
          </a>
          @if($survey->question_editable)
          <button type="button" class="btn btn-danger btn-block btn-delete py-1">
            <span class="fas fa-trash">&ensp;</span>刪除
          </button>
          @endif
        </div>
      </div>
    </div>
  </div>
  {{-- 題目 --}}
  <div class="col-md-7">
    <div class="card">
      <h5 class="card-header align-middle">
        題目
        @if($survey->question_editable)
        <a href="{{route('admin.survey.questionEdit', $survey->id)}}" class="btn btn-light choose float-right mx-2 my-n1 py-1 text-dark" type="button">設定</a>
        @endif
      </h5>
      <div class="card-body px-3">
        <input type="hidden" id="js-questionSort-url" value="{{route('admin.survey.questionSort', $survey->id)}}"/>
        <div class="csrfDiv">{{csrf_field()}}</div>
        <form id="questionForm">
        <small class="d-block d-lg-none sort-description text-danger">需排序題目順序，請於電腦網頁上進行</small>
        <table class="table table-bordered card-tabledata question-table m-0">
          @if(!$questions->count())
          <thead>
            <tr>
              <td colspan="5" class="text-center">尚無題目</td>
            </tr>
          </thead>
          @endif
          <tbody>
            @foreach($questions as $question)
            <tr class="tr-question">
              <td class="px-0 sort-td text-center" data-id="{{$question->id}}">@if($survey->question_editable)<span class="d-none d-lg-block fas fa-arrows-alt handle"></span>@endif</td>
              <td scope="row">{{$question->pivot->sort}}</td>
              <td scope="row">{{$question->title}}</td>
              <td scope="row">{{config('survey.question_type')[$question->type]}}</td>
              <td scope="row">
                @php
                $is_required = !empty($question->pivot->required)?'Y':'N';
                @endphp
                <div class="radio-group {{ $errors->has('is_required') ? ' is-invalid' : '' }}">
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" class="custom-control-input is_required_radio {{ $errors->has('is_required') ? ' is-invalid' : '' }}" id="is_required{{$question->id}}Y" name="is_required[{{$question->id}}]" data-id="{{$question->id}}" value="Y" required @if(!$survey->question_editable)disabled @endif
                    @if($is_required=='Y')
                    checked
                    @endif
                    >
                    <label class="custom-control-label" for="is_required{{$question->id}}Y">必填</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" class="custom-control-input is_required_radio {{ $errors->has('is_required') ? ' is-invalid' : '' }}" id="is_required{{$question->id}}N" name="is_required[{{$question->id}}]" data-id="{{$question->id}}" value="N"  @if(!$survey->question_editable)disabled @endif
                    @if($is_required=='N')
                    checked
                    @endif
                    >
                    <label class="custom-control-label" for="is_required{{$question->id}}N">非必填</label>
                  </div>
                </div>
                @if ($errors->has('is_required'))
                  @foreach($errors->get('is_required') as $error)
                  <div class="invalid-feedback">
                    {{ $error }}
                  </div>
                  @endforeach
                @endif
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- 刪除Modal --}}
<div class="modal" id="modal-delete">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title"><span class="fas fa-trash">&ensp;</span>確認刪除此問卷</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div class="text-center">
          <h2>{{ $survey->title }}</h2>
          <small class="text-danger">刪除問卷有可能造成相關紀錄無法正確顯示，請善用『停用』功能</small>
        </div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <form method="POST" action="{{ route('admin.survey.destroy', $survey->id) }}">
          {{ csrf_field() }}
          <input type="hidden" name='_method' value='DELETE' />
          <input type="submit" name="submit" class="btn btn-danger" value="刪除" />
        </form>
        <button type="button" class="btn btn-primary" data-dismiss="modal">關閉</button>
      </div>
    </div>
  </div>
</div>
@endsection

{{-- Scripts --}}
@push('scripts')
<script type="text/javascript" src="{{ URL::asset('js/jquery-ui-1.10.2/ui/jquery-ui.js') }}"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" nonce="{{ csp_nonce() }}">
var questionRoute = "{{route('admin.survey.questionRequired', $survey->id)}}";
  $(document).ready(function(){
    $(".question-table tbody").sortable({
      handle: '.handle',
      update: function( event, ui ) {
        let data = [];
        $(this).children().each(function(index) {
          $(this).find('td').eq(1).html(index + 1)
          let id = $(this).find('td').eq(0).data("id");
          data.push({
            id: id,
            sort: index + 1
          });
        });
        LoadingCover.show();
        $('.alert').remove();
        $.ajax({
          url: $("#js-questionSort-url").val(),
          type: 'POST',
          data:{
            _token: $('.csrfDiv input').val(),
            data: data,
          },
          dataType: 'json',
          success: function(data) {
            LoadingCover.hide();
            var alerts = [{ type: "success", content: data.message }]
            $( "#AlertTemplate" ).tmpl( alerts )
            .appendTo( "#component-response-alert" );
          },
          error: function(xhr){
            LoadingCover.hide();
            window.location.reload();
          }
        });
      }
    });

    $(".is_required_radio").on('click', function() {
      var is_required = $(this).val();
      var id = $(this).data('id');
      LoadingCover.show();
      $('.alert').remove();
      $.ajax({
        url: questionRoute ,
        type: 'POST',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content'),
            id: id,
            is_required: is_required,
        },
        success: function(data){
          LoadingCover.hide();
          var alerts = [{ type: "success", content: data.message }]
          $( "#AlertTemplate" ).tmpl( alerts )
          .appendTo( "#component-response-alert" );
        },
        error: function(xhr){
          LoadingCover.hide();
          window.location.reload();
        }
      });
    });

    $(".btn-delete").on('click', function() {
      $("#modal-delete").modal('show');
    });

    $(".radio-status").on("change", function() {
      LoadingCover.show();
      $("#formStatus").submit();
    });
  });
</script>
@endpush