@extends('layouts.app', [
    'class' => '',
    'elementActive' => 'announcements'
])

@section('content')
<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h2>Create an Announcement</h2>
        </div>
        <div class="card-body">
          @csrf
          <form action="{{ isset($announcement) ? route('admin.announcements.update', $announcement) : route('admin.announcements.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        @if (isset($announcement))
          <input type="hidden" name="_method" value="PUT">
        @endif
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a href="#" class="nav-link bg-aqua-active" id="en">EN</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link bg-aqua-active" id="my">MY</a>
          </li>
        </ul>

        <div class="card">
          <div class="card-body" id="english-form">
            <div class="form-group required">
              <label class="required" for="en_title">Title</label>
              <input class="form-control" type="text" name="en_title" id="en_title" value="{{ isset($announcement) ? $announcement->translate('en')->title : old('en_title') }}" required>
              {!! $errors->first('en_title', '<span class="help-block" style="color:red">:message</span>') !!}
            </div>

            <div class="form-group green-border-focus required">
              <label class="required" for="body">Body</label><br>
              <textarea class="form-control" name="en_body" id="en_body" rows="3">{{ isset($announcement) ? $announcement->translate('en')->body : old('en_body')}}</textarea>
              {!! $errors->first('en_body', '<span class="help-block" style="color:red">:message</span>') !!}
            </div>
            <hr>
          </div>

          <div class="card-body d-none" id="myanmar-form">
            <div class="form-group required">
              <label class="required" for="my_title">Burmese Title</label>
              <input class="form-control" type="text" name="my_title" id="my_title" value="{{ isset($announcement) ? $announcement->translate('my')->title : old('my_title') }}" required>
              {!! $errors->first('my_title', '<span class="help-block" style="color:red">:message</span>') !!}
            </div>
            <div class="form-group green-border-focus required">
              <label class="required" for="my_body">Burmese Body</label><br>
              <textarea class="form-control" name="my_body" id="my_body" rows="3">{{ isset($announcement) ? $announcement->translate('my')->body : old('my_body')}}</textarea>
              {!! $errors->first('my_body', '<span class="help-block" style="color:red">:message</span>') !!}
            </div>
            <hr>
          </div>

          <div class="card-body">      
            <div class="form-group required" style="min-height: 50px;">
              <label class="required" for="cover_image">Date</label>
              <input type="date" name="date" style="opacity: 1;" />
              {!! $errors->first('date', '<span class="help-block" style="color:red">:message</span>') !!}
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="float-right">                                                
            <a href="{{ route('admin.announcements.index') }}" class="btn btn-white btn-sm">Cancel</a>
            <input type="submit" class="btn btn-primary" value="{{ isset($announcement) ? 'Update' : 'Create' }}">
          </div>
        </div>
      </form>


        </div>
      </div>
    </div>
  </div>
</div>
@stop


@push('scripts')
<script>
  let $englishForm = $('#english-form');
  let $englishLink = $('#en');
  let $myanForm = $('#myanmar-form');
  let $myanLink = $('#my');

  $englishLink.click(function() {
    $englishLink.addClass('bg-aqua-active');
    $englishForm.removeClass('d-none');
    $myanLink.removeClass('bg-aqua-active');
    $myanForm.addClass('d-none');
  });
  
  $myanLink.click(function() {
    $englishLink.removeClass('bg-aqua-active');
    $englishForm.addClass('d-none');
    $myanLink.addClass('bg-aqua-active');
    $myanForm.removeClass('d-none');
  });
</script>
@endpush