@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>
            <!--end card-body-->
        </div>
        <!--end card-->
    </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>
                            <!--end tr-->
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </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