@extends('admin.layouts.app')
@section('panel')
    <div class="row">
        <div class="col-lg-12">
            <div class="card b-radius--10 ">
                  <div class="card-header ">
                    <form class="form-group" action="{{ route('admin.category.index') }}">
                        <div class="row">

                            <div class="col-md-3">
                                <input class="form-control" name="name" value="{{ Request::get('name') }}" placeholder="Please Enter Parent Category Name" >
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-success " value="Submit" type="submit">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive--sm table-responsive">
                        <table id="category_table" class="table table--light style--two custom-data-table">
                            <thead>
                                <tr>
                                    <th>@lang('Name')</th>
                                    <th>@lang('status')</th>
                                    <th>@lang('Descreiption')</th>
                                    <th>@lang('Action')</th>
                                </tr>
                            </thead>
                            <tbody id="categoryTable">
                                @forelse ($categories as $item)
                                    <tr data-id="{{ $item->id }}">
                                        <td><span class="btn btn--warning btn-sm"
                                                onclick="showSubCategory({{ $item->parent_id }}, {{ $item->id }},'{{ $item->slug }}')">{{ __($item->name) }}</span>
                                        </td>

                                        <td>
                                            @php
                                                echo $item->statusBadge($item->status);
                                            @endphp
                                        </td>

                                        <td>{!! $item->description !!}</td>
                                        <td>
                                            <div class="button--group">
                                                <button type="button" class="btn btn-sm btn--primary updateCategory"
                                                    data-id="{{ $item->id }}"data-name="{{ $item->name }}"
                                                    data-status="{{ $item->status }}"
                                                    data-icon="{{ $item->icon }}"data-type_id="{{ $item->type_id }}"><i
                                                        class="las la-edit"></i></button>
                                                <button type="button" class="btn btn-sm btn--success"
                                                    data-bs-toggle="modal" data-bs-target="#addCategory"
                                                    onclick="deleteModalVal();setAttrToCatBtn({{ $item->id }}, 'CategoryTable{{ $item->id }}')"><i
                                                        class="las la-plus"></i></button>
                                                <button type="button" class="btn btn-sm btn--danger"
                                                    onclick="deleteCategory({{ $item->id }})"><i
                                                        class="las la-trash"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr class="empty-message">
                                        <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage) }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table><!-- table end -->
                    </div>
                </div>
                @if ($categories->hasPages())
                    <div class="card-footer py-4">
                        {{ paginateLinks($categories) }}
                    </div>
                @endif
            </div><!-- card end -->
        </div>
    </div>


    {{-- Add METHOD MODAL --}}
    <div id="addCategory" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"> @lang('Add Category')</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                {{-- <form action="{{ route('admin.category.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf --}}
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">@lang('Name'):</label>
                        <input type="text" class="form-control" id="CategoryName" name="name"
                            placeholder="@lang('Name')..." required>
                    </div>
                    <div class="form-group">
                        <label for="title"> @lang('Title'):</label>
                        <input type="text" class="form-control" id="title" name="title"
                            placeholder="@lang('Title')...">
                    </div>
                    <div class="form-group">
                        <label for="description"> @lang('Description'):</label>
                        <textarea class="form-control trumEdit " id="description" name="description" id="descripton" rows="3"></textarea>

                    </div>
                    <label for="type_id"> @lang('Type'):</label>
                    <select class="form-control" id="type_id" name="type_id" required>
                        @foreach ($types as $type)
                            <option value="{{ $type->id }}">{{ $type->title }}</option>
                        @endforeach

                    </select>
                    <div class="form-group">
                        <label for="icon">@lang('Icon'):</label>
                        <div class="input-group">
                            <input type="text" class="form-control iconPicker icon" autocomplete="off" id="icon"
                                name="icon" placeholder="@lang('Icone')..." required>
                            <span class="input-group-text  input-group-addon" id="iconpicker" data-icon="las la-home"
                                role="iconpicker">
                            </span>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="name"> @lang('Background'):</label>
                        <input type="file" class="form-control" id="background" name="background">
                    </div>
                    <div class="form-group">
                        <label for="name"> @lang('Background For Products Page'):</label>
                        <input type="file" class="form-control" id="products_background" name="products_background">
                    </div>
                    <div class="form-group">
                        <label for="name"> @lang('Thumbnail'):</label>
                        <input type="file" class="form-control" id="thumbnail" name="thumbnail">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn--primary btn-global"
                        id="btnCategory">@lang('Submit')</button>
                </div>
                {{-- </form> --}}
            </div>
        </div>
    </div>


    {{-- Update METHOD MODAL --}}
    <div id="updateCategory" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"> @lang('Update Category')</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <form action="{{ route('admin.category.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name"> @lang('Name'):</label>
                            <input type="text" class="form-control" name="name"
                                placeholder="@lang('Name')...">
                        </div>
                        <div class="form-group">
                            <label for="name"> @lang('Title'):</label>
                            <input type="text" class="form-control" name="title"
                                placeholder="@lang('Title')...">
                        </div>
                        <div class="form-group">
                            <label for="name"> @lang('Description'):</label>
                            <textarea class="form-control trumEdit " name="description" id="descripton" rows="3"></textarea>

                        </div>
                        <div class="form-group">
                            <label for="icon">@lang('Icon'):</label>
                            <div class="input-group">
                                <input type="text" class="form-control iconPicker icon" autocomplete="off"
                                    name="icon" placeholder="@lang('Icone')..." required>
                                <span class="input-group-text  input-group-addon icon-preview" data-icon="las la-home"
                                    role="iconpicker"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="name"> @lang('Status'):</label>
                            <select name="status" class="form-control">
                                <option value="0" {{ @$item->status == 0 ? 'selected' : '' }}>@lang('Inactive')
                                </option>
                                <option value="1" {{ @$item->status == 1 ? 'selected' : '' }}>@lang('Active')
                                </option>

                            </select>
                        </div>
                        <div class="form-group">
                            <label for="type_id">@lang('Type'):</label>
                            <select id="type_id" name="type_id" class="form-control">
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}">{{ $type->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="name"> @lang('Background'):</label>
                            <input type="file" class="form-control" name="background">
                        </div>
                        <div class="form-group">
                            <label for="name"> @lang('Background For Products Page'):</label>
                            <input type="file" class="form-control" id="products_background"
                                name="products_background">
                        </div>
                        <div class="form-group">
                            <label for="name"> @lang('Thumbnail'):</label>
                            <input type="file" class="form-control" id="thumbnail" name="thumbnail">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn--primary btn-global">@lang('Save')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Sub category modals --}}
    <div id="subModal"></div>
@endsection


@push('breadcrumb-plugins')
    {{--    <button type="button" class="btn btn-sm btn--primary addCategory"><i class="las la-plus"></i>@lang('Add --}}
    {{--    New')</button> --}}
    <button type="button" class="btn btn-sm btn--primary" data-bs-toggle="modal" data-bs-target="#addCategory"
        onclick="setAttrToCatBtn(0);deleteModalVal();">@lang('Add New')
    </button>
@endpush

@push('style-lib')
    <link href="{{ asset('assets/admin/css/fontawesome-iconpicker.min.css') }}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/trumbowyg@2.25.1/dist/ui/trumbowyg.min.css" rel="stylesheet">
    </head>
@endpush

@push('script-lib')
    <script src="https://cdn.jsdelivr.net/npm/trumbowyg@2.25.1/dist/trumbowyg.min.js"></script>
    <script src="{{ asset('assets/admin/js/fontawesome-iconpicker.js') }}"></script>
@endpush
@push('script')
    <script>
  // Clear modal inputs
  function deleteModalVal(PREVENT = '') {
    $('#CategoryName').val('');
    $('#title').val('');
    if ($('#description').trumbowyg) {
      $('#description').trumbowyg('html', '');
    } else {
      $('#description').val('');
    }
    $('#icon').val('');
    $('#iconpicker').html('');
    $('#background').val('');
    $('#products_background').val('');
    $('#thumbnail').val('');
    $('.iconPicker').iconpicker();
  }

  // Create category via AJAX (multipart)
  function createCategory(PARENT, TABLE_ID = 'category_table') {
    const submitButton = document.getElementById('btnCategory');
    submitButton.textContent = "Please wait";
    submitButton.disabled = true;

    const formData = new FormData();
    formData.append('name', ($('#CategoryName').val() || '').trim());
    formData.append('title', ($('#title').val() || '').trim());

    const desc = (window.editor && typeof window.editor.getData === 'function')
      ? window.editor.getData()
      : ($('#description').trumbowyg ? $('#description').trumbowyg('html') : ($('#description').val() || ''));
    formData.append('description', desc);

    if ($('#background')[0].files.length)          formData.append('background', $('#background')[0].files[0]);
    if ($('#thumbnail')[0].files.length)           formData.append('thumbnail', $('#thumbnail')[0].files[0]);
    if ($('#products_background')[0].files.length) formData.append('products_background', $('#products_background')[0].files[0]);

    formData.append('icon', $('#icon').val() || '');
    formData.append('type_id', $('#type_id').val() || '');
    formData.append('parent_id', PARENT);

    $.ajax({
      type: 'POST',
      url: '/admin/category/store',
      data: formData,
      processData: false,
      contentType: false,                 // IMPORTANT: let browser set multipart boundary
      headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
      success: function (res) {
        submitButton.textContent = 'Submit';
        submitButton.disabled = false;

        const category = res.category;
        let tableBody = $(`#${TABLE_ID} tbody`);
        const newRow = $('<tr>');
        newRow.append(`<td><span class="btn btn--warning btn-sm" onclick="showSubCategory(${category.parent_id}, ${category.id}, '${category.slug}')">${category.name}</span></td>`);
        newRow.append(category.status
          ? `<td><span class="badge badge--success">Active</span></td>`
          : `<td><span class="badge badge--warning">Inactive</span></td>`);
        newRow.append(`
          <td>
            <div class="button--group">
              <button type="button" class="btn btn-sm btn--primary updateCategory" data-id="${category.id}" data-name="${category.name}" data-status="${category.status}" data-icon='${category.icon}' data-type_id="${category.type_id ?? ''}"><i class="las la-edit"></i></button>
              <button type="button" class="btn btn-sm btn--success" data-bs-toggle="modal" data-bs-target="#addCategory" onclick="deleteModalVal();setAttrToCatBtn(${category.id}, 'CategoryTable${category.id}')"><i class="las la-plus"></i></button>
              <button type="button" class="btn btn-sm btn--danger" onclick="deleteCategory(${category.id})"><i class="las la-trash"></i></button>
            </div>
          </td>
        `);

        tableBody.prepend(newRow);

        Toast.fire({ icon: 'success', title: res.message });

        // wire update modal buttons created dynamically
        $('.updateCategory').off('click').on('click', function () {
          const modal = $('#updateCategory');
          modal.find('input[name=id]').val($(this).data('id'));
          modal.find('input[name=name]').val($(this).data('name'));
          modal.find('input[name=icon]').val($(this).data('icon'));
          modal.find('select[name=status]').val($(this).data('status'));
          modal.find('select[name=type_id]').val($(this).data('type_id'));
          modal.find('.icon-preview').html($(this).data('icon'));
          modal.modal('show');
        });
      },
      error: function (jqXhr) {
        // Show validation errors
        if (jqXhr.responseJSON && jqXhr.responseJSON.errors) {
          Object.values(jqXhr.responseJSON.errors).forEach(arr => {
            Toast.fire({ icon: 'error', title: arr[0] });
          });
        } else {
          Toast.fire({ icon: 'error', title: 'Request failed' });
        }
        submitButton.textContent = 'Submit';
        submitButton.disabled = false;
      }
    });
  }

  // Button wiring for parent id
  function setAttrToCatBtn(CAT_ID, TABLE_ID = 'category_table') {
    $('#btnCategory').attr('onclick', `createCategory("${CAT_ID}", "${TABLE_ID}")`);
  }

  // Load subcategories (REMOVE global ajaxSetup that forced JSON)
  function showSubCategory(PARENT, ID, slug) {
    let modal = $(`#subModal${ID}`);
    if (!modal.length === 0) modal.remove();

    $('#subModal').append(`
      <div class="modal fade" tabindex="-1" role="dialog" id="subModal${ID}">
        <div class="modal-dialog modal-xl"><div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="subModal${ID}Label">@lang('Sub Categories')</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
          </div>
          <div class="modal-body" id="subModal${ID}Content"></div>
          <div class="modal-footer d-flex justify-content-center">
            <button type="button" class="btn btn-sm btn--danger" onclick="$('.modal').modal('hide')" data-toggle="modal">Close All Modals</button>
          </div>
        </div></div>
      </div>
    `);

    $.ajax({
      type: 'GET',
      url: `/admin/category/getSub/${slug}`,
      success: function ({ data }) {
        $(`#subModal${ID}Content`).html(`
          <table id="CategoryTable${ID}" class="table table-bordered table-hover" style="width:100%">
            <thead>
              <tr class="fw-bold fs-7 text-danger border-bottom border-gray-200 py-4">
                <th class="text-center">Name(Click)</th>
                <th class="text-center">Status</th>
                <th class="text-center">Action</th>
              </tr>
            </thead>
            <tbody id="table-body-${ID}"></tbody>
          </table>
        `);

        const tableBody = $(`#CategoryTable${ID} tbody`);
        if (!data || !data.length) {
          tableBody.append("<tr><td colspan='3' class='text-center'>No data available</td></tr>");
        } else {
          data.forEach(category => {
            const row = $('<tr>');
            row.append(`<td class="text-center"><span class="btn btn--warning btn-sm" onclick="showSubCategory(${category.parent_id}, ${category.id}, '${category.slug}')">${category.name}</span></td>`);
            row.append(category.status
              ? `<td><span class="badge badge--success">Active</span></td>`
              : `<td><span class="badge badge--warning">Inactive</span></td>`);
            row.append(`
              <td class="text-center">
                <div class="button--group">
                  <button type="button" class="btn btn-sm btn--primary updateCategory" data-id="${category.id}" data-name="${category.name}" data-status="${category.status}" data-icon='${category.icon}' data-type_id="${category.type_id ?? ''}"><i class="las la-edit"></i></button>
                  <button type="button" class="btn btn-sm btn--success" data-bs-toggle="modal" data-bs-target="#addCategory" onclick="deleteModalVal();setAttrToCatBtn(${category.id}, 'CategoryTable${category.id}')"><i class="las la-plus"></i></button>
                  <button type="button" class="btn btn-sm btn--danger" onclick="deleteCategory(${category.id})"><i class="las la-trash"></i></button>
                </div>
              </td>
            `);
            tableBody.prepend(row);
          });
        }

        $(`#subModal${ID}`).modal('toggle');

        $('.updateCategory').off('click').on('click', function () {
          const modal = $('#updateCategory');
          modal.find('input[name=id]').val($(this).data('id'));
          modal.find('input[name=name]').val($(this).data('name'));
          modal.find('input[name=icon]').val($(this).data('icon'));
          modal.find('select[name=status]').val($(this).data('status'));
          modal.find('select[name=type_id]').val($(this).data('type_id'));
          modal.find('.icon-preview').html($(this).data('icon'));
          modal.modal('show');
        });
      },
      error: function () {
        Toast.fire({ icon: 'error', title: 'Failed to load sub categories' });
      }
    });
  }

  // Delete (no global ajaxSetup, set per-request JSON headers)
  function deleteCategory(id) {
    Swal.fire({
      title: 'Are you sure you want to delete this item?',
      html: "<br /><button class='btn btn-success' type='button' value='yes'>Yes</button><button style='margin-left: 5px;' class='btn btn-danger' type='button' value='no'>No</button>",
      allowOutsideClick: false,
      showConfirmButton: false,
      didOpen: (toast) => {
        toast.addEventListener('click', (event) => {
          if (event.target.value === 'yes') {
            $.ajax({
              type: 'POST',
              url: '/admin/category/delete',
              data: JSON.stringify({ id }),
              contentType: 'application/json',
              headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
              success: function (res) {
                Toast.fire({ icon: 'success', title: res.message });
                location.reload();
              },
              error: function (jqXhr) {
                if (jqXhr.responseJSON && jqXhr.responseJSON.errors) {
                  Object.values(jqXhr.responseJSON.errors).forEach(arr => {
                    Toast.fire({ icon: 'error', title: arr[0] });
                  });
                } else {
                  Toast.fire({ icon: 'error', title: 'Delete failed' });
                }
              }
            });
          } else if (event.target.value === 'no') {
            Swal.close();
            Swal.fire({ icon: 'info', title: 'Operation canceled', text: 'The item was not deleted.' });
          }
        });
      }
    });
  }

  // Bootstrapping
  (function($){
    "use strict";

    $(document).on('show.bs.modal', '.modal', function() {
      var zIndex = 1040 + (10 * $('.modal:visible').length);
      $(this).css('z-index', zIndex);
      setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
      }, 0);
    });

    // update modal opener
    $('.updateCategory').on('click', function() {
      const modal = $('#updateCategory');
      modal.find('input[name=id]').val($(this).data('id'));
      modal.find('input[name=name]').val($(this).data('name'));
      modal.find('input[name=icon]').val($(this).data('icon'));
      modal.find('select[name=status]').val($(this).data('status'));
      modal.find('select[name=type_id]').val($(this).data('type_id'));
      modal.find('.icon-preview').html($(this).data('icon'));
      modal.modal('show');
    });

    // icon picker
    $('.iconPicker').iconpicker().on('iconpickerSelected', function(e) {
      $(this).closest('.form-group').find('.iconpicker-input').val(`<i class="${e.iconpickerValue}"></i>`);
    });

    // bind default create to root (parent=0) if user clicks "Add New"
    $('#btnCategory').attr('type', 'button');

  })(jQuery);
</script>

       
    <script>
        function deleteCategory(id) {
            Swal.fire({
                title: 'Are you sure you want to delete this item?',
                html: "<br /><button  class = 'btn btn-success' type='button' value='yes'>Yes</button><button style = 'margin-left: 5px;' class = 'btn btn-danger ml-2,' type='button' value='no'>No</button>",
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: (toast) => {
                    toast.addEventListener('click', (event) => {
                        const value = event.target.value;
                        if (value === 'yes') {
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Content-Type': 'application/json'
                                }
                            });
                            $.ajax({
                                type: "POST",
                                url: `/admin/category/delete`,
                                data: JSON.stringify({
                                    'id': id
                                }),
                                success: function(category) {
                                    console.log(category);
                                    Toast.fire({
                                        icon: 'success',
                                        title: category.message
                                    });
                                    location.reload();
                                },
                                error: function(jqXhr, textStatus, errorMessage) {
                                    let time = 0;
                                    for (error in jqXhr.responseJSON.errors) {
                                        Toast.fire({
                                            icon: 'error',
                                            title: jqXhr.responseJSON.errors[error][
                                                0
                                            ]
                                        });
                                    }
                                    submitButton.textContent = 'Submit';
                                    submitButton.disabled = false;
                                }
                            });
                        } else {
                            Swal.close(); // بستن Toast
                            // یا نمایش یک پیام دیگر
                            Swal.fire({
                                icon: 'info',
                                title: 'Operation canceled',
                                text: 'The item was not deleted.'
                            });
                        }
                    });
                }
            });
            console.log(id);

        }
    </script>
@endpush