@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" 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>
                                </div>
                                <div class="col-md-3 text-right" >
                                    <!-- <a id="usertype" href="{{ route('admin.regional-manager') }}" class="btn btn-primary">Add Resource 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
                            @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">
                                </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]
                                }

                            }
                        ],
                        createdRow: function( row, data, dataIndex ) {
                            $(row).attr( 'data-id', data['id'] );
                            $(row).css('cursor','pointer');
                            $(row).find("td").each(function() {
                                $(this).addClass('details-control')
                            });
                        },
                        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]
                                }

                            }
                        ],
                        
                        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'];
                // alert(tables);
                $.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 {
                                let id = tr.attr("data-id");
                                let url = "{{ route('admin.employee-comission.ajax.users', ':id' )}}"
                                url = url.replace(':id', id);
                                let Html = ` <table id="analytics-sub-${id}" class="table table-bordered table-hover" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>Listing Title</th>
                                            <th>Amount</th>
                                            <th>User Name</th>
                                            <th>Employee ID</th>
                                            <th>Employee Name</th>
                                            <th>Commission(%)</th>
                                            <th>Total Comission Amount</th>
                                            <th>Created At</th>
                                        </tr>
                                    </thead>
                                </table>`;

                                row.child($(Html)).show();
                                table2 =  $('#analytics-sub-'+id+'').DataTable({
                                        processing: true,
                                        serverSide: true,
                                        bDestroy: true,
                                        ajax: {
                                            url : url,
                                            type: 'POST',
                                            data : function(d) {
                                                return $.extend( {}, d, {
                                                    "_token": '{{ csrf_token() }}'
                                                });
                                            }
                                        },
                                        columns: [
                                            {data: 'listing_url', name: 'listing_url'},
                                            {data: 'amount', name: 'amount'},
                                            {data: 'username', name: 'username'},
                                            {data: 'emp_id', name: 'emp_id'},
                                            {data: 'emp_name', name: 'emp_name'},
                                            {data: 'commission_per_man'},
                                            {data: 'comission', name: 'comission'},
                                            {data: 'created_at', name: 'created_at'},

                                        ]

                                });
                            }
                        });
                    }
                })
            }

            initiateTable("regionalmanager-table", "{{ route('admin.users.list',[ 'type' => 5 ]) }}");
        
    </script>
@endsection