@extends('layouts.admin')
@section('content')

<div class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <b class="text-capitalize">welcome to happy grains lucky draw 2023</b>
                </div>

                <div class="card-body">
                    @if(session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    {{-- <div class="row">
                        <div class="col-md-3">
                            <div class="card text-white bg-primary">
                                <div class="card-body pb-0">
                                    <div class="text-value">6</div>
                                    <div>Lucky Draw Item Amount</div>
                                    <br />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-primary">
                                <div class="card-body pb-0">
                                    <div class="text-value">2</div>
                                    <div>Employee Amount</div>
                                    <br />
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-white bg-primary">
                                <div class="card-body pb-0">
                                    <div class="text-value">8</div>
                                    <div>Customer Amount</div>
                                    <br />
                                </div>
                            </div>
                        </div>
                    </div> --}}

                   <!--  <div class="row">
                        <div class="{{ $settings1['column_class'] }}">
                            <div class="card text-white bg-primary">
                                <div class="card-body pb-0">
                                    <div class="text-value">{{ number_format($settings1['total_number']) }}</div>
                                    <div>{{ $settings1['chart_title'] }}</div>
                                    <br />
                                </div>
                            </div>
                        </div>
                        <div class="{{ $settings2['column_class'] }}">
                            <div class="card text-white bg-primary">
                                <div class="card-body pb-0">
                                    <div class="text-value">{{ number_format($settings2['total_number']) }}</div>
                                    <div>{{ $settings2['chart_title'] }}</div>
                                    <br />
                                </div>
                            </div>
                        </div>
                        <div class="{{ $settings3['column_class'] }}">
                            <div class="card text-white bg-primary">
                                <div class="card-body pb-0">
                                    <div class="text-value">{{ number_format($settings3['total_number']) }}</div>
                                    <div>{{ $settings3['chart_title'] }}</div>
                                    <br />
                                </div>
                            </div>
                        </div>
                        <div class="{{ $chart4->options['column_class'] }}">
                            <form method="GET" action="{{ route('admin.report.displaySurveyReport') }}" target="_blank">
                                <div class="form-group row">
                                    <div class="col-sm-2">
                                        <label for="date_from">Date From</label>
                                    </div>
                                    <div class="col-sm-10">
                                        <input type="text" class="date form-control" name="date_from" id="date_from" />
                                    </div>
                                </div>      
                                <div class="form-group row">
                                    <div class="col-sm-2">
                                        <label for="date_from">Date To</label>
                                    </div>
                                    <div class="col-sm-10">
                                        <input type="text" class="date form-control" name="date_to" id="date_to" />
                                    </div>
                                </div>      
                                <div class="form-group row">
                                    <div class="col-sm-2">
                                        <label for="product">Product</label>
                                    </div>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="product">
                                            <option value="Original Mixed Grains" selected>Original Mixed Grains</option>
                                            <option value="Black Seeds">Black Seeds</option>
                                            <option value="Choco Grains">Choco Grains</option>
                                            <option value="Haven’t tried yet">Haven’t tried yet</option>
                                        </select>
                                    </div>
                                </div>      
                                <div class="d-flex justify-content-center">
                                    <button type="submit" class="btn btn-md btn-info text-center">Generate Report</a>
                                </div>
                            </form>
                            <h3>{!! $chart4->options['chart_title'] !!}</h3>
                            {!! $chart4->renderHtml() !!}
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
@parent
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
{!! $chart4->renderJs() !!}

<script type="text/javascript">
    $(function(){
        var dom_date_from;
        var dom_date_to;
        var date_from;
        var date_to;

        $("#date_from").on('change dp.change', function(e){
            dom_date_from = $('#date_from').data('DateTimePicker');
            dom_date_to = $('#date_to').data('DateTimePicker');

            date_from = $('#date_from').data('DateTimePicker').date().valueOf();
            date_to = $('#date_to').data('DateTimePicker').date().valueOf();

            if (date_from > date_to) {
                var newDate = new Date(dom_date_from.date())
                newDate.setDate(newDate.getDate() + 1);
                dom_date_to.date(newDate);
            }
        })

        $("#date_to").on('change dp.change', function(e){
            dom_date_from = $('#date_from').data('DateTimePicker');
            dom_date_to = $('#date_to').data('DateTimePicker');

            date_from = $('#date_from').data('DateTimePicker').date().valueOf();
            date_to = $('#date_to').data('DateTimePicker').date().valueOf();

            if (date_to < date_from) {
                var newDate = new Date(dom_date_to.date())
                newDate.setDate(newDate.getDate() - 1);
                dom_date_from.date(newDate);
            }        
        })
    })
</script>
@endsection