@extends('layouts.admin_main')

@section('title')
    @lang('admin_lang.users_management')
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap4.min.css') }}">
@endpush

@section('content')
    <div class="kt-portlet kt-portlet--mobile">
        @header(['title' => trans('admin_lang.users_management'), 'icon' => 'fa fa-users'])
            <div class="kt-portlet__head-label">
                <div class="mr-rem-1">
                    <a id="export_data" class="btn btn-outline-primary">{{trans('admin_lang.export_excel')}}</a>
                </div>
                <!--div class="mr-rem-1">
                    <a href="{{ route('admin.users.exportPdf') }}" class="btn btn-outline-primary">{{trans('admin_lang.export_pdf')}}</a>
                </div-->
                @button(['type' => 'create', 'label' => trans('admin_lang.create_new_user'), 'url' => route('admin.users.create')])@endbutton
            </div>
        @endheader

        <div class="kt-portlet__body">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Business Name:</label>
                        <input type="text" name="business_name" id="business_name" class="form-control filter" placeholder="Enter business name" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Sage ID:</label>
                        <input type="text" name="sage_id" id="sage_id" class="form-control filter" placeholder="Enter sage id" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Name:</label>
                        <input type="text" name="name" id="name" class="form-control filter" placeholder="Enter name" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>&nbsp;</label><br>
                        <button class="btn btn-primary btn-brand--icon" id="btn_search">
													<span>
														<i class="la la-search"></i>
														<span>Search</span>
													</span>
                        </button>
                        &nbsp;&nbsp;
                        <button class="btn btn-secondary btn-secondary--icon" id="btn_reset">
													<span>
														<i class="la la-close"></i>
														<span>Reset</span>
													</span>
                        </button>
                    </div>
                </div>
                <div class="col-lg-12">

                </div>
            </div>
            <hr>
            <div class="table-responsive">
                <table class="table table-striped table-bordered" id="users-table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>@lang('admin_lang.registered_business_name')</th>
                        <th>@lang('admin_lang.sage_id')</th>
                        <th>@lang('admin_lang.email')</th>
                        <th>@lang('admin_lang.name')</th>
                        <th>@lang('admin_lang.created_at')</th>
                        <th>@lang('admin_lang.status')</th>
                        <th>@lang('admin_lang.actions')</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script type="text/template" id="header-buttons">
    {{--@button(['type' => 'create', 'label' => trans('admin_lang.create_new_user'), 'url' => route('admin.users.create')])@endbutton--}}
</script>

<script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/dataTables.bootstrap4.min.js') }}"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        dataTable(jQuery('#users-table'), "{{ route('admin.users.data') }}", [
                { data: 'index', defaultContent: '', orderable: false, searchable: false },
                { data: 'registered_business_name', name: 'registered_business_name', searchable: true, orderable: true },
                { data: 'sage_customer_number', name: 'sage_customer_number', searchable: true, orderable: true },
                { data: 'email', name: 'email', searchable: true, orderable: true },
                { data: 'name', name: 'first_name', searchable: true, orderable: true },
                { data: 'created', name: 'created_at', searchable: false, orderable: true  },
                { data: 'status', name: 'status', searchable: false, orderable: true },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ],
            "{{ app()->getLocale() }}",
            {!! json_encode($filters) !!},
            jQuery('#header-buttons').html(),
            undefined,
            [[3, 'desc']],
            false
        );
    });

    $('#btn_search').click(function () {
        reloadDataTable(dTable);
    });
    $('#btn_reset').click(function () {
        $('#business_name').val('');
        $('#sage_id').val('');
        $('#name').val('');
        reloadDataTable(dTable);
    });
    $('#export_data').click(function () {
        var bname  = $('#business_name').val() || 0;
        var name   = $('#name').val() || 0;
        var sageid = $('#sage_id').val() || 0;
        var status = $('select[name="status"]').val() || 0;
        
        var url = '{{ route("admin.users.exportExcel", ["sageid"=>":sageid","bname"=>":bname","name"=>":name","status"=>":status"]) }}';
        url = url.replace(':sageid', sageid);
        url = url.replace(':bname', bname);
        url = url.replace(':name', name);
        url = url.replace(':status', status);
        location.href=url;
    });
</script>
@endsection