@extends('superadmin.layout.page')

@section('css')
<style>
.nav-pills .nav-link.active{
  background-color: #17a2b8;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
</style>
<link rel="stylesheet" href="{{ asset('superadmin/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css
') }}">
<link rel="stylesheet" href="{{ asset('superadmin/plugins/datatables-responsive/css/responsive.bootstrap4.min.css
') }}">
@endsection
@section('content')
<div class="content-wrapper" style="margin-left: 0px; padding:15px;background-color: aliceblue;">
    <!-- Content Header (Page header) -->
    <div class="content-header" style="text-transform: capitalize;">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">{{ $masteruserdata->first_name }} Dashboard</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('superadmin.user.list') }}">Users</a></li>
                        <li class="breadcrumb-item active">admin User Dashboard</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Small boxes (Stat box) -->
            <div class="row">
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{ $subuserdata->count() }}</h3>

                            <p>Total User</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-bag"></i>
                        </div>
                        {{-- <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> --}}
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>3</h3>

                            <p>User Layer</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        {{-- <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> --}}
                    </div>
                </div>
            </div>
            <!-- /.row -->
            <!-- Main content -->
            <section class="content">
                <div>
                    @if ($message = session('success'))
                    <div class="alert alert-success alert-block">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $message }}</strong>
                    </div>
                    @endif
                    @if ($message = session('error'))
                    <div class="alert alert-danger alert-block">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $message }}</strong>
                    </div>
                    @endif
                </div>
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Users</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Plan</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Layer</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="card">
                                            <div class="card-header bg-info">
                                                <h3 class="card-title">User Details</h3>
                                            </div>
                                            <!-- /.card-header -->
                                            <div class="card-body">
                                                <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <table id="example2" class="table table-bordered table-hover dataTable dtr-inline" role="grid" aria-describedby="example2_info" width="100%">
                                                                <thead>
                                                                    <tr role="row">
                                                                        <th>Name</th>
                                                                        <th>Email</th>
                                                                        <th>Mobile Number</th>
                                                                        <th>Status</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @if(count($subuserdata) > 0)
                                                                    @foreach ($subuserdata as $key => $item)
                                                                    <tr>
                                                                        <td>{{ $item->first_name.' '.$item->last_name }}</td>
                                                                        <td>{{ $item->email }}</td>
                                                                        <td>{{ $item->mobile_number }}</td>
                                                                        <td>
                                                                            @if($item->status == 1)
                                                                            Active
                                                                            @else
                                                                            Inactive
                                                                            @endif
                                                                        </td>
                                                                    </tr>
                                                                    @endforeach
                                                                    @else
                                                                    <tr>
                                                                        <td colspan="5" style="text-align: center;">No User Found</td>
                                                                    </tr>
                                                                    @endif
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- /.card-body -->
                                        </div>
                                        <!-- /.card -->
                                    </div>
                                    <!-- /.col -->
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                              <div class="col-md-12">
                                  <div class="main-body">
                                      <div class="row gutters-sm">
                                          <div class="col-md-10">
                                              <div class="card mb-3">
                                                  <div class="card-header bg-info">Plan Details</div>
                                                  <div class="card-body">
                                                      <div class="row">
                                                          <div class="col-sm-3">
                                                              <h6 class="mb-0">Current Plan</h6>
                                                          </div>
                                                          <div class="col-sm-9 text-secondary">
                                                              {{ $plandata->plan_name ?? '-'}}
                                                          </div>
                                                      </div>
                                                      <hr>
                                                      <div class="row">
                                                          <div class="col-sm-3">
                                                              <h6 class="mb-0">Plan Type</h6>
                                                          </div>
                                                          <div class="col-sm-9 text-secondary" style="text-transform: capitalize;">
                                                              {{ $plandata->plan_type ?? '-'}}
                                                          </div>
                                                      </div>
                                                      <hr>
                                                      <div class="row">
                                                          <div class="col-sm-3">
                                                              <h6 class="mb-0">Plan Expire Date</h6>
                                                          </div>
                                                          <div class="col-sm-9 text-secondary">
                                                              {{ $masteruserdata->plan_expiration_date != '' ? date('d-m-Y H:i:s', strtotime($masteruserdata->plan_expiration_date)) : $masteruserdata->plan_expiration_date }}
                                                          </div>
                                                      </div>
                                                      <hr>
                                                      <div class="row">
                                                          <div class="col-sm-3">
                                                              <h6 class="mb-0">Used Space</h6>
                                                          </div>
                                                          <div class="col-sm-9 text-secondary">
                                                              {{ $spaceUsed }} MB
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>

                                  </div>
                              </div>
                            </div>
                            <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                               layer details
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                </div>
            </section>
            <!-- /.row (main row) -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>




@endsection
@section('scripts')
<script src="{{ asset('superadmin/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('superadmin/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<!-- <script src="{{ asset('superadmin/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script> -->
<script src="{{ asset('superadmin/custom_js/main.js') }}"></script>
<script src="{{ asset('js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('superadmin/custom_js/user.js') }}"></script>
<script>
    $('.table').DataTable();

</script>
@endsection