@extends('admin.layouts.master')
@push('styles')
    <link rel="stylesheet" href="{{ elixir('css/datatables.css') }}">
@endpush

@push('title')
    Specific Report
@endpush

    @section('page_content')
        <div class="page-content container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel" id="exampleWizardForm">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <h3>Specific Report</h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="text-center">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="type"></label>
                                    <select id="type" class="form-control">
                                        <option value="">--Select One--</option>
                                        <option value="reseller">Resellers</option>
                                        <option value="user">Clients</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="companies"></label>
                                    <select id="companies" class="form-control">
                                        <option value="">--Select One--</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="from_date"></label>
                                    <input name="from_date" id="from_date" placeholder="FROM" class="form-control" data-date-autoclose="true" data-date-format="dd-M-yyyy" data-provide="datepicker-inline"/>
                                    <label for="to_date"></label>
                                    <input name="to_date" id="to_date"  placeholder="TO" class="form-control" data-date-autoclose="true" data-date-format="dd-M-yyyy" data-provide="datepicker-inline"/>
                                </div>
                                &nbsp; &nbsp;
                                <button class="btn btn-primary" id="submit" name="submit"  type="submit">Submit</button>

                            </form>
                            </div>

                            <br>
                            <br>
                            <br>

                            {!! $dataTable->table() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @stop


@push('scripts')
    <script src="{{ elixir('js/datatables.js') }}"></script>
    <script src="{{asset('vendor/datatables/buttons.server-side.js')}}"></script>
    {!! $dataTable->scripts() !!}
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <script>
        $( document ).ready(function() {
            $('#dataTableBuilder')
                .on('preXhr.dt', function ( e, settings, data ) {
                    data.status = $('#status').val();
                    data.type = $('#companies').val();
                    data.from_date= $('#from_date').val();
                    data.to_date= $('#to_date').val();
                });

            $('#submit').click(function (e) {
                e.preventDefault();
                $('#dataTableBuilder').DataTable().ajax.reload();
            });


            $('#type').on('change', function (t) {
                t.preventDefault();
                let route = '{{route('admin.get_admin_users')}}';
                let value = $(this).val();
                value = {'type':value};
                $.get(route,value,function (data) {
                    $.each(data,function (i) {
                        $('#companies').append('<option value="'+data[i].id+'">'+data[i].username+'</option>')
                    })
                })
            });
        });



    </script>
@endpush