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

@section('content')
{{-- @foreach ($categories as $category)
    @dd($category->has('subCategory'))
@endforeach --}}
{{-- @dd($categories->where($categories->has('subCategory'))) --}}
<div class="content">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h2> @if (isset($document->id)) [Edit] #<strong title="ID">{{ $document->id }}</strong> @else New Document @endif</h2>
        </div>
        <div class="card-body">
          <form class="needs-validation" id="main-form" action="{{ isset($document) ? route('admin.documents.update', $document) : route('admin.documents.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @if(isset($document))
              @method('PATCH')
            @endif
            @if ($message = Session::get('success'))
              <div class="alert alert-success">
                  <strong>{{ $message }}</strong>
              </div>
            @endif
    
            @if (count($errors) > 0)
              <div class="alert alert-danger">
                  <ul>
                      @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                      @endforeach
                  </ul>
              </div>
            @endif

            <ul class="nav nav-tabs">
              <li class="nav-item">
                <a href="#" class="nav-link bg-aqua-active" id="en">English</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link bg-aqua-active" id="my">Myanmar</a>
              </li>
            </ul>

            <div class="form-group required">
              <label for="menu">Document Menu</label>
              <select class="form-control" id="menuSelect" name="menu" required="true" placeholder="Please select one option">
                <option value="">Please select one option</option>
                @foreach ($menus as $menu)
                    <option value="{{ $menu->id }}" {{old('menu_id', isset($document) ? $document->menu_id : '') == $menu->id ? 'selected' :  ''}}>{{ ucfirst($menu->name) }}</option>
                @endforeach
              </select>
              {!! $errors->first('menu_id', '<p class="help-block">:message</p>') !!}
            </div>

            <div class="form-group required">
              <label for="category">Document Category</label>
              <select class="form-control" id="categorySelect" name="category" required="true" placeholder="Please select one option">
                {{-- <option value="">Please select one option</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" {{old('category_id', isset($document) ? $document->category_id : '') == $category->id ? 'selected' :  ''}}>{{ ucfirst($category->name) }}</option>
                @endforeach --}}
              </select>
              {{-- {!! $errors->first('category_id', '<p class="help-block">:message</p>') !!} --}}
            </div>

            <div class="form-group required d-none">
              <label for="sub-category">Document Sub Category</label>
              <select class="form-control" id="subCategorySelect" name="sub_category" placeholder="Please select one option">

              </select>
            </div>

            {{-- <div class="form-group required">
              <label for="lang">Language</label>
              <select class="form-control" id="langSelect" name="lang" placeholder="Please select a language">
                <option value="" selected>Please select a language</option>
                    <option value="en">English</option>
                    <option value="my">Myanmar</option>
              </select>
              {!! $errors->first('lang', '<p class="help-block">:message</p>') !!}
            </div> --}}

              <div class="card">
                <div class="card-body" id="english-form">

                  <div class="form-group required {!! $errors->first('name', 'has-error') !!}">
                      <label for="en_name" class="require">@lang('Name') [EN]</label>
                          <input type="text" placeholder="name.." name="en_name" id="en_name" class="form-control" value="{{ old('en_name', isset($document) ? $document->translate('en')->name : '') }}" required >
                          {!! $errors->first('en_name', '<p class="help-block">:message</p>') !!}
                  </div>

                  <div class="form-group required {!! $errors->first('en_file_path', 'has-error') !!}" id="en-file-path">
                      <label for="en_file_path">@lang('Document')</label>
                      <input type="file" class="form-control-file" id="enDocumentFile" name="en_file" {{isset($document) ? '' : 'required'}}>
                      {!! $errors->first('en_file_path', '<p class="help-block">:message</p>') !!}
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-body d-none" id="myanmar-form">

                  <div class="form-group required {!! $errors->first('my_name', 'has-error') !!}">
                      <label for="my_name" class="require">@lang('Name') [MY]</label>
                          <input type="text" placeholder="name.." name="my_name" id="my_name" class="form-control" value="{{ old('my_name', isset($document) ? $document->translate('my')->name: '') }}" required>
                          {!! $errors->first('my_name', '<p class="help-block">:message</p>') !!}
                  </div>

                  <div class="form-group required {!! $errors->first('my_file_path', 'has-error') !!}" id="my-file-path">
                      <label for="documents">@lang('Document')</label>
                      <input type="file" class="form-control-file" id="myDocumentFile" name="my_file" {{isset($document) ? '' : 'required'}}>
                      {!! $errors->first('my_file_path', '<p class="help-block">:message</p>') !!}
                  </div>
                </div>
              </div>

            <div class="form-group">
              <button class="btn btn-primary" id="submit" type="submit" name="btnSave" value="1">Save</button>
              <button class="btn btn-primary" type="submit" name="btnSaveClose" value="1">Save & Close</button>
              <a href="{{ route('admin.documents.index') }}" class="btn btn-flat">Cancel</a>
            </div>
          </form>

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

@push('scripts')
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<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');
  });
  
  $(document).ready(function () {

    let old_category_id = $('#categorySelect').val() ?? '';
    let old_sub_category_id = "{{isset($document) ? $document->sub_category_id : '' }}";
    fetch_sub_categories_by_category(old_category_id, old_sub_category_id);
    let category = document.getElementById("categorySelect");

    $('#menuSelect').on('change', function () {
      let id = $(this).val();
      let lang = "{{ \App::getLocale() }}"
      $('#categorySelect').empty();
      $('#categorySelect').append(`<option value="" disabled selected>Processing...</option>`);
      $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type: 'GET',
      url: '/' + lang + '/getCategory/' + id,
      success: function (response) 
        {
          // console.log(response);
          let responseArray = JSON.parse(response);
          $('#categorySelect').empty();
          $('#categorySelect').append(`<option value="0" disabled selected>Select Category*</option>`);
          responseArray.forEach(element => {
            $('#categorySelect').append(`<option value="${element['id']}">${element['name']}</option>`);
            // console.log(response);
          });
        }
      });
    });

    $('#categorySelect').on('change', function () {
      let id = $(this).val();
      let subCat = $('#subCategorySelect');
      // let parent = document.getElementById("subCategorySelect").parent();
      // console.log(parent);
      let lang = "{{ \App::getLocale() }}"
      subCat.empty();
      subCat.append(`<option value="" disabled selected>Processing...</option>`);
      $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type: 'GET',
      url: '/' + lang + '/getSubCat/' + id,
      success: function (response) 
        {
          var response = JSON.parse(response);
          subCat.parent().removeClass("d-none");
          subCat.empty();
          subCat.append(`<option value="0" disabled selected>Select Sub Category*</option>`);
          response.forEach(element => {
            subCat.append(`<option value="${element['id']}">${element['name']}</option>`);
          });
        }
      });
    });
  });

  function fetch_sub_categories_by_category(category_id, sub_category_id = null) {
    console.log(category_id + '====' + sub_category_id)
    let lang = "{{ \App::getLocale() }}"
      $('#subCategorySelect').empty();
      $('#subCategorySelect').append(`<option value="0" disabled selected>Processing...</option>`);
      $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type: 'GET',
      url: '/' + lang + '/getSubCat/' + category_id,
      success: function (response) 
        {
          var response = JSON.parse(response);
          $('#subCategorySelect').empty();
          $('#subCategorySelect').append(`<option value="" disabled selected>Select Sub Category*</option>`);
          let existing_or_old_sub_category_id =  sub_category_id ?? "";
          let old_sub_category_id = "{{old('sub_category_id')}}";
            existing_or_old_sub_category_id =  (old_sub_category_id != "") ? old_sub_category_id : existing_or_old_sub_category_id;
          response.forEach(element => {
            // console.log(element)
            $('#subCategorySelect').append(`<option value="${element['id']}" ${setSelectedOption(element.id, existing_or_old_sub_category_id)}>${element['name']}</option>`);
          });
        }
      });
  }

  // set selected value
  function setSelectedOption(option, existing_or_old_sub_category_id) {
    return (option == existing_or_old_sub_category_id) ? 'selected="true"' : "";
  }

  // Error checks
  function checkForm() {
    // let form = document.querySelector('#main-form');
    let submitBtn = document.querySelector('#submit');
    submitBtn.addEventListener("click", function(e) {
      // e.preventDefault();
      let enName = document.getElementById("en_name");
      let myName = document.getElementById("my_name");
      console.log(myName);
      if(myName.value.length == 0 && enName.value.length != 0) {
        console.log("empty");
        $englishLink.removeClass('bg-aqua-active');
        $englishForm.addClass('d-none');
        $myanLink.addClass('bg-aqua-active');
        $myanForm.removeClass('d-none');
      }
    })
  }
  window.addEventListener("load", checkForm());
  // let form = document.querySelector('#main-form');
  // console.log(form);
</script>
@endpush