@extends('layouts.master')

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

@section('content')
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="h6"><i class="fa fa-filter"></i> Filters</div>
                <div class="row">
                    <div class="col-md-4" hidden>
                        <div class="form-group">
                            <label for="supplier">Supplier</label>
                            <select class="form-control" id="product_id" name="product_id">
                                <option>Select</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}">{{ $product->product_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold" for="category">Category</label>
                            <select class="form-control select2" id="product_list_filter_category_id" name="category">
                                <option value="">All</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!--end card-body-->
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold" for="">Resources</label>
                            <select class="form-control custom-select" id="resources" name="resources">
                                <option value="">All</option>
                                <option value="whats_app">WhatsApp</option>
                                <option value="face_book_leeds">Facebook Leads</option>
                                <option value="face_book_massenger">Facebook Massenger</option>
                                <option value="bulk_order">Bulk Order</option>
                                <option value="daraz">Daraz</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="reportrange" style="font-weight: bold"> Date </label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="dates-d" id="reportrange" value=""
                                    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-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive dash-social">
                    <table id="laravel_datatable" class="table table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>Product name</th>
                                <th>Category</th>
                                <th>Total Orders Count</th>
                                <th>Unit Cost</th>
                                <th>Unit Price</th>
                                <th>Cost</th>
                                <th>Confirm Orders Count </th>
                                <th>Confirm Orders Presentage (%)</th>
                                <th>Relese Orders Count </th>
                                <th>Relese Orders Presentage (%)</th>
                                <th>Delived Orders Count </th>
                                <th>Delived Orders Presentage (%)</th>
                                <th>Return Orders Count </th>
                                <th>Return Orders Presentage (%)</th>
                                <th>Pending Orders Count </th>
                                <th>Pending Orders Presentage(%)</th>
                                <th>Gross Profit</th>
                                <th>Net Profit</th>
                            </tr>
                            <!--end tr-->
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
@endsection
@section('scripts')
    <script>
        $('#product_list_filter_category_id').select2();
        $(document).ready(function() {
            var report_table = $('#laravel_datatable').DataTable({
                dom: 'Blfrtip',
                lengthMenu: [
                    [25, 50, 100, 500, ],
                    ['25 ', '50 ', '100', '500',]
                ],
                buttons: [{
                        extend: 'copy',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
                        }
                    },
                ],
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('/report/resouses/all') }}",
                    data: function(d) {
                        d.product_id = $('#product_id').val();
                        d.category_id = $('#product_list_filter_category_id').val();
                        d.resources = $('#resources').val();
                        d.range = $('#reportrange').val();
                    }
                },
                columnDefs: [{
                    "targets": [],
                    "orderable": false,
                    "searchable": false,
                }],

                columns: [{
                        data: 'product_name',
                        name: 'product_name'
                    },
                    {
                        data: 'category_id',
                        name: 'category_id'
                    },
                    {
                        data: 'order_count',
                        name: 'order_count'
                    },
                    {
                        data: 'unit_cost',
                        name: 'unit_cost'
                    },
                    {
                        data: 'unit_price',
                        name: 'unit_price'
                    },
                    {
                        data: 'cost',
                        name: 'cost'
                    },
                    {
                        data: 'call_status',
                        name: 'call_status'
                        //                  render: function(data, type, full, meta) {
                        // return data.toFixed(2) + '%';}
                    },
                    {
                        data: 'call_status_presentage',
                        name: 'call_status_presentage'
                    },
                    {
                        data: 'relese',
                        name: 'relese'
                    },
                    {
                        data: 'relese_presentage',
                        name: 'relese_presentage'
                    },
                    {
                        data: 'delivered',
                        name: 'delivered'
                    },
                    {
                        data: 'delivered_presentage',
                        name: 'delivered_presentage'
                    },
                    {
                        data: 'return',
                        name: 'return'
                    },
                    {
                        data: 'return_presentage',
                        name: 'return_presentage'
                    },
                    {
                        data: 'pending',
                        name: 'pending'
                    },
                    {
                        data: 'pending_presentage',
                        name: 'pending_presentage'
                    },
                    {
                        data: 'grose_profit',
                        name: 'grose_profit'
                    },
                    {
                        data: 'net_profit',
                        name: 'net_profit'
                    },
                ]
            });
            $('[data-toggle="tooltip"]').tooltip()

            function tableReload() {
                report_table.ajax.reload();
            }
            $(document).on('change',
                '#product_id, #reportrange, #product_list_filter_category_id, #resources',
                function() {
                    report_table.ajax.reload();
                });
        });
    </script>
@endsection