@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('Income Report') }}</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.customer_payments.pdf') }}" method="get">
                                            @foreach ($customerPayments as $customerPayment)
                                                <input type="hidden" name="customerPayments[{{ $loop->index }}][total_customers]" value="{{ $customerPayment['total_customers'] }}">
                                                
                                                @foreach ($customerPayment['monthly_sums'] as $index => $monthlypayment)
                                                    <input type="hidden" name="customerPayments[{{ $loop->parent->index }}][monthly_sums][{{ $index }}]" value="{{ $monthlypayment }}">
                                                @endforeach
                                                
                                                <input type="hidden" name="customerPayments[{{ $loop->index }}][yearly_total]" value="{{ $customerPayment['yearly_total'] }}">
                                            @endforeach
                                            
                                            <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">
                                <div class="xl:col-span-2">
                                    <select name="year" class="form-select border-slate-200 dark:border-zink-500">
                                        <option value="" selected>Select Year</option>
                                        @php
                                            $currentYear = date('Y');
                                        @endphp
                                        @for ($year = $currentYear; $year >= $currentYear - 10; $year--)
                                            <option value="{{ $year }}" {{ request('year') == $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                                
                                @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('memberimcomereport.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('memberimcomereport.status')) == "1") selected @endif>Active</option>
                                        <option value="0" @if (old('status', session('memberimcomereport.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('memberimcomereport.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>

                        </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-12">
                                    <table class="w-full" id="table-to-print" >
                                        <thead>
                                            <tr>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Customers</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Jan</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Feb</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">March</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">April</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">May</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">June</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">July</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Aug</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Sept</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Oct</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Nov</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Dec</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            @foreach ($customerPayments as $customerPayment)
                                            <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">Total {{$customerPayment['total_customers']}}</td>
                                                @foreach ($customerPayment['monthly_sums'] as $monthlypayment) 
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{formatCurrency($monthlypayment, $currency) }}</td>
                                                @endforeach
                                                
                                                <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{formatCurrency($customerPayment['yearly_total'], $currency) }}</td>
                                            </tr>
                                            @endforeach
                                        </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.income.sendpdf') }}" method="get">

                @foreach ($customerPayments as $customerPayment)
                <input type="hidden" name="customerPayments[{{ $loop->index }}][total_customers]" value="{{ $customerPayment['total_customers'] }}">
                
                @foreach ($customerPayment['monthly_sums'] as $index => $monthlypayment)
                    <input type="hidden" name="customerPayments[{{ $loop->parent->index }}][monthly_sums][{{ $index }}]" value="{{ $monthlypayment }}">
                @endforeach
                
                <input type="hidden" name="customerPayments[{{ $loop->index }}][yearly_total]" value="{{ $customerPayment['yearly_total'] }}">
                @endforeach

                @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() {
        // Get the content of the table
        var tableContent = document.getElementById('table-to-print').outerHTML;
        
        // Create a new window for printing
        var printWindow = window.open('', '', 'height=600,width=800');
        
        // Add your logo image as a base64 string or URL
        @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;
        @endphp
        
        // Write the content to the new window
        printWindow.document.write('<html><head><title>Print Table</title>');
        
        // Add styles to maintain table design and borders during print
        printWindow.document.write('<style>');
        printWindow.document.write('body { font-family: Arial, sans-serif; margin: 20px; text-align: center; }'); // Center the content
        printWindow.document.write('table { width: 100%; border-collapse: collapse; margin-top: 20px; }');
        printWindow.document.write('th, td { padding: 8px; border: 1px solid #ddd; text-align: left; }');
        printWindow.document.write('th { background-color: #f4f4f4; }');
        printWindow.document.write('h1 { font-size: 24px; margin-bottom: 20px; }'); // Title styling
        printWindow.document.write('@media print { body * { visibility: hidden; } }');
        printWindow.document.write('@media print { #table-to-print, #table-to-print * { visibility: visible; } }');
        printWindow.document.write('@media print { #table-to-print { position: absolute; left: 0; top: 0; } }');
        printWindow.document.write('</style>');
        
        // Write the title, logo, and the table content to the window
        printWindow.document.write('</head><body>');
        printWindow.document.write('<center><img src="data:image/png;base64,{{ $logoData }}" alt="Logo" class="logo" style="max-width: 200px;"></center>'); // Logo added here
        printWindow.document.write('<h1>Income Report</h1>');  // Title added here
        printWindow.document.write(tableContent);
        printWindow.document.write('</body></html>');
        
        // Close the document to trigger the print dialog
        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