@extends('layouts.main')
@section('title', 'Subscribed Users')

@section('breadcrumb')
  <li class="breadcrumb-item"><a href="/">Home</a></li>
  <li class="breadcrumb-item active">Subscribed Users</li>
@endsection

@section('content')

  <script src="{{ env('APP_PREFIX') }}/js/user.js"></script>

  <div class="row">

    <div class="col-lg-12">
      <div class="card-box">

        <div class="table-responsive">
          <table class="table table-hover mt-3">

            <thead class="thead-light">
            <tr>
              <th>#</th>
              <th>Email</th>
              <th>Address</th>
              <th>IP</th>
              <th>User Agent</th>
              <th>Subscribed At</th>
              <th width="17%">Action</th>
            </tr>
            </thead>

            <tbody id="user_table">

            @foreach($users as $user)

              <tr class="pointer" id="user_{{ $user->id }}">
                <td>{{ $loop->index + 1 }}</td>
                <td>{{ $user->email }}</td>
                <td>{{ $user->address }}</td>
                <td>{{ $user->ip_address }}</td>
                <td>{{ $user->user_agent }}</td>
                <td>{{ $user->created_at }}</td>
                <td>
                  <button type="button" class="btn btn-blue waves-effect waves-light" title="Location Details"
                          onclick="viewLocationDetail({{ $user->location_details }})" >
                    <i class="mdi mdi-google-maps"></i>
                  </button>
                  <button type="button" class="btn btn-danger waves-effect waves-light" title="Delete User"
                          onclick="deleteUser({{ $user->id }})">
                    <i class="fe-trash-2"></i>
                  </button>
                </td>
              </tr>

            @endforeach

            </tbody>
          </table>

        </div>

      </div>
    </div>

  </div>


  <div id="view_location_modal" class="modal bounceInDown animated">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">View Location Details</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div>
        <div class="modal-body">

          <div class="table-responsive">
            <table class="table table-bordered mb-0">
              <thead>
              <tr>
                <th>#</th>
                <th>Attribute</th>
                <th>Value</th>
              </tr>
              </thead>
              <tbody id="view_location_table">

              </tbody>
            </table>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light waves-effect" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

@endsection