@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-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Add New category</h4>
                    <p class="card-title-desc">Your input will be in the same page.</p>
                    
                    <form action="{{ route('store.category') }}" method="POST" enctype="multipart/form-data">
                    @csrf 
                    <form class="needs-validation" novalidate>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label" for="validationCustom01">category Name</label>
                                    <input name="category_name" type="text" class="form-control" id="validationCustom01" placeholder="category name"
                                        value="" required>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label" for="validationCustom02">category Name ar</label>
                                    <input name="category_name_ar" type="text" class="form-control" id="validationCustom02" placeholder="category name"
                                        value="" required>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                                     
                        </div>
                        <div class="row">
                        <div class="mb-3 col-lg-2">
                                <label class="form-label" for="resume">Image:</label>
                                <input name="product_image" onchange="loadFile(event)" required class="form-control" type="file" id="formFile" />
                            </div>
                        </div>
                        <button class="btn btn-primary" type="submit">Submit form</button>
                    </form>
                    </form>

                </div>
            </div>
            <!-- end card -->
        </div> <!-- end col -->
        <div class="col-12">
        <div class="card">
                <div class="card-body">

                    <h4 class="card-title">categories List</h4>
                    <p class="card-title-desc">Retrive all categories.
                    </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