@extends('layouts.app')

        @section('styles')

        @endsection

            @section('content')

                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Products</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                         <li class="breadcrumb-item"><a href="javascript:void(0)">Products</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">View All Product</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                               <!-- Row -->
                        @can('products-list')
                        {{-- <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">View All Products</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                             <table  class="table table-bordered text-nowrap border-bottom " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                        <th class="wd-15p border-bottom-0">SKU</th>
                                                        <th class="wd-15p border-bottom-0">Category</th>
                                                        <th class="wd-15p border-bottom-0">Product Name</th>
                                                        <th class="wd-15p border-bottom-0">Status</th>
                                                        <th class="wd-15p border-bottom-0">Added By</th>
                                                        <th class="wd-10p border-bottom-0">Actions</th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                    
                                            <div class="col-sm-12 col-md-12">                                             
                                        </div>
                                        </div>
                                    </div>
                        

                                </div>
                               
                            </div> 
                        </div>  --}}

                                <div class="row">
                            <div class="col-12 col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title mb-0">View Daily Wise Report</h3>
                                    </div>
                                    <div class="card-body pt-4">
                                        <div class="grid-margin">
                                            <div class="">
                                                <div class="panel panel-primary">
                                                    <div class="tab-menu-heading border-0 p-0">
                                                        <div class="tabs-menu1">
         
                                                            <ul class=" nav panel-tabs product-sale">
                                                

                                                <li class="">
                                                {{-- <button type="button" class="btn btn-icon  btn-secondary"><i class="fa fa-file-excel-o"></i></button>
                                                <button type="button" class="btn btn-icon  btn-danger"><i class="fa fa-file-pdf-o"></i></button> --}}

                                                </li>


                                               


                                                <li class="px-2">
                                                   <select name="" class="form-control" id="seller_id">
                                                <option value="">--Choose Seller --</option>
                                                @foreach ($data['seller_details'] as $seller)
                                                    <option value="{{$seller['seller_id']}}">{{$seller['seller_name']}}</option>
                                                @endforeach
                                               </select>

                                                </li>
                                                        
                                                <li class="px-1">
                                                    <select name="" class="form-control" id="product_status">
                                                        <option value=""> -- Choose Status --</option>
                                                        <option value="0">Pending</option>
                                                        <option value="1">Approved</option>
                                                        <option value="2">Rejected</option>
                                                    </select>
                                                </li>
                                            
                                            
                                                <li class="px-1">
                                                    <div class="input-group">
                                                <button id="reset_btn"  class="btn btn-danger"><i class="fa fa-repeat"></i></button>  
                                                    </div>    
                                                </li>

                                                        
                                                         </ul>
                                                        </div>
                                                    </div>
                                                    <div class="panel-body tabs-menu-body border-0 pt-0">
                                                        <div class="tab-content">
                                                            <div class="tab-pane active" id="tab5">
                                                                <div class="table-responsive">
                                                                 <table  class="table table-bordered text-nowrap border-bottom " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                        <th class="wd-15p border-bottom-0">SKU</th>
                                                        <th class="wd-15p border-bottom-0">Category</th>
                                                        <th class="wd-15p border-bottom-0">Product Name</th>
                                                        <th class="wd-15p border-bottom-0">Status</th>
                                                        <th class="wd-15p border-bottom-0">Added By</th>
                                                        <th class="wd-10p border-bottom-0">Actions</th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                                                </div>
                                                            </div>
                                                           
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        @endcan
                        <!-- End Row -->

                         <!-- Modal -->
               


                        <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Delete</h5>
                                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Do you want to delete the Product ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        <button onclick="delete_item()" class="btn btn-primary">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>


                         {{-- #########################View Modal################################### --}}
            <div class="modal fade" id="scrollingmodal" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Product Details</h5>
                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of View Modal############################ --}}

                        
                        

            @endsection
              @section('scripts')  
{{-- ################################Jquery Datatable########################### --}}
   <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script>
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}
        <script>

      $('.add_new_row').click(function(){
        var rowCount = $('.secion_product_table tr').length;
        $('.secion_product_table').append('<tr id="row_id_'+rowCount+'"><td style="text-align:center">'+rowCount+'</td>	<td><input class="form-control product_autocomplete" list="product_detail_list" name="spec_heading[]" id="spec_head" placeholder="Enter Specification Heading" onclick="autocomplete_product_list()"></td> <td><input type="text" class="form-control" name="spec_desc[]"></td><td style="text-align:center;font-size: 20px;padding: 10px;"><i onclick=remove_row('+rowCount+') class="fa fa-times-circle remove_row" aria-hidden="true"></i></td></tr>')
      });

      function remove_row(id){
        $('#row_id_'+id).remove();
      }

      var token = $("meta[name=csrf-token]").attr("content");  
    var datatable_name="table_datatable";
    var coloumn_data=['product_id','product_sku','category_name','product_name_en','product_approved_status','name','product_id'];
    var coloumn_array=[];
    for (let i = 0; i <coloumn_data.length; i++) {
        coloumn_array.push({"data": ""+coloumn_data[i]+"", "name": ""+coloumn_data[i]+""});
    }
    $('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [0, 'desc']
       ],
       "columnDefs": [{
               "targets": [0,coloumn_data.length-1],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,1,4,5]},
           {"className": "text-left", "targets": [2,3]}
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/admin/product_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns":coloumn_array,
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";
          var created_at=aData.created_at.substring(0, 10);
            //View Function
            var action=action+'&nbsp;<button title="View"  onclick=View('+aData.product_id+') id="bEdit" type="button" class="btn btn-sm btn-primary"><span class="fe fe-eye"> </span></button>';

            //Delete Action
            @can('products-delete')
            var action=action+'&nbsp;<button title="Delete" onclick="delete_modal('+aData.product_id+')" id="bDel" type="button" class="btn  btn-sm btn-danger"><span class="fe fe-trash-2"> </span></button>';
            @endcan
            $('td:eq(0)', nRow).html(index);
            $('td:eq(1)', nRow).html(aData.product_sku);
            if(aData.product_approved_status==0){
            var product_status='<a href="javascript:void(0)" class="btn-sm btn-warning btn-pill fw-bold">&nbspPending&nbsp;</a>';
            }
            else if(aData.product_approved_status==1){
            var product_status='<a href="javascript:void(0)" class="btn-sm btn-success btn-pill fw-bold">Approved</a>';
            }
            else if(aData.product_approved_status==2){
            var product_status='<a href="javascript:void(0)" class="btn-sm btn-danger btn-pill fw-bold">Rejected</a>';
            }
            $('td:eq(4)', nRow).html(product_status);
            $('td:eq(5)', nRow).html(aData.name);
            $('td:eq(6)', nRow).html(action).addClass('text-center');
           
         
 }
 });

//      // #################### Delete Section ##########################
                    function delete_modal(id){
                    $('#product_id').val(id);
                    $('#smallmodal').modal('show');
                    }
                    function delete_item(){
                    var id=$('#product_id').val();
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/delete_product',
                        success: function (result) {
                        $('#smallmodal').modal('hide');
                        toast(result,datatable_name);
                        }
                    })
                    }
//      // #################### End Of Delete Section ##################

        // #########################View Section ##########################
        function View(id){
            $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/view_product',
                        success: function (result) {    
                           $('#view_modal_body').html(result);
                           $('#scrollingmodal').modal('show');
                        }
                    })
        }
        // ###############################################################

        </script>
        @endsection