@extends('layouts.master')

@section('page_title','Supplier  Report')
@section('title','Supplier  Report')
@section('main_item','Reports')
@section('sub_item','Supplier  Report')

@section('content')
    <style>
        div.dt-buttons{
            position:relative;
            float:right;
        }
        div.dataTables_filter{
            margin-top: 7px
        }
    </style>
<div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold" for="supplier">Date Range</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="dates-d" id="reportrange" readonly>
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="dripicons-calendar"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          
        </div>
      
    </div>

<div class="col-md-12">
    <div class="card">
        <div class="card-body">
                <div class="table-responsive dash-social">
                        <table id="laravel_datatable" class="table table-striped">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Contact Name</th>
                                    <th>Order Count</th>
                                    <th>Orders Value</th>
                                    <th>Return Count</th>
                                    <th>Return Value</th>

                                </tr>
                                
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
        </div>
        
    </div>
   
</div>

@endsection

@section('scripts')

<script>
       
        $(document).ready(function () {
            table = $('#laravel_datatable').DataTable({
                dom: 'Blfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: true,
                serverSide: true,
                ajax:{
                    url: "{{ url('/reports/suppliers') }}",
                    data: function(d) {
                                    d.contact_id = $('#contact_id').val();
                                    d.range = $('#reportrange').val();
                                },
                },
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'order_count',
                        name: 'order_count'
                    },
                    {
                        data: 'order_value',
                        name: 'order_value'
                    },
                    {
                        data: 'return_count',
                        name: 'return_count'
                    },
                    {
                        data: 'return_value',
                        name: 'return_value'
                    },

                ]
            });

        });

        $(document).on('change','#contact_id , #reportrange' , function () {
            
            table.ajax.reload();

        })

    </script>

@endsection