@extends('admin.layouts.master')

@section('page_title')
    Admin Users
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ elixir('css/datatables.css') }}">
@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><i>Registered Companies</i></h3>
                            <a href="{{route('admin.root.company.create')}}" class="btn btn-primary {{in_array(session()->get('access'),[1,2]) ? '' : ''}}" style="color: white !important;">
                                <i class="fa fa-plus-circle"></i> Add
                            </a>
                        </div>
                    </div>

                    <div class="panel-heading 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="status"></label>
                                <select id="status" class="form-control">
                                    <option value="">--Select One--</option>
                                    <option value="3">PENDING</option>
                                    <option value="1">APPROVED</option>
                                    <option value="2">REJECTED</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>
                        <br />
                    </div>
                    <div class="panel-body">
                        @include('errors.form_validation_errors')
                        
                            <div style="overflow-x: scroll;">
                                {!! $dataTable->table([],true) !!}
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

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

            })

            const table = $('#dataTableBuilder');
            table.removeAttr("style").css({'width': '120%', 'max-width': ''});

        });

    </script>
@endpush