@extends('erp.hr.layouts.master')

@section('content')
<div class="container-fluid">
                <div class="row g-3">
                    <!-- Card 1 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="dashboard-card bg-success">
                            <i class="fas fa-chart-pie"></i>
                            <small>Today</small>
                            <h2>10</h2>
                            <div class="card-footer">
                                <a href="#">Number of Order <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <!-- Card 2 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="dashboard-card bg-primary">
                            <i class="fas fa-chart-bar"></i>
                            <small>Last 7 Day</small>
                            <h2>1</h2>
                            <div class="card-footer">
                                <a href="#">Number of Order <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <!-- Card 3 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="dashboard-card bg-danger">
                            <i class="fas fa-shopping-bag"></i>
                            <small>Total</small>
                            <h2>30</h2>
                            <div class="card-footer">
                                <a href="#">Number of Order <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <!-- Card 4 -->
                    <div class="col-lg-3 col-md-6">
                        <div class="dashboard-card bg-info">
                            <i class="fas fa-user-plus"></i>
                            <small>Total</small>
                            <h2>2286</h2>
                            <div class="card-footer">
                                <a href="#">Number of Product <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

                <div class="row mt-3 dashboard-collapse-card">
                    <!-- Most Popular Articles -->
                    <div class="col-lg-6 mb-4">
                        <div class="card">
                            <div class="card-header" data-bs-toggle="collapse" data-bs-target="#mostPopularArticles"
                                aria-expanded="true">
                                MOST POPULAR ARTICLES



                            </div>
                            <div id="mostPopularArticles" class="collapse show">
                                <div class="card-body">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Article Name</th>
                                                <th>Views</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Articles go here -->
                                        </tbody>
                                    </table>
                                </div>
                                <div class="card-footer">
                                    <a href="#">View All Articles</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Category List -->
                    <div class="col-lg-6 mb-4">
                        <div class="card">
                            <div class="card-header" data-bs-toggle="collapse" data-bs-target="#categoryList"
                                aria-expanded="true">
                                CATEGORY LIST

                            </div>
                            <div id="categoryList" class="collapse show">
                                <div class="card-body">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Category Name</th>
                                                <th>Article No</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Blog</td>
                                                <td><span class="badge bg-info">14</span></td>
                                            </tr>
                                            <tr>
                                                <td>New Page</td>
                                                <td><span class="badge bg-info">1</span></td>
                                            </tr>
                                            <tr>
                                                <td>Service</td>
                                                <td><span class="badge bg-info">3</span></td>
                                            </tr>
                                            <tr>
                                                <td>Home</td>
                                                <td><span class="badge bg-info">0</span></td>
                                            </tr>
                                            <tr>
                                                <td>Video Gallery</td>
                                                <td><span class="badge bg-info">1</span></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="card-footer">
                                    <a href="#">View All Categories</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Login User List -->
                    <div class="col-lg-6 mb-4">
                        <div class="card">
                            <div class="card-header" data-bs-toggle="collapse" data-bs-target="#loginUserList"
                                aria-expanded="true">
                                LOGIN USER LIST

                            </div>
                            <div id="loginUserList" class="collapse show">
                                <div class="card-body">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>User Name</th>
                                                <th>Login Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>TechUNO Admin</td>
                                                <td>28-01-2024 09:58:55 AM</td>
                                            </tr>
                                            <tr>
                                                <td>Admin</td>
                                                <td>24-06-2024 11:50:36 AM</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="card-footer">
                                    <a href="#">View All Users</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Newsletter Subscribers List -->
                    <div class="col-lg-6 mb-4">
                        <div class="card">
                            <div class="card-header" data-bs-toggle="collapse"
                                data-bs-target="#newsletterSubscribersList" aria-expanded="true">
                                NEWSLETTER SUBSCRIBERS LIST

                            </div>
                            <div id="newsletterSubscribersList" class="collapse show">
                                <div class="card-body">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>E-mail</th>
                                                <th>Subscription Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Subscribers will go here -->
                                        </tbody>
                                    </table>
                                </div>
                                <div class="card-footer">
                                    <a href="#">View All Newsletter</a>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-6 mb-4">
                        <!-- Card with Custom Checkbox and Radio -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Preferences</h5>
                            </div>
                            <div class="card-body">
                                <p class="card-text">Select your preferences below:</p>

                                <!-- Custom Checkbox Group -->
                                <div class="custom-checkbox mb-3">
                                    <input type="checkbox" id="checkbox1">
                                    <label for="checkbox1">Receive Email Notifications</label>
                                </div>
                                <div class="custom-checkbox mb-3">
                                    <input type="checkbox" id="checkbox2">
                                    <label for="checkbox2">Subscribe to Newsletter</label>
                                </div>

                                <!-- Custom Radio Group -->
                                <p class="mt-4">Choose your account type:</p>
                                <div class="custom-radio mb-3">
                                    <input type="radio" id="radio1" name="accountType">
                                    <label for="radio1">Personal Account</label>
                                </div>
                                <div class="custom-radio mb-3">
                                    <input type="radio" id="radio2" name="accountType">
                                    <label for="radio2">Business Account</label>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
@endsection('content')