@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 view the services and information provided by the barangay.') }}
        </p>
    </header>

    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-main-dark text-main-light p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Barangay Officials</h2>
            <p class="mt-2">View information about barangay officials serving your community.</p>
            <a href="{{route('officials.index')}}" class="text-blue-200 hover:underline mt-4 block">Learn More</a>
        </div>
        <div class="bg-green-500 text-main-light p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Document Processing</h2>
            <p class="mt-2">Apply for permits and request documents conveniently.</p>
            <a href="{{route('certificate-request.index')}}" class="text-green-200 hover:underline mt-4 block">Learn More</a>
        </div>
        <div class="bg-yellow-500 text-main-light p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Community Announcements</h2>
            <p class="mt-2">Stay updated with the latest announcements and events in the barangay.</p>
            <a href="{{route('announcements.index')}}" class="text-yellow-200 hover:underline mt-4 block">Learn More</a>
        </div>
        <div class="bg-purple-500 text-main-light p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Direct Messaging</h2>
            <p class="mt-2">Send messages to barangay officials for your concerns or questions.</p>
            <a href="{{route('messages.index')}}" class="text-purple-200 hover:underline mt-4 block">Learn More</a>
        </div>
        <div class="bg-red-500 text-main-light p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">File a Complaint</h2>
            <p class="mt-2">Submit a complaint to address issues in your community.</p>
            <a href="{{route('complains.index')}}" class="text-red-200 hover:underline mt-4 block">Learn More</a>
        </div>
        <div class="bg-gray-500 text-main-light p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Borrow an Item</h2>
            <p class="mt-2">Request to borrow equipment or items provided by the barangay.</p>
            <a href="{{route('borrows.index')}}" class="text-teal-200 hover:underline mt-4 block">Learn More</a>
        </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>
</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
                    }
                }
            }
        });
    </script>
@endsection