@extends('common.layout')

@section('content')

 <!-- Start Content-->
 <div class="container-fluid">
        
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">관리자</a></li>
                            <!-- <li class="breadcrumb-item"><a href="javascript: void(0);"></a></li> -->
                            <li class="breadcrumb-item active">관리자목록</li>
                        </ol>
                    </div>
                    <h4 class="page-title">관리자 목록</h4>
                </div>
            </div>
        </div>     
        <!-- end page title --> 

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <a href="{{ route('manager.create') }}" class="btn btn-danger mb-2"><i class="mdi mdi-plus-circle me-2"></i> 관리자 등록 </a>
                            </div>
                            <div class="col-sm-8">
                                <div class="text-sm-end">
                                    <button type="button" class="btn btn-success mb-2 me-1"><i class="mdi mdi-cog"></i></button>
                                    <button type="button" class="btn btn-light mb-2 me-1">Import</button>
                                    <button type="button" class="btn btn-light mb-2">Export</button>
                                </div>
                            </div><!-- end col-->
                        </div>

                        <div class="table-responsive">
                            <table class="table table-centered table-striped dt-responsive nowrap w-100" id="products-datatable">
                                <thead>
                                    <tr>
                                        <th style="width: 20px;">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="customCheck1">
                                                <label class="form-check-label" for="customCheck1">&nbsp;</label>
                                            </div>
                                        </th>
                                        <th>아이디</th>
                                        <th>이름</th>
                                        <th>휴대폰</th>
                                        <th>이메일</th>
                                        <th>가입일</th>
                                        <th>인증</th>
                                        <th style="width: 75px;">관리</th>
                                    </tr>
                                </thead>
                                <tbody id="manage_data">
                                @foreach ($list as $val)
                                    <tr>
                                        <td>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="customCheck2">
                                                <label class="form-check-label" for="customCheck2">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="table-user">
                                            <img src="/template/images/users/avatar-4.jpg" alt="table-user" class="me-2 rounded-circle">
                                            <a href="javascript:void(0);" class="text-body fw-semibold">{{ $val->id }}</a>
                                        </td>
                                        <td>{{ $val->name }}</td>
                                        <td>{{ $val->phone }}</td>
                                        <td>{{ $val->email }}</td>
                                        <td>{{ $val->create_at }}</td>
                                        <td><span class="badge badge-success-lighten">Active</span></td>
                                        <td>
                                            <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-square-edit-outline"></i></a>
                                            <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                        </td>
                                    </tr>
                                @endforeach    
                                    <!-- <tr>
                                        <td>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="customCheck3">
                                                <label class="form-check-label" for="customCheck3">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="table-user">
                                            <img src="/template/images/users/avatar-3.jpg" alt="table-user" class="me-2 rounded-circle">
                                            <a href="javascript:void(0);" class="text-body fw-semibold">Bryan J. Luellen</a>
                                        </td>
                                        <td>215-302-3376</td>
                                        <td>bryuellen@dayrep.com</td>
                                        <td>New York</td>
                                        <td>09/12/2018</td>
                                        <td><span class="badge badge-success-lighten">Active</span></td>
                                        <td>
                                            <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-square-edit-outline"></i></a>
                                            <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="customCheck4">
                                                <label class="form-check-label" for="customCheck4">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="table-user">
                                            <img src="/template/images/users/avatar-3.jpg" alt="table-user" class="me-2 rounded-circle">
                                            <a href="javascript:void(0);" class="text-body fw-semibold">Kathryn S. Collier</a>
                                        </td>
                                        <td>828-216-2190</td>
                                        <td>collier@jourrapide.com</td>
                                        <td>Canada</td>
                                        <td>06/30/2018</td>
                                        <td><span class="badge badge-danger-lighten">Blocked</span></td>
    
                                        <td>
                                            <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-square-edit-outline"></i></a>
                                            <a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                        </td>
                                    </tr>
                                     -->

                                </tbody>
                            </table>
                        </div>
                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col -->
        </div>
        <!-- end row -->
        
    </div> <!-- container -->

</div> <!-- content -->
@endsection

<!-- 각페이지별 필요한 스크립트 선언 -->
@section('script')

<!-- third party js -->
<script src="/template/js/vendor/jquery.dataTables.min.js"></script>
<script src="/template/js/vendor/dataTables.bootstrap4.js"></script>
<script src="/template/js/vendor/dataTables.responsive.min.js"></script>
<script src="/template/js/vendor/responsive.bootstrap4.min.js"></script>
<script src="/template/js/vendor/dataTables.checkboxes.min.js"></script>
<!-- third party js ends -->

<!-- demo app -->
<script src="/template/js/pages/demo.customers.js"></script>
<!-- end demo js-->

@endsection