@extends('layouts.admin.app')
@section('title') Report @stop
@section('style')
    <style>
        .datepicker {
            z-index: 9999 !important;
        }

        .datepicker td, .datepicker th {
            width: auto;

        }
    </style>
@endsection
@section('main')
    <div class="box box-primary" id="report">

        <div class="box-body">
            {!! Form::open(['method'=>'POST','action' => 'ReportController@generate']) !!}

            <div class="form-group">
                {!! Form::label('report_type', 'Report Type:') !!}
                {!! Form::select('report_type', [1=>'Sales',2=>'Inventory',3=>'Commission',4=>'Monthly'], null,['class'=>'form-control', 'placeholder'=>'Select Report Type', 'v-model'=>'report_type']) !!}
                @if ($errors->has('report_type'))
                    <span class="invalid-feedback">
                        <strong>{{ $errors->first('report_type') }}</strong>
                    </span>
                @endif
            </div>

            <div v-if="report_type == 1">

                <div class="form-group">
                    {!! Form::label('sales_by', 'Sales by:') !!}
                    {!! Form::select('sales_by', [1=>'Sales Rep',2=>'New Accounts',3=>'Customers',4=>'ALL',5=>'SKU-shipped',6=>'SKU-invoiced'], null,['class'=>'form-control', 'placeholder'=>'Select Sales by']) !!}
                    @if ($errors->has('sales_by'))
                        <span class="invalid-feedback">
                        <strong>{{ $errors->first('sales_by') }}</strong>
                    </span>
                    @endif
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            {!! Form::label('date_from', 'Date From:') !!}
                            <div class="input-group date" data-provide="datepicker" data-date-autoclose="true">
                                {!! Form::text('date_from', null, ['class'=>'form-control', 'autocomplete'=>'off']) !!}
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th"></span>
                                </div>
                            </div>

                            @if ($errors->has('date_from'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('date_from') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            {!! Form::label('date_to', 'Date To:') !!}
                            <div class="input-group date" data-provide="datepicker" data-date-autoclose="true">
                                {!! Form::text('date_to', null, ['class'=>'form-control', 'autocomplete'=>'off']) !!}
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th"></span>
                                </div>
                            </div>
                            @if ($errors->has('date_to'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('date_to') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    {!! Form::label('type', 'Type:') !!}
                    {!! Form::select('type', [1=>'Summary',2=>'Detailed'], null,['class'=>'form-control', 'placeholder'=>'Select Type']) !!}
                    @if ($errors->has('type'))
                        <span class="invalid-feedback">
                        <strong>{{ $errors->first('type') }}</strong>
                    </span>
                    @endif
                </div>

                <div class="text-center">
                    <button class="btn btn-success" type="submit" value="excel" name="submit">Generate Report ( Excel
                        )
                    </button>
                    <button class="btn btn-danger" type="submit" value="pdf" name="submit">Generate Report ( PDF )
                    </button>
                </div>

            </div>

            <div v-if="report_type == 2">

                <div class="form-group">
                    {!! Form::label('type', 'Type') !!}
                    {!! Form::select('type', [1=>'By Inventory',2=>'By Hot',3=>'By Requested'], null,['class'=>'form-control', 'placeholder'=>'Select Type']) !!}
                    @if ($errors->has('type'))
                        <span class="invalid-feedback">
                        <strong>{{ $errors->first('type') }}</strong>
                    </span>
                    @endif
                </div>

                <div class="text-center">
                    <button class="btn btn-success" type="submit" value="excel" name="submit">Generate Report ( Excel
                        )
                    </button>
                    <button class="btn btn-danger" type="submit" value="pdf" name="submit">Generate Report ( PDF )
                    </button>
                </div>

            </div>

            <div v-if="report_type == 3">

                <div class="form-group">
                    {!! Form::label('rep', 'Sales Rep') !!}
                    {!! Form::select('rep', $sales_rep, null,['class'=>'form-control', 'placeholder'=>'Select Sales Rep']) !!}
                    @if ($errors->has('rep'))
                        <span class="invalid-feedback">
                        <strong>{{ $errors->first('rep') }}</strong>
                    </span>
                    @endif
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            {!! Form::label('date_from', 'Date From:') !!}
                            <div class="input-group date" data-provide="datepicker" data-date-autoclose="true">
                                {!! Form::text('date_from', null, ['class'=>'form-control', 'autocomplete'=>'off']) !!}
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th"></span>
                                </div>
                            </div>

                            @if ($errors->has('date_from'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('date_from') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            {!! Form::label('date_to', 'Date To:') !!}
                            <div class="input-group date" data-provide="datepicker" data-date-autoclose="true">
                                {!! Form::text('date_to', null, ['class'=>'form-control', 'autocomplete'=>'off']) !!}
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th"></span>
                                </div>
                            </div>
                            @if ($errors->has('date_to'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('date_to') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="text-center">
                    <button class="btn btn-success" type="submit" value="excel" name="submit">Generate Report ( Excel
                        )
                    </button>
                    <button class="btn btn-danger" type="submit" value="pdf" name="submit">Generate Report ( PDF )
                    </button>
                </div>

            </div>

            <div v-if="report_type == 4">

                <div class="form-group">
                    {!! Form::label('corporate_name', 'Corporate Name') !!}
                    {!! Form::select('corporate_name', $companies, null,['class'=>'select2 form-control', 'placeholder'=>'Select Corporate Name','style'=>'width:100%;display:block','v-select2']) !!}
                    @if ($errors->has('corporate_name'))
                        <span class="invalid-feedback">
                        <strong>{{ $errors->first('corporate_name') }}</strong>
                    </span>
                    @endif
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            {!! Form::label('date_from', 'Date From:') !!}
                            <div class="input-group date" data-provide="datepicker" data-date-autoclose="true">
                                {!! Form::text('date_from', null, ['class'=>'form-control', 'autocomplete'=>'off']) !!}
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th"></span>
                                </div>
                            </div>

                            @if ($errors->has('date_from'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('date_from') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            {!! Form::label('date_to', 'Date To:') !!}
                            <div class="input-group date" data-provide="datepicker" data-date-autoclose="true">
                                {!! Form::text('date_to', null, ['class'=>'form-control', 'autocomplete'=>'off']) !!}
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-th"></span>
                                </div>
                            </div>
                            @if ($errors->has('date_to'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('date_to') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="text-center">
                    <button class="btn btn-success" type="submit" value="excel" name="submit">Generate Report ( Excel
                        )
                    </button>
                    <button class="btn btn-danger" type="submit" value="pdf" name="submit">Generate Report ( PDF )
                    </button>
                </div>

            </div>

            {!! Form::close() !!}
        </div>
    </div>
@stop
@section('footer')
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(document).on('focus', '.select2', function (e) {
            if (e.originalEvent) {
                $(this).siblings('select').select2('open');
            }
        });
    </script>
    <script>
        Vue.directive('select2', {
            inserted: function (el) {
                var self = this;
                $(el).select2({
                    width: 'resolve'
                }).on('select2:select', function (e) {
                    if (e.detail === "vue-directive") {
                        return; // prevent stack overflow (i.e. listening to the event we threw ourselves)
                    }
                    // throw regular change (non jQuery) event, so vue reacts

                    (function () {
                        function CustomEvent(event, params) {
                            params = params || {bubbles: false, cancelable: false, detail: undefined};
                            var evt = document.createEvent('CustomEvent');
                            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
                            return evt;
                        };

                        CustomEvent.prototype = window.Event.prototype;
                        window.CustomEvent = CustomEvent;
                    })();

                    el.dispatchEvent(new CustomEvent("change", {
                        detail: "vue-directive"
                    }));
                    return false;
                })
            }
        });
        var app = new Vue({
            el: '#report',
            data: {
                report_type: '{{ old('report_type') }}'
            }
        })
    </script>
@stop