@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('js/emojionearea/dist/emojionearea.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('bootstrap4-tag-input-jquery/tagsinput.css') }}" rel="stylesheet" type="text/css">
<style type="text/css">
  #push-form .emojionearea {
    width: 100%;
    word-wrap: break-word;
  }
  .emojionearea .emojionearea-editor:empty:before {
    display: none;
  }
  .badge-info {
    color: white;
    background-color: #0275d8;
    margin-left: 3px;
  }
  .bootstrap-tagsinput {
    padding: 0.5rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
  }
  .hidden{
    display: none;
  }
</style>
@endpush

{{-- Content --}}
@section('content')
<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="push-form" method="POST" action="{{route('message.push')}}">
        {{csrf_field()}}
        <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">
            <textarea class="form-control input-textarea {{ $errors->has('message') ? ' is-invalid' : '' }}" id="message" name="message">{{old('message')}}</textarea>
            <input type="hidden" name="hiddenMessage" id="hiddenMessage" />
            @if ($errors->has('message'))
              @foreach($errors->get('message') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
            <div class="text-danger message-error alert-message hidden">
              *必填欄位
            </div>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputName">
            <span class="align-middle"><b>連結網址</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" name="message_url" class="form-control {{ $errors->has('message_url') ? ' is-invalid' : '' }}" id="InputName" value="{{ old('message_url') }}" placeholder="http(https)://" required>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('message_url'))
              @foreach($errors->get('message_url') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
          </div>
        </div>

        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-9">
            @can('broadcast', Modules\Message\Entities\Message::class)
            <ul class="nav nav-tabs" id="typeTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link @if($action=='all') active @endif" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all">全部推播</a>
              </li>
              @if(in_array('single', config('message.objects')))
              <li class="nav-item">
                <a class="nav-link @if($action=='single') active @endif" id="single-tab" data-toggle="tab" href="#single" role="tab" aria-controls="single">群組推播</a>
              </li>
              @endif
            </ul>
            <div class="tab-content" id="myTabContent">
              {{-- 全部推播 --}}
              @include('message::component.tab-all')
              {{-- 個人推播 --}}
              @include('message::component.tab-single')
            </div>
            @elsecan('manager', Modules\Message\Entities\Message::class)
            {{-- 個人推播 --}}
            @include('message::component.tab-single')
            @endcan
          </div>
        </div>
        <input type="hidden" id="hid-action" name="action" value="" />
      </form>
    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script type="text/javascript" src="{{ asset('js/emojionearea/dist/emojionearea.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bootstrap4-tag-input-jquery/tagsinput.js') }}"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#message").emojioneArea({
      pickerPosition: "left",
      filtersPosition: "bottom"
    });

    $(".submitBtn").click(function(){
      var val = $(this).val();
      var message = $("div.emojionearea-editor").html();
      $('.alert-message').addClass('hidden');
      if (message.length<=0) {
        $("div.emojionearea-editor").focus();
        $('.message-error').removeClass('hidden');
        return;
      }
      if (val=='single') {
        var object = $("[name=object]").val();
        if (object.length<=0) {
          $("[name=object]").tagsinput('focus');
          $('.object-error').removeClass('hidden');
          return;
        }
      }
      $("#hid-action").val(val);
      $("#push-form").submit();
    });

    $("#push-form").submit(function(event){
      $("input[name=\'hiddenMessage\']").val($("div.emojionearea-editor").html());
    });

  });
</script>
@endpush