@extends('layouts.app')
@section('title', 'Orders | Shopping Cart')
@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/dataTables/datatables.min.css') }}" >
{{--    <link href="{{ asset('/plugins/datepicker/datepicker3.css') }}" rel="stylesheet">--}}
    <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 Orders</h5>
                    </div>
                    <div class="ibox-content p-md">
                        <div id="filters" class="filters" style="display: block">
                            {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return exportOrder(this);']) !!}
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="form-group" id="data_1" style="margin-bottom: 0px;">
                                        <div class="input-group date">
                                            <input type="text" class="form-control" name="daterange" value="" />
                                            <span class="input-group-addon"
                                            ><i class="fa fa-calendar"></i
                                                ></span>
                                            <input
                                                type="hidden"
                                                class="form-control dates"
                                                value=""
                                                name="end_date"
                                                id="end_date"
                                            />
                                            <input
                                                type="hidden"
                                                class="form-control dates"
                                                value=""
                                                name="start_date"
                                                id="start_date"
                                            />
                                        </div>
                                    </div>
{{--                                    <div class="row">--}}
{{--                                        <div class="from-date">--}}
{{--                                            <div class="ibox-content">--}}
{{--                                                <div class="form-group" id="data_1">--}}
{{--                                                    <div class="input-group date">--}}
{{--                                                        <input--}}
{{--                                                            type="text"--}}
{{--                                                            class="form-control dates"--}}
{{--                                                            value=""--}}
{{--                                                            name="start_date"--}}
{{--                                                            id="start_date"--}}
{{--                                                        /><span class="input-group-addon"--}}
{{--                                                        ><i class="fa fa-calendar"></i--}}
{{--                                                            ></span>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="to-text">--}}
{{--                                            to--}}
{{--                                        </div>--}}
{{--                                        <div class="to-date">--}}
{{--                                            <div class="ibox-content">--}}
{{--                                                <div class="form-group" id="data_1">--}}
{{--                                                    <div class="input-group date">--}}
{{--                                                        <input--}}
{{--                                                            type="text"--}}
{{--                                                            class="form-control dates"--}}
{{--                                                            value=""--}}
{{--                                                            name="end_date"--}}
{{--                                                            id="end_date"--}}
{{--                                                        /><span class="input-group-addon"--}}
{{--                                                        ><i class="fa fa-calendar"></i--}}
{{--                                                            ></span>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                </div>
                                <div class="col-lg-2">
                                    <input type="hidden" class="orders_customers_search" name="orders_customers_search" value="">
                                    <div class="form-group">
                                        {!! Form::select('orders_country' , \App\Order::orderCountries() , null , ['class' => 'form-control', 'id' => 'orders_country']) !!}
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="form-group">
                                        {!! Form::select('orders_currency' , \App\Order::orderCurrencies() , null , ['class' => 'form-control', 'id' => 'orders_currency']) !!}
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="form-group">
                                        {!! Form::select('orders_search' , \App\Order::searchOrder() , null , ['class' => 'form-control', 'id' => 'orders_search']) !!}
                                    </div>
                                </div>
                                <div class="col-lg-2">
                                    <div class="form-group">
                                        {!! Form::select('orders_statuses' , \App\Order::OrderStatuses() , null , ['class' => 'form-control', 'id' => 'orders_statuses']) !!}
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        {!! Form::select('orders_type' , \App\Order::orderType() , null , ['class' => 'form-control', 'id' => 'orders_type']) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="text-right">
                                        <button type="submit" class="btn btn-primary" style="width: 10%">Export</button>
                                    </div>
                                </div>

                            </div>
                            {!! Form::close() !!}
                        </div>
                        <div class="clearfix"></div>
                        <div class="table-responsive">
                            <table style="width: 100%;" class="table table-striped table-bordered table-hover"  id="order_listing">
                                <thead>
                                <tr>
                                    <th>Order Number</th>
                                    <th>Name</th>
                                    <th>Price</th>
                                    <th>Status</th>
                                    @if(!empty($fraudServiceName))
                                        <th>{{$fraudServiceName}}</th>
                                    @endif
                                    <th>Date</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 src="{{ asset('/plugins/datepicker/bootstrap-datepicker.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')],
                    'This year': [moment().startOf('year').toDate(), moment().endOf('year').toDate()],
                'Last year': [moment().subtract(1, 'year').startOf('year').toDate(), moment().subtract(1, 'year').endOf('year').toDate()],

                },
                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( $('#order_listing').length > 0 ) {
                    $('#order_listing').dataTable().fnFilter(false, '', '');
                }
            });
            // $('.input-group.date').datepicker({
            //     todayBtn: "linked",
            //     keyboardNavigation: false,
            //     forceParse: false,
            //     autoclose: true,
            //     format: "yyyy-mm-dd",
            //     endDate: new Date(),
            // });

            var orders_search       = $('select[name=orders_search]').val();
            var orders_statuses     = $('select[name=orders_statuses]').val();
            var orders_country      = $('select[name=orders_country]').val();
            var orders_currency     = $('select[name=orders_currency]').val();
            var orders_customers    = $('select[name=orders_customers]').val();
            var orders_type         = $('select[name=orders_type]').val();
            var oTable = $('#order_listing').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search...",
                    search: '', /* removed search label */
                },
                ajax : {
                    url: "{{ shopping_cart_url('orders/show') }}",
                    data: function (data) {
                        data.start_date = $('[name=start_date]').val();
                        data.end_date = $('[name=end_date]').val();
                        data.orders_search = $('[name=orders_search]').val();
                        data.orders_country = $('[name=orders_country]').val();
                        data.orders_currency = $('[name=orders_currency]').val();
                        data.orders_statuses = $('[name=orders_statuses]').val();
                        data.orders_customers = $('[name=orders_customers]').val();
                        data.orders_type = $('[name=orders_type]').val();
                    }
                }
            });

            $('#order_listing_filter').change(function() {
                var searchCustomerOrder = oTable.search();
                $('input[name=orders_customers_search]').val(searchCustomerOrder);
            });

            // $(document).on('change', '#start_date, #end_date', function() {
            //     oTable.ajax.reload();
            // });

            {{--$('#exportOrder').click(function () {--}}
            {{--    const startDate = $('[name=start_date]').val();--}}
            {{--    const endDate = $('[name=end_date]').val();--}}
            {{--    location.href = '{{ shopping_cart_url('orders/export') }}?startDate='+startDate+'&endDate='+ endDate;--}}
            {{--});--}}
        });

        $('#orders_search').change(function() {
            $('#order_listing').DataTable().ajax.reload();
        });

        $('#orders_statuses').change(function() {
            $('#order_listing').DataTable().ajax.reload();
        });

        $('#orders_country').change(function() {
            $('#order_listing').DataTable().ajax.reload();
        });

        $('#orders_currency').change(function() {
            $('#order_listing').DataTable().ajax.reload();
        });

        $('#orders_customers').change(function() {
            $('#order_listing').DataTable().ajax.reload();
        });

        $('#orders_type').change(function() {
            $('#order_listing').DataTable().ajax.reload();
        });

        function exportOrder(){
            return reloadAjaxSubmit('filters',"{{ shopping_cart_url('orders/export') }}",'title','Submit');
        }

    </script>
@endsection