<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Clients')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Apps', 'title' => 'Clients')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Apps', 'title' => 'Clients')) ?>

                    <div class="container">
<div class="card" data-table="" data-table-rows-per-page="8">
<!-- card-header -->
<div class="card-header">
<div class="flex gap-2.5">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search clients..." type="search"/>
</div>
<button aria-controls="addClientModal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-secondary btn-icon text-white" data-hs-overlay="#addClientModal">
<i class="iconify tabler--plus text-base"></i>
</button>
<button class="btn bg-danger text-white hover:bg-danger-hover hidden" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-2.5">
<span class="me-2.5 font-semibold">Filter By:</span>
<div class="input-icon-group">
<i class="iconify tabler--world input-icon"></i>
<select class="form-select" data-table-filter="country">
<option value="All">Country</option>
<option value="US">USA</option>
<option value="UK">UK</option>
<option value="AU">Australia</option>
<option value="DE">Germany</option>
<option value="IN">India</option>
</select>
</div>
<div class="input-icon-group">
<i class="iconify tabler--briefcase input-icon"></i>
<select class="form-select" data-table-filter="type">
<option value="All">Project Type</option>
<option value="Project">Project</option>
<option value="Contract">Contract</option>
<option value="Retainer">Retainer</option>
<option value="Dashboard">Dashboard</option>
</select>
</div>
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover table-custom table-select">
<thead class="thead-sm">
<tr class="bg-light/25 text-2xs uppercase">
<th class="w-[1%]">
<input class="form-checkbox form-checkbox-light size-4.5" data-table-select-all="" id="checkAll" type="checkbox"/>
</th>
<th data-table-sort="name">Clients Name</th>
<th data-table-sort="">Phone</th>
<th class="flex p-2 text-start" data-column="country" data-table-sort="">Country</th>
<th data-table-sort="">Enrolled</th>
<th data-column="type" data-table-sort="">Type</th>
<th data-table-sort="">Job Title</th>
<th data-table-sort="">Status</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<!-- row-1 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-7.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Emily Parker</a>
</h5>
<p class="text-default-400 text-xs">emily@startupwave.io</p>
</div>
</div>
</td>
<td>+1 (415) 992-3412</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/us.svg"/>
                                                    US
                                                </div>
</td>
<td>Feb 2, 2024</td>
<td>Project</td>
<td>Frontend Developer</td>
<td>
<span class="badge font-semibold badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-2 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-3.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Liam Scott</a>
</h5>
<p class="text-default-400 text-xs">liam@creativelogic.net</p>
</div>
</div>
</td>
<td>+44 20 7946 0958</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/gb.svg"/>
                                                    UK
                                                </div>
</td>
<td>Jan 15, 2024</td>
<td>Contract</td>
<td>UI/UX Designer</td>
<td>
<span class="badge font-semibold badge-label bg-warning/15 text-warning">Pending</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-3 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Sofia Müller</a>
</h5>
<p class="text-default-400 text-xs">sofia@designhub.de</p>
</div>
</div>
</td>
<td>+49 89 1234 5678</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/de.svg"/>
                                                    DE
                                                </div>
</td>
<td>Mar 12, 2024</td>
<td>Project</td>
<td>Visual Designer</td>
<td>
<span class="badge font-semibold badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-4 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-5.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Carlos Méndez</a>
</h5>
<p class="text-default-400 text-xs">carlos@techlaunch.mx</p>
</div>
</div>
</td>
<td>+52 55 1234 9876</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/mx.svg"/>
                                                    MX
                                                </div>
</td>
<td>Jan 8, 2024</td>
<td>Contract</td>
<td>Full Stack Developer</td>
<td>
<span class="badge font-semibold badge-label bg-danger/15 text-danger">Inactive</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-5 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-6.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Nina Patel</a>
</h5>
<p class="text-default-400 text-xs">nina@pixelhype.in</p>
</div>
</div>
</td>
<td>+91 99876 54321</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/in.svg"/>
                                                    IN
                                                </div>
</td>
<td>Feb 19, 2024</td>
<td>Project</td>
<td>Brand Strategist</td>
<td>
<span class="badge font-semibold badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-6 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-8.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Oliver Chen</a>
</h5>
<p class="text-default-400 text-xs">oliver@brandflow.sg</p>
</div>
</div>
</td>
<td>+65 6789 1234</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/sg.svg"/>
                                                    SG
                                                </div>
</td>
<td>Jan 30, 2024</td>
<td>Retainer</td>
<td>Creative Director</td>
<td>
<span class="badge font-semibold badge-label bg-warning/15 text-warning">Pending</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-7 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-9.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Maya Tanaka</a>
</h5>
<p class="text-default-400 text-xs">maya@visiontokyo.jp</p>
</div>
</div>
</td>
<td>+81 3 1234 5678</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/jp.svg"/>
                                                    JP
                                                </div>
</td>
<td>Mar 5, 2024</td>
<td>Project</td>
<td>Product Designer</td>
<td>
<span class="badge font-semibold badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-8 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-10.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Lucas Ferreira</a>
</h5>
<p class="text-default-400 text-xs">lucas@devstudio.br</p>
</div>
</div>
</td>
<td>+55 11 99876 5432</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/br.svg"/>
                                                    BR
                                                </div>
</td>
<td>Feb 24, 2024</td>
<td>Contract</td>
<td>Backend Engineer</td>
<td>
<span class="badge font-semibold badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-9 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-1.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Anna Schmidt</a>
</h5>
<p class="text-default-400 text-xs">anna@uxhaus.de</p>
</div>
</div>
</td>
<td>+49 30 4567 8910</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/de.svg"/>
                                                    DE
                                                </div>
</td>
<td>Mar 9, 2024</td>
<td>Retainer</td>
<td>UX Consultant</td>
<td>
<span class="badge font-semibold badge-label bg-warning/15 text-warning">Pending</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-10 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="size-8 rounded-full" src="/images/users/user-2.jpg"/>
<div>
<h5>
<a class="hover:text-primary" data-sort="name" href="#!">Jason Lee</a>
</h5>
<p class="text-default-400 text-xs">jason@webfoundry.au</p>
</div>
</div>
</td>
<td>+61 2 9876 1234</td>
<td>
<div class="inline-flex items-center font-bold">
<img class="me-1.25 size-3 rounded-full" src="/images/flags/au.svg"/>
                                                    AU
                                                </div>
</td>
<td>Mar 14, 2024</td>
<td>Contract</td>
<td>Web Developer</td>
<td>
<span class="badge font-semibold badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- card-footer -->
<div class="card-footer">
<div data-table-pagination-info="clients"></div>
<div data-table-pagination=""></div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>

                <div aria-labelledby="addClientModalLabel" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="addClientModal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 m-3 flex min-h-[calc(100%-56px)] max-w-sm scale-95 items-center opacity-0 transition-all duration-200 ease-in-out md:mx-auto md:w-full md:max-w-2xl lg:max-w-3xl">
<div class="card pointer-events-auto flex w-full flex-col">
<div class="card-header p-5">
<h3 class="card-title uppercase font-bold text-sm" id="addClientModalLabel">Add New Client</h3>
<button aria-label="Close" data-hs-overlay="#addClientModal" type="button">
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="card-body overflow-y-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-base">
<!-- Client Name -->
<div>
<label class="form-label" for="clientName">Client Name</label>
<input class="form-input" id="clientName" name="client_name" placeholder="Enter full name" required="" type="text"/>
</div>
<!-- Email -->
<div>
<label class="form-label" for="clientEmail">Email</label>
<input class="form-input" id="clientEmail" name="email" placeholder="client@example.com" required="" type="email"/>
</div>
<!-- Phone -->
<div>
<label class="form-label" for="clientPhone">Phone</label>
<input class="form-input" id="clientPhone" name="phone" placeholder="+1 (000) 000-0000" type="tel"/>
</div>
<!-- Country -->
<div>
<label class="form-label" for="clientCountry">Country</label>
<select class="form-input" id="clientCountry" name="country" required="">
<option value="">Select country...</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="DE">Germany</option>
<option value="MX">Mexico</option>
<option value="IN">India</option>
<!-- add more -->
</select>
</div>
<!-- Enrolled Date -->
<div>
<label class="form-label" for="clientEnrolled">Enrolled Date</label>
<input class="form-input" data-altformat="F j, Y" data-provider="flatpickr" id="clientEnrolled" name="enrolled_date" type="hidden" value="2025-11-08"/>
</div>
<!-- Type -->
<div>
<label class="form-label" for="clientType">Type</label>
<select class="form-input" id="clientType" name="type" required="">
<option value="">Select type...</option>
<option value="Project">Project</option>
<option value="Contract">Contract</option>
</select>
</div>
<!-- Job Title -->
<div>
<label class="form-label" for="clientJobTitle">Job Title</label>
<input class="form-input" id="clientJobTitle" name="job_title" placeholder="Frontend Developer" type="text"/>
</div>
<!-- Status -->
<div>
<label class="form-label" for="clientStatus">Status</label>
<select class="form-input" id="clientStatus" name="status">
<option value="Active">Active</option>
<option selected="" value="Pending">Pending</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
</div>
<div class="border-default-300 flex items-center justify-end gap-x-2 border-t p-5">
<button class="btn bg-light hover:text-primary" data-hs-overlay="#addClientModal" type="button">Cancel</button>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="button">Add Client</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Custom table -->
<script src="/js/pages/custom-table.js"></script>
</body>
</html>