@extends('layouts.app')
@section('title') {{'Users List'}} @endsection
@section('content')

    <div class="col-md-12">


        <div class="panel panel-default">
            <div class="panel-heading">Users List
            </div>

            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            <div class="panel-body">
                <div class="form-group">
                    <form method="get"  action="">
                    <div class="col-md-3">
                        Search By Name
                       <select onchange="this.form.submit()" name="id" id="user_id" data-live-search="true" class="form-control selectpicker">
                            <option value=""> All </option>
                            @if(isset($users))
                                @foreach($users as $val)
                                    <option value="{{ $val->id}}" @if(isset($_GET['id']) && $_GET['id'] == $val->id) selected="selected" @endif>  {{ $val->name }} </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    </form>
                </div>
            <a class="pull-right btn btn-info" href="{{ route('register') }}" >Create New</a>
            <br> 
            <br>
            <div class="panel-body" id="myTablePrint">

                <div class="form-group mt-1" style="width:100%; overflow: scroll;" >
                    <table id="myTable" cellpadding="6" cellspacing="0" width="100%" class="table table-striped table-hover">
                        <thead class="header" id="myHeader">
                            <tr>
                                <th>#</th>
                                <th>Designation</th>
                                <th>Employee ID</th>
                                <th>Employee Name</th>
                                <th>Reporting Officer</th>
                                <th>Email</th>
                                <th>User Type</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $serial = 1; @endphp
                            @foreach($userTree as $user)
                                @include('components.user-row', ['user' => $user, 'serial' => &$serial])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            </div>
        </div>
    </div>
<style>
    table .header tr th {
        position: sticky;
        top: 0;
        /* width: 109%; */
        background: #D9E5D8;
        font-size: 16px !important;
        border: 1px solid!important;
    }

    table#myTable thead#myHeader{
        position: sticky;
        top: 0;
        /* width: 109%; */
        background: #D9E5D8;
        font-size: 16px !important;
    }
    div#myTablePrint table#myTable tbody tr td {
        font-size: 16px!important;
        border: 1px solid;
    }
    table.table.text-center.table-striped.table-hover.fixedHeader .header tr:last-child th{
        top: 32px;
    }
</style>


@endsection