@extends('modules.head') @section('contenido')
    <div class="box-body table-responsive ">
        <h3>ABC products</h3><br>

        <div class="form-group">

            <div class="col-sm-2">
                <label for="to_date">To date</label>
                <input type="month" id="to_date" class="form-control"
                       max="{{ \Carbon\Carbon::now()->subMonth()->format('Y-m') }}"/>
            </div>

            <div class="col-sm-2">
                <label for="branch">Branch</label>
                <select class="form-control" name="branch" id="branch">
                    <option value="">-- To select</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->short_name }}</option>
                    @endforeach
                </select>
            </div>

        </div>
        <div class="col-sm-2 form-group">
            <button class="btn btn-primary" id="btn-filter" onclick="generateReport(this)">Generate</button>
        </div>

        <table id="table-list_abc_products" class="table table-bordered table-hover dataTable">
            <thead>
            <tr role="row">
                <th>Index</th>
                <th>Item No.</th>
                <th>Total revenue</th>
                <th>Total revenue percentage</th>
                <th>Class</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
    <script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
    <script type="text/javascript">

        function generateReport() {
            let branch = $("#branch").val();
            let to_date = $("#to_date").val();
            if (!branch || !to_date) {
                swal('', 'Please select a branch and a date', 'warning');
                return false;
            }
            $.ajax({
                url: `/abc/data/${branch}/${to_date}`,
                type: "GET",
                contentType: "application/json",
                success: function (response) {
                    displayData(response);
                },
                error: function (error) {
                    swal('Server error', `${error.message}`, 'error');
                }
            });
        }

        function displayData(response) {
            $('#table-list_abc_products').DataTable().destroy();
            $('#table-list_abc_products').DataTable({
                "aaData": response.data,
                columns: [
                    {
                        data: 'index',
                        name: 'index',
                    },
                    {
                        data: 'product_sku',
                        name: 'product_sku',
                    },
                    {
                        data: 'total_revenue',
                        name: 'total_revenue',
                        render: function (data) {
                            let formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});
                            return formatter.format(data);
                        }
                    },
                    {
                        data: 'sku_revenue_percent',
                        name: 'sku_revenue_percent',
                        render: function (data) {
                            let percentage = (data * 100).toFixed(2) + '%';
                            return `<b>${percentage}</b>`;
                        }
                    },
                    {
                        data: 'ABC',
                        name: 'ABC',
                    }
                ],
                "ordering": false
            });
        }
    </script>

@endsection