@extends('layout._default')

@section('body-con')
   
@section('title')
    Users
@endsection 
    {{-- @section('breadcrumbs')
        {{ Breadcrumbs::render('user-management.users.index') }}
    @endsection --}}

    <div class="card">
        <ul class="nav nav-pills nav-fill p-3">
            <li class="nav-item p-2"><a href="javascript:void(0)" onclick="changetab('influencer', this)" class="a-item nav-link active">Influencers<a></li>
            <li class="nav-item p-2"><a href="javascript:void(0)" onclick="changetab('brand', this)" class="a-item nav-link">Brands<a></li>
            <li class="nav-item p-2"><a href="javascript:void(0)" onclick="changetab('house', this)" class="a-item nav-link">Houses<a></li>
            <li class="nav-item p-2"><a href="javascript:void(0)" onclick="changetab('concierge', this)" class="a-item nav-link">Concierge<a></li>
            <li class="nav-item p-2"><a href="javascript:void(0)" onclick="changetab('collaborations', this)" class="a-item nav-link">Collaborations<a></li>
        </ul>
    </div>
    <input type="hidden" name="type_input" id="type_input" value="influencer">
    <div class="card">
        <div class="card-body py-4">
            <!--begin::Table-->
            <div class="table-responsive">
                {{-- {{ $dataTable->table() }} --}}
                <table class="table table-bordered data-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Role</th>
                            <th>Collaborations</th>
                            <th>Joined Date</th>
                            <th width="100px" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <!--end::Table-->
        </div>
    </div>
@endsection

@push('scripts')
    {{-- {{ $dataTable->scripts() }} --}}
    {{-- <script>
        var recordType = 'influencer';
        document.getElementById('mySearchInput').addEventListener('keyup', function () {
            window.LaravelDataTables['site-users-table-'+recordType].search(this.value).draw();
        });


    </script> --}}
    <script>
        var recordType = 'influencer';
        // $(function () {

            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                // ajax: "{{ route('site.users') }}/"+recordType,
                // data: function (d) {
                //     d.type = $('#type_input').val()
                // },
                ajax: {
                    url: "{{ route('site.users') }}",
                    data: function (d) {
                        d.type = $('#type_input').val()
                    }
                },
                columns: [{
                        data: 'user',
                        name: 'user',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'role',
                        name: 'role',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'collaborations',
                        name: 'collaborations',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            function changetab(type, el)
            {
                recordType = type;

                $(".a-item").removeClass('active');
                $(el).addClass('active');
                $('#type_input').val(type)
                table.draw();
                // $.ajax({
                //     type: "GET",
                //     url: "/admin/site/users/"+type,
                //     success: function(response) {
                        
                //     },
                //     error: function(err) {

                //     }
                // })

            }

        // });

       

           
    </script>
@endpush