@extends('layouts.dashboard')
@section('content')
<div class="content-wrapper" style="min-height: 241px;">
    <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="m-0">{{ $title }}</h1>
            </div>
            <div class="col-sm-6">
              <a type="button" class="btn btn-primary float-right" href="{{ url('user/clientlist') }}">All Clients</a>
            </div>
          </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <input type="hidden" value="{{ $id }}" name="client_id" id="client_id">
                    <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <div class="text-center">
                        <img class="profile-user-img img-fluid img-circle"
                            src="/assets/images/avtar.png"
                            alt="User profile picture">
                        </div>
                        <h3 class="profile-username text-center" id="username"></h3>
                        <p class="text-muted text-center" id="phone"></p>

                        <ul class="list-group list-group-unbordered mb-3">
                        <li class="list-group-item">
                            <b>Status</b> 
                            <a class="float-right" id="status"></a>
                        </li>
                        <li class="list-group-item">
                            <b>Date Of Registration</b> <a class="float-right" id="date_of_registration"></a>
                        </li>
                        <li class="list-group-item">
                            <b>Email Id</b> <a class="float-right" id="email_id"></a>
                        </li>
                        <li class="list-group-item">
                            <b>Last Login</b> <a class="float-right" id="last_login"></a>
                        </li>
                        </ul>

                        <a href="#" class="btn btn-success btn-block"><b>Total Saving Through App</b></a>
                    </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">About Events</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                            <tr>
                                <th>Total Events:</th>
                                <td id="total_events">0</td>
                            </tr>
                            <tr>
                                <th>Upcoming Events:</th>
                                <td id="upcomming_events">0</td>
                            </tr>
                            <tr>
                                <th>Past Events:</th>
                                <td id="past_events">0</td>
                            </tr>
                            <tr>
                                <th>Cancelled Events:</th>
                                <td id="cancelled_events">0</td>
                            </tr>
                            </table>
                        </div>
                    </div>
                    </div>
                </div>
            </div>

            <hr>

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Events List</h3>
                </div>

                <div class="card-body table-responsive p-0">
                    <table class="table table-hover text-nowrap">
                    <thead>
                        <tr>
                        <th>ID</th>
                        <th>Event ID</th>
                        <th>Event Name</th>
                        <th>Event Date</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="eventlistTable">
                        
                    </tbody>
                    </table>
                </div>
            </div>

        </div>
    </section>
</div>
@endsection