@extends('layouts/contentNavbarLayout')

@section('title', 'blogs categories ')
@section('vendor-style')
  <style>

    .dropdown-toggle{
      border: 1px solid black;
    }
  </style>
@endsection
@section('content')

  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">blogs categories </span>
  </h4>
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
        add category
      </button>

      <!-- Modal -->
      <div class="modal fade" id="basicModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel1">add category</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{route('admin.blogs-category.store')}}" method="post" class="repeater-default"
                  enctype="multipart/form-data">
              @csrf
              <div class="modal-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  " 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">
                        <h3>{{trans('main.name')}}</h3>
                        <div class="row">
                          <div class="col">
                            <label class="form-label">name {{$language}}</label>
                            <input class="form-control" name="name_{{$language}}" @if($loop->first) required @endif autocomplete="off">
                          </div>
                        </div>
                        <hr>
                        <h3>seo</h3>
                        <div class="row">
                          <div class="col">
                            <label class="form-label">meta_title {{$language}}</label>
                            <input class="form-control" name="meta_title_{{$language}}" @if($loop->first) required @endif autocomplete="off">
                          </div>
                        </div>
                        <br>
                        <div class="row">
                          <div class="col">
                            <label class="form-label">meta_description {{$language}}</label>
                            <input class="form-control" name="meta_des_{{$language}}" @if($loop->first) required @endif autocomplete="off">
                          </div>
                        </div>
                      </div>
                    @endforeach
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">close</button>
                <button type="submit" class="btn btn-primary">save</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>

  <div class="card">
    <h5 class="card-header"></h5>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table text-md-nowrap" id="example1">
          <thead>
          <tr class="text-nowrap ">
            <th class="text-primary">#</th>
            @foreach(config('lang') as $lang)
            <th class="text-primary">name {{$lang}}</th>
            @endforeach

            <th class="text-primary">action</th>
          </tr>
          </thead>
          <tbody>
                    @foreach($categories as $category)
                          <tr data-id="{{$category->id}}">
              <th>{{$i}}</th>
              @foreach(config('lang') as $lang)
              <th>{{$category->getTranslation('name',$lang)}}</th>
              @endforeach

              <th>
                <a class="btn btn-danger"><i class='bx bxs-trash' ></i></a>
                <button
                  type="button" class="btn btn-primary editcategory" data-bs-toggle="modal"
                  data-bs-target="#editcategory-{{$category->id}}">
                  <i class='bx bxs-message-square-edit'></i>
                </button>

              </th>

            </tr>


              <div class="modal fade" id="editcategory-{{$category->id}}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog  modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel1">edit</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{route('admin.blogs-category.update')}}" method="post" class="repeater-default"
                          enctype="multipart/form-data">
                      @csrf
                      <input type="hidden" name="id" value="{{$category->id}}">
                      <div class="modal-body">
                            <div class="row">
                              @foreach(config('lang') as $language)
                              <div class="col">
                                <label class="form-label">name {{$language}}</label>
                                <input class="form-control" name="name_{{$language}}" value="{{$category->getTranslation('name',$language)}}" @if($loop->first) required @endif autocomplete="off">
                              </div>
                              @endforeach
                            </div>
                            <hr>
                            <h3>seo</h3>
                            <div class="row">
                              @foreach(config('lang') as $language)
                              <div class="col">
                                <label class="form-label">meta_title {{$language}}</label>
                                <input class="form-control" name="meta_title_{{$language}}"  value="{{$category->getTranslation('meta_title',$language)}}" @if($loop->first) required @endif autocomplete="off">
                              </div>
                              @endforeach
                            </div>
                            <br>
                            <div class="row">
                              @foreach(config('lang') as $language)
                              <div class="col">
                                <label class="form-label">meta_description {{$language}}</label>
                                <input class="form-control" name="meta_des_{{$language}}"  value="{{$category->getTranslation('meta_description',$language)}}" @if($loop->first) required @endif autocomplete="off">
                              </div>
                              @endforeach
                            </div>
                            <br>
                            <div class="row">
                              @foreach(config('lang') as $language)
                              <div class="col">
                                <label class="form-label">slug</label>
                                <input class="form-control" name="slug_{{$language}}"  value="{{$category->getTranslation('slug',$language)}}" @if($loop->first) required @endif autocomplete="off">
                              </div>
                              @endforeach
                            </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">close</button>
                        <button type="submit" class="btn btn-primary">save</button>
                      </div>
                    </form>
                  </div>
                </div>

          @endforeach

          </tbody>
        </table>
      </div>
    </div>
  </div>


@endsection

@section('page-script')
  <script src="{{asset('assets/js/form-basic-inputs.js')}}"></script>
  <script src="{{asset('assets/js/ui-modals.js')}}"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
    $('table').on('click', '.btn-danger', function () {
      var row = $(this).closest('tr');
      var id = row.attr('data-id');
      $.ajax({
        type: 'POST',
        url: '{{route('admin.blogs-category.delete')}}',
        data: {id: id, "_token": "{{ csrf_token() }}",},
        dataType: "json",
        success: function (response) {
          if (response === 'success'){
            row.remove();
            Swal.fire({
              icon: 'success',
              title: 'Success...',
            })
          }else {
            Swal.fire({
              icon: response,
              type: "error"
            })
          }

        },
        error: function (response) {
          window.onload = function () {
            Swal.fire({
              icon: response,
              type: "error"
            })
          }
        }
      });
    });

  </script>
@endsection