@extends('layouts.app')
    @section('content')
        <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">
        <div class="container">
            <div>
                <div class="row margin-top-10">
                    <div class="col-md-10 push-top">
                        <table class="table table-striped tableStyle no-bottom dataTables dt-responsive"
                            style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th>
                                        #
                                    </th>
                                    <th>
                                        Username
                                    </th>
                                    <th>
                                        Name
                                    </th>
                                    <th>
                                        Email
                                    </th>
                                    <th>
                                        Status
                                    </th>
                                    <th>
                                        Credit Used
                                    </th>
                                    <th class="no_sort">
                                        Options
                                    </th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                    <div class="col-md-2">
                        <h3 class="filter-header">Filter</h3>
                        <form name="search" action="{{ URL::route('ajax.get.employees') }}" method="POST"
                            autocomplete="off">
                            {{ csrf_field() }}
                            <strong> Status </strong>
                            <p>
                                <select name="status" class="form-control">
                                    <option value="None" id="statusDropdown" name="statusDropdown"
                                        >Any Status</option>
                                    <option value="Approved" id="active" name="active"
                                        >Approved</option>
                                    <option value="Inactive" id="inactive" name="inactive"
                                        >Inactive</option>
                                    <option value="Blocked" id="blocked" name="blocked"
                                        >Blocked</option>
                                </select>
                            </p>
                            <button type="submit" class="btn knowmad_btn_blue knowmad_btn width_fitContent">Search</button>

                        </form>
                        <form name="export" action="{{ URL::route('admin.company.export') }}" method="POST"
                            autocomplete="off">
                            {{ csrf_field() }}
                            <button type="submit"
                                class="margin-top-10 btn knowmad_btn_blue knowmad_btn width_fitContent">Export All</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5 col-md-off-set-2">

                    </div>
                </div>

                <div class="push-top">
                    <h4 class="filter-header">Invite Employee</h4>
                    <div>
                        <div>
                            <form action="{{ URL::route('admin.email.employee', [$company_id]) }}" method="POST"
                                name="client" class="validate" autocomplete="off">
                                {{ csrf_field() }}
                                <input type="text" id="email" name="email"
                                    class="form-control editor-profile required email" maxlength="200" value=""
                                    placeholder="Employee Email">
                                <br>
                                <button type="submit" class="btn knowmad_btn_blue knowmad_btn">Send</button>

                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!--container-->
    @endsection
    @push('footer_js')
        <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap.min.js"></script>
        <script>
            $(function() {
                var oTable = $('.dataTables').DataTable({
                    processing: true,
                    serverSide: true,
                    "bDestroy": true,
                    responsive: true,

                    ajax: {
                        url: '{!! route('ajax.get.employees') !!}',
                        data: function(d) {
                            d.status = $('select[name=status]').val();
                            d.company_id = {{ $c_id }};
                        }
                    },
                    columns: [{
                            data: 'employee_id',
                            name: 'id'
                        },
                        {
                            data: 'username',
                            name: 'username'
                        },
                        {
                            data: 'full_name',
                            name: 'full_name'
                        },
                        {
                            data: 'email',
                            name: 'email'
                        },
                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'credit_used',
                            render: $.fn.dataTable.render.number(',', '.', 2),
                            name: 'credit_used'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ]

                });

                $('form[name="search"]').on('submit', function(e) {
                    oTable.draw();
                    e.preventDefault();
                });

                $('.delete-btn').on('click', function(e) {
                    e.preventDefault();
                    confirm('Are you sure you want to delete?');
                })
            });
        </script>
    @endpush