@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Total Order Report </h3>
                </div>
                <div class="panel-body">

                    <form action="{{ route('admin.report.total') }}" method="post">
                        @csrf
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="dateRange">Date Range</label>
                                <input type="text" name="dateRange" id="dateRange" class="form-control"
                                       value="{{old('dateRange')}}" autocomplete="off" placeholder="Search for date ">
                            </div>

                        </div>
                        <div class="row">
                            <div class="form-group col-md-3">
                                <button type="submit" class="btn btn-primary">Export</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Failed Order Report </h3>
                </div>
                <div class="panel-body">

                    <form action="{{ route('admin.report.failed') }}" method="post">
                        @csrf
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="dateRange">Date Range</label>
                                <input type="text" name="dateRange" id="dateRange" class="form-control"
                                       value="{{old('dateRange')}}" autocomplete="off" placeholder="Search for date ">
                            </div>

                        </div>
                        <div class="row">
                            <div class="form-group col-md-3">
                                <button type="submit" class="btn btn-primary">Export Failed Orders</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('css')
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
@endpush
@push('script')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(function () {
            let dateRange = $('input[name="dateRange"]');
            dateRange.daterangepicker({
                autoUpdateInput: false,
                maxDate: new Date(),
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            dateRange.on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });

            dateRange.on('cancel.daterangepicker', function (ev, picker) {
                $(this).val('');
            });

        });
    </script>
@endpush