<!DOCTYPE html>

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

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

                    <div class="container-fluid">
<div class="flex h-[calc(100vh-190px)]">
<div aria-label="Sidebar" class="hs-overlay hs-overlay-open:translate-x-0 fixed start-0 top-0 bottom-0 z-70 h-full w-80 -translate-x-full transform transition-all duration-300 [--auto-close:lg] lg:static lg:block lg:translate-x-0" id="chatSidebaroffcanvas" role="dialog" tabindex="-1">
<div class="card rounded-e-none">
<div class="card-header p-5 gap-3">
<div class="input-icon-group grow">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input bg-light/30" placeholder="Search here..." type="search"/>
</div>
<a aria-controls="createSingleChatModal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-dark btn-icon size-9.25 text-white" data-hs-overlay="#createSingleChatModal" href="#!">
<i class="iconify tabler--pencil text-lg"></i>
</a>
</div>
<div class="lg:h-[calc(100vh-265px)] h-screen p-2.5" data-simplebar="" id="chat-sidebar">
<div class="*:[.active]:bg-default-100 *:hover:bg-default-100 space-y-0.5">
<a class="block w-full rounded active" data-chat-id="chat1" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-4.jpg"/>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Ava Thompson</span>
<span class="text-default-400 block truncate text-xs max-w-40">I'll send the invoice by evening. Please check and confirm.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">Just Now</span>
<span class="badge text-2xs bg-primary text-white">2</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat2" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-5.jpg"/>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Noah Smith</span>
<span class="text-default-400 block truncate text-xs max-w-40">Can you check the shared doc? Added some feedback.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">5 Min</span>
<span class="badge text-2xs bg-primary text-white">1</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat3" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-7.jpg"/>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Liam Johnson</span>
<span class="text-default-400 block truncate text-xs max-w-40">Please approve the design so we can move to development.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">3:45 PM</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat4" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<div class="bg-primary flex size-8 items-center justify-center rounded-full font-semibold text-white">EW</div>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Emma Wilson</span>
<span class="text-default-400 block truncate text-xs max-w-40">All tasks are completed. Do you want me to deploy?</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">2 hr</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat5" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-8.jpg"/>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Olivia Martinez</span>
<span class="text-default-400 block truncate text-xs max-w-40">Meeting rescheduled to Friday at 11 AM.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">4 hr</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat6" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<div class="bg-secondary flex size-8 items-center justify-center rounded-full font-semibold text-white">WD</div>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">William Davis</span>
<span class="text-default-400 block truncate text-xs max-w-40">I'm working on the bug fix, will update soon.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">Yesterday</span>
<span class="badge text-2xs bg-primary text-white">3</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat7" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-10.jpg"/>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Sophia Moore</span>
<span class="text-default-400 block truncate text-xs max-w-40">Final draft is ready. Let me know your thoughts.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">Yesterday</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat8" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-2.jpg"/>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Jackson Lee</span>
<span class="text-default-400 block truncate text-xs max-w-40">I've uploaded the assets. Please review them tonight.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">12 Jun</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat9" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-3.jpg"/>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Chloe Anderson</span>
<span class="text-default-400 block truncate text-xs max-w-40">Need your approval before pushing this live.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">10 Jun</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat10" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<div class="bg-info flex size-8 items-center justify-center rounded-full font-semibold text-white">LW</div>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Lucas Wright</span>
<span class="text-default-400 block truncate text-xs max-w-40">Client call moved to tomorrow. Will share notes later.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">9 May</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat11" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-6.jpg"/>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Mia Scott</span>
<span class="text-default-400 block truncate text-xs max-w-40">Everything looks good. Waiting for your go-ahead.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">13 Apr</span>
</span>
</div>
</a>
<a class="block w-full rounded" data-chat-id="chat12" href="#">
<div class="flex justify-between gap-2.5 px-3.75 py-3">
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-9.jpg"/>
<span class="text-start overflow-hidden">
<span class="font-semibold text-nowrap" data-chat-search-field="">Benjamin Clark</span>
<span class="text-default-400 block truncate text-xs max-w-40">Checked your updates. Left a few suggestions.</span>
</span>
</div>
<span class="flex shrink-0 flex-col items-end justify-center gap-1.25">
<span class="text-default-400 text-xs">10 Mar</span>
<span class="badge text-2xs bg-primary text-white">2</span>
</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="card min-w-0 flex-1 rounded-s-none">
<div class="card-header">
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 text-start lg:hidden!">
<button class="btn btn-sm btn-icon border-default-300">
<i aria-controls="chatSidebaroffcanvas" aria-expanded="false" aria-haspopup="dialog" aria-label="Toggle navigation" class="iconify tabler--menu-4 text-default-600 size-6" data-hs-overlay="#chatSidebaroffcanvas"></i>
</button>
</div>
<div>
<h5 class="text-base mb-1.25">
<a class="hover:text-primary" data-chat-username="" href="#!">Ava Thompson</a>
</h5>
<p class="text-default-400 flex items-center leading-tight gap-1.5"><i class="iconify tabler--circle-filled text-success"></i> Active</p>
</div>
</div>
<div class="flex gap-1.25">
<!-- Video Call -->
<button aria-controls="videoCallModal" aria-expanded="false" aria-haspopup="dialog" class="btn btn-icon border-default-300 hover:border-default-400/75 hover:bg-default-50" data-hs-overlay="#videoCallModal">
<i class="iconify tabler--video size-4.25"></i>
</button>
<!-- Audio Call -->
<button aria-controls="audioCallModal" aria-expanded="false" aria-haspopup="dialog" class="btn btn-icon border-default-300 hover:border-default-400/75 hover:bg-default-50" data-hs-overlay="#audioCallModal">
<i class="iconify tabler--phone-call size-4.25"></i>
</button>
<!-- More Options -->
<div class="relative">
<div class="hs-dropdown inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle btn btn-icon border-default-300 hover:border-default-400/75 hover:bg-default-50" type="button">
<i class="iconify tabler--dots-vertical text-sm"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--user"></i>
                                                            Export as PDF
                                                        </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--bell-off"></i>
                                                            Export as CSV
                                                        </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--trash"></i>
                                                            Export as Excel
                                                        </a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="h-[calc(100vh-333px)]" data-simplebar="">
<div class="card-body pb-2.5 py-0" data-chat="" id="chat-container">
<!-- Message 1 -->
<div class="my-5 flex items-start gap-2.5">
<img alt="User" class="size-9 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<div class="bg-warning/15 rounded px-6 py-3">Hey! Are you available for a quick call? 📞</div>
<div class="text-default-400 mt-1.5 flex items-center gap-1 text-xs"><i class="iconify tabler--clock"></i> 08:55 am</div>
</div>
</div>
<!-- Message 2 -->
<div class="my-5 flex items-start justify-end gap-2.5">
<div>
<div class="bg-info/15 rounded px-6 py-3">Sure, give me 5 minutes. Just wrapping something up.</div>
<div class="text-default-400 mt-1.5 flex items-center justify-end gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    08:57 am
                                                </div>
</div>
<img alt="User" class="size-9 rounded-full" src="/images/users/user-2.jpg"/>
</div>
<!-- Message 3 -->
<div class="my-5 flex items-start gap-2.5">
<img alt="User" class="size-9 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<div class="bg-warning/15 rounded px-6 py-3">Perfect. Let me know when you're ready 👍</div>
<div class="text-default-400 mt-1.5 flex items-center gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    08:58 am
                                                </div>
</div>
</div>
<!-- Message 4 -->
<div class="my-5 flex items-start justify-end gap-2.5">
<div>
<div class="bg-info/15 rounded px-6 py-3">Ready now. Calling you!</div>
<div class="text-default-400 mt-1.5 flex items-center justify-end gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    09:00 am
                                                </div>
</div>
<img alt="User" class="size-9 rounded-full" src="/images/users/user-2.jpg"/>
</div>
<!-- Message 5 -->
<div class="my-5 flex items-start gap-2.5">
<img alt="User" class="size-9 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<div class="bg-warning/15 rounded px-6 py-3">Thanks for your time earlier!</div>
<div class="text-default-400 mt-1.5 flex items-center gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    09:45 am
                                                </div>
</div>
</div>
<!-- Message 6 -->
<div class="my-5 flex items-start justify-end gap-2.5">
<div>
<div class="bg-info/15 rounded px-6 py-3">Of course! It was a productive discussion.</div>
<div class="text-default-400 mt-1.5 flex items-center justify-end gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    09:46 am
                                                </div>
</div>
<img alt="User" class="size-9 rounded-full" src="/images/users/user-2.jpg"/>
</div>
<!-- Message 7 -->
<div class="my-5 flex items-start gap-2.5">
<img alt="User" class="size-9 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<div class="bg-warning/15 rounded px-6 py-3">I’ll send over the updated files by noon.</div>
<div class="text-default-400 mt-1.5 flex items-center gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    09:50 am
                                                </div>
</div>
</div>
<!-- Message 8 -->
<div class="my-5 flex items-start justify-end gap-2.5">
<div>
<div class="bg-info/15 rounded px-6 py-3">Great, I’ll review them once they arrive.</div>
<div class="text-default-400 mt-1.5 flex items-center justify-end gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    09:52 am
                                                </div>
</div>
<img alt="User" class="size-9 rounded-full" src="/images/users/user-2.jpg"/>
</div>
<!-- Message 9 -->
<div class="my-5 flex items-start gap-2.5">
<img alt="User" class="size-9 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<div class="bg-warning/15 rounded px-6 py-3">Just sent them via Drive. Let me know if you have issues accessing.</div>
<div class="text-default-400 mt-1.5 flex items-center gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    12:03 pm
                                                </div>
</div>
</div>
<!-- Message 10 -->
<div class="my-5 flex items-start justify-end gap-2.5">
<div>
<div class="bg-info/15 rounded px-6 py-3">Got them. Everything looks good so far!</div>
<div class="text-default-400 mt-1.5 flex items-center justify-end gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    12:10 pm
                                                </div>
</div>
<img alt="User" class="size-9 rounded-full" src="/images/users/user-2.jpg"/>
</div>
<!-- Message 11 -->
<div class="my-5 flex items-start gap-2.5">
<img alt="User" class="size-9 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<div class="bg-warning/15 rounded px-6 py-3">Awesome 😊 Looking forward to your feedback!</div>
<div class="text-default-400 mt-1.5 flex items-center gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    12:12 pm
                                                </div>
</div>
</div>
<!-- Message 12 -->
<div class="my-5 flex items-start justify-end gap-2.5">
<div>
<div class="bg-info/15 rounded px-6 py-3">Will get back to you after lunch 🍴</div>
<div class="text-default-400 mt-1.5 flex items-center justify-end gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    12:13 pm
                                                </div>
</div>
<img alt="User" class="size-9 rounded-full" src="/images/users/user-2.jpg"/>
</div>
<!-- Message 13 -->
<div class="my-5 flex items-start gap-2.5">
<img alt="User" class="size-9 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<div class="bg-warning/15 rounded px-6 py-3">No rush, enjoy your lunch! 😄</div>
<div class="text-default-400 mt-1.5 flex items-center gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    12:14 pm
                                                </div>
</div>
</div>
<!-- Message 14 -->
<div class="my-5 flex items-start justify-end gap-2.5">
<div>
<div class="bg-info/15 rounded px-6 py-3">Thanks! Talk soon.</div>
<div class="text-default-400 mt-1.5 flex items-center justify-end gap-1 text-xs">
<i class="iconify tabler--clock"></i>
                                                    12:15 pm
                                                </div>
</div>
<img alt="User" class="size-9 rounded-full" src="/images/users/user-2.jpg"/>
</div>
</div>
</div>
<div class="border-t border-default-300 border-dashed px-6 py-3.75">
<div class="flex gap-2">
<div class="input-icon-group grow">
<i class="iconify tabler--message input-icon"></i>
<input class="form-input bg-light/20" placeholder="Enter message..." type="text"/>
</div>
<a class="btn bg-primary text-white hover:bg-primary-hover" data-send="" href="#!"> Send <i class="iconify tabler--send-2 ms-1 text-xl"></i> </a>
</div>
</div>
</div>
</div>
</div>
</main>

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

                <!-- Create Single Chat Modal -->
<div aria-labelledby="createSingleChatModalLabel" 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="createSingleChatModal" 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)] scale-95 opacity-0 transition-all duration-200 ease-in-out md:mx-auto md:w-full md:max-w-lg">
<div class="card pointer-events-auto flex w-full flex-col">
<div class="card-header">
<h3 class="text-sm font-bold" id="createSingleChatModalLabel">Start New Chat</h3>
<button aria-label="Close" data-hs-overlay="#createSingleChatModal" type="button">
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="card-body overflow-y-auto">
<div class="mb-5">
<label class="form-label" for="recipientUser">Recipient</label>
<input class="form-input" id="recipientUser" placeholder="Enter username or email" required="" type="text"/>
</div>
<div>
<label class="form-label" for="initialMessage">Message</label>
<textarea class="form-textarea" id="initialMessage" placeholder="Type your message here..." required="" rows="3"></textarea>
</div>
</div>
<div class="border-default-300 flex items-center justify-end gap-x-2 border-t border-dashed p-5">
<button class="btn bg-light hover:text-primary" data-hs-overlay="#createSingleChatModal" type="button">Cancel</button>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="button">Send Message</button>
</div>
</div>
</div>
</div>
<!-- Video Call Modal -->
<div aria-labelledby="videoCallModalLabel" 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="videoCallModal" 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:max-w-xl lg:max-w-5xl">
<div class="card !bg-dark pointer-events-auto flex w-full flex-col">
<div class="card-header border-0!">
<h3 class="text-sm font-bold text-white" id="videoCallModalLabel">Starting Video Call</h3>
<button aria-label="Close" data-hs-overlay="#videoCallModal" type="button">
<i class="iconify tabler--x text-xl text-white"></i>
</button>
</div>
<div class="overflow-y-auto px-6 py-18">
<div class="mb-7.5">
<img alt="User Photo" class="mx-auto size-37.5 rounded-full" src="/images/users/user-3.jpg"/>
</div>
<!-- User Info -->
<h3 class="mb-1.25 text-center text-2xl font-semibold text-white">Alex Johnson</h3>
<p class="text-default-400 mb-7.5 text-center">Connecting to call...</p>
<!-- Call Controls -->
<div class="flex flex-wrap justify-center gap-3">
<button class="btn bg-light hover:text-primary" type="button">
<i class="iconify tabler--video"></i>
                                        Camera On
                                    </button>
<button class="btn bg-light hover:text-primary" type="button">
<i class="iconify tabler--microphone"></i>
                                        Mic On
                                    </button>
<button class="btn bg-danger text-white hover:bg-danger-hover" data-hs-overlay="#videoCallModal" type="button">
<i class="iconify tabler--phone-call"></i>
                                        End Call
                                    </button>
</div>
</div>
<div class="card-footer flex justify-center border-0!">
<span class="text-default-300 text-center italic">Make sure your devices are connected before starting the call</span>
</div>
</div>
</div>
</div>
<!-- Audio Call Modal -->
<div aria-labelledby="audioCallModalLabel" 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="audioCallModal" 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)] scale-95 items-center opacity-0 transition-all duration-200 ease-in-out md:mx-auto md:w-full md:max-w-lg">
<div class="card !bg-dark pointer-events-auto flex w-full flex-col">
<div class="card-header border-0!">
<h3 class="text-sm font-bold text-white" id="audioCallModalLabel">Starting Audio Call</h3>
<button aria-label="Close" data-hs-overlay="#audioCallModal" type="button">
<i class="iconify tabler--x text-xl text-white"></i>
</button>
</div>
<div class="overflow-y-auto px-6 py-18">
<div class="mb-7.5">
<img alt="User Photo" class="mx-auto size-37.5 rounded-full" src="/images/users/user-3.jpg"/>
</div>
<!-- User Info -->
<h3 class="mb-1.25 text-center text-2xl font-semibold text-white">Alex Johnson</h3>
<p class="text-default-400 mb-7.5 text-center">Calling...</p>
<!-- Call Controls -->
<div class="flex flex-wrap justify-center gap-3">
<button class="btn bg-light hover:text-primary" type="button">
<i class="iconify tabler--microphone"></i>
                                        Mic On
                                    </button>
<button class="btn bg-light hover:text-primary" type="button">
<i class="iconify tabler--volume"></i>
                                        Speaker On
                                    </button>
<button class="btn bg-danger text-white hover:bg-danger-hover" data-hs-overlay="#audioCallModal" type="button">
<i class="iconify tabler--phone-call"></i>
                                        End Call
                                    </button>
</div>
</div>
<div class="card-footer flex justify-center border-0!">
<span class="text-default-300 text-center italic">Ensure your microphone is working properly</span>
</div>
</div>
</div>
</div>
</div>
<!-- End Page content -->
</div>

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

        <script src="/js/pages/apps-chat.js"></script>
</body>
</html>