@extends('layouts/contentNavbarLayout')

@section('title', 'Courses')

@section('content')

  <form action="{{route('admin.product.store')}}" method="post" id="news" class="repeater-default"
        enctype="multipart/form-data">
    @csrf


    <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 text-capitalize" role="tab"
                    data-bs-toggle="tab"
                    data-bs-target="#navs-pills-top-{{$language}}" aria-controls="navs-pills-top-{{$language}}"
                    aria-selected="true">
              {{$language}}</button>
          </li>
        @endforeach

      </ul>
      <div class="tab-content bg-opacity-10" style="background:none">
        @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="card">
              <h5 class="card-header">Product Info </h5>
              <div class="card-body">


                <div class="row">
                  <div class="col-xl-6">
                    <label class="form-label">Name {{$language}}</label>
                    <input class="form-control" name="name_{{$language}}" @if($loop->first) required @endif autocomplete="off">
                  </div>

                </div>

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

              </div>
            </div>
            <hr>
            <div class="card">
              <h5 class="card-header">seo</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-xl-4">
                    <label class="form-label">meta title {{$language}}</label>
                    <input class="form-control" name="meta_title_{{$language}}" autocomplete="off">
                  </div>
                </div>
                <div class="row">
                  <div class="col-xl-4">
                    <label class="form-label">meta description {{$language}}</label>
                    <textarea class="form-control" name="meta_des_{{$language}}"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endforeach


      </div>
    </div>

    <br>
    <div class="card">
      <h5 class="card-header"></h5>
      <div class="card-body">
        <h3>More Info</h3>

        <div class="row">
          <div class="col">
            <label class="form-label">image</label>
            <input type="file" accept=".jpg, .png, image/jpeg, image/png" class="form-control" required
                   name="image">
          </div>
          <div class="col">
            <label class="form-label">gallery</label>
            <input type="file" accept=".jpg, .png, image/jpeg, image/png" class="form-control" required
                   name="images[]" multiple>
          </div>
          <div class="col">
            <label class="form-label">Category</label>
            <select class="form-control" name="category_id">
              @foreach($categories as $category)
                <option value="{{$category->id}}">{{$category->getTranslation('name','en')}}</option>
              @endforeach
            </select>
          </div>


        </div>


        </div>
        <div class="row mt-5">
          <div class="col-xl-1">
            <button type="submit" class="btn btn-primary ">save</button>
          </div>
        </div>

      </div>

    <br>


  </form>
@endsection


@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/tagify/tagify.js')}}"></script>

  <script src="{{asset('assets/vendor/libs/masonry/masonry.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/quill/katex.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/quill/quill.js')}}"></script>
  <script>
    @foreach(config('lang') as $language)
    const tagifyBasicEl_{{$language}} = document.querySelector("#TagifyBasic-{{$language}}");
    const TagifyBasic_{{$language}} = new Tagify(tagifyBasicEl_{{$language}});


    @endforeach
    $(document).ready(function () {
      var counter = 0; // Initialize a counter for unique keys

      // Add item
      $("#add-item").click(function () {
        counter++; // Increment the counter
        var newItem = $(".repeater-item:first").clone();
        newItem.find('input').val(''); // Clear input values
        newItem.find('[name="details[0][date]"]').attr('name', 'details[' + counter + '][date]');
        newItem.find('[name="details[0][city_id]"]').attr('name', 'details[' + counter + '][city_id]');

        $("#repeater-container").append(newItem);
        newItem.find('[data-id="selectpickerLiveSearch[0]"]').attr('data-id', 'selectpickerLiveSearch[0]').remove();

        // Manually destroy the previous Bootstrap SelectPicker instance (if any)
        newItem.find('select').selectpicker('destroy');

        // Initialize Bootstrap SelectPicker for the new select element
        newItem.find('select').selectpicker();
      });

      // Use event delegation to listen to changes in the document and filter for the specific element

      // Remove item
      $(document).on("click", ".remove-item", function () {
        if (counter > 0) {
          $(this).closest('.repeater-item').remove();
          counter--; // Decrement the counter when removing an item

          // Refresh SelectPicker after removing an item

        }
      });
    });

    // Initialize SelectPicker


    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