@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">User Role</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">Manager ({{ 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 --}}
                                        <li class="nav-item" id="re"><a class="nav-link active" href="#regional-manager"
                                            data-source="{{ route('admin.users.list',[ 'type' => 5 ]) }}"
                                            data-table="regionalmanager-table" data-toggle="tab">Regional Manager ({{ count(getUsers(5)) }})</a></li>
                                        <li class="nav-item" id="sm" ><a class="nav-link" href="#sales-manager"
                                            data-source="{{ route('admin.users.list',[ 'type' => 6 ]) }}"
                                            data-table="salesmanager-table" data-toggle="tab">Sales Manager ({{ count(getUsers(6)) }})</a></li>
                                        <li class="nav-item" id="acc" ><a class="nav-link" href="#account-executive"
                                            data-source="{{ route('admin.users.list',[ 'type' => 7 ]) }}"
                                            data-table="accexcofficer-table" data-toggle="tab">Account Executive Officer ({{ count(getUsers(7)) }})</a></li>
                                        </ul>
                                    {{-- <h3 class="card-title">List of Users</h3> --}}
                                </div>
                                <div class="col-md-3 text-right" >
                                    <a id="usertype" href="{{ route('admin.regional-manager') }}" class="btn btn-primary">Add Regional Manager</label></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content">
                            @php $tables = [ 'regional-manager' => 'regionalmanager-table', 'sales-manager' => 'salesmanager-table', 'account-executive' => 'accexcofficer-table']; @endphp
                            {{-- @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 == 'regional-manager' ? '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 --}}

                                </div>
                                <div class="table-responsive">
                                    <table id="{{ $table }}" class="table table-bordered table-hover" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>Employee ID</th>
                                                <th>First Name</th>
                                                <th>Last Name</th>
                                                <th>Email</th>
                                                <th>Age</th>
                                                <th>Phone No</th>
                                                <th>BirthDate</th>
                                                <th>Address</th>
                                                <th>Joining Date</th>
                                                <th>Social Security Number</th>
                                                <th>Tax Indentification Number</th>
                                                <th>Manger ID</th>
                                                <th> Region </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");
            if(tableId == 'regionalmanager-table'){
                $("#usertype").attr("href","{{ route('admin.regional-manager') }}");
                $("#usertype").text("Add Regional Manager");
            }else if(tableId == 'salesmanager-table'){
                $("#usertype").attr("href","{{ route('admin.sales-manager') }}");
                $("#usertype").text("Add Sales Manager");
            }else if(tableId == 'accexcofficer-table'){
                $("#usertype").attr("href","{{ route('admin.account-executive') }}");
                $("#usertype").text("Add Account Executive Officer");
            }else{
                $("#usertype").attr("href","{{ route('admin.regional-manager') }}");
                $("#usertype").text("Add Regional Manager");
            }
            initiateTable(tableId, source);
        });

        var table;
        function initiateTable(tableId, source) {
            console.log("table " +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],
                                pageOrientation: 'landscape',
                            }
                        },
                        {
                            extend: 'excel',
                            title: 'User List',
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                            }

                        }
                        // {
                        //     extend: 'Add Regional Manager',
                        //     title: 'User List',
                        //     exportOptions: {
                        //         columns: [0, 1, 2, 3, 4, 5]
                        //     }

                        // }
                    ],
                    // columnDefs: [ {
                    //     targets: 12,//index of column starting from 0
                    //     data: "region_id", //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: 'employee_id', name: 'employee_id'},
                        {data: 'first_name', name: 'first_name'},
                        {data: 'last_name', name: 'last_name'},
                        {data: 'email', name: 'email'},
                        {data: 'birth_age', name: 'birth_age'},
                        {data: 'phone_no', name: 'phone_no'},
                        {data: 'birth_date', name: 'birth_date'},
                        {data: 'address', name: 'address'},
                        {data: 'joining_date', name:'joining_date'},
                        {data: 'social_security_number', name:'social_security_number'},
                        {data: 'tax_identification_number', name:'tax_identification_number'},
                        {data: 'parent_id', name:'parent_id'},
                        {data: 'regions', name:'regions'},
                        {
                            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()
                            });
                        }
                    },
                    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]
                            }
                        },
                        {
                            extend: 'excel',
                            title: 'User List',
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5]
                            }

                        }
                    ],
                    // columnDefs: [ {
                    //     targets: 12,//index of column starting from 0
                    //     data: "region_id", //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: 'employee_id', name: 'employee_id'},
                        {data: 'first_name', name: 'first_name'},
                        {data: 'last_name', name: 'last_name'},
                        {data: 'email', name: 'email'},
                        {data: 'birth_age', name: 'birth_age'},
                        {data: 'phone_no', name: 'phone_no'},
                        {data: 'birth_date', name: 'birth_date'},
                        {data: 'address', name: 'address'},
                        {data: 'joining_date', name:'joining_date'},
                        {data: 'social_security_number', name:'social_security_number'},
                        {data: 'tax_identification_number', name:'tax_identification_number'},
                        {data: 'parent_id', name:'parent_id'},
                        {data: 'region.name', name:'region.name'},
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                });
            }

            var tables = ['regionalmanager-table','salesmanager-table','accexcofficer-table'];
            // 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("regionalmanager-table", "{{ route('admin.users.list',[ 'type' => 5 ]) }}");

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

    </script>
@endsection