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

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

    <div class="row">

    <div class="col-lg-12">

        <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>Product Name</th>
                                <th>Product Name AR</th>
                                <th>Price</th> 
                                <th>Action</th> 
                            </tr>
                        </thead>

                        <tbody>
                        @foreach($Products as $item)
                        <tr>
                            <td>
                            <img src="{{(!empty($item->image))? url('upload/admin_images/'.$item->image): url('../images/user3-128x128.jpg') }}" alt=""
                                class="avatar-xs rounded-circle me-2">
                                    </td>
                                <td> {{ $item->title }} </td>
                                <td> {{ $item->title_ar }} </td>
                                <td> {{ $item->price }} </td>
                                <td>
                                        <ul class="list-inline mb-0">
                                            <li class="list-inline-item">
                                                <a href="{{ url('product/edit/'.$item->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/product/'.$item->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