@extends('layout.layout')

{{-- Style --}}
@push('links')
<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">
<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">
@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" enctype="multipart/form-data">
        @csrf
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="SelectSite">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>活動場次</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            @php
            $activity_batch_id = old('activity_batch_id',isset($model)?$model->activity_batch_id:'');
            @endphp
            <select name="activity_batch_id" class="select2 form-control {{ $errors->has('activity_batch_id') ? ' is-invalid' : '' }}" id="SelectBatch" data-live-search="true" required>
              <option value="">請選擇活動場次</option>
              @foreach($activity_batch_options as $option)
              <option value="{{$option->id}}"
              @if($option->id==$activity_batch_id)
              selected
              @endif
              >{{$option->activity->name}}-{{$option->name}}</option>
              @endforeach
            </select>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('activity_batch_id'))
              @foreach($errors->get('activity_batch_id') 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
          $mode = old('mode',isset($model)?$model->mode:0);
          @endphp
          <div class="col-12 col-sm-9 radio-group d-flex align-items-center {{ $errors->has('mode') ? ' is-invalid' : '' }}">
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input {{ $errors->has('mode') ? ' is-invalid' : '' }}" id="mode1" name="mode" value="1" required
              @if($mode==1)
              checked
              @endif
              >
              <label class="custom-control-label" for="mode1">Email</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input {{ $errors->has('mode') ? ' is-invalid' : '' }}" id="mode2" name="mode" value="2" required
              @if($mode==2)
              checked
              @endif
              >
              <label class="custom-control-label" for="mode2">推播</label>
            </div>
            @if ($errors->has('mode'))
              @foreach($errors->get('mode') as $error)
              <div class="is-invalid"></div>
              <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="textareaDescription">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>發送內容</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <textarea class="form-control input-textarea {{ $errors->has('description') ? ' is-invalid' : '' }}" id="textareaDescription" name="description" rows="5" required>{{old('description')}}</textarea>
            @if ($errors->has('description'))
              @foreach($errors->get('description') 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="InputSendDate">
            <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="send_date" class="form-control datepicker {{ $errors->has('send_date') ? ' is-invalid' : '' }}" id="InputSendDate" value="{{old('send_date', isset($model->start_date)?$model->send_date:null)}}" readonly required />
            @if($errors->has('send_date'))
              @foreach ($errors->get('send_date') as $error)
                <div class="invalid-feedback">
                  {{$error}}
                </div>
              @endforeach
            @endif
          </div>
        </div>

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

{{-- Script --}}
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" integrity="sha256-AFAYEOkzB6iIKnTYZOdUf9FFje6lOTYdwRJKwTN5mks=" crossorigin="anonymous"></script>
<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>

$(document).ready(function() {
  $('.select2').select2({
    theme: 'bootstrap4',
  });
  var now = new Date();
  var startHour = (now.getMinutes()>30)?now.getHours()+1:now.getHours();
  var startMin = (now.getMinutes()>30)?'00':'30';
  var startDate = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + startHour + ":" + startMin + ":00";
  var minDateTime = new Date(startDate);
  $(".datepicker").datetimepicker({
    controlType: "select",
    changeMonth: true,
    dateFormat:"yy-mm-dd",
    showOn: 'both',
    buttonText: '<i class="fas fa-calendar"></i>',
    stepMinute: 30,
    minDateTime: minDateTime
  });
});
</script>
@endpush