@extends('admin.layouts.master')
@section('title')
{{ translate('Report') }}
@endsection
@php
    $countriesName=[];
    $countriesIncome=[];
    foreach ($reportCountryData as $key => $value) {
        $countriesName[] = $key;
        $countriesIncome[] = $value;
    }
    $countriesName = implode(',',$countriesName);
    $countriesIncome = implode(',',$countriesIncome);
    $monthlycurrnetYearincomevalues='0,0,0,0,0,0,0,0,0,0,0,0';
    $monthlyCurentYaerUserValues='0,0,0,0,0,0,0,0,0,0,0,0';

    $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

@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('Detailed 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.detail.pdf') }}" method="get">
                                            @foreach ($reportData as $country => $cities)
                                                @foreach ($cities as $city => $totalSum)
                                                    <input type="hidden" name="reportData[{{ $country }}][{{ $city }}]" value="{{ $totalSum }}">
                                                @endforeach
                                            @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>
                            </div>
                        {{-- </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">
                                    <input type="text" name="date" id="date" value="{{ old('date', session('detailreport.date')) }}" class="form-input border-slate-200 dark:border-zink-500" placeholder="Date">
                                </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('detailreport.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('detailreport.status')) == "1") selected @endif>Active</option>
                                        <option value="0" @if (old('status', session('detailreport.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('detailreport.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-12">
                                    <div id="basicBarDetailReport" 
                                         class="apex-charts" 
                                         data-chart-colors='["bg-custom-500"]' 
                                     
                                         dir="ltr">
                                    </div>
                                    <input type="hidden" id="countryDataName" value="{{$countriesName}}">
                                    <input type="hidden" id="countryIncome" value="{{$countriesIncome}}">
                                    <input type="hidden" id="currentYearforchart" value="{{$currentYear}}">
                                    <input type="hidden" id="lastYearforchart" value="{{$lastYear}}">
                                    <input type="hidden" id="monthlycurrnetYearincomevalues" value="{{$monthlycurrnetYearincomevalues}}">
                                    <input type="hidden" id="monthlyLastYearincomevalues" value="{{$monthlyCurentYaerUserValues}}">
                                </div>
                                
                            </div>

                            <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 class="text-left">
                                                <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">{{ translate('Country')}}</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('City')}}</th>
                                                <th class="px-3.5 py-2.5 font-semibold border-b border-slate-200 dark:border-zink-500">{{ translate('Sum')}}</th>

                                            </tr>
                                        </thead>
                                       
                                        <tbody>
                                            @php
                                                $a = 1;
                                            @endphp
                                            @foreach ($reportData as $country => $cities)
                                                @foreach ($cities as $city => $totalSum)
                                                    <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">{{ $a }}</td>
                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $country }}</td>
                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{ $city }}</td>
                                                        <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{formatCurrency($totalSum, $currency) }}</td>
                                                    </tr>
                                                    @php
                                                        $a++;
                                                    @endphp
                                                @endforeach
                                            @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.detail.sendpdf') }}" method="get">

                @foreach ($reportData as $country => $cities)
                    @foreach ($cities as $city => $totalSum)
                        <input type="hidden" name="reportData[{{ $country }}][{{ $city }}]" value="{{ $totalSum }}">
                    @endforeach
                @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>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


<script>
    // Initialize Flatpickr
    document.addEventListener('DOMContentLoaded', function() {
        const dateFormat = '{{ $general_setting['date_format'] }}'; // Get the selected date format

        flatpickr("#date", {
            dateFormat: dateFormat.replace('d', 'd').replace('m', 'm').replace('Y', 'Y'), // Adjust date format
            onChange: function(selectedDates, dateStr, instance) {
                // Optionally handle the change event
                calculateAge(); // Call your age calculation function
            }
        });
    });
</script>

<script>
    function printTable() {

        var tableContent = document.getElementById('table-to-print').outerHTML;

  
        var logo = `<center>
                        <img src="data:image/png;base64,{{ $logoData }}" alt="Logo">
                    </center>`;

        // Title for the print page
        var title = `<h1 style="text-align: center; font-size: 24px; margin-bottom: 20px;">Detailed Report</h1>`;

        // Create a new window for printing
        var printWindow = window.open('', '', 'height=600,width=800');

        // 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 logo, title, and the table content to the window
        printWindow.document.write('</head><body>');
        printWindow.document.write(logo);  // Add the logo
        printWindow.document.write(title); // Add the title
        printWindow.document.write(tableContent); // Add the table content
        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