@extends('layouts.backend.app')

@section('content')
    <!-- Start right Content here -->
    <div class="main-content stock">
        <div class="page-content">
            <div class="container-fluid">
                <div class="page-title-box">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h6 class="page-title">Dofy Reports</h6>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="#">Home </a></li>
                                <li class="breadcrumb-item active" aria-current="page">Stock</li>
                            </ol>
                        </div>
                        <div class="col-md-4 text-right">
                            <button class="btn btn-sm btn-secondary btn-st btn-thrd fltr-btn fltrbtn">Filter<i
                                    class="las la-filter"></i></button>
                            <a class="btn btn-sm btn-secondary btn-st btn-thrd"
                                href="{{ route('dofy_stock_export') }}">Export Stock</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-12 mobile-table-column stock-table">
                        <div class="card">
                            <div class="card-body">
                                <form method="POST" action="memberdata" name="memberdata" id="memberdata"
                                    enctype="multipart/form-data">
                                    @csrf

                                    <!--Filter-->
                                    <div class="fltr-main pt-2 pb-2" style="display: none;">
                                        <div class="row">
                                            <div class="form-group col-md-4 col-sm-6"><br>
                                                <label class="form-label">Product Model</label>
                                                <input type="text" class="form-control" id="pro_model" name="pro_model"
                                                    value="">
                                            </div>
                                            <div class="form-group col-md-4 col-sm-6"><br>
                                                <label class="form-label">IMEI</label>
                                                <input type="text" class="form-control" id="imei" name="imei"
                                                    value="">
                                            </div>

                                            <div class="form-group col-md-4 col-sm-6"><br>
                                                <label class="form-label">Location</label>
                                                <input type="text" class="form-control" id="city_name" name="city_name"
                                                    value="">
                                            </div>

                                            <div class="form-group col-md-4 col-sm-6"><br>
                                                <label class="form-label">Product Add Date</label>
                                                <input type="date" class="form-control" id="dofylot_date"
                                                    name="dofylot_date" value="">
                                            </div>

                                            <div class="form-group col-md-4 col-sm-6"><br>
                                                <label class="form-label">User Name</label>
                                                <input type="text" class="form-control" id="created_by" name="created_by"
                                                    value="">
                                            </div>

                                            <div class="form-group col-md-4"><br />
                                                <label class="form-label" style="font-size: 2px;">&nbsp;</label>
                                                <div class="srch-same-line pt-2 pb-2">

                                                    <button type="button"
                                                        class="searchdata btn btn-sm btn-primary btn-st">Search <i
                                                            class="la la-search"></i></button>

                                                    <button type="button"
                                                        class="btn btn-sm btn-secondary btn-st reset_searchdata">Reset <i
                                                            class="la la-refresh"></i></button>

                                                </div>
                                            </div>
                                        </div>
                                    </div><br />
                                </form>
                                <!--Filter-->
                                <table id="dataList" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Product Details</th>
                                            <th>Sales Barcode</th>
                                            <th>User</th>
                                            <th>Date</th>
                                            <th>Location</th>
                                            <!-- <th>No of Products</th> -->
                                            <!-- <th>Ready to sale</th> -->
                                            <!--  <th>Working Products</th>
                                  <th>Not Working</th>  -->
                                            <!-- <th>Action</th>  -->
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end main content-->

    <!-- Delete Modal HTML -->
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Record</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete these Records?</p>
                    <p class="text-warning"><small>This action cannot be undone.</small></p>
                </div>
                <input type="hidden" id="delete_id">
                <div class="modal-footer">
                    <input type="button" class="btn btn-default closebtn" data-dismiss="modal" value="Cancel">
                    <input type="button" class="btn btn-danger" onclick="deleterecord()" value="Delete">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var base = $('meta[name="base_url"]').attr("content");
        var pathn = $('meta[name="base_url"]').attr("content") + '/dofy_products_reports_data'; //console.log(pathn);
        var reporttables = $('#dataList').DataTable({
            "order": [
                [0, "desc"]
            ],
            "serverSide": true,
            "stateSave": true,
            'processing': true,
            "filter": false,
            "pageLength": 20,
            oLanguage: {
                sProcessing: '<div class="lds-css"><div style="width:100%;height:100%" class="lds-eclipse"><div></div><p>Please wait while we are processing your request.</p></div></div>'
            },
            "ajax": {
                'type': 'GET',
                'url': pathn,
                'beforeSend': function(request) {
                    request.setRequestHeader("X-CSRF-TOKEN", '{{ csrf_token() }}');
                },
                "data": function(d) {
                    d.pagenme = '{{ basename(url()->current()) }}',
                        d.pro_model = $("#pro_model").val(),
                        d.imei = $("#imei").val(),
                        d.city_name = $("#city_name").val(),
                        d.dofylot_date = $("#dofylot_date").val(),
                        d.created_by = $("#created_by").val(),
                        d.searchdata = d.search.value
                }
            },
            searching: true,
            "iDisplayLength": 20,
            "columnDefs": [{
                    "targets": 0,
                    data: 'index',
                },
                {
                    "targets": 1,
                    orderable: true,
                    "render": function(data, type, row, meta) {
                        return '<p class="mb-0 customer-name fw-bold">' + row.pro_brand + ', ' + row
                            .pro_model + '<br>(' + row.pro_ram + '/' + row.pro_rom + ')</p>';
                    }
                },
                {
                    "targets": 2,
                    orderable: true,
                    "render": function(data, type, row, meta) {
                        return '<p class="mb-0 customer-name fw-bold">' + row.pro_imei + '</p>';
                    }
                },
                {
                    "targets": 3,
                    orderable: true,
                    "render": function(data, type, row, meta) {
                        return '<p class="mb-0 customer-name fw-bold">' + row.created_by + '</p>';
                    }
                },
                {
                    "targets": 4,
                    orderable: true,
                    "render": function(data, type, row, meta) {
                        return '<p class="mb-0 customer-name limit_desc">' + row.dofylot_date + '</p>';
                    }
                },
                {
                    "targets": 5,
                    orderable: true,
                    "render": function(data, type, row, meta) {
                        return '<p class="mb-0 customer-name limit_desc">' + row.city_name + '</p>';
                    }
                },
                // {
                //   "targets": 5,
                //   orderable: true,
                //   "render": function ( data, type, row, meta ) {
                //    return '<p class="mb-0 customer-name limit_desc">'+row.no_pro+'</p>';
                //   }
                // },
                // {
                //   "targets": 6,
                //   orderable: true,
                //   "render": function ( data, type, row, meta ) {
                //    return '<p class="mb-0 customer-name limit_desc">'+row.ready_to_sale+'</p>';
                //   }
                // },
                // {
                //   "targets": 6,
                //   orderable: true,
                //   "render": function ( data, type, row, meta ) {
                //    return '<p class="mb-0 customer-name limit_desc">'+row.working+'</p>';
                //   }
                // },
                //  {
                //   "targets": 7,
                //   orderable: true,
                //   "render": function ( data, type, row, meta ) {
                //    return '<p class="mb-0 customer-name limit_desc">'+row.not_working+'</p>';
                //   }
                // },
                // {
                //   "targets": 8,
                //   orderable: true,
                //   "render": function ( data, type, row, meta ) {
                //     var tbl='';      
                //        tbl+='<div class="action">';               
                //     	tbl+='<a data-id='+row.id+' href="'+base+'/dofy_lot_reports/'+row.lot_no+'" class="view product_view text-info" type="button"> <i class="bi bi-eye-fill"></i></a>';
                //     	tbl+='</div>';       
                //      return tbl;
                //   }
                // }
            ],
            rowId: 'id'
        });

        // $(document).ready(function() {
        // 	var pathn = $('meta[name="base_url"]').attr("content")+'/dofy_products_list_data';console.log(pathn);
        // 	var reporttables =  $('#dataList').DataTable({
        // 		"order": [[ 0, "desc" ]],
        //       "serverSide": true,
        // 		"stateSave": true,
        //       'processing': true,
        // 		"pageLength": 20,
        // 		"lengthMenu": [
        //             [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420, 450, 475, 500],
        //             [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420, 450, 475, 500]
        //         ],
        //         oLanguage: {sProcessing: '<div class="lds-css"><div style="width:100%;height:100%" class="lds-eclipse"><div></div><p>Please wait while we are processing your request11.</p></div></div>' },
        // 		"ajax": {
        // 			'type': 'GET',
        // 			'url': pathn,
        // 			'data': function(d){ 
        //             d.pagenme = '{{ basename(url()->current()) }}', 			  
        // 			   d.no_pro = $("#no_pro").val()			  
        // 			}
        // 		},
        // 		searching: false,
        // 		"iDisplayLength": 20,
        // 		"columnDefs": [
        // 		{
        // 			"targets": 0,
        // 			className: "text-center",
        // 			"render": function ( data, type, row, meta ) {
        // 				return row.index;
        // 			}
        // 		},
        // 		{
        //     "targets": 1,
        //     orderable: true,
        //     "render": function ( data, type, row, meta ) {
        //       return '<p class="mb-0 customer-name fw-bold">'+row.lot_no+'</p>';    
        //     }
        //   },
        // 	{
        // 	    "targets": 2,
        // 	    orderable: true,
        // 	    "render": function ( data, type, row, meta ) {
        // 	     return '<p class="mb-0 customer-name fw-bold">'+row.created_by+'</p>';
        // 	    }
        // 	  },  
        //   {
        //     "targets": 3,
        //     orderable: true,
        //     "render": function ( data, type, row, meta ) {
        //      return '<p class="mb-0 customer-name limit_desc">'+row.dofylot_date+'</p>';
        //     }
        //   },
        //   {
        //     "targets": 4,
        //     orderable: true,
        //     "render": function ( data, type, row, meta ) {
        //      return '<p class="mb-0 customer-name limit_desc">'+row.city_name+'</p>';
        //     }
        //   },
        //   {
        //     "targets": 5,
        //     orderable: true,
        //     "render": function ( data, type, row, meta ) {
        //      return '<p class="mb-0 customer-name limit_desc">'+row.no_pro+'</p>';
        //     }
        //   },
        //   {
        //     "targets": 6,
        //     orderable: true,
        //     "render": function ( data, type, row, meta ) {
        //      return '<p class="mb-0 customer-name limit_desc">'+row.ready_to_sale+'</p>';
        //     }
        //   },
        //   {
        //     "targets": 7,
        //     orderable: true,
        //     "render": function ( data, type, row, meta ) {
        //      return '<p class="mb-0 customer-name limit_desc">'+row.working+'</p>';
        //     }
        //   },
        //    {
        //     "targets": 8,
        //     orderable: true,
        //     "render": function ( data, type, row, meta ) {
        //      return '<p class="mb-0 customer-name limit_desc">'+row.not_working+'</p>';
        //     }
        //   },
        //   	{
        //     	"targets": 9,
        //     	orderable: true,
        //     	"render": function ( data, type, row, meta ) {
        //       var tbl='';      
        //          tbl+='<div class="action">';               
        //       	tbl+='<a data-id='+row.id+' href="'+base+'/dofy-lot/'+row.lot_no+'" class="view product_view text-info" type="button"> <i class="bi bi-eye-fill"></i></a>';
        //       	tbl+='</div>';       
        //        return tbl;
        //     	}
        //   	}
        // 	  ]
        // 	});
        // });

        $(document).on('click', '.searchdata', function() {
            $('#dataList').DataTable().ajax.reload();
        });

        $(document).on('click', '.reset_searchdata', function() {
            $('#memberdata').trigger("reset");
            $('#pro_model').val('');
            $('#imei').val('');
            $('#city_name').val('');
            $('#dofylot_date').val('');
            $('#created_by').val('');
            $('#dataList').DataTable().ajax.reload();
            //  $('.fltr-btn').trigger('click');
        });

        // function vldfn(){
        // 		$('#dataList').DataTable().ajax.reload();
        // 	}
        // filter button
        $(".fltrbtn").click(function() {
            if ($('.fltr-main').is(':visible')) {
                $(".fltr-main").hide(1000);
            } else {
                $(".fltr-main").show(1000);
            }
        });
    </script>
@endsection