@extends('layouts.dashboard')

@section('page-title', 'Dashboard')

@section('content')
    <!-- Statistics Cards -->
    <div class="stats-container">
        <div class="stats-card">
            <div class="stats-info">
                <h6>Todays New Data</h6>
                <h3>{{ $totalNewData }}</h3>

            </div>
            <div class="stats-icon-group">
                <span class="muni-badge" id="badgeBtn">...</span>
                <div class="dropdown-menu" id="dropdownMenu">
                    <ul>
                        @foreach ($municipalities as $muni)
                            <li>
                                <a href="#" class="dropdown-item muni-link"
                                    data-id="{{ $muni->id }}">{{ $muni->name }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="stats-icon icon-primary">
                    <i class="fas fa-file-alt"></i>
                </div>
            </div>
        </div>
        <div class="stats-card">
            <div class="stats-info">
                <h6>Total Data</h6>
                <h3>{{ $totalData }}</h3>
            </div>
            <div class="stats-icon icon-success">
                <i class="fas fa-file-alt"></i>
            </div>
        </div>
        {{-- <div class="stats-card">
            <div class="stats-info">
                <h6>Total Users</h6>
                <h3>1</h3>
            </div>
            <div class="stats-icon icon-success">
                <i class="fas fa-users"></i>
            </div>
        </div>

        <div class="stats-card">
            <div class="stats-info">
                <h6>Categories</h6>
                <h3>0</h3>
            </div>
            <div class="stats-icon icon-warning">
                <i class="fas fa-folder"></i>
            </div>
        </div> --}}

        <div class="stats-card">
            <div class="stats-info">
                <h6>Messages</h6>
                <h3>0</h3>
            </div>
            <div class="stats-icon icon-info">
                <i class="fas fa-envelope"></i>
            </div>
        </div>
    </div>

    <!-- Two Column Layout -->
    <div class="two-column-grid">
        {{-- <!-- Quick Actions -->
        <div class="content-card">
            <h5 class="card-title">Quick Actions</h5>

            <a href="{{ route('settings.index') }}" class="quick-link">
                <div class="d-flex align-items-center">
                    <i class="fas fa-cog text-primary quick-link-icon"></i>
                    <span class="quick-link-text">Site Settings</span>
                </div>
                <i class="fas fa-chevron-right quick-link-arrow"></i>
            </a>

            <a href="#" class="quick-link">
                <div class="d-flex align-items-center">
                    <i class="fas fa-file-alt text-success quick-link-icon"></i>
                    <span class="quick-link-text">Create Document</span>
                </div>
                <i class="fas fa-chevron-right quick-link-arrow"></i>
            </a>

            <a href="#" class="quick-link">
                <div class="d-flex align-items-center">
                    <i class="fas fa-user-plus text-info quick-link-icon"></i>
                    <span class="quick-link-text">Add User</span>
                </div>
                <i class="fas fa-chevron-right quick-link-arrow"></i>
            </a>

            <a href="/" target="_blank" class="quick-link">
                <div class="d-flex align-items-center">
                    <i class="fas fa-external-link-alt text-warning quick-link-icon"></i>
                    <span class="quick-link-text">View Site</span>
                </div>
                <i class="fas fa-chevron-right quick-link-arrow"></i>
            </a>
        </div> --}}

        <!-- Site Information -->
        <div class="content-card">
            <h5 class="card-title">Site Information</h5>

            <table class="site-info-table">
                <tbody>
                    <tr>
                        <th>Organization Name</th>
                        <td>{{ $settings['organization_name'] ?? 'कोशी प्रदेश' }}</td>
                    </tr>
                    <tr>
                        <th>Email</th>
                        <td>{{ $settings['email'] ?? 'info@koshimun.gov.np' }}</td>
                    </tr>
                    <tr>
                        <th>Phone</th>
                        <td>{{ $settings['phone'] ?? '014574921,014574922' }}</td>
                    </tr>
                    <tr>
                        <th>Address</th>
                        <td>{{ $settings['address'] ?? 'कोशी प्रदेश' }}</td>
                    </tr>
                </tbody>
            </table>

            <div class="mt-3 text-end">
                <a href="{{ route('settings.index') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-edit me-1"></i> Update Information
                </a>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const badgeBtn = document.getElementById('badgeBtn');
            const dropdownMenu = document.getElementById('dropdownMenu');
            if (badgeBtn && dropdownMenu) {
                badgeBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    dropdownMenu.style.display =
                        dropdownMenu.style.display === 'block' ? 'none' : 'block';
                });

                document.addEventListener('click', function() {
                    dropdownMenu.style.display = 'none';
                });
            }
            const muniLinks = document.querySelectorAll('.muni-link');
            muniLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const muniId = this.getAttribute('data-id');
                    badgeBtn.textContent = this.textContent;
                    badgeBtn.setAttribute('data-muni-id', muniId);
                    dropdownMenu.style.display = 'none';

                    fetch(`/dashboard?municipality_id=${muniId}`, {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {

                                document.querySelector('.stats-card h3').textContent = data
                                    .totalNewData;
                            } else {
                                console.error('Error fetching new data:', data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                });
            });
        });
    </script>
@endpush