@extends('layouts.app')

@section('content')
<!-- Inner Navbar -->
    <div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted" id="navbar">
        <div class="rounded-t-xl border border-input border-b-input bg-background flex items-stretch grow">
        <!-- Container -->
        <div class="kt-container-fluid flex justify-between items-stretch gap-5">
            <div class="grid items-stretch">
            <div class="kt-scrollable-x-auto flex items-stretch">
                <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true">
                <div class="kt-menu-item border-b-2 border-b-transparent kt-menu-item-active:border-b-mono kt-menu-item-here:border-b-mono" data-kt-menu-item-placement="bottom-start" data-kt-menu-item-placement-rtl="bottom-end" data-kt-menu-item-toggle="dropdown" data-kt-menu-item-trigger="click|lg:hover">
                    <div class="kt-menu-link gap-1.5 px-1" tabindex="0">
                    <span class="kt-menu-title text-nowrap text-sm text-foreground kt-menu-item-active:text-mono kt-menu-item-active:font-medium kt-menu-item-here:text-mono kt-menu-item-here:font-medium kt-menu-item-show:text-mono kt-menu-link-hover:text-mono">
                        Zone/Unit
                    </span>
                    <span class="kt-menu-arrow">
                        <i class="ki-filled ki-down text-xs text-muted-foreground">
                        </i>
                    </span>
                    </div>
                    <div class="kt-menu-dropdown kt-menu-default py-2 min-w-[220px] bg-white rounded-lg shadow-md">
                                    <!-- Header -->
                                

                                    <!-- Checkboxes -->
                                    <ul class="divide-y divide-gray-200">
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="zone-unit" type="checkbox" class="form-check-input w-4 h-4  border-gray-300 rounded focus:ring-0" checked>
                                            <label for="zone-unit" class="ms-2 text-gray-700 text-sm font-medium">Zone/Unit</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="punjab" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="punjab" class="ms-2 text-gray-700 text-sm font-medium">Punjab</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="kp" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="kp" class="ms-2 text-gray-700 text-sm font-medium">KP</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="ict" type="checkbox" class="form-check-input w-4 h-4  border-gray-300 rounded focus:ring-0" checked>
                                            <label for="ict" class="ms-2 text-gray-700 text-sm font-medium">ICT</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="gb" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="gb" class="ms-2 text-gray-700 text-sm font-medium">GB</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="balochistan" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="balochistan" class="ms-2 text-gray-700 text-sm font-medium">Balochistan</label>
                                        </li>
                                        <li class="flex items-center px-3 py-2 hover:bg-gray-100">
                                            <input id="ajk" type="checkbox" class="form-check-input w-4 h-4 border-gray-300 rounded focus:ring-0" checked>
                                            <label for="ajk" class="ms-2 text-gray-700 text-sm font-medium">AJK</label>
                                        </li>
                                    </ul>
                                </div>
                </div>          
                </div>
            </div>
            </div>
            
        </div>
        <!-- End of Container -->
        </div>
    </div>
<!-- End of Inner Navbar -->


    <!-- Container -->
    <div class="kt-container-fluid">
    <div class="grid gap-5 lg:gap-7.5">
        <!-- begin: grid -->
        <div class="grid lg:grid-cols-3 gap-5 lg:gap-7.5 items-stretch">
             <div class="lg:col-span-1">
         <div class="kt-card h-full">
            <div class="kt-card-header">
                <h3 class="kt-card-title">
                Highlights
                </h3>
            </div>
            <div class="kt-card-content flex flex-col gap-4 p-5 lg:p-7.5 lg:pt-4">
                <div class="flex flex-col gap-0.5">
                <span class="text-sm font-normal text-secondary-foreground">
                    All time sales
                </span>
                <div class="flex items-center gap-2.5">
                    <span class="text-3xl font-semibold text-mono">
                    $295.7k
                    </span>
                    <span class="kt-badge kt-badge-outline kt-badge-success kt-badge-sm">
                    +2.7%
                    </span>
                </div>
                </div>
                <div class="flex items-center gap-1 mb-1.5">
                <div class="bg-green-500 h-2 w-full max-w-[60%] rounded-xs">
                </div>
                <div class="bg-destructive h-2 w-full max-w-[25%] rounded-xs">
                </div>
                <div class="bg-violet-500 h-2 w-full max-w-[15%] rounded-xs">
                </div>
                </div>
                <div class="flex items-center flex-wrap gap-4 mb-1">
                <div class="flex items-center gap-1.5">
                    <span class="rounded-full size-2 kt-badge-success">
                    </span>
                    <span class="text-sm font-normal text-foreground">
                    Metronic
                    </span>
                </div>
                <div class="flex items-center gap-1.5">
                    <span class="rounded-full size-2 kt-badge-destructive">
                    </span>
                    <span class="text-sm font-normal text-foreground">
                    Bundle
                    </span>
                </div>
                <div class="flex items-center gap-1.5">
                    <span class="rounded-full size-2 kt-badge-info">
                    </span>
                    <span class="text-sm font-normal text-foreground">
                    MetronicNest
                    </span>
                </div>
                </div>
                <div class="border-b border-input">
                </div>
                <div class="grid gap-3">
                <div class="flex items-center justify-between flex-wrap gap-2">
                    <div class="flex items-center gap-1.5">
                    <i class="ki-filled ki-shop text-base text-muted-foreground">
                    </i>
                    <span class="text-sm font-normal text-mono">
                        Online Store
                    </span>
                    </div>
                    <div class="flex items-center text-sm font-medium text-foreground gap-6">
                    <span class="lg:text-right">
                        $172k
                    </span>
                    <span class="lg:text-right">
                        <i class="ki-filled ki-arrow-up text-green-500">
                        </i>
                        3.9%
                    </span>
                    </div>
                </div>
                <div class="flex items-center justify-between flex-wrap gap-2">
                    <div class="flex items-center gap-1.5">
                    <i class="ki-filled ki-facebook text-base text-muted-foreground">
                    </i>
                    <span class="text-sm font-normal text-mono">
                        Facebook
                    </span>
                    </div>
                    <div class="flex items-center text-sm font-medium text-foreground gap-6">
                    <span class="lg:text-right">
                        $85k
                    </span>
                    <span class="lg:text-right">
                        <i class="ki-filled ki-arrow-down text-destructive">
                        </i>
                        0.7%
                    </span>
                    </div>
                </div>
                <div class="flex items-center justify-between flex-wrap gap-2">
                    <div class="flex items-center gap-1.5">
                    <i class="ki-filled ki-instagram text-base text-muted-foreground">
                    </i>
                    <span class="text-sm font-normal text-mono">
                        Instagram
                    </span>
                    </div>
                    <div class="flex items-center text-sm font-medium text-foreground gap-6">
                    <span class="lg:text-right">
                        $36k
                    </span>
                    <span class="lg:text-right">
                        <i class="ki-filled ki-arrow-up text-green-500">
                        </i>
                        8.2%
                    </span>
                    </div>
                </div>
                <div class="flex items-center justify-between flex-wrap gap-2">
                    <div class="flex items-center gap-1.5">
                    <i class="ki-filled ki-google text-base text-muted-foreground">
                    </i>
                    <span class="text-sm font-normal text-mono">
                        Google
                    </span>
                    </div>
                    <div class="flex items-center text-sm font-medium text-foreground gap-6">
                    <span class="lg:text-right">
                        $26k
                    </span>
                    <span class="lg:text-right">
                        <i class="ki-filled ki-arrow-up text-green-500">
                        </i>
                        8.2%
                    </span>
                    </div>
                </div>
                <div class="flex items-center justify-between flex-wrap gap-2">
                    <div class="flex items-center gap-1.5">
                    <i class="ki-filled ki-shop text-base text-muted-foreground">
                    </i>
                    <span class="text-sm font-normal text-mono">
                        Retail
                    </span>
                    </div>
                    <div class="flex items-center text-sm font-medium text-foreground gap-6">
                    <span class="lg:text-right">
                        $7k
                    </span>
                    <span class="lg:text-right">
                        <i class="ki-filled ki-arrow-down text-destructive">
                        </i>
                        0.7%
                    </span>
                    </div>
                </div>
                </div>
            </div>
            </div>
            
        </div>
        <div class="lg:col-span-2">
            <div class="kt-card h-full">
            <div class="kt-card-content flex flex-col place-content-center gap-5">
                <div class="flex justify-center">
                <img alt="image" class="dark:hidden max-h-[180px]" src="{{ asset('assets/media/illustrations/32.svg') }}"/>
                <img alt="image" class="light:hidden max-h-[180px]" src="{{ asset('assets/media/illustrations/32-dark.svg') }}"/>
                </div>
                <div class="flex flex-col gap-4">
                <div class="flex flex-col gap-3 text-center">
                    <h2 class="text-xl font-semibold text-mono">
                    Swift Setup for New Teams
                    </h2>
                    <p class="text-sm font-medium text-secondary-foreground">
                    Enhance team formation and management with easy-to-use tools for communication,
                    <br/>
                    task organization, and progress tracking, all in one place.
                    </p>
                </div>
                <div class="flex justify-center">
                    <a class="kt-btn kt-btn-mono" href="#">
                    Create Team
                    </a>
                </div>
                </div>
            </div>
            </div>
        </div>
       
        </div>
        <!-- end: grid -->
    </div>
    </div>
    <!-- End of Container -->
@endsection

</rewritten_file>