@extends('admin.layouts.master')
@section('title')
Report
@endsection

@section('content')
<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
    <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">
        <div class="grid grid-cols-1 gap-x-5 xl:grid-cols-12">
            <div class="xl:col-span-12">
                <div class="card" id="usersTable">
                    <div class="!py-3.5 mt-5 card-body border-y border-dashed border-slate-200 dark:border-zink-500">
                        <form action="#!">
                            <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
                                <div class="relative xl:col-span-2">
                                  <h4>Financial Data</h4>
                                </div><!--end col-->
                               
                                <div class="xl:col-span-5 xl:col-start-10">
                                    <div class="flex gap-2 xl:justify-end">
                                        <button class="flex items-center justify-center size-[37.5px] p-0 text-slate-500 active:text-white active:bg-slate-600 active:ring active:ring-slate-100 dark:bg-slate-500/20 dark:text-slate-400 dark:hover:bg-slate-500 dark:hover:text-white dark:focus:bg-slate-500 dark:focus:text-white dark:active:bg-slate-500 dark:active:text-white dark:ring-slate-400/20"><i data-lucide="refresh-cw" class="size-4"></i></button>
                                        <button class="flex items-center justify-center size-[37.5px] p-0 text-slate-500 active:text-white active:bg-slate-600 active:ring active:ring-slate-100 dark:bg-slate-500/20 dark:text-slate-400 dark:hover:bg-slate-500 dark:hover:text-white dark:focus:bg-slate-500 dark:focus:text-white dark:active:bg-slate-500 dark:active:text-white dark:ring-slate-400/20"><i data-lucide="mail" class="size-4"></i></button>
                                        <button class="flex items-center justify-center size-[37.5px] p-0 text-slate-500 active:text-white active:bg-slate-600 active:ring active:ring-slate-100 dark:bg-slate-500/20 dark:text-slate-400 dark:hover:bg-slate-500 dark:hover:text-white dark:focus:bg-slate-500 dark:focus:text-white dark:active:bg-slate-500 dark:active:text-white dark:ring-slate-400/20"><i data-lucide="upload" class="size-4"></i></button>
                                        <button class="flex items-center justify-center size-[37.5px] p-0 text-slate-500 active:text-white active:bg-slate-600 active:ring active:ring-slate-100 dark:bg-slate-500/20 dark:text-slate-400 dark:hover:bg-slate-500 dark:hover:text-white dark:focus:bg-slate-500 dark:focus:text-white dark:active:bg-slate-500 dark:active:text-white dark:ring-slate-400/20"><i data-lucide="printer" class="size-4"></i></button>
                                        <button class="flex items-center justify-center size-[37.5px] p-0 text-slate-500 active:text-white active:bg-slate-600 active:ring active:ring-slate-100 dark:bg-slate-500/20 dark:text-slate-400 dark:hover:bg-slate-500 dark:hover:text-white dark:focus:bg-slate-500 dark:focus:text-white dark:active:bg-slate-500 dark:active:text-white dark:ring-slate-400/20"><i data-lucide="download" class="size-4"></i></button>  
                                        
                                        <button class="flex items-center justify-center size-[37.5px] p-0 text-slate-500 active:text-white active:bg-slate-600 active:ring active:ring-slate-100 dark:bg-slate-500/20 dark:text-slate-400 dark:hover:bg-slate-500 dark:hover:text-white dark:focus:bg-slate-500 dark:focus:text-white dark:active:bg-slate-500 dark:active:text-white dark:ring-slate-400/20"><i data-lucide="settings" class="size-4"></i></button>
                                        <button class="flex items-center justify-center size-[37.5px] p-0 text-slate-500 active:text-white active:bg-slate-600 active:ring active:ring-slate-100 dark:bg-slate-500/20 dark:text-slate-400 dark:hover:bg-slate-500 dark:hover:text-white dark:focus:bg-slate-500 dark:focus:text-white dark:active:bg-slate-500 dark:active:text-white dark:ring-slate-400/20">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                        </button>
                                        <button class="flex items-center justify-center size-[37.5px] p-0 text-slate-500 active:text-white active:bg-slate-600 active:ring active:ring-slate-100 dark:bg-slate-500/20 dark:text-slate-400 dark:hover:bg-slate-500 dark:hover:text-white dark:focus:bg-slate-500 dark:focus:text-white dark:active:bg-slate-500 dark:active:text-white dark:ring-slate-400/20"><i data-lucide="chevron-up" class="size-4"></i></button>
                                    </div>
                                </div><!--end col-->
                            </div><!--end grid-->
                        </form>
                        
                    </div>
                    <div class="!py-3.5 card-body border-y border-dashed border-slate-200 dark:border-zink-500">
                        <form action="#!">
                            <div class="grid grid-cols-1 gap-2 xl:grid-cols-12">
                                <div class="xl:col-span-2">
                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                        <option selected>Closed</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                                <div class="xl:col-span-2">
                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                        <option selected>All Users</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                                <div class="xl:col-span-2">
                                    <input type="text" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" readonly="readonly" placeholder="Select Date">
                                </div>
                                <div class="xl:col-span-2">
                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                        <option selected>Priority</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                                <div class="xl:col-span-2">
                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                        <option selected>Status</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                                <div class="xl:col-span-2">
                                    <select class="form-select border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200">
                                        <option selected>Grouped</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div><!--end grid-->
                            
                        </form>
                    </div>
                    <div class="card-body">
                        <div class="-mx-5 -mb-5 overflow-x-auto">
                            <div class="grid grid-cols-1 gap-2 xl:grid-cols-12 gap-4 px-5">
                                <div class="xl:col-span-4">
                                    <div id="lineWithDataLabel" class="apex-charts" data-chart-colors='["bg-custom-500", "bg-green-500"]' dir="ltr"></div>
                                </div>

                                <div class="xl:col-span-4">
                                    <div id="GroupedChartReport" class="apex-charts" data-chart-colors='["bg-custom-500", "bg-green-500"]' dir="ltr"></div>
                                </div>

                                <div class="xl:col-span-4">
                                    <div id="stackedColumnChartReport" class="apex-charts" data-chart-colors='["bg-custom-500", "bg-orange-500", "bg-green-500", "bg-yellow-500"]' dir="ltr"></div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 gap-2 xl:grid-cols-12 gap-4 px-5">
                                <div class="xl:col-span-4">
                                    <table class="w-full">
                                        <thead>
                                            <tr>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500"></th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">2013</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">2014</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">verschill</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-zink-700 dark:even:bg-zink-600">
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">2024</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">11,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">$900,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">800,000</td>
                                            </tr>
                                            <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-zink-700 dark:even:bg-zink-600">
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">2024</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">11,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">$900,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">800,000</td>
                                            </tr>
                                            <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-zink-700 dark:even:bg-zink-600">
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">2024</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">11,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">$900,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">800,000</td>
                                            </tr>
                                            
                                        </tbody>
                                    </table>
                                </div>

                                <div class="xl:col-span-4">
                                    <table class="w-full">
                                        <thead>
                                            <tr>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500"></th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">2013</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">2014</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">verschill</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-zink-700 dark:even:bg-zink-600">
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">2024</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">11,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">$900,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">800,000</td>
                                            </tr>
                                            <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-zink-700 dark:even:bg-zink-600">
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">2024</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">11,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">$900,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">800,000</td>
                                            </tr>
                                            <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-zink-700 dark:even:bg-zink-600">
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">2024</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">11,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">$900,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">800,000</td>
                                            </tr>
                                            
                                        </tbody>
                                    </table>
                                </div>

                                <div class="xl:col-span-4">
                                    <table class="w-full">
                                        <thead>
                                            <tr>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500"></th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">2013</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">2014</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">verschill</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-zink-700 dark:even:bg-zink-600">
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">2024</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">11,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">$900,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">800,000</td>
                                            </tr>
                                            <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-zink-700 dark:even:bg-zink-600">
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">2024</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">11,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">$900,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">800,000</td>
                                            </tr>
                                            <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-zink-700 dark:even:bg-zink-600">
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">2024</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">11,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">$900,000</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">800,000</td>
                                            </tr>
                                            
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                       
                    </div>
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end grid-->

    </div>
    <!-- container-fluid -->
</div>
@endsection

@section('scripts')
<script src='{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}'></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>

<script src="{{asset('admin/assets/libs/apexcharts/apexcharts.min.js')}}"></script>
<script src="{{asset('admin/assets/js/pages/apexcharts-line.init.js')}}"></script>
<script src="{{asset('admin/assets/js/pages/apexcharts-bar.init.js')}}"></script>
<script src="{{asset('admin/assets/js/pages/apexcharts-column.init.js')}}"></script>
<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>

@endsection