@extends('layout.layout')

{{-- Style --}}
@push('links')
@endpush

{{-- Content --}}
@section('content')
<div class="row mb-3 btn-action-section">
  <div class="col-md text-right">
    <a class="btn btn-lg btn-success" href="{{$participant_route}}">
      <i class="fas fa-users"></i><span class="ml-1">報名人員</span>
    </a>
    <button class="btn btn-lg btn-success checkroll-btn">
      <i class="fas fa-file-pdf"></i><span class="ml-1">下載簽到表</span>
    </button>
    <a class="btn btn-lg btn-success" href="{{$back_route}}">
      <span class="fas fa-reply mr-1"></span>返回
    </a>
  </div>
</div>
<div class="row mb-3">
  <div class="col-12 offset-md-1 col-md-10">
    <div class="card">
      <h5 class="card-header align-middle">場次資料</h5>
      <div class="card-body">
        <table class="table table-bordered fixed">
          <tbody>
            <tr>
              <th class="align-middle text-center w-25" colspan="1">場次</th><td class="align-middle text-left w-75" colspan="3">{{$model->name}}</td>
            </tr>
            <tr>
              <th class="align-middle text-center w-25" colspan="1">活動地點</th><td class="align-middle text-left w-75" colspan="3">{{$model->location}}</td>
            </tr>
            <tr>
              <th class="align-middle text-center w-25" colspan="1">活動開始時間</th><td class="align-middle text-left w-75" colspan="3">{{$model->start_date}}</td>
            </tr>
            <tr>
              <th class="align-middle text-center w-25" colspan="1">活動結束時間</th><td class="align-middle text-left w-75" colspan="3">{{$model->end_date}}</td>
            </tr>
            <tr>
              <th class="align-middle text-center w-25" colspan="1">可參加人數名額</th><td class="align-middle text-left w-75" colspan="3">{{$model->participant_number}}</td>
            </tr>
            <tr>
              <th class="align-middle text-center w-25" colspan="1">已報名人數</th><td class="align-middle text-left w-75" colspan="3">{{$model->participants->count()}}</td>
            </tr>
            <tr>
              <th class="align-middle text-center w-25" colspan="1">疫調問卷</th><td class="align-middle text-left w-75" colspan="3">{{$activity_surveys[1]->survey->title??'尚未設定'}}</td>
            </tr>
            <tr>
              <th class="align-middle text-center w-25" colspan="1">活動後問卷</th><td class="align-middle text-left w-75" colspan="3">{{$activity_surveys[2]->survey->title??'尚未設定'}}</td>
            </tr>
          </tbody>
        </table>
        <div class="text-right">
          <a type="button" class="btn btn-success py-1" href="{{$edit_route}}">
            <i class="fas fa-edit fa-fw"></i><span class="ml-1">編輯</span>
          </a>

          <form action="{{$delete_route}}" method="post" id="del_form" class="d-inline-block">
            @csrf
            <span class="btn btn-danger py-1 delete-btn">
              <i class="fas fa-trash"></i>
              <span class="ml-1">刪除</span>
            </span>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script>
var checkroll_route = "{{$checkroll_route}}";
</script>
<script type="text/javascript">
$(document).ready(function() {
  $(document).on('click', '.checkroll-btn', function() {
    var url = checkroll_route;

    LoadingCover.show();
    $('.alert').remove();
    $.ajax({
      url: url ,
      type: 'POST',
      data: {
        _token: $('meta[name="csrf-token"]').attr('content'),
      },
      success: function(data){
        LoadingCover.hide();
        window.location.reload();
      },
      error: function(xhr){
        LoadingCover.hide();
        var errors = xhr.responseJSON;
        var alerts = [];
        for (var i = 0; i < Object.keys(errors).length; i++) {
          var error_arr = errors[Object.keys(errors)[i]];
          for (var j = 0; j < error_arr.length; j++) {
            alerts.push({ type: "danger", content: error_arr[j] });
          }
        }
        $( "#AlertTemplate" ).tmpl( alerts )
        .prependTo( "#component-response-alert" );
      }
    });

  });
  $(document).on('click', '.delete-btn', function() {
    if (!confirm('刪除後無法復原\n\n您確定要刪除嗎？')) {
      return;
    }
    $('#del_form').submit();
  });
});
</script>
@endpush