@extends('layouts.master')
@section('main_content')
    <div class="container-fluid">
        <div class="row page-title">
            <div class="col-sm-6">
                <h3>Client Dashboard</h3>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <!-- Active Client Count -->
            <div class="col-sm-6 col-xl-3">
                <div class="card">
                    <div class="card-body text-center">
                        <h4>Active Clients</h4>
                        <h3 class="font-primary" id="activeClientCount">0</h3>
                    </div>
                </div>
            </div>

            <!-- Insurance Company Count -->
            <div class="col-sm-6 col-xl-3">
                <div class="card">
                    <div class="card-body text-center">
                        <h4>Insurance Companies</h4>
                        <h3 class="font-primary" id="insuranceCompanyCount">0</h3>
                    </div>
                </div>
            </div>

            <!-- Recent Clients Table -->
            <div class="col-sm-12 col-xl-6">
                <div class="card">
                    <div class="card-header">
                        <h4>Recent Clients</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Client Name</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody id="clientTableBody">
                                    <tr>
                                        <td colspan="4" class="text-center">No Records Found</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        document.getElementById('activeClientCount').innerText = 0;
        document.getElementById('insuranceCompanyCount').innerText = 0;
    </script>
@endsection