@extends('panel.layouts.app')

@section('content')
    <!-- Content -->
    <div class="content-area p-y-1">
        <div class="container-fluid">
            <h1 class="h-underline h-underline-50 h-underline-info">All Users </h1>
            <ol class="breadcrumb no-bg m-b-1">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                <li class="breadcrumb-item">Users</li>
                <li class="breadcrumb-item active">All Users</li>
            </ol>

            <div class="box box-block bg-white">

                <div id="table-2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap4">
                    <table class="table table-striped table-bordered dataTable" id="table-2" role="grid"
                           aria-describedby="table-2_info">
                        <thead>
                            <tr role="row">
                                <th class="sorting_asc" tabindex="0" aria-controls="table-2" rowspan="1" colspan="1"
                                    aria-sort="ascending" aria-label="DO No#: activate to sort column descending"
                                    style="width: 100px;">#
                                </th>
                                <th class="sorting" tabindex="0" aria-controls="table-2" rowspan="1" colspan="1"
                                    aria-label="Email: activate to sort column ascending" style="width: 150px;">Name
                                </th>
                                <th class="sorting" tabindex="0" aria-controls="table-2" rowspan="1" colspan="1"
                                    aria-label="Company Name: activate to sort column ascending" style="width: 150px;">Company Name
                                </th>
                                <th class="sorting" tabindex="0" aria-controls="table-2" rowspan="1" colspan="1"
                                    aria-label="State: activate to sort column ascending" style="width: 150px;">State
                                </th>
                                <th class="sorting" tabindex="0" aria-controls="table-2" rowspan="1" colspan="1"
                                    aria-label="Country: activate to sort column ascending" style="width: 150px;">Country
                                </th>
                                <th class="sorting" tabindex="0" aria-controls="table-2" rowspan="1" colspan="1"
                                    aria-label="Details: activate to sort column ascending" style="width: 100px;">Details
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($users as $user)
                                <tr role="row" class="odd">
                                    <td class="sorting_1">{{ $user->id }}</td>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ $user->companyType?->title }}</td>
                                    <td>{{ $user->state }}</td>
                                    <td>{{ $user->country?->name }}</td>
                                    <td>
                                        <a type="button" href="/users/detail/{{$user->id}}"
                                                class="btn btn-success btn-rounded btn-sm waves-effect waves-light">Details
                                    </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th rowspan="1" colspan="1">#</th>
                                <th rowspan="1" colspan="1">Name</th>
                                <th rowspan="1" colspan="1">Details</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>


        </div>
    </div>
    </div>
    </div>
    <!-- End main -->
    </div>
    </div>
    <!-- Footer -->
    <footer class="footer">
        <div class="container-fluid">
            2016 © Dream Digitizing
        </div>
    </footer>
@endsection