@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('js/jquery-ui-1.12.1/jquery-ui.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('js/jquery-ui-1.12.1/jquery-ui.theme.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('js/jquery-timepicker-addon/jquery-ui-timepicker-addon.css') }}" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css">
<style>
  .hidden{
    display: none;
  }
</style>
@endpush

{{-- Content --}}
@section('content')
@include('custom::component.reply-btn', ['url' => $back_route])
<div class="row justify-content-center">
  <div class="col-12 col-lg-10">
    <div class="shadow-sm p-3 bg-white rounded-lg pt-4">
      <form id="editForm" method="post">
        @csrf
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputName">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>場次名稱</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" name="name" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" id="InputName" value="{{ old('name',isset($model->name)?$model->name:null) }}" placeholder="場次名稱" required>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('name'))
              @foreach($errors->get('name') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputLocation">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>活動場次地點</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" name="location" class="form-control {{ $errors->has('location') ? ' is-invalid' : '' }}" id="InputLocation" value="{{ old('location',isset($model->location)?$model->location:null) }}" placeholder="活動場次地點" required>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('location'))
              @foreach($errors->get('location') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
          </div>
        </div>

        {{-- 活動場次開始時間 --}}
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputStartDate">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>活動場次開始時間</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" name="start_date" class="form-control datepicker {{ $errors->has('start_date') ? ' is-invalid' : '' }}" id="InputStartDate" value="{{old('start_date', isset($model->start_date)?$model->start_date:$activity->start_date)}}" data-group="normal" readonly required />
            @if($errors->has('start_date'))
              @foreach ($errors->get('start_date') as $error)
                <div class="invalid-feedback">
                  {{$error}}
                </div>
              @endforeach
            @endif
          </div>
        </div>

        {{-- 活動場次結束時間 --}}
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputEndDate">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>活動場次結束時間</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" name="end_date" class="form-control datepicker {{ $errors->has('end_date') ? ' is-invalid' : '' }}" id="InputEndDate" value="{{old('end_date', isset($model->end_date)?$model->end_date:$activity->end_date)}}" data-group="normal" readonly required />
            @if($errors->has('end_date'))
              @foreach ($errors->get('end_date') as $error)
                <div class="invalid-feedback">
                  {{$error}}
                </div>
              @endforeach
            @endif
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputParticipantNumber">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>可參加人數名額</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="number" name="participant_number" class="form-control {{ $errors->has('participant_number') ? ' is-invalid' : '' }}" id="InputParticipantNumber" value="{{ old('participant_number',isset($model->participant_number)?$model->participant_number:null) }}" placeholder="可參加人數名額" step="1" min="1" required>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('participant_number'))
              @foreach($errors->get('participant_number') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>是否啟用疫調問卷</b></span>
          </label>
          @php
          $need_tracing_survey = old('need_tracing_survey',isset($model)?$model->need_tracing_survey:0);
          @endphp
          <div class="col-12 col-sm-9 radio-group d-flex align-items-center {{ $errors->has('need_tracing_survey') ? ' is-invalid' : '' }}">
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input {{ $errors->has('need_tracing_survey') ? ' is-invalid' : '' }}" id="need_tracing_surveyY" name="need_tracing_survey" value="1" required
              @if($need_tracing_survey==1)
              checked
              @endif
              >
              <label class="custom-control-label" for="need_tracing_surveyY">是</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input {{ $errors->has('need_tracing_survey') ? ' is-invalid' : '' }}" id="need_tracing_surveyN" name="need_tracing_survey" value="0" required
              @if($need_tracing_survey==0)
              checked
              @endif
              >
              <label class="custom-control-label" for="need_tracing_surveyN">否</label>
            </div>
            @if ($errors->has('need_tracing_survey'))
              @foreach($errors->get('need_tracing_survey') as $error)
              <div class="is-invalid"></div>
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
          </div>
        </div>

        @php
        $tracing_survey = (isset($model)&&$model->surveys->where('type_id','1')->first())?$model->surveys->where('type_id','1')->first()->survey:$tracing_survey;
        @endphp
        <div class="form-group row tracing_survey-group @if($need_tracing_survey!=1) d-none @endif">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputLocation">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>疫調問卷</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" class="form-control" value="{{$tracing_survey->title ?? null}}" readonly>
            @if(!$tracing_survey)
            <span class="form-text text-danger" style="width:100%;">尚未設定疫調問卷範本，請聯絡相關單位。</span>
            @endif
          </div>
        </div>

        @php
        $activity_surveys = (isset($model))?$model->surveys->pluck('survey_id','type_id'):[];
        @endphp
        @foreach ($types as $type)
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="Select-{{$type->id}}">
            <span class="align-middle"><b>{{$type->name}}</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            @php
            $value = old('survey_'.$type->id,$activity_surveys[$type->id]??0);
            @endphp
            <select name="survey_{{$type->id}}" class="select2 form-control {{ $errors->has('survey_'.$type->id) ? ' is-invalid' : '' }}" id="Select-{{$type->id}}" data-live-search="true">
              <option value="">請選擇{{$type->name}}</option>
              @foreach($survey_options as $option)
              <option value="{{$option->id}}"
              @if($option->id==$value)
              selected
              @endif
              >{{$option->title}}</option>
              @endforeach
            </select>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('survey_'.$type->id))
              @foreach($errors->get('survey_'.$type->id) as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
          </div>
        </div>
        @endforeach

        <div class="text-center mt-5">
          <button type="button" class="btn btn-lg btn-success font-weight-bold batch-submit-btn">儲存</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script type="text/javascript" src="{{ asset('js/jquery-ui-1.12.1/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/jquery-ui-timepicker-tw-year-addon.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/i18n/jquery-ui-timepicker-zh-TW.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/datepicker-default-setting.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/jquery-ui-timepicker-addon.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/i18n/jquery-ui-timepicker-zh-TW.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" integrity="sha256-AFAYEOkzB6iIKnTYZOdUf9FFje6lOTYdwRJKwTN5mks=" crossorigin="anonymous"></script>
<script>
  let setting = {
    controlType: "select",
    changeMonth: true,
    dateFormat:"yy-mm-dd",
    showOn: 'both',
    buttonText: '<i class="fas fa-calendar"></i>',
    stepMinute: 30,
    onClose: function (dateText, inst) {
      var start = $('[name="start_date"]').val();
      var end = $('[name="end_date"]').val();

      if (start.length>0&&end.length>0) {
        if (start>end) {
          var mes = '活動場次開始時間須小於活動場次結束時間！';
          alert(mes);
          $(this).val('');
        }
      }
    }
  };

$(document).ready(function() {
  $(".datepicker").datetimepicker(setting);
  $('.select2').select2({
    theme: 'bootstrap4',
  });
  $(document).on('click', '[name=need_tracing_survey]', function() {
    var need_tracing_survey = $(this).val();
    if (need_tracing_survey=='1') {
      $('.tracing_survey-group').removeClass('d-none');
    }else {
      $('.tracing_survey-group').addClass('d-none');
    }
  });
  $('.batch-submit-btn').on("click", function() {
    var form = $("#editForm");
    var is_valid = true;

    if (!form[0].checkValidity()) {

      form[0].reportValidity();
      return;
    }

    var name = $('[name=name]').val();
    if (typeof name =='undefined'||name.length<=0) {
      alert('『場次』為必填!');
      is_valid = false;
    }

    var start_date = $('[name=start_date]').val();
    var end_date = $('[name=end_date]').val();
    if (typeof start_date =='undefined'||start_date.length<=0||typeof end_date =='undefined'||end_date.length<=0) {
      alert('『活動場次時間起迄日』為必填!');
      is_valid = false;
    }

    var participant_number = $('[name=participant_number]').val();
    if (typeof participant_number =='undefined'||participant_number.length<=0) {
      alert('『可參加人數名額』為必填!');
      is_valid = false;
    }

    if (!is_valid) {
      return;
    }

    LoadingCover.show();

    form.submit();
  });
});
</script>
@endpush