@extends('modules.head') @section('contenido')
<div class="box-header">
    @if(Auth::user()->rol_id == 1)
    <a class="auxiliar" href="{{url('/inactive/report')}}">
        <button type="button" class="btn  pull-left btnAux">
            <i class="fa fa-file"></i>@lang('messages.inventory_report')
        </button>
    </a>
    @endif
</div><br>

<!-- List banners-->
<div class="box">

    <!-- /.box-header -->

    <div class="box-body table-responsive ">
        <button class="btn btnAdd show pull-left" id="btn">Show/Hide accounts with no orders</button>
        <div id="noOrders" style="display:none">
        <h3>Accounts with no orders</h3>
        <table id="table-no-orders" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">BP Code</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Company Name</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        </div>
    </div>
    <div class="box-body table-responsive ">
        <form class="form-inline formFilter" id="form-filter">
            <div class="form-group">
                <label for="end_date">Select date</label>
                <input type="date" class="datepicker form-control" id="end_date" name="end_date" value="">
            </div>
        </form>
        <h3 >Inactive Accounts per periods</h3>
        <table id="table-inactive-clients" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">BP Code</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Company Name</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Branch</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Last Order</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Amount</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Date</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Days</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Group</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

@include('products.scraper')

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

        $( ".datepicker" ).datepicker({  maxDate: -10 });


        $(".btnAdd.show").click(function(){
            $("#noOrders").toggle();

        });

        $('#table-no-orders').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: {
                    url: '/get-accounts-no-orders',
                },
                columns: [
                        {
                            data: 'document',
                            name: 'document',
                            render: (data, type, row) => {
                                return `<a href="/clients/edit/${row.id}">${data}</a>`
                            },
                        },

                        {
                            data: 'first_name',
                            name: 'first_name'
                        },
                    ],
            });


        let table = null;
        $.fn.dataTable.ext.errMode = 'throw';
        const dateInput = document.querySelector("#end_date");

        dateInput.addEventListener("input", () => {test(table)

        });

        function test(table){
            let date = dateInput.value;
                table.ajax.url(`/get-inactive-accts/${date}`).load();
        }

        function getMinDate() {

            var today = new Date();

            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
            var yyyy = today.getFullYear();
            today = yyyy + '-' + mm + '-' + dd;

            minDate = new Date(today);
            day = minDate.getDate()-7;
            minDate.setDate(day);
            return minDate;
        }

        $('#table-inactive-clients thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#table-inactive-clients thead');

        $('#table-inactive-clients thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#table-inactive-clients").dataTable().fnDestroy();
        table = $('#table-inactive-clients').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: {
                    url: '/get-inactive-accts/1',
                },
                columns: [
                        {
                            data: 'document',
                            name: 'document',
                            render: (data, type, row) => {
                                return `<a href="/clients/edit/${row.id}">${data}</a>`
                            },
                        },
                        {
                            data: 'first_name',
                            name: 'first_name'
                        },
                        {
                            data: 'branch',
                            name: 'branch'
                        },
                        {
                            data: 'last_order_code',
                            name: 'last_order_code'
                        },
                        {
                            data: 'last_order_amount',
                            name: 'last_order_amount'
                        },
                        {
                            data: 'last_order_date',
                            name: 'last_order_date'
                        },
                        {
                            data: 'days',
                            name: 'days'
                        },
                        {
                            data: 'group_name',
                            name: 'group_name',
                            render: (data) => {
                                return data ? data : '';
                            }
                        },
                ],
                initComplete: addFiltersForDataTable
            });
    });

</script>


@endsection