@extends('admin.layouts.master')
@section('content')
    <style>
        .main_container {
            margin-top: 70px !important;
            padding: 40px 10px;
            background-color: #fff;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            border-radius: 8px;
        }

        .input_fields {
            display: block;
            width: 100%;
            height: calc(1.5em + 0.75rem + 2px);
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
        }

        .input_fields:focus {
            background-color: #fefeff;
            border-color: #95a0f4;
            outline: none;
        }

        @media (max-width: 567px) {
            .update_btn {
                width: 100% !important;
            }
        }

        .fa-trash,
        .fa-edit {
            font-size: 24px;
        }

        .fa-trash,
        .fa-edit:hover {
            cursor: pointer;
        }

        .fa-edit {
            margin-left: 15px;
        }

        .new_td {
            /* border: 1px solid red; */
            width: 30%;
            margin: 0 auto !important;
            display: block;
        }

        .icon_td {
            width: 20%;
        }

    </style>






    <div class="main-content">
        <section class="section">

            <div class="section-body">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>Pending Approval</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped w-100" id="table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">
                                                    S.no
                                                </th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Phone Number</th>
                                                <th>Check in</th>
                                                <th>Check out</th>
                                                <th>Status</th>
                                                <th class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    1
                                                </td>
                                                <td>Hasnain</td>
                                                <td class="align-middle">
                                                        <span>hasnain@gmail.com</span>
                                                </td>
                                                <td>
                                                    {{-- <img alt="image" src="assets/img/users/user-5.png" width="35"> --}}
                                                    <span>0317 123 123</span>
                                                </td>
                                                <td>2018-01-20</td>
                                                <td>2018-01-20</td>
                                                <td>
                                                      <select>
                                                        <option value="">Activate</option>
                                                        <option value="">Deactivate</option>
                                                      </select>
                                                </td>
                                                  <td class="icon_td">
                                                    <div class="new_td">
                                                        <i class="fa fa-trash"></i>
                                                        {{-- <i class="fa fa-edit"></i> --}}
                                                    </div>
                                                </td>
                                            </tr>
                                            

                                            <tr>
                                              <td>
                                                  2
                                              </td>
                                              <td>Abdullah</td>
                                              <td class="align-middle">
                                                      <span>hasnain@gmail.com</span>
                                              </td>
                                              <td>
                                                  {{-- <img alt="image" src="assets/img/users/user-5.png" width="35"> --}}
                                                  <span>0317 123 123</span>
                                              </td>
                                              <td>2018-01-20</td>
                                              <td>2018-01-20</td>
                                              <td>
                                                    <select>
                                                      <option value="">Activate</option>
                                                      <option value="">Deactivate</option>
                                                    </select>
                                              </td>
                                                <td class="icon_td">
                                                  <div class="new_td">
                                                      <i class="fa fa-trash"></i>
                                                      {{-- <i class="fa fa-edit"></i> --}}
                                                  </div>
                                              </td>
                                          </tr>



                                          <tr>
                                            <td>
                                                3
                                            </td>
                                            <td>Waheed</td>
                                            <td class="align-middle">
                                                    <span>hasnain@gmail.com</span>
                                            </td>
                                            <td>
                                                {{-- <img alt="image" src="assets/img/users/user-5.png" width="35"> --}}
                                                <span>0317 123 123</span>
                                            </td>
                                            <td>2018-01-20</td>
                                            <td>2018-01-20</td>
                                            <td>
                                                  <select>
                                                    <option value="">Activate</option>
                                                    <option value="">Deactivate</option>
                                                  </select>
                                            </td>
                                              <td class="icon_td">
                                                <div class="new_td">
                                                    <i class="fa fa-trash"></i>
                                                    {{-- <i class="fa fa-edit"></i> --}}
                                                </div>
                                            </td>
                                        </tr>
                                            
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

               
            </div>

        </section>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            $('#table').DataTable({
                "scrollX": true

            });
        });
    </script>
@endpush