@extends('adminlte::page')

@section('title', 'Users')

@section('content')
<style>


    .dataTables_length{
        display: inline-flex;
        width:55%;
    }

    .dataTables_filter{
        display: inline-flex;
        width:25%;
    }
    .dt-buttons {
        display: inline-flex;
        width:20%;
    }
</style>
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Users</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Users</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header px-1">
                        <div class="col-md-12">
                            <div class="row align-items-center">
                                <div class="col-md-9">
                                    <ul class="nav nav-pills">
                                        <li class="nav-item"><a class="nav-link active" href="#user"
                                                data-source="{{ route('admin.users.list',[ 'type' => 0 ]) }}" data-table="user-table"
                                                data-toggle="tab">User ({{ count(getUsers(0)) }})</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#vendor"
                                                data-source="{{ route('admin.users.list',[ 'type' => 1 ]) }}" data-table="vendor-table"
                                                data-toggle="tab">Merchant / Company ({{ count(getUsers(1)) }})</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#manager"
                                                data-source="{{ route('admin.users.list',[ 'type' => 2 ]) }}" data-table="manager-table"
                                                data-toggle="tab">Backend Users ({{ count(getUsers(2)) }})</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#admin"
                                                data-source="{{ route('admin.users.list',[ 'type' => 3 ]) }}"
                                                data-table="admin-table" data-toggle="tab">Admin ({{ count(getUsers(3)) }})</a></li>
                                        @if (Auth::user()->type == 4)
                                        <li class="nav-item"><a class="nav-link" href="#superadmin"
                                            data-source="{{ route('admin.users.list',[ 'type' => 4 ]) }}"
                                            data-table="superadmin-table" data-toggle="tab">Super Admin ({{ count(getUsers(4)) }})</a></li>
                                        @endif
                                        </ul>
                                    {{-- <h3 class="card-title">List of Users</h3> --}}
                                </div>
                                <div class="col-md-3 text-right">
                                    <a href="{{ route('admin.users.create') }}" class="btn btn-primary">Add Admin/User</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content">
                            @php $tables = ['user'=>'user-table', 'vendor' => 'vendor-table', 'manager' => 'manager-table',
                            'admin' => 'admin-table', 'superadmin' => 'superadmin-table']; @endphp
                            @foreach ($tables as $id => $table)
                            <!-- tab-pane -->
                            <div class="tab-pane @php echo $id == 'user' ? 'active' : '' @endphp" id="{{ $id }}">
                                <div class="row p-0">
                                    @if($id == 'vendor')
                                        <select id="category" class="form-control offset-4 col-md-4 mb-2">
                                            <option value="">Filter By Category</option>
                                            @foreach($categories as $category)
                                                <option value="{{$category->id}}"> {{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    @endif

                                    @if($id == 'vendor' || $id == 'user')
                                        <div class="{{  $id == 'user' ? 'col-md-12 mb-2 ' : 'col-md-4' }} pl-2">
                                            <select id="{{  $id == 'user' ? 'region_user' : 'region_vendor' }}" class="form-control w-100">
                                                <option value="">Filter By Regions</option>
                                                @foreach($regions as $region)
                                                    @if($region->id != 1)
                                                        <option value="{{$region->id}}"> {{ $region->name }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    @if($id == 'vendor')
                                        <select id="listingType" class="form-control offset-4 col-md-4 mb-2">
                                            <option value="">Filter By Listing Type</option>
                                            <option value="0">All</option>
                                            <option value="1">Free</option>
                                            <option value="2">Paid</option>
                                        </select>
                                    @endif

                                </div>
                                <div class="table-responsive">
                                    <table id="{{ $table }}" class="table table-bordered table-hover" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>First Name</th>
                                                <th>Last Name</th>
                                                <th>Email</th>
                                                <th>Age</th>
                                                <th>Gender</th>
                                                <th>Phone No</th>
                                                @if($id == 'vendor')
                                                    <th> Company Name </th>
                                                @endif
                                                <th> Region </th>
                                                <th>Date Of Registration</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <!-- /.tab-pane -->
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')

    <script>

        $(".content .nav-item").click(function() {
            var source = $(this).children().data("source");
            tableId = $(this).children().data("table");
            initiateTable(tableId, source);
        });

        var table;
        function initiateTable(tableId, source) {
            if(tableId != 'vendor-table') {
                DTable = table = $("#" + tableId).DataTable({
                    ajax: {
                        url : source,
                        data: function (d) {
                            return $.extend( {}, d, tableId == 'user-table' ? {
                                "region" : $("#region_user").val()
                            }: '');
                        }
                    },
                    dom :"lfBtipr",
                    processing: true,
                    serverSide: true,
                    bDestroy: true,
                    buttons: [
                        {
                            extend: 'pdf',
                            title: 'User List',
                            customize : function(doc){
                                // doc.content[1].table.widths = '16.66%',
                                doc.styles.tableBodyEven.alignment = 'center',
                                doc.styles.tableBodyOdd.alignment = 'center'
                            },
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5, 6, 7],
                                pageOrientation: 'landscape',
                            }
                        },
                        {
                            extend: 'excel',
                            title: 'User List',
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5, 6, 7]
                            }

                        }
                    ],
                    columnDefs: [ {
                        targets: 6,//index of column starting from 0
                        data: "region_name", //this name should exist in your JSON response
                        render: function ( data, type, full, meta ) {
                            if(data != null) {
                                return '<span class="label label-danger">'+data.name+'</span>';
                            }
                            return '';
                        }
                    }],
                    columns: [
                        {data: 'first_name', name: 'first_name'},
                        {data: 'last_name', name: 'last_name'},
                        {data: 'email', name: 'email'},
                        {data: 'birth_age', name: 'birth_age'},
                        {data: 'gender_in_words', name:'gender_in_words'},
                        {data: 'phone_no', name:'phone_no'},
                        {data: 'region', name:'region_name'},
                        {data: 'date_of_registration', name:'date_of_registration'},
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                });
            }
            else {
                DTable = table = $("#" + tableId).DataTable({
                    ajax: {
                        url : source,
                        data: function (d) {
                            return $.extend( {}, d, {
                                "category" : $("#category").val(),
                                "region" : $("#region_vendor").val(),
                                "listingType" : $("#listingType").val(),
                            });
                        }
                    },
                    dom :"lfBtipr",
                    processing: true,
                    serverSide: true,
                    bDestroy: true,
                    buttons: [
                        {
                            extend: 'pdfHtml5',
                            title: 'Merchants List',
                            pageOrientation: 'landscape',
                            pageSize: 'A3',
                            customize : function(doc){
                                // doc.content[1].table.widths = '16.66%',
                                doc.styles.tableBodyEven.alignment = 'center',
                                doc.styles.tableBodyOdd.alignment = 'center'
                                doc.styles['td:nth-child(7)'] = { 
                                width: '200px',
                                'max-width': '100px'
                                }
                            },
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
                                
                            },
                        },
                        {
                            extend: 'excel',
                            title: 'User List',
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
                            }

                        }
                    ],
                    columnDefs: [ {
                        targets: 7,//index of column starting from 0
                        data: "region_name", //this name should exist in your JSON response
                        render: function ( data, type, full, meta ) {
                            if(data != null) {
                                return '<span class="label label-danger">'+data.name+'</span>';
                            }
                            return '';
                        }
                    } ],
                    columns: [
                        {data: 'first_name', name: 'first_name'},
                        {data: 'last_name', name: 'last_name'},
                        {data: 'email', name: 'email'},
                        {data: 'birth_age', name: 'birth_age'},
                        {data: 'gender_in_words', name:'gender_in_words'},
                        {data:'phone_no', name:'phone_no'},
                        {data:'company_name', name:'company_name'},
                        {data:'region', name:'region_name'},
                        {data: 'date_of_registration', name:'date_of_registration'},
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                });
            }

            var tables = ['user-table','vendor-table','manager-table','admin-table','superadmin-table'];
            $.each(tables,function(index,tbl){
                if (!$('#'+tbl+' tbody td.details-control').length) {
                    $('#'+tbl+' tbody').on('click', 'td.details-control', function () {
                        var tr = $(this).closest('tr');
                        var row = table.row( tr );
                        if ( row.child.isShown() ) {
                            // This row is already open - close it
                            row.child.hide();
                            tr.removeClass('shown');
                        }
                        else {
                            // Open this row
                            row.child( template(row.data()) ).show();
                            tr.addClass('shown');
                        }
                    });
                }
            })
        }

        initiateTable("user-table", "{{ route('admin.users.list',[ 'type' => 0 ]) }}");

        $(document).on("change", "#category,#region_vendor,#region_user,#listingType", function() {
            table.draw();
        });

    </script>
@endsection