@extends('adminlte::page')

@section('title', 'Regional Manager')

@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('manager.regional_manager.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="sm" ><a class="nav-link active" href="#sales-manager"
                                            data-source="{{ route('manager.regional_manager.list',[ 'type' => 6 ]) }}"
                                            data-table="salesmanager-table" data-toggle="tab">Sales Manager</a></li>
                                        <li class="nav-item" id="acc" ><a class="nav-link" href="#account-executive"
                                            data-source="{{ route('manager.regional_manager.list',[ 'type' => 7 ]) }}"
                                            data-table="accexcofficer-table" data-toggle="tab">Account Executive Officer</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-3 text-right" >
                                    <a id="usertype" href="{{ route('manager.regional_manager.sales_manager') }}" class="btn btn-primary">Add Sales Manager</label></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            @php $tables = [ 'sales-manager' => 'salesmanager-table', 'account-executive' => 'accexcofficer-table']; @endphp

                            @foreach ($tables as $id => $table)
                            <div class="tab-pane @php echo $id == 'sales-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>
                            @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 == 'salesmanager-table') {
                $("#usertype").attr("href","{{ route('manager.regional_manager.sales_manager') }}");
                $("#usertype").text("Add Sales Manager");
            } else if (tableId == 'accexcofficer-table') {
                $("#usertype").attr("href","{{ route('manager.regional_manager.account_executive') }}");
                $("#usertype").text("Add Account Executive Officer");
            } else {
                $("#usertype").attr("href","{{ route('manager.regional_manager.sales_manager') }}");
                $("#usertype").text("Add Sales Manager");
            }
            initiateTable(tableId, source);
        });

        var table;
        function initiateTable(tableId, source) {
            console.log("table " +tableId + " " + source )
            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]
                        }

                    }
                ],

                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
                    },
                ],
            });

            var tables = ['salesmanager-table','accexcofficer-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("salesmanager-table", "{{ route('manager.regional_manager.list',[ 'type' => 6 ]) }}");

    </script>
@endsection