@extends('layouts.app')
@section('title', 'Autoship | Shopping Cart')
@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/dataTables/datatables.min.css') }}" >
    <link rel="stylesheet" type="text/css" href="{{ asset('/plugins/dateRangePicker2/daterangepicker.css') }}">
@endsection

@section('content')
    <div class="studio98_websters">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title2">
                        <h5>Manage Autoships</h5>
                    </div>
                    <div class="ibox-content p-md atuoship_template" id="atuoship_template">
                        <div class="clearfix"></div>
                        {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return exportAutoship(this);']) !!}
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    {!! Form::select('method_type' , $methods , 'All' , ['class' => 'form-control', 'id' => 'method_type']) !!}
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary" style="width: 10%">Export</button>
                                </div>
                            </div>
                        </div>
                        {!! Form::close() !!}
                        <div class="table-responsive">
                            <table style="width: 100%;" class="table table-striped table-bordered table-hover"  id="autoship_listing">
                                <thead>
                                <tr>
                                    <th class="no-sort">Autoship ID</th>
                                    <th class="no-sort">Customer Name</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Next Run Date</th>
                                    <th class="no-sort">Method</th>
                                    <th>Number of runs</th>
                                    <th>Future Amount</th>
                                </tr>
                                </thead>
                            </table>
                            <tbody></tbody>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/dataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('/plugins/dataTables/dataTables.bootstrap4.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="{{ asset('plugins/dateRangePicker2/daterangepicker.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // var start_date = $('input[name="daterange"]').val();
            // if (start_date == '') {
            //     start_date = moment().subtract(6, 'days').format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD');
            //     $('input[name="daterange"]').val(start_date);
            // }
            // start_date = start_date.split(" " , 8);
            // var end_date = start_date[2];
            // start_date = start_date[0];
            // $('#start_date').val(start_date);
            // $('#end_date').val(end_date);
            // $('input[name="daterange"]').daterangepicker({
            //     opens: 'left',
            //     startDate: start_date,
            //     endDate: end_date,
            //     ranges: {
            //         'Today': [moment(), moment()],
            //         'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            //         'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            //         'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            //         'This Month': [moment().startOf('month'), moment().endOf('month')],
            //         'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            //     },
            //     locale: {
            //         format: 'YYYY-MM-DD'
            //     }
            // }, function(start, end, label) {
            //     fromDate = start.format('YYYY-MM-DD');
            //     toDate = end.format('YYYY-MM-DD');
            //     var currentURL = window.location.href;
            //     var currentURLExtract = currentURL.split('?');
            //     currentURL = currentURLExtract[0];
            //     currentURL += '?start=' + fromDate + '&end=' + toDate;
            //     window.history.pushState("data", "", currentURL);
            //     $('#start_date').val(fromDate);
            //     $('#end_date').val(toDate);
            //     if( $('#autoship_listing').length > 0 ) {
            //         $('#autoship_listing').dataTable().fnFilter(false, '', '');
            //     }
            // });
            var method_type = $('#method_type').val();

            var oTable = $('#autoship_listing').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search...",
                    search: '', /* removed search label */
                },
                "columnDefs": [ {
                    "targets": 'no-sort',
                    "orderable": false,
                } ],
                ajax : {
                    url: "{{ shopping_cart_url('autoship/show') }}",
                    data: function (data) {
                        data.method_type = $('[name=method_type]').val();
                    }
                }
            });

            $('#method_type').change(function() {
                $('#autoship_listing').DataTable().ajax.reload();
            });
        });

        function exportAutoship() {
            return reloadAjaxSubmit('atuoship_template', "{{ shopping_cart_url('autoship/export') }}",'title','Submit');
        }
    </script>
@endsection