@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header class="mb-6">
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Welcome to Barangay Management System') }}
            </h2>
            <p class="mt-1 text-md text-gray-600">
                {{ __('Here you can manage your barangay operations efficiently and access all the necessary tools.') }}
            </p>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
            <div class="bg-main-dark text-main-light p-6 rounded-lg shadow-md relative">
                <h2 class="text-xl font-semibold">Resident Population</h2>
                <p class="mt-2">Total number of residents registered in the barangay.</p>
                <h2 class="mt-2 text-3xl">{{ $data['ResidentsPopulation'] }}</h2>
            </div>
            <div class="bg-red-500 text-main-light p-6 rounded-lg shadow-md relative">
                <h2 class="text-xl font-semibold">Documents Issued</h2>
                <p class="mt-2">Total number of documents issued.</p>
                <h2 class="mt-2 text-3xl">{{ $data['DocumentsIssued'] }}</h2>
            </div>
            <div class="bg-purple-500 text-main-light p-6 rounded-lg shadow-md relative">
                <h2 class="text-xl font-semibold">Borrows Approved</h2>
                <p class="mt-2">Total number of borrows approved.</p>
                <h2 class="mt-2 text-3xl">{{ $data['BorrowsApproved'] }}</h2>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
            <div class="bg-white rounded-lg shadow p-4">
                <h2 class="text-lg font-semibold mb-2">Gender Distribution</h2>
                <canvas id="GenderChart"></canvas>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <h2 class="text-lg font-semibold mb-2">Age Group Distribution</h2>
                <canvas id="AgeGroupChart"></canvas>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
            <div class="bg-white rounded-lg shadow p-4">
                <h2 class="text-lg font-semibold mb-2">Documents Filed</h2>
                <canvas id="documentsPieChart"></canvas>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <h2 class="text-lg font-semibold mb-2">Complaints Filed</h2>
                <canvas id="complaintsChart"></canvas>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <h2 class="text-lg font-semibold mb-2">Borrows Filed</h2>
                <canvas id="borrowsChart"></canvas>
            </div>
        </div>

        <div class="mt-6 w-full flex flex-row justify-center">
            <div class="bg-white rounded-lg shadow p-4 w-2/3 margin-auto">
                <h2 class="text-lg font-semibold mb-2">Documents Issued</h2>
                <canvas id="documentsChart"></canvas>
            </div>
        </div>


    </main>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const genderChartCtx = document.getElementById('GenderChart').getContext('2d');
        new Chart(genderChartCtx, {
            type: 'bar',
            data: {
                labels: ['Men', 'Women'],
                datasets: [{
                    label: 'Gender Distribution',
                    data: {!! json_encode($data['GenderChart']['data']) !!},
                    backgroundColor: ['#1E90FF', '#FF6347'],
                    borderColor: ['#1E90FF', '#FF6347'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const ageGroupChartCtx = document.getElementById('AgeGroupChart').getContext('2d');
        new Chart(ageGroupChartCtx, {
            type: 'bar',
            data: {
                labels: ['Children', 'Adults', 'Seniors'],
                datasets: [{
                    label: 'Age Group Distribution',
                    data: {!! json_encode($data['AgeChart']['data']) !!},
                    backgroundColor: ['#32CD32', '#FFD700', '#FF6347'],
                    borderColor: ['#32CD32', '#FFD700', '#FF6347'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const documentsChartCtx = document.getElementById('documentsChart').getContext('2d');
        new Chart(documentsChartCtx, {
            type: 'line',
            data: {
                labels: {!! json_encode($data['DocumentsChart']['labels']) !!},
                datasets: {!! json_encode($data['DocumentsChart']['datasets']) !!}
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const complaintsChartCtx = document.getElementById('complaintsChart').getContext('2d');
        new Chart(complaintsChartCtx, {
            type: 'pie',
            data: {
                labels: {!! json_encode($data['ComplaintsChart']['labels']) !!},
                datasets: [{
                    label: 'Complaints Distribution',
                    data: {!! json_encode($data['ComplaintsChart']['data']) !!},
                    backgroundColor: ['#32CD32', '#FFD700', '#FF6347'],
                    borderColor: ['#32CD32', '#FFD700', '#FF6347'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
            }
        });

        const borrowsChartCtx = document.getElementById('borrowsChart').getContext('2d');
        new Chart(borrowsChartCtx, {
            type: 'pie',
            data: {
                labels: {!! json_encode($data['BorrowsChart']['labels']) !!},
                datasets: [{
                    label: 'Borrows Distribution',
                    data: {!! json_encode($data['BorrowsChart']['data']) !!},
                    backgroundColor: ['#32CD32', '#FFD700', '#FF6347'],
                    borderColor: ['#32CD32', '#FFD700', '#FF6347'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
            }
        });

        const documentsPieChartCtx = document.getElementById('documentsPieChart').getContext('2d');
        new Chart(documentsPieChartCtx, {
            type: 'pie',
            data: {
                labels: {!! json_encode($data['BorrowsChart']['labels']) !!},
                datasets: [{
                    label: 'Borrows Distribution',
                    data: {!! json_encode($data['BorrowsChart']['data']) !!},
                    backgroundColor: ['#32CD32', '#FFD700', '#FF6347'],
                    borderColor: ['#32CD32', '#FFD700', '#FF6347'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
            }
        });
    </script>
@endsection