{{-- @extends('front.practitioner.import.template.import') --}}
@extends('front.inner-layout.app')
@section('content')

<style>
	body {
		height: 95vh;
	}
    
	.display-inline-block {
	display: inline-block;
	}
    

	.clientd-wrapper .page-title {
		z-index: 0 !important;
	}

    
	.invoice-page-menu a.btn.setting-btn svg {
    width: 20px;
	}
	.invoice-page-menu a.btn.setting-btn {
		padding: 0 !important;
		max-width: none;
		width: auto;
		min-width: auto;
		height: 36px;
		width: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.invoice-page-menu a.btn:hover svg path {
		fill: #fff;
	}
	.invoice-page-menu a.btn.delete-btn {
		display: flex;
		padding: 5px 0 !important;
		justify-content: center;
        font-weight: 700;
	}
	.invoice-page-menu a.btn.delete-btn svg {
        width: 18px;
        height: auto;
        margin-right: 4px;
	}

	.dashspace-area .page-content {
		padding-left: 80px;
		padding-right: 0;
	}

	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
		margin: 0 !important;
		margin-left: 10px !important;
		min-height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 120px;
	}
      
    .tabs-my-client-list .tab-menu ul li {
		min-width: 190px;
		min-height: 41px;
		
		background-color: #b3b3b3;
		display: inline-block;
		text-align: center;
		border-radius: 10px 10px 0px 0px;
	}
	.tabs-my-client-list .tab-menu ul li.active{
		background-color: #68afb5;
	}
	.tabs-my-client-list .tab-menu ul li a{
		font-size: 15px;
		letter-spacing: 0px;
		line-height: 44px;
		color: #ffffff;
		font-family: "Europa";
		text-align: center;
	}
	.tabs-my-client-list .tab-menu ul {
		margin: 0 0 30px;
		padding: 0;
		/* margin-left: 15px; */
	}

    .invoice-page-menu a.btn.delete-btn {
		padding: 8px 30px !important;
        line-height: 17px;
	}
    
	@media (min-width:768px) and (max-width:991px) {
		.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		.search-box-btns {
			padding-left: 0;
		}
		.search-box-outer form {
    		width: 250px;
		}
	}
	@media (min-width:992px) and (max-width:1199px) {
		.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		
	}
	@media (min-width: 1200px) and (max-width: 1365px) {
		.page-content {
		    padding: 15px 20px 15px 290px;
	    }
	}

	@media (max-width:991px) {
         .page-content {
            padding-left: 0;
            padding-right: 0;
        }
        .notes-menu {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }
        .tabs-my-client-list .tab-menu ul li {
            min-width: 130px;
        }
        .invoice-page-menu a.btn.delete-btn {
            padding: 8px 20px !important;
            line-height: 17px;
            font-size: 14px;
        }
        .myclient-recall-main .tabs-my-client-list .tab-menu ul {
            margin: 0;
        }
        .online-course-main {
            padding-left: 20px;
        }
        .communication-table table tr td {
            min-width: auto !important;
        }
    }
	@media (max-width:767px) {
	
        a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
            margin-left: 5px !important;
            padding: 3px 8px !important;
        }
        
        .notes-menu {
            padding-left: 0;
            padding-right: 0;
        }
        .search-box-outer form {
            width: 280px;
        }
        .myclient-recall-main .client-call-menu .left-menu {
            flex-wrap: nowrap;
        }
        .setting-wrapper .page-title {
            font-size: 20px;
        }
        .invoice-page-menu a.btn.delete-btn {
            padding: 8px 10px !important;
        }
        
	}

	


	.client-call-menu .right-menu {
		margin-top: 5px;
	}
    .invoice-page-menu .navbar-brand {
        margin: 0;
    }
    
    
    
</style>

<div class="">
    

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper my-income-main myclient-recall-main">
	<div class="client-call-menu">
		<div class="row align-items-center m-0">
			<nav class="navbar navbar-light invoice-page-menu notes-menu w-100 my-income-menu">
				<div class="left-menu">
					<a href="{{ url()->previous() }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-fluid" style="min-width: 40px"></a>
					<a class="navbar-brand p-0 " href="{{ route('practitioner.appointments.index') }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-fluid" style="min-width: 43px"></a>
					<h1 class="page-title font-400 mr-3">Detox with ease mini course</h1>
				</div>
				
				<div class="right-menu">

                    <a href="#" class="btn btn-unfill">Grant access</a>

					<a  href="{{route('practitioner.create.courses')}}" class="btn btn-fill delete-btn course-btn">
                        Edit course
					</a>
                                        
				</div>
			</nav>
		</div>
	</div>
   <div class="brdr-bttm"></div>
   
   <div class="online-course-main">
    <div class="container-fluid">
        <div class="section-title text-left">
            <h2>Dashboard</h2>
        </div>
        <div class="tab-teaser tabs-my-client-list">
            <div class="tab-menu">
               <ul>
                <li class="active"  data-rel="active-client-tab"><a href="#">Dashboard</a></li>
                <li class="" data-rel="archived-client-tab"><a href="#" class="">Sales</a></li>
               </ul>
            </div>
        </div>
            
        <div class="dashboard-list">
            <div class="row">
                <div class="col-sm-12 col-md-6 col-lg-3">
                    <div class="dashboard-block">
                        <div class="text">
                            <span>Total enrollments</span>
                            <h2>12</h2>
                        </div>
                        <div class="icon">
                            <img src="{{asset('assets/images/Total-enrollments.svg')}}" alt="cpurse" class="img-fluid">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-3">
                    <div class="dashboard-block">
                        <div class="text">
                            <span>Total revenue</span>
                            <h2>$12,500</h2>
                        </div>
                        <div class="icon">
                            <img src="{{asset('assets/images/Total-revenue.svg')}}" alt="cpurse" class="img-fluid">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-3">
                    <div class="dashboard-block">
                        <div class="text">
                            <span>Current enrollees</span>
                            <h2>1</h2>
                        </div>
                        <div class="icon">
                            <img src="{{asset('assets/images/Current-enrollees.svg')}}" alt="cpurse" class="img-fluid">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-3">
                    <div class="dashboard-block">
                        <div class="text">
                            <span>Course completion</span>
                            <h2>50%</h2>
                        </div>
                        <div class="icon">
                            <img src="{{asset('assets/images/Course-completion.svg')}}" alt="cpurse" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
        <div class=" dr-table communication-table mt-5">
            <div class="searchbar">
                <div class="search-box">
                    <input type="text" class="form-control" placeholder="Search name">
                    <button class="btn btn-fill"><img src="{{asset('assets/images/Search_icon_white.svg')}}" alt="cpurse" class="img-fluid"></button>
                </div>
                <a  href="#" class="btn btn-unfill">
                    Filter
                </a>
            </div>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead class="head-brdr">
                        <tr>
                            <th>Purchse Date</th>
                            <th class="">Course name</th>
                            <th class="">Member name</th>
                            <th>Amount paid</th>
                            <th>Pending payments</th>
                            <th>Next payment due</th>
                            <th>Last login</th>
                            <th>Total logins</th>
                            <th>Progress</th>
                            <th>Access end date</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="">
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>
                                <div class="payment-fail">Payment failed</div>                                
                            </td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status ongoing">Ongoing</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock2.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>
                                <div class="payment-fail">Payment failed</div>                                
                            </td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status expired">Expired</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                        <tr>
                            <td>24/12/2024</td>
                            <td>Lead generation FREE - Social media</td>
                            <td>Anil Mustafa</td>
                            <td>$1000.00</td>
                            <td>1</td>
                            <td>24/05/2025</td>
                            <td>28/03/2025</td>
                            <td>5</td>
                            <td>50%</td>
                            <td>20/08/2025</td>
                            <td>
                                <div class="status active">Active</div>
                            </td>
                            <td>
                                <img src="{{asset('assets/images/Lock.svg')}}" alt="cpurse" class="img-fluid">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </div>

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

@section('js')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js" integrity="sha512-eviLb3jW7+OaVLz5N3B5F0hpluwkLb8wTXHOTy0CyNaZM5IlShxX1nEbODak/C0k9UdsrWjqIBKOFY0ELCCArw==" crossorigin="anonymous"></script>
   <script type="text/javascript">
    
   </script>

@endsection