@extends('dashboard.layout.layout')

@section('content')
<div class="card border-info bg-transparent">

    <div class="card-body">
        <div class="d-flex justify-content-center">
            {!! $products->links() !!}
        </div>
            <a class="btn btn-danger mr-1 mb-1 waves-effect waves-light text-white"
                                        onclick="deleteItems('{{route('dashboard.product.delete_products')}}')">
                                        <i class="icofont-trash"></i>
                                        {{ trans('dashboard.product.delete_products') }}
                                    </a>
        <div class="card-datatable table-responsive">
            <table class="datatables-custom table table-hover-animation" data-title="{{trans('dashboard.product.product_show')}}  {{$category->name}}" data-create_title="{{ trans('dashboard.general.add') }}" data-create_link="{{route('dashboard.product.create')}}">
                <thead>
                    <tr class="text-center">
                        <th>#</th>
                              <th>#</th>
                        
                        <th>{!! trans('dashboard.product.image') !!}</th>
                        <th>{!! trans('dashboard.product.name') !!}</th>
                        <th>{!! trans('dashboard.product.quantity_name') !!}</th>
                        <th>{!! trans('dashboard.category.category') !!}</th>
                        <th>{!! trans('dashboard.product.price') !!}</th>
                        <th>{!! trans('dashboard.general.added_date') !!}</th>
                        <th>{!! trans('dashboard.general.control') !!}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $product)
                    <tr class="{{ $product->id }} text-center">
                         <td>
                          <div class="custom-control custom-checkbox justify-content-center">
                                <input type="checkbox" class="custom-control-input check_list" id="custom_check_{{$product->id}}" value="{{$product->id}}" onclick='setAsChecked(this)' name="client_list[]"/>
                                <label class="custom-control-label" for="custom_check_{{$product->id}}"><i class="vs-icon feather icon-check"></i></label>
                            </div>
                            </td>
                        <td>{{ $loop->iteration }}</td>
                      
                        
                        
                         <td class="product-img sorting_1">
                            <a href="{{ $product->image_url }}" data-fancybox="gallery">
                                <img src="{{ $product->image_url }}" alt="" style="width:60px; height:60px;" class="img-preview rounded">
                            </a>
                        </td>
                        <td>{{ $product->name }}</td>
                        <td>{{ $product->quantity_name ? trans('dashboard.product.quantity_names.' . $product->quantity_name) : trans('dashboard.general.no_data') }}</td>
                        <td>{{ @$product->category->name }}</td>
                         <td>{{ @$product->price }}</td>
                        <td>
                            <div class="badge badge-primary badge-md mr-1 mb-1">{{ $product->created_at->format('Y-m-d H:i') }}</div>
                        </td>
                        <td class="justify-content-center">
                            <a onclick="deleteItem('{{ $product->id }}' , '{{ route('dashboard.product.destroy',$product->id) }}')" class="text-danger" title="{!! trans('dashboard.general.delete') !!}">
                                <i class="icofont-ui-delete"></i>
                            </a>
                            <a href="{!! route('dashboard.product.edit',$product->id) !!}" class="text-primary mr-2" title="{!! trans('dashboard.general.edit') !!}">
                                <i class="icofont-ui-edit"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="d-flex justify-content-center">
            {!! $products->links() !!}
        </div>
    </div>
</div>

@include('dashboard.layout.delete_modal')
@endsection

<script>
let elements =  document.getElementsByClassName('create-new') ;
for(var i = 0 ;  i< elements.length ; i++){
    elements[i].style.display ="none" ;
}
 console.log(element) ;
</script>
@include('dashboard.category.styles')
@include('dashboard.category.scripts')
<script>
        window.products = [] ;
     function setAsChecked(obj){
            if(obj.getAttribute("checked") == "checked"){
            obj.setAttribute("checked" , "");
             console.log("log unchecked") ;
             console.log(obj.value) ;
              let  myIndex = window.products.indexOf(obj.value) ;
           
             if (myIndex !== -1) {
                    window.products.splice(myIndex, 1);
            }
               console.log(window.products) ;
            console.log("log unchecked") ;
            }else{  
                obj.setAttribute("checked" , "checked");
                window.products.push( obj.value ) ;
                    console.log(products) ;
            }
        }
        function deleteItems(route){
            console.log(route) ;
            $.ajax({
                url: route , 
                method: "POST" ,
                dataType: "json" ,
                data:{_token:'{{ csrf_token() }}' , products : window.products},
                success: function(data) {
                    if (data['value'] == 1) {
                        toastr.success(data['message'], '', { "progressBar": true });
                        console.log("done") ;
                        window.products =[] ;
                     setTimeout(function () { location.reload(true); }, 1000);
                    }else{
                        toastr.danger(data['message'], '', { "progressBar": false });
                    }
                }
            });
        }
</script>