@extends('layouts/contentNavbarLayout')

@section('title', 'add blog')



@section('content')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/tagify/tagify.css')}} "/>
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/quill/typography.css')}}"/>
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/quill/katex.css')}}"/>
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/quill/editor.css')}}"/>
  <form action="{{route('admin.blog.store')}}" method="post" id="news" class="repeater-default"
        enctype="multipart/form-data">
    @csrf
    <div class="card">
      <h5 class="card-header"></h5>
      <div class="card-body">
        <div class="nav-align-top mb-4">

          <ul class="nav nav-pills mb-3" role="tablist">
            @foreach(config('lang') as $language)
              <li class="nav-item">
                <button type="button" class="nav-link   @if($loop->first) active @endif" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-{{$language}}" aria-controls="navs-pills-top-home" aria-selected="true">
                  {{$language}}</button>
              </li>
            @endforeach

          </ul>
          <div class="tab-content">
            @foreach(config('lang') as $language)
              <div class="tab-pane fade show @if($loop->first) active @endif" id="navs-pills-top-{{$language}}" role="tabpanel">
                <div class="row">
                  <div class="col-xl-3">
                    <label class="form-label">title {{$language}}</label>
                    <input class="form-control" name="name_{{$language}}" @if($loop->first) required @endif autocomplete="off">
                  </div>
                </div>

                <br>

                <div class="row mt-3 mb-3">
                  <div class="col-xl-12">
                    <h3>Description {{$language}}</h3>
                    <textarea class="form-control" rows="8" name="des_{{$language}}" @if($loop->first) required @endif></textarea>
                  </div>
                </div>

                <br>

                <h5 class="card-header">seo</h5>
                <div class="card-body">


                  <div class="row">
                    <div class="col-xl-3">
                      <label class="form-label">meta_title {{$language}}</label>
                      <input class="form-control" name="meta_title_{{$language}}" autocomplete="off">
                    </div>
                   </div>

                  <hr>

                  <div class="row">
                    <div class="col-xl-3">
                      <label class="form-label">meta_description {{$language}}</label>
                      <textarea class="form-control" name="meta_des_{{$language}}"></textarea>
                    </div>
                  </div>

                </div>

                <br>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
    <br>
    <div class="card">
      <h5 class="card-header"></h5>
      <div class="card-body">
        <h3>{{trans('main.more info')}}</h3>
        <div class="row">
          <div class="col">
             <label class="form-label">{{trans('main.image')}}</label>
            <input type="file" accept=".jpg, .png, image/jpeg, image/png" class="form-control" name="image" required>
           </div>

            <div class="col-xl-6">
              <label class="form-label">{{trans('main.category')}} </label>
              <select class="form-control" name="category_id" >
                <option></option>
                @foreach($categories as $category)
                  <option value="{{$category->id}}">{{$category->getTranslation('name')}}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>


      <br>
      <div class="card-footer">
        <button class="btn btn-primary" type="submit">{{trans('main.save')}}</button>
      </div>
    </div>
  </form>
@endsection


@section('vendor-script')

  <script src="{{asset('assets/vendor/libs/quill/katex.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/quill/quill.js')}}"></script>

  <script>



    var quill_ar = new Quill('#full-editor-ar', {
      modules: {
        toolbar: [
          [
            {
              font: []
            },
            {
              size: []
            }
          ],
          ['bold', 'italic', 'underline', 'strike'],
          [
            {
              color: []
            },
            {
              background: []
            }
          ],
          [
            {
              script: 'super'
            },
            {
              script: 'sub'
            }
          ],
          [
            {
              header: '1'
            },
            {
              header: '2'
            },
            'blockquote',
            'code-block'
          ],
          [
            {
              list: 'ordered'
            },
            {
              list: 'bullet'
            },
            {
              indent: '-1'
            },
            {
              indent: '+1'
            }
          ],
          [
            'direction',
            {
              align: []
            }
          ],
          ['link', 'image', 'video', 'formula'],
          ['clean']
        ]
      },
      placeholder: 'Compose an epic...',
      theme: 'snow'
    });
    var quill_en = new Quill('#full-editor-en', {
      modules: {
        toolbar: [
          [
            {
              font: []
            },
            {
              size: []
            }
          ],
          ['bold', 'italic', 'underline', 'strike'],
          [
            {
              color: []
            },
            {
              background: []
            }
          ],
          [
            {
              script: 'super'
            },
            {
              script: 'sub'
            }
          ],
          [
            {
              header: '1'
            },
            {
              header: '2'
            },
            'blockquote',
            'code-block'
          ],
          [
            {
              list: 'ordered'
            },
            {
              list: 'bullet'
            },
            {
              indent: '-1'
            },
            {
              indent: '+1'
            }
          ],
          [
            'direction',
            {
              align: []
            }
          ],
          ['link', 'image', 'video', 'formula'],
          ['clean']
        ]
      },
      placeholder: 'Compose an epic...',
      theme: 'snow'
    });


    var form = document.getElementById('news');
    form.onsubmit = function () {
      // Populate hidden form on submit
      var content_ar = document.querySelector('input[name=des_ar]');
      content_ar.value = quill_ar.root.innerHTML;
      var content_en = document.querySelector('input[name=des_en]');
      content_en.value = quill_en.root.innerHTML;
    }
  </script>
@endsection