@php
$generalSetting = App\Models\GeneralSetting::first();
$logoPath = public_path('admin/Image/AppSettings/Logo/' . $generalSetting->system_logo);
$logoData = base64_encode(file_get_contents($logoPath));
$logoSrc = 'data:image/' . pathinfo($logoPath, PATHINFO_EXTENSION) . ';base64,' . $logoData;


    $monthlyLastYearUser_graph=[];
    $monthlyCurentYaerUser_graph=[];
    foreach ($monthlyLastYearUserCounts as $key => $value) {
        $monthlyLastYearUser_graph[] = $value;
    }
    $monthlyLastYearUservalues = implode(',',$monthlyLastYearUser_graph);


    foreach ($monthlyCurentYaerUserCounts as $key => $val) {       
        $monthlyCurentYaerUser_graph[] = $val;
    }


    $monthlyCurentYaerUserValues = implode(',',$monthlyCurentYaerUser_graph);




    $monthlyLastYearincome_graph=[];
    $monthlyCurentYaerIncome_graph=[];
    foreach ($lastYearIncomeByMonth as $key => $value) {
        $monthlyLastYearincome_graph[] = $value;
    }
    $monthlyLastYearincomevalues = implode(',',$monthlyLastYearincome_graph);

    foreach ($currentYearIncomeByMonth as $key => $value) {
        $monthlyCurentYaerIncome_graph[] = $value;
    }
    $monthlycurrnetYearincomevalues = implode(',',$monthlyCurentYaerIncome_graph);



@endphp
@extends('admin.layouts.master')
@section('title')
{{ translate('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>{{ translate('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 id="refreshButton" type="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>  
                                        
                                        


                                        <form action="{{ route('admin.download.financial.pdf') }}" method="get">

                                        <input type="hidden" name="lastYear" value="{{ $lastYear }}">
                                        <input type="hidden" name="currentYear" value="{{ $currentYear }}">
                                        <input type="hidden" name="lastYearUsers" value="{{ $lastYearUsers }}">
                                        <input type="hidden" name="currentYearUsers" value="{{ $currentYearUsers }}">
                                        <input type="hidden" name="userDifference" value="{{ $userDifference }}">
                                        <input type="hidden" name="lastYearIncome" value="{{ $lastYearIncome }}">
                                        <input type="hidden" name="currentYearIncome" value="{{ $currentYearIncome }}">
                                        <input type="hidden" name="incomeDifference" value="{{ $incomeDifference }}">
                                        <input type="hidden" name="lastYearMaleUsers" value="{{ $lastYearMaleUsers }}">
                                        <input type="hidden" name="currentYearMaleUsers" value="{{ $currentYearMaleUsers }}">
                                        <input type="hidden" name="differenceMale" value="{{ $differenceMale }}">
                                        <input type="hidden" name="lastYearFemaleUsers" value="{{ $lastYearFemaleUsers }}">
                                        <input type="hidden" name="currentYearFemaleUsers" value="{{ $currentYearFemaleUsers }}">
                                        <input type="hidden" name="differenceFemale" value="{{ $differenceFemale }}">

                                        <button type="submit" 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">
                                            <i data-lucide="download" class="size-4"></i>
                                        </button>
                                    </form>

                                    <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" onclick="printTable()">
                                        <i data-lucide="printer" class="size-4"></i>
                                    </button>




                        
                                        <a data-modal-target="addModal" id="sendEmailButton" 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">
                                            <i data-lucide="mail" class="size-4"></i>
                                        </a>
                                   



                                    </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">
                               
                                @if ($relationStatus->status == 1)
                                <div class="xl:col-span-2">
                                    <select name="relation_status_id" class="form-select border-slate-200 dark:border-zink-500">
                                        <option value="" selected>{{ translate('Relation Status') }}</option>
                                        @foreach($relationStatus->metas as $status)
                                            <option value="{{ $status->id }}" 
                                                @if (old('relation_status_id', session('financialreport.relation_status_id')) == $status->id) selected @endif>
                                                {{ $status->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @endif
                                <div class="xl:col-span-2">
                                    <select name="status" class="form-select border-slate-200 dark:border-zink-500">
                                        <option value="" selected>{{ translate('Status') }}</option>
                                        <option value="1" @if (old('status', session('financialreport.status')) == "1") selected @endif>Active</option>
                                        <option value="0" @if (old('status', session('financialreport.status')) == "0") selected @endif>Inactive</option>
                                    </select>
                                </div>
                                <div class="xl:col-span-2">
                                    <select name="country_id" id="country_id" class="form-select border-slate-200 dark:border-zink-500">
                                        <option value="" selected>Country</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->id }}" 
                                                @if (old('country_id', session('financialreport.country_id')) == $country->id) selected @endif>
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <button type="submit" class="text-white btn bg-slate-900 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Submit</button>
                            </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>
                                    <input type="hidden" id="currentYearforchart" value="{{$currentYear}}">
                                    <input type="hidden" id="lastYearforchart" value="{{$lastYear}}">
                                    <input type="hidden" id="currentYearUsersforchart" value="{{$currentYearUsers}}">
                                    <input type="hidden" id="lastYearUsersforchart" value="{{$lastYearUsers}}">
                                    <input type="hidden" id="monthlyCurentYaerUserValues" value="{{$monthlyCurentYaerUserValues}}">
                                    <input type="hidden" id="monthlyLastYearUservalues" value="{{$monthlyLastYearUservalues}}">
                                </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>
                                    <input type="hidden" id="monthlycurrnetYearincomevalues" value="{{$monthlycurrnetYearincomevalues}}">
                                    <input type="hidden" id="monthlyLastYearincomevalues" value="{{$monthlyLastYearincomevalues}}">
                                </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>
                                    <input type="hidden" id="currentYearforchart_graph" value="{{$currentYear}}">
                                    <input type="hidden" id="lastYearforchart_graph" value="{{$lastYear}}">
                                    <input type="hidden" id="currentYearMaleUsers_graph" value="{{$currentYearMaleUsers}}">
                                    <input type="hidden" id="lastYearMaleUsers_graph" value="{{$lastYearMaleUsers}}">
                                    <input type="hidden" id="currentYearFemaleUsers_graph" value="{{$currentYearFemaleUsers}}">
                                    <input type="hidden" id="lastYearFemaleUsers_graph" value="{{$lastYearFemaleUsers}}">
                                
                                </div>
                            </div>


                           

                            <div id="printable-content" 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">{{$lastYear}}</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{$currentYear}}</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Difference</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">Members Signup</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$lastYearUsers}}</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$currentYearUsers}}</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$userDifference}}</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">{{$lastYear}}</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{$currentYear}}</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Difference</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">Income</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{formatCurrency($lastYearIncome, $currency) }}</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{formatCurrency($currentYearIncome, $currency) }}</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{formatCurrency($incomeDifference, $currency) }}</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">{{$lastYear}}</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{$currentYear}}</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Difference</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">Male</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$lastYearMaleUsers}}</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$currentYearMaleUsers}}</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$differenceMale}}</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">Female</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$lastYearFemaleUsers}}</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$currentYearFemaleUsers}}</td>
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$differenceFemale}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>


                    </div>
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end grid-->

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

<div id="addModal" modal-center class="fixed flex flex-col hidden transition-all duration-300 ease-in-out left-2/4 z-drawer -translate-x-2/4 -translate-y-2/4 show ">
    <div class="w-screen md:w-[30rem] bg-white shadow rounded-md dark:bg-zink-600">
        <div class="flex items-center justify-between p-4 border-b dark:border-zink-500">
            <h5 class="text-16" id="modalTitle">{{ translate('Send Mail') }}</h5>
            <button data-modal-close="addModal" class="transition-all duration-200 ease-linear text-slate-400 hover:text-red-500"><i data-lucide="x" class="w-5 h-5"></i></button>
        </div>
        <div class="max-h-[calc(theme('height.screen')_-_180px)] p-4 overflow-y-auto">
            <form action="{{ route('admin.download.financial.sendpdf') }}" method="get">

                <input type="hidden" name="lastYear" value="{{ $lastYear }}">
                <input type="hidden" name="currentYear" value="{{ $currentYear }}">
                <input type="hidden" name="lastYearUsers" value="{{ $lastYearUsers }}">
                <input type="hidden" name="currentYearUsers" value="{{ $currentYearUsers }}">
                <input type="hidden" name="userDifference" value="{{ $userDifference }}">
                <input type="hidden" name="lastYearIncome" value="{{ $lastYearIncome }}">
                <input type="hidden" name="currentYearIncome" value="{{ $currentYearIncome }}">
                <input type="hidden" name="incomeDifference" value="{{ $incomeDifference }}">
                <input type="hidden" name="lastYearMaleUsers" value="{{ $lastYearMaleUsers }}">
                <input type="hidden" name="currentYearMaleUsers" value="{{ $currentYearMaleUsers }}">
                <input type="hidden" name="differenceMale" value="{{ $differenceMale }}">
                <input type="hidden" name="lastYearFemaleUsers" value="{{ $lastYearFemaleUsers }}">
                <input type="hidden" name="currentYearFemaleUsers" value="{{ $currentYearFemaleUsers }}">
                <input type="hidden" name="differenceFemale" value="{{ $differenceFemale }}">

                @csrf
               

                <div class="grid grid-cols-1 gap-4">
                    <div class="xl:col-span-12">
                        <label for="orderId" class="inline-block mb-2 text-base font-medium">Email</label>
                        <input type="text" name="email" id="email" class="form-input border-slate-200 dark:border-zink-500" placeholder="Enter email address" required>
                         @error('email')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                         @enderror
                    </div>
                </div>

                <div class="flex justify-end gap-2 mt-4">
                    <button type="reset" data-modal-close="addModal" class="text-red-500 bg-white btn">{{ translate('Cancel') }}</button>
                    <button type="submit" class="text-white btn bg-custom-500">Send</button>
                </div>
            </form>
        </div>
    </div>
</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>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
    $('#country_id').select2();
});
</script>

<style>
    .select2-container--default .select2-selection--single {
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        font-size: 14px;
        line-height: normal;
    }

    .select2-container .select2-dropdown {
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #ccc;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 20px;
    }
</style>

<script>
    document.getElementById('refreshButton').addEventListener('click', function () {
        location.reload(); 
    });
</script>


<script>
    function printTable() {
    const content = document.getElementById('printable-content').outerHTML;
    const logo = `<center><img src="data:image/png;base64,{{ $logoData }}" alt="Logo" class="logo"></center><br>`;
    const header = `
        <html>
        <head>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    margin: 20px;
                    text-align: center;
                }
                table {
                    width: 100%;
                    border-collapse: collapse;
                    margin-top: 20px;
                }
                th, td {
                    padding: 8px;
                    border: 1px solid #ddd;
                    text-align: left;
                }
                th {
                    background-color: #f4f4f4;
                }
                h1 {
                    font-size: 24px;
                    margin-bottom: 20px;
                }
            </style>
        </head>
        <body>
            ${logo}
            <h1>Financial Report</h1>
            <table>
                <thead>
                    <tr>
                        <th>Category</th>
                        <th>{{ $lastYear }}</th>
                        <th>{{ $currentYear }}</th>
                        <th>Difference</th>
                    </tr>
                </thead>
                <tbody>
    `;
    const footer = `
                </tbody>
            </table>
        </body>
        </html>
    `;

    const printWindow = window.open('', '', 'height=800,width=1200');
    printWindow.document.write(header + content + footer);
    printWindow.document.close();
    printWindow.print();
}
</script>



<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    @if(session('success'))
        Swal.fire({
            title: 'Success!',
            text: '{{ session('success') }}',
            icon: 'success',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK'
        });
    @endif

    @if(session('error'))
        Swal.fire({
            title: 'Error!',
            text: '{{ session('error') }}',
            icon: 'error',
            confirmButtonColor: '#d33',
            confirmButtonText: 'OK'
        });
    @endif
</script>



@endsection