@extends('../themes/' . $activeTheme . '/' . $activeLayout)

@section('subhead')
    <title>Dashboard | {{config('app.name')}}</title>
@endsection

@section('subcontent')
    <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 2xl:col-span-9">
            <div class="grid grid-cols-12 gap-6">
                <!-- BEGIN: General Report -->
                <div class="col-span-12 mt-8">
                    <div class="intro-y flex h-10 items-center">
                        <h2 class="mr-5 truncate text-lg font-medium">National Membership - {{$memberCount}}</h2>
                        <a class="ml-auto flex items-center text-primary" href="">
                            <x-base.lucide
                                class="mr-3 h-4 w-4"
                                icon="RefreshCcw"
                            /> Reload Data
                        </a>
                    </div>
                    <div class="mt-5 grid grid-cols-12 gap-6">
                        @foreach(['Main Wing', "Women's League", 'Youth League', 'War Veterans'] as $wingName)
                            <div class="intro-y col-span-12 sm:col-span-6 xl:col-span-3">
                                <div @class([
                'relative zoom-in',
                "before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-50 before:content-['']",
            ])>
                                    <div class="box p-5">
                                        <div class="flex">
                                            <x-base.lucide
                                                class="h-[28px] w-[50px] text-primary"
                                                icon="{{ $wingName === 'Main Wing' ? 'ShoppingCart' : ($wingName === "Women's League" ? 'CreditCard' : ($wingName === 'Youth League' ? 'Monitor' : 'User')) }}"
                                            />
                                            <div class="ml-auto">
                                                @php
                                                    $change = $wingStats[$wingName]['change'] ?? 0;
                                                    $isPositive = $change >= 0;
                                                    $changeClass = $isPositive ? 'bg-success' : 'bg-danger';
                                                    $changeIcon = $isPositive ? 'ChevronUp' : 'ChevronDown';
                                                    $changeText = $isPositive ? 'Higher' : 'Lower';
                                                @endphp
                                                <x-base.tippy
                                                    class="flex cursor-pointer items-center rounded-full {{ $changeClass }} py-[3px] pl-2 pr-1 text-xs font-medium text-white"
                                                    as="div"
                                                    content="{{ abs($change) }}% {{ $changeText }} than last month">
                                                    {{ abs($change) }}%
                                                    <x-base.lucide
                                                        class="ml-0.5 h-4 w-4"
                                                        icon="{{ $changeIcon }}"
                                                    />
                                                </x-base.tippy>
                                            </div>
                                        </div>
                                        <div class="mt-6 text-3xl font-medium leading-8">{{ $wingStats[$wingName]['count'] ?? 0 }}</div>
                                        <div class="mt-1 text-base text-slate-500">{{ $wingName }}</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                </div>
                <!-- END: General Report -->
                <!-- BEGIN: Sales Report -->
                <div class="col-span-12 mt-8 lg:col-span-12">
                    <div class="intro-y block h-10 items-center sm:flex">
                        <h2 class="mr-5 truncate text-lg font-medium">Members Report</h2>
                        <div class="relative mt-3 text-slate-500 sm:ml-auto sm:mt-0">

                        </div>
                    </div>
                    <div class="intro-y box mt-12 p-5 sm:mt-5">
                        <div @class([
                            'relative',
                            'before:content-[\'\'] before:block before:absolute before:w-16 before:left-0 before:top-0 before:bottom-0 before:ml-10 before:mb-7 before:bg-gradient-to-r before:from-white before:via-white/80 before:to-transparent before:dark:from-darkmode-600',
                            'after:content-[\'\'] after:block after:absolute after:w-16 after:right-0 after:top-0 after:bottom-0 after:mb-7 after:bg-gradient-to-l after:from-white after:via-white/80 after:to-transparent after:dark:from-darkmode-600',
                        ])>
                            <x-apex-chart
                                id="full-stacked-bar"
                                :series="$series"
                                :categories="$categories"
                                colors="#FF0000FF,#000000FF,#008000FF,#FFFF00FF"
                                class="h-96"
                            />

                        </div>
                    </div>
                </div>
                <!-- END: Sales Report -->
                <!-- BEGIN: Weekly Top Products -->
                <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">
                    <x-base.table class="-mt-2 border-separate border-spacing-y-[10px]">
                        <x-base.table.thead>
                            <x-base.table.tr>
                                <x-base.table.th class="whitespace-nowrap border-b-0">
                                    Province
                                </x-base.table.th>
                                @foreach($wings as $wing)
                                    <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
                                        {{ $wing }}
                                    </x-base.table.th>
                                @endforeach
                                <x-base.table.th class="whitespace-nowrap border-b-0 text-center">
                                    Total
                                </x-base.table.th>
                            </x-base.table.tr>
                        </x-base.table.thead>
                        <x-base.table.tbody>
                            @foreach($tableData as $row)
                                <x-base.table.tr class="intro-x">
                                    <x-base.table.td class="box rounded-l-none rounded-r-none border-x-0 shadow-[5px_3px_5px_#00000005] first:rounded-l-[0.6rem] first:border-l last:rounded-r-[0.6rem] last:border-r dark:bg-darkmode-600">
                                        {{ $row['province'] }}
                                    </x-base.table.td>
                                    @foreach($wings as $wing)
                                        <x-base.table.td class="box rounded-l-none rounded-r-none border-x-0 text-center shadow-[5px_3px_5px_#00000005] first:rounded-l-[0.6rem] first:border-l last:rounded-r-[0.6rem] last:border-r dark:bg-darkmode-600">
                                            {{ $row['counts'][$wing] ?? 0 }}
                                        </x-base.table.td>
                                    @endforeach
                                    <x-base.table.td class="box rounded-l-none rounded-r-none border-x-0 text-center shadow-[5px_3px_5px_#00000005] first:rounded-l-[0.6rem] first:border-l last:rounded-r-[0.6rem] last:border-r dark:bg-darkmode-600">
                                        {{ $row['total'] }}
                                    </x-base.table.td>
                                </x-base.table.tr>
                            @endforeach
                        </x-base.table.tbody>
                    </x-base.table>
                </div>
                <!-- END: Weekly Top Products -->
                <div class="bg-white shadow rounded-lg p-6 mx-auto col-span-12">
                    <div class="border-b border-gray-200 mb-4 pb-4">
                        <h5 class="text-2xl font-semibold text-gray-700">Membership by Province</h5>
                    </div>

                    <!-- Tabs Navigation -->
                    <ul class="flex flex-wrap border-b border-gray-300">
                        @foreach($provs as $index => $provinceName)
                            <li class="mr-2">
                                <a href="#{{ Str::slug($provinceName) }}"
                                   class="inline-block p-4 text-blue-600 border-b-2 border-transparent hover:border-blue-600 font-semibold transition {{ $index === 0 ? 'border-blue-600 text-blue-600' : '' }}"
                                   data-tab-target>{{ $provinceName }}
                                </a>
                            </li>
                        @endforeach
                    </ul>

                    <!-- Tab Content -->
                    <div class="pt-4">
                        @foreach($provData as $provinceName => $data)
                            <div id="{{ Str::slug($provinceName) }}" class="tab-content {{ $index === 0 ? '' : 'hidden' }} bg-gray-50 p-4 rounded-lg shadow-md">
                                <!-- Flex container with absolute spacing between table and chart -->
                                <div class="flex flex-col lg:flex-row space-y-6 lg:space-y-0 lg:space-x-12">

                                    <!-- Table Section - occupies half the width on larger screens -->
                                    <div class="w-full lg:w-1/2">
                                        <h5 class="text-xl font-semibold mb-4 text-gray-800">{{ $provinceName }} Membership Breakdown by Wing</h5>
                                        <table class="min-w-full bg-white border border-gray-200 shadow rounded-lg">
                                            <thead class="bg-gray-100 text-gray-700">
                                            <tr>
                                                <th class="px-6 py-3 border-b border-gray-200 text-left text-sm uppercase">Wing</th>
                                                <th class="px-6 py-3 border-b border-gray-200 text-left text-sm uppercase">Male</th>
                                                <th class="px-6 py-3 border-b border-gray-200 text-left text-sm uppercase">Female</th>
                                                <th class="px-6 py-3 border-b border-gray-200 text-left text-sm uppercase">Total</th>
                                            </tr>
                                            </thead>
                                            <tbody class="text-gray-600">
                                            @php $totalMale = 0; $totalFemale = 0; @endphp
                                            @foreach($data as $wing => $counts)
                                                <tr class="border-b border-gray-200 hover:bg-gray-100">
                                                    <td class="px-6 py-4">{{ $wing }}</td>
                                                    <td class="px-6 py-4">{{ $counts['Male'] }}</td>
                                                    <td class="px-6 py-4">{{ $counts['Female'] }}</td>
                                                    <td class="px-6 py-4">{{ $counts['Male'] + $counts['Female'] }}</td>
                                                </tr>
                                                @php
                                                    $totalMale += $counts['Male'];
                                                    $totalFemale += $counts['Female'];
                                                @endphp
                                            @endforeach
                                            <tr class="bg-gray-200 font-bold text-gray-700">
                                                <td class="px-6 py-4">Total Membership</td>
                                                <td class="px-6 py-4">{{ $totalMale }}</td>
                                                <td class="px-6 py-4">{{ $totalFemale }}</td>
                                                <td class="px-6 py-4">{{ $totalMale + $totalFemale }}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- Chart Section - occupies half the width on larger screens -->
                                    <div class="w-full lg:w-1/2">
                                        <h5 class="text-xl font-semibold mb-4 text-gray-800">Graphical Representation</h5>
                                        <div id="{{ Str::slug($provinceName) }}-chart" class="bg-white p-4 shadow rounded-lg"></div>
                                    </div>

                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@pushOnce('scripts')
    @vite('resources/js/pages/apex.js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @foreach($provData as $provinceName => $data)
            new ApexCharts(document.querySelector("#{{ Str::slug($provinceName) }}-chart"), {
                chart: { type: 'bar', height: 350 },
                series: [
                    { name: 'Male', data: [@foreach($data as $wing => $counts) {{ $counts['Male'] }}, @endforeach] },
                    { name: 'Female', data: [@foreach($data as $wing => $counts) {{ $counts['Female'] }}, @endforeach] }
                ],
                xaxis: { categories: [@foreach($data as $wing => $counts) '{{ $wing }}', @endforeach] },
                title: { text: '{{ $provinceName }} Membership by Gender', align: 'center' },
                colors: ["#FF0000FF", "#000000FF", "#008000FF", "#FFFF00FF"],
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '50%',
                        endingShape: 'rounded'
                    }
                },
                dataLabels: { enabled: false },
                legend: { position: 'top', horizontalAlign: 'center', floating: true, offsetY: -15, offsetX: -5 }
            }).render();
            @endforeach

            // Tab switching logic
            document.querySelectorAll('[data-tab-target]').forEach(tab => {
                tab.addEventListener('click', function(event) {
                    event.preventDefault();
                    document.querySelectorAll('.tab-content').forEach(content => content.classList.add('hidden'));
                    document.querySelector(this.getAttribute('href')).classList.remove('hidden');
                    document.querySelectorAll('[data-tab-target]').forEach(link => link.classList.remove('border-blue-600', 'text-blue-600'));
                    this.classList.add('border-blue-600', 'text-blue-600');
                });
            });

            // Set the first tab as active by default
            document.querySelectorAll('.tab-content')[0].classList.remove('hidden');
        });
    </script>
@endPushOnce