@extends('layouts.master')

@section('page_title', 'Customers - Suppliers Report')
@section('title', 'Customers & Suppliers Report')
@section('main_item', 'Reports')
@section('sub_item', 'Customers & Suppliers Report')

@section('content')

    <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">Select Customer</label>
                            <select class="form-control select2" id="contact_id" name="contact_id">
                                <option value="">Select</option>
                                @foreach ($customers as $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                @endforeach
                            </select>
                        </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({
                lengthMenu: [
                    [25, 50, 100, -1],
                    ['25 ', '50 ', '100', 'All']
                ],
                buttons: ['copy', 'excel', 'pdf', 'colvis'],
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('/reports/customer') }}",
                    data: function(d) {
                        d.contact_id = $('#contact_id').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', function() {
            table.ajax.reload();

        })
    </script>

@endsection