@extends('layouts.master')
@section('title')
    @lang('translation.User_List')
@endsection

@section('content')
    @component('common-components.breadcrumb')
        @slot('pagetitle') categories @endslot
        @slot('title') categories List @endslot
    @endcomponent
    @livewireStyles <!-- Add this line to enable Livewire styles -->

    <div class="row">
        <div class="col-12">
        <div class="card">
                <div class="card-body">

                    <h4 class="card-title">Products List</h4>
                    <p class="card-title-desc">Retrive all Products.
                    </p>

                    <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Category Name</th>
                                <th>Category Name Ar</th>
                                <th>Created date</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody>
                        @foreach($categories as $category)
                            <tr>
                            <td>
                            <img src="{{(!empty($category->image))? url('upload/admin_images/'.$category->image): url('../images/user3-128x128.jpg') }}" alt=""
                                class="avatar-xs rounded-circle me-2">
                            <a href="#" class="text-body">Simon Ryles</a>
                                    </td>
                                <td> {{ $category->category_name }} </td>
                                <td> {{ $category->category_name_ar }} </td>
                                <td> {{ $category->created_at }} </td>
                                <td>
                                        <ul class="list-inline mb-0">
                                            <li class="list-inline-item">
                                                <a href="{{ url('category/edit/'.$category->id) }}" class="px-2 text-primary"><i
                                                        class="uil uil-pen font-size-18"></i></a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="{{ url('delete/category/'.$category->id) }}" class="px-2 text-danger"><i
                                                        class="uil uil-trash-alt font-size-18"></i></a>
                                            </li>
                                        </ul>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div> <!-- end col -->
        
    </div>
    </div>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>
    <!-- end row -->
@livewireScripts <!-- Add this line to enable Livewire scripts -->
@endsection
    @section('script')
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/datatables/datatables.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/pages/datatables.init.js') }}"></script>
@endsection