<div>
    <div class="row">
        <div class="col-md-6 d-flex justify-content-between mt-2 mb-2">
            <h4 class="fw-bold "><span class="text-muted fw-light"></span> Categories</h4>
        </div>

        {{-- <div class="col-md-6 d-flex justify-content-end">
            <div class="col-md-9 mb-4">
                <input type="text" wire:model.live.debounce.300ms="search" value="" name="search" placeholder="Search" class="form-control search">
            </div>
        </div> --}}
    </div>
    <!-- Striped Rows -->
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-end mb-2 mt-0">
                <button 
                    type="button" 
                    class="btn btn-primary" 
                    data-bs-toggle="modal" 
                    data-bs-target="#addCategoryModal"
                    data-bs-backdrop="static" data-bs-keyboard="false"
                    ><strong><i class="bx bx-plus"></i>
                    Add Category</strong>
                </button>
            </div>
            
            <div class="table-responsive text-wrap">
                <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Name</th>
                        {{-- <th>Parent</th> --}}
                        <th>Action</th>
                    </tr>
                </thead>
                @if (count($categories) > 0)
                <tbody class="table-border-bottom-0">
                    @foreach ($categories as $category)
                        <tr>
                            <td><img src="{{$category->image ?? asset('images/placeholder.png')}}" style="width:40px; height:40px; border-radius:20%;"/></td>
                            <td>{{$category->name}}</td>
                            {{-- <td>{{$category->parent->name ?? '-'}}</td> --}}
                            <td width="15%">
                                <a href="javascript:;" class="editCategory" data-obj="{{json_encode($category)}}">
                                    <i class="bx bx-edit btn btn-primary btn-xs"></i>
                                </a>
                                {{-- <a href="{{url('admin/user-detail/' . $category->id)}}">
                                    <i class="bx bx-show btn btn-info btn-xs"></i>
                                </a> --}}
                                <a href="javascript:void(0);" class="delete" data-id="{{$category->id}}">
                                    <i class="bx bx-trash btn btn-danger btn-xs"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                @else
                    <td colspan="5" class="text-center">No record found</td>
                @endif
                </table>
                @if (count($categories) > 0)
                    <div>
                    {{ $categories->links('livewire.pagination') }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Add User Modal -->
    <div class="modal fade" id="addCategoryModal"  tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <form action="{{route('admin.addCategory')}}" method="POST" enctype="multipart/form-data">
                @include('admin.category.form', ['mainCategories' => $mainCategories])
            </form>
        </div>
    </div>

    <!-- Add User Modal -->
    <div class="modal fade" id="editCategoryModal"  tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <form id="editCategoryForm" action="" method="POST" enctype="multipart/form-data">
                @include('admin.category.form', ['mainCategories' => $mainCategories])
            </form>
        </div>
    </div>
</div>

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function(){
        function confirmDelete(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This may effect on product listings",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    @this.call('delete', id)
                }
            });
        }

        $(".delete").on('click', function(){
            confirmDelete($(this).data('id'))
        })
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#addCategoryModal").modal({
            backdrop: "static",
            keyboard: false,
        });

        $(".editCategory").on('click', function(){
            var obj = $(this).data('obj');
            console.log(obj);

            $("#editCategoryForm .nameField").val(obj.name);
            $("#editCategoryForm .parentField").val(obj.parent_id);

            $("#editCategoryForm #modalTitle").text('Edit Category');
            $("#editCategoryForm").attr('action', `{{route('admin.editCategory', '')}}/${obj.id}`)
            $("#editCategoryModal").modal('show')
        })
    });
</script>

@if($errors->any())
    <script type="text/javascript">
        $(document).ready(function(){ 
            $("#addCategoryModal").modal('show'); 
        });
    </script>
@endif
@endsection