@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-xl-6">
        <div class="card">
            <div class="card-body">

                <h4 class="header-title">외부접속IP 리스트</h4>

                <div class="tab-content">
                    <div class="tab-pane show active" id="striped-rows-preview">
                        <div class="table-responsive-sm">
                            <table class="table table-striped table-centered mb-0">
                                <thead>
                                    <tr>
                                        <th>User</th>
                                        <th>Account No.</th>
                                        <th>Balance</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="table-user">
                                            <img src="/template/images/users/avatar-2.jpg" alt="table-user" class="me-2 rounded-circle">
                                            Risa D. Pearson
                                        </td>
                                        <td>AC336 508 2157</td>
                                        <td>July 24, 1950</td>
                                        <td class="table-action">
                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="table-user">
                                            <img src="/template/images/users/avatar-3.jpg" alt="table-user" class="me-2 rounded-circle">
                                            Ann C. Thompson
                                        </td>
                                        <td>SB646 473 2057</td>
                                        <td>January 25, 1959</td>
                                        <td class="table-action">
                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="table-user">
                                            <img src="/template/images/users/avatar-4.jpg" alt="table-user" class="me-2 rounded-circle">
                                            Paul J. Friend
                                        </td>
                                        <td>DL281 308 0793</td>
                                        <td>September 1, 1939</td>
                                        <td class="table-action">
                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="table-user">
                                            <img src="/template/images/users/avatar-5.jpg" alt="table-user" class="me-2 rounded-circle">
                                            Sean C. Nguyen
                                        </td>
                                        <td>CA269 714 6825</td>
                                        <td>February 5, 1994</td>
                                        <td class="table-action">
                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div> <!-- end table-responsive-->                     
                    </div> <!-- end preview-->
                
                </div> <!-- end tab-content-->

            </div> <!-- end card body-->
        </div> <!-- end card -->
    </div><!-- end col-->

    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">

                <h4 class="header-title">IP등록</h4>
               
                <div class="tab-content">
                    <div class="tab-pane show active" id="table-head-preview">
                        <div class="table-responsive-sm">
                            <table class="table table-centered mb-0">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Product</th>
                                        <th>Courier</th>
                                        <th>Process</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>ASOS Ridley High Waist</td>
                                        <td>FedEx</td>
                                        <td>
                                            <div class="progress progress-sm">
                                                <div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </td>
                                        <td><i class="mdi mdi-circle text-success"></i> Delivered</td>
                                    </tr>
                                    <tr>
                                        <td>Marco Lightweight Shirt</td>
                                        <td>DHL</td>
                                        <td>
                                            <div class="progress progress-sm">
                                                <div class="progress-bar progress-lg bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </td>
                                        <td><i class="mdi mdi-circle text-warning"></i> Shipped</td>
                                    </tr>
                                    <tr>
                                        <td>Half Sleeve Shirt</td>
                                        <td>Bright</td>
                                        <td>
                                            <div class="progress progress-sm">
                                                <div class="progress-bar progress-lg bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </td>
                                        <td><i class="mdi mdi-circle text-info"></i> Order Received</td>
                                    </tr>
                                    <tr>
                                        <td>Lightweight Jacket</td>
                                        <td>FedEx</td>
                                        <td>
                                            <div class="progress progress-sm">
                                                <div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </td>
                                        <td><i class="mdi mdi-circle text-success"></i> Delivered</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div> <!-- end table-responsive-->                     
                    </div> <!-- end preview-->
                
                </div> <!-- end tab-content-->

            </div> <!-- end card body-->
        </div> <!-- end card -->
    </div><!-- end col-->
</div>
        
    </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