@extends('layouts/layoutMaster')

@section('title', $title)

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
@endsection

@section('page-style')
    <style>
        .stat-icon {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('assets/js/client-list-admin.js') }}"></script>
@endsection

@section('content')
    {{-- Page Header --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">{{ $title }}</h4>
                    <p class="text-muted mb-0">View and manage all clients across business entities.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Clients</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    {{-- Stats Row --}}
    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3">
                        <div class="stat-icon rounded bg-label-primary">
                            <i class="ti ti-building ti-md"></i>
                        </div>
                        <div>
                            <h4 class="mb-0" id="stat-total">—</h4>
                            <span class="text-muted small">Total Clients</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3">
                        <div class="stat-icon rounded bg-label-success">
                            <i class="ti ti-users ti-md"></i>
                        </div>
                        <div>
                            <h4 class="mb-0" id="stat-with-users">—</h4>
                            <span class="text-muted small">With Portal Users</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3">
                        <div class="stat-icon rounded bg-label-info">
                            <i class="ti ti-file-text ti-md"></i>
                        </div>
                        <div>
                            <h4 class="mb-0" id="stat-with-docs">—</h4>
                            <span class="text-muted small">With Documents</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3">
                        <div class="stat-icon rounded bg-label-warning">
                            <i class="ti ti-currency-dollar ti-md"></i>
                        </div>
                        <div>
                            <h4 class="mb-0" id="stat-with-balance">—</h4>
                            <span class="text-muted small">With Open Balance</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- DataTable Card --}}
    <div class="card">
        <div class="card-header">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h5 class="card-title mb-0">All Clients</h5>
                    <small class="text-muted">CRM clients with portal users, document requests and financial data.</small>
                </div>
            </div>
        </div>
        <div class="card-body pb-0">
            <div class="row g-3" id="filter-container">
                <div class="col-md-2">
                    <select id="status-sel" class="form-select filter-selects">
                    </select>
                </div>
            </div>
        </div>
        <div class="card-datatable table-responsive">
            <table id="client-list-table" class="table border-top">
                <thead>
                    <tr>
                        <th>Client</th>
                        <th>Parent Company</th>
                        <th class="text-end">Open Balance</th>
                        <th class="text-center">Users</th>
                        <th class="text-center">Documents</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection