@extends('layouts/contentNavbarLayout')

@section('title', '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">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.category.store')}}" method="post"
                  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  @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">
                        <h3>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}}"  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_description_{{$language}}"  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 changes</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 text-nowrap">
        <table class="table">
          <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
                  @foreach(config('lang') as $lang)
                    data-name-{{$lang}}="{{$category->getTranslation('name',$lang)}}"
                  @endforeach
                  data-type="{{$category->type}}"
                  data-id="{{$category->id}}"
                  data-image="{{asset($category->image)}}"
                  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>

                <!-- Modal -->

              </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 category</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{route('admin.category.update')}}" method="post" class="repeater-default"
                          enctype="multipart/form-data">
                      @csrf
                      <input type="hidden" name="id" value="{{$category->id}}">
                      <div class="modal-body">


                            <h3>Name</h3>
                            <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)}}"  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_description_{{$language}}"  value="{{$category->getTranslation('meta_description',$language)}}"  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 changes</button>
                      </div>
                    </form>
                  </div>
                </div>

          @endforeach

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


@endsection

@section('page-script')

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
    $(document).on('click', '.editcategory', function (e) {
      e.preventDefault();
      var name_en = $(this).attr('data-name-en');
      var name_ar = $(this).attr('data-name-ar');
      var name_tr = $(this).attr('data-name-tr');
      var type = $(this).attr('data-type');
      var id = $(this).attr('data-id');
      var image = $(this).attr('data-image');
      $("#editcategory #name_en").val(name_en);
      $("#editcategory #name_ar").val(name_ar);
      $("#editcategory #name_tr").val(name_tr);
      $("#editcategory #type").val(type);
      $("#editcategory #id").val(id);
      $("#editcategory #image").html('<img  class="rounded-pill" style="width: 25%" src=' + image + '>');
      $("#editcategory").modal('show')
    });

    $('table').on('click', '.btn-danger', function () {
      var row = $(this).closest('tr');
      var id = row.attr('data-id');
      $.ajax({
        type: 'POST',
        url: '{{route('admin.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"
            })
          }
        }
      });
    });


    $('table').on('change', '.status', function () {
      var row = $(this).closest('tr');
      var id = row.attr('data-id');
      var type =$(this).data('type')
      $.ajax({
        type: 'POST',
        url: '{{route('admin.category.status')}}',
        data: {id: id,type:type, "_token": "{{ csrf_token() }}",},
        dataType: "json",
        success: function (response) {

          Swal.fire({
            icon: 'success',
            title: 'Success...',
          })
        },
        error: function (response) {
          window.onload = function () {
            Swal.fire({
              icon: 'error',
              title: 'Error...',
            })
          }
        }
      });
    });

  </script>
@endsection