@extends('layouts.app')

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

@section('content')
<!-- Welcome Banner -->
<div class="row align-items-center mb-4">
    <div class="col-auto">
        <span class="avatar avatar-lg rounded-circle" style="background-image: url({{ auth()->user()->avatar ?? 'https://www.gravatar.com/avatar/'.md5(strtolower(trim(auth()->user()->email))).'?d=mp' }})"></span>
    </div>
    <div class="col">
        <h1 class="text-white fw-bold mb-1">Welcome back, {{ auth()->user()->name }}!</h1>
        <p class="text-muted mb-0">Here is a quick overview of your organization today.</p>
    </div>
    <div class="col-auto ms-auto">
        <div class="btn-list">
            @can('employees.create')
            <a href="{{ route('employees.create') }}" class="btn btn-primary">
                <i class="ti ti-user-plus me-1"></i> Add Employee
            </a>
            @endcan
        </div>
    </div>
</div>

<!-- Stats Widgets -->
<div class="row row-cards mb-4">
    <div class="col-sm-6 col-lg-3">
        <div class="card card-sm">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <span class="bg-primary text-white avatar">
                            <i class="ti ti-users fs-2"></i>
                        </span>
                    </div>
                    <div class="col">
                        <div class="font-weight-medium text-white">{{ $stats['total_employees'] }}</div>
                        <div class="text-muted">Total Employees</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="card card-sm">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <span class="bg-green text-white avatar">
                            <i class="ti ti-calendar-event fs-2"></i>
                        </span>
                    </div>
                    <div class="col">
                        <div class="font-weight-medium text-white">{{ $stats['on_leave_today'] }}</div>
                        <div class="text-muted">On Leave Today</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="card card-sm">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <span class="bg-yellow text-white avatar">
                            <i class="ti ti-clock fs-2"></i>
                        </span>
                    </div>
                    <div class="col">
                        <div class="font-weight-medium text-white">{{ $stats['pending_leaves'] }}</div>
                        <div class="text-muted">Pending Leaves</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <a href="{{ route('payroll.loans.index', ['status' => 'pending']) }}" class="card card-sm text-decoration-none">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <span class="bg-azure text-white avatar">
                            <i class="ti ti-cash fs-2"></i>
                        </span>
                    </div>
                    <div class="col">
                        <div class="font-weight-medium text-white">{{ $stats['pending_loans'] }}</div>
                        <div class="text-muted">Pending Loans</div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

<!-- Compliance Score Widget -->
<div class="row row-cards mb-4">
    <div class="col-12">
        <div class="card bg-dark-lt border-secondary">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="card-title text-white mb-2">Workforce Compliance Health</h3>
                        <div class="d-flex align-items-center mb-1">
                            <div class="h1 mb-0 text-white fw-bold me-2">{{ $stats['compliance_score'] }}%</div>
                            <span class="badge bg-{{ $stats['compliance_score'] >= 90 ? 'success' : ($stats['compliance_score'] >= 75 ? 'warning' : 'danger') }}-lt">
                                {{ $stats['compliance_score'] >= 90 ? 'Excellent' : ($stats['compliance_score'] >= 75 ? 'Fair' : 'Critical') }}
                            </span>
                        </div>
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-{{ $stats['compliance_score'] >= 90 ? 'success' : ($stats['compliance_score'] >= 75 ? 'warning' : 'danger') }}" style="width: {{ $stats['compliance_score'] }}%" role="progressbar" aria-valuenow="{{ $stats['compliance_score'] }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ $stats['compliance_score'] }}% Compliant"></div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="btn-list">
                            <span class="btn btn-dark btn-sm text-muted cursor-default border-secondary">
                                <i class="ti ti-circle-check text-success me-1"></i> {{ $stats['valid_documents'] }} Valid
                            </span>
                            <span class="btn btn-dark btn-sm text-muted cursor-default border-secondary">
                                <i class="ti ti-alert-triangle text-danger me-1"></i> {{ $stats['expired_documents'] }} Expired
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if($expiredCompanyDocs->isNotEmpty() || $expiredEmployeeDocs->isNotEmpty() || count($expiredEmployeeCoreDocs) > 0)
<!-- Document Expiry Alerts -->
<div class="row row-cards mb-4">
    <div class="col-12">
        <div class="card border-danger shadow-sm">
            <div class="card-header bg-danger-lt py-3">
                <h3 class="card-title text-white fw-bold d-flex align-items-center mb-0">
                    <i class="ti ti-alert-triangle text-danger me-2 fs-2"></i> Compliance & Document Expiry Warnings
                </h3>
                <span class="badge bg-danger ms-auto">{{ $expiredCompanyDocs->count() + $expiredEmployeeDocs->count() + count($expiredEmployeeCoreDocs) }} Alerts</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 320px; overflow-y: auto;">
                    <table class="table table-vcenter table-mobile-md card-table bg-transparent">
                        <thead>
                            <tr>
                                <th>Category</th>
                                <th>Subject</th>
                                <th>Document / Field</th>
                                <th>Expiry Date</th>
                                <th>Days Remaining</th>
                                <th>Status</th>
                                <th class="w-1">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Company Document Alerts -->
                            @foreach($expiredCompanyDocs as $doc)
                                @php
                                    $isExpired = $doc->expiry_date->isPast();
                                    $daysLeft = $isExpired ? 0 : now()->startOfDay()->diffInDays($doc->expiry_date->startOfDay());
                                @endphp
                                <tr class="bg-dark-lt">
                                    <td>
                                        <span class="badge bg-purple-lt"><i class="ti ti-building me-1"></i> Company</span>
                                    </td>
                                    <td class="font-weight-medium text-white">{{ $doc->company->name }}</td>
                                    <td class="text-white-50">{{ $doc->document_name }}</td>
                                    <td class="{{ $isExpired ? 'text-danger fw-bold' : 'text-warning' }}">
                                        {{ $doc->expiry_date->format('d-M-Y') }}
                                    </td>
                                    <td class="{{ $isExpired ? 'text-danger fw-bold' : 'text-warning' }}">
                                        {{ $isExpired ? 'Expired' : $daysLeft . ' days' }}
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $isExpired ? 'danger' : 'warning' }}-lt">{{ $isExpired ? 'Expired' : 'Expiring Soon' }}</span>
                                    </td>
                                    <td>
                                        <a href="{{ route('companies.show', $doc->company->id) }}" class="btn btn-sm btn-outline-danger">Resolve</a>
                                    </td>
                                </tr>
                            @endforeach

                            <!-- Employee Compliance File Alerts -->
                            @foreach($expiredEmployeeDocs as $doc)
                                @php
                                    $isExpired = $doc->expiry_date->isPast();
                                    $daysLeft = $isExpired ? 0 : now()->startOfDay()->diffInDays($doc->expiry_date->startOfDay());
                                @endphp
                                <tr>
                                    <td>
                                        <span class="badge bg-azure-lt"><i class="ti ti-user me-1"></i> Employee File</span>
                                    </td>
                                    <td class="font-weight-medium text-white">
                                        <a href="{{ route('employees.show', $doc->employee->id) }}" class="text-white">{{ $doc->employee->fullName }}</a>
                                    </td>
                                    <td class="text-muted">{{ $doc->documentType->name }}</td>
                                    <td class="{{ $isExpired ? 'text-danger fw-bold' : 'text-warning' }}">
                                        {{ $doc->expiry_date->format('d-M-Y') }}
                                    </td>
                                    <td class="{{ $isExpired ? 'text-danger fw-bold' : 'text-warning' }}">
                                        {{ $isExpired ? 'Expired' : $daysLeft . ' days' }}
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $isExpired ? 'danger' : 'warning' }}-lt">{{ $isExpired ? 'Expired' : 'Expiring Soon' }}</span>
                                    </td>
                                    <td>
                                        <a href="{{ route('employees.show', $doc->employee->id) }}#tab-documents" class="btn btn-sm btn-outline-danger">Resolve</a>
                                    </td>
                                </tr>
                            @endforeach

                            <!-- Employee Core Field Alerts -->
                            @foreach($expiredEmployeeCoreDocs as $doc)
                                <tr>
                                    <td>
                                        <span class="badge bg-cyan-lt"><i class="ti ti-id me-1"></i> Employee Profile</span>
                                    </td>
                                    <td class="font-weight-medium text-white">
                                        <a href="{{ route('employees.show', $doc['employee_id']) }}" class="text-white">{{ $doc['employee_name'] }}</a>
                                    </td>
                                    <td class="text-muted">{{ $doc['document_type'] }}</td>
                                    <td class="{{ $doc['is_expired'] ? 'text-danger fw-bold' : 'text-warning' }}">
                                        {{ $doc['expiry_date']->format('d-M-Y') }}
                                    </td>
                                    <td class="{{ $doc['is_expired'] ? 'text-danger fw-bold' : 'text-warning' }}">
                                        {{ $doc['is_expired'] ? 'Expired' : $doc['days_left'] . ' days' }}
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $doc['is_expired'] ? 'danger' : 'warning' }}-lt">{{ $doc['is_expired'] ? 'Expired' : 'Expiring Soon' }}</span>
                                    </td>
                                    <td>
                                        <a href="{{ route('employees.edit', $doc['employee_id']) }}" class="btn btn-sm btn-outline-danger">Update</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Dashboard Charts -->
<div class="row row-cards mb-4">
    <div class="col-lg-8">
        <div class="card" style="min-height: 330px;">
            <div class="card-header">
                <h3 class="card-title text-white">Department Headcount</h3>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
                <div id="chart-department-headcount" style="min-height: 250px;"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card" style="min-height: 330px;">
            <div class="card-header">
                <h3 class="card-title text-white">Approved Leaves by Type</h3>
            </div>
            <div class="card-body d-flex flex-column justify-content-center">
                <div id="chart-leave-distribution" style="min-height: 250px;"></div>
            </div>
        </div>
    </div>
</div>

<div class="row row-cards">
    <!-- Announcements & Birthdays -->
    <div class="col-lg-8">
        <div class="card mb-4" style="min-height: 300px;">
            <div class="card-header">
                <h3 class="card-title text-white">Company Announcements</h3>
            </div>
            <div class="card-body">
                @if($announcements->isEmpty())
                    <div class="text-center py-5">
                        <i class="ti ti-speakerphone text-muted fs-1 mb-2"></i>
                        <p class="text-muted mb-0">No active announcements at the moment.</p>
                    </div>
                @else
                    <div class="list-group list-group-flush">
                        @foreach($announcements as $announcement)
                            <div class="list-group-item bg-transparent px-0 border-secondary">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h4 class="text-white mb-1">{{ $announcement->title }}</h4>
                                        <p class="text-muted mb-0 small">{{ $announcement->content }}</p>
                                        <span class="text-muted-50 small fs-6">{{ $announcement->published_at ? $announcement->published_at->format('d-M-Y H:i') : $announcement->created_at->format('d-M-Y H:i') }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title text-white">Recently Joined Employees</h3>
            </div>
            <div class="table-responsive">
                <table class="table table-vcenter card-table bg-transparent">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Department</th>
                            <th>Designation</th>
                            <th>Joining Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($recentEmployees->isEmpty())
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">No employees registered yet.</td>
                            </tr>
                        @else
                            @foreach($recentEmployees as $employee)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="avatar avatar-sm me-2" style="background-image: url({{ $employee->avatar ? asset('storage/'.$employee->avatar) : 'https://www.gravatar.com/avatar/'.md5(strtolower(trim($employee->email))).'?d=mp' }})"></span>
                                            <div>
                                                <div class="font-weight-medium text-white">{{ $employee->first_name }} {{ $employee->last_name }}</div>
                                                <div class="text-muted small">{{ $employee->email }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-muted">{{ $employee->employee_code }}</td>
                                    <td class="text-muted">{{ $employee->department ? $employee->department->name : '-' }}</td>
                                    <td class="text-muted">{{ $employee->designation ? $employee->designation->name : '-' }}</td>
                                    <td class="text-muted">{{ \Carbon\Carbon::parse($employee->date_of_joining)->format('d-M-Y') }}</td>
                                </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Recent Activities & Sidebar Widgets -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header">
                <h3 class="card-title text-white">Recent Activities</h3>
            </div>
            <div class="card-body">
                @if($recentLogs->isEmpty())
                    <div class="text-center py-5">
                        <i class="ti ti-activity text-muted fs-1 mb-2"></i>
                        <p class="text-muted mb-0">No recent activity logs.</p>
                    </div>
                @else
                    <ul class="list-unstyled space-y-3">
                        @foreach($recentLogs as $log)
                            <li class="d-flex align-items-start gap-2 border-bottom border-secondary pb-2 mb-2">
                                <span class="badge bg-blue-lt p-1 mt-1"><i class="ti ti-bolt"></i></span>
                                <div>
                                    <div class="text-white font-weight-medium text-sm">{{ $log->action }}</div>
                                    <div class="text-muted small">{{ $log->description }}</div>
                                    <div class="text-muted-50 small mt-1 fs-6">
                                        {{ $log->created_at->diffForHumans() }} by {{ $log->user ? $log->user->name : 'System' }}
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>

        <div class="card bg-primary-lt">
            <div class="card-body">
                <h3 class="text-primary fw-bold mb-2">Did you know?</h3>
                <p class="mb-3 text-muted">You can customize your organization logo, branding colors, default timezone, and office settings in the settings panel.</p>
                @can('settings.view')
                <a href="{{ route('settings.profile') }}" class="btn btn-primary btn-sm">
                    <i class="ti ti-settings me-1"></i> Edit Settings
                </a>
                @endcan
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const theme = localStorage.getItem('connect-theme') || 'dark';
        const labelColor = theme === 'dark' ? '#adbac7' : '#475569';
        const gridColor = theme === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.08)';

        // 1. Department Headcount Chart
        const deptNames = {!! json_encode($deptNames) !!};
        const deptCounts = {!! json_encode($deptCounts) !!};

        if (!deptCounts || deptCounts.length === 0 || deptCounts.every(v => v === 0)) {
            document.getElementById('chart-department-headcount').innerHTML = 
                '<div class="text-center py-5"><i class="ti ti-chart-bar text-muted fs-1 mb-2"></i><p class="text-muted mb-0">No active employees assigned to departments.</p></div>';
        } else {
            const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--tblr-primary').trim() || '#0052FF';
            const deptOptions = {
                series: [{
                    name: 'Employees',
                    data: deptCounts
                }],
                chart: {
                    type: 'bar',
                    height: 250,
                    parentHeightOffset: 0,
                    toolbar: { show: false },
                    animations: { enabled: true }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '40%',
                        borderRadius: 4,
                    },
                },
                dataLabels: { enabled: false },
                fill: { opacity: 1 },
                stroke: {
                    width: 2,
                    colors: ["transparent"]
                },
                xaxis: {
                    categories: deptNames,
                    labels: {
                        style: {
                            colors: labelColor,
                            fontSize: '11px'
                        }
                    },
                    axisBorder: { show: false },
                    axisTicks: { show: false },
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: labelColor,
                            fontSize: '11px'
                        }
                    }
                },
                theme: { mode: theme },
                colors: [primaryColor],
                grid: {
                    borderColor: gridColor,
                    strokeDashArray: 4,
                },
                tooltip: { theme: 'dark' }
            };
            const deptChart = new ApexCharts(document.querySelector("#chart-department-headcount"), deptOptions);
            deptChart.render();
        }

        // 2. Leave Distribution Chart
        const leaveNames = {!! json_encode($leaveNames) !!};
        const leaveCounts = {!! json_encode($leaveCounts, JSON_NUMERIC_CHECK) !!};

        if (!leaveCounts || leaveCounts.length === 0 || leaveCounts.every(v => v === 0)) {
            document.getElementById('chart-leave-distribution').innerHTML = 
                '<div class="text-center py-5"><i class="ti ti-calendar-stats text-muted fs-1 mb-2"></i><p class="text-muted mb-0">No approved leave requests to display.</p></div>';
        } else {
            const leaveOptions = {
                series: leaveCounts,
                chart: {
                    type: 'donut',
                    height: 250,
                    animations: { enabled: true }
                },
                labels: leaveNames,
                dataLabels: { enabled: true },
                legend: {
                    position: 'bottom',
                    labels: { colors: labelColor }
                },
                theme: { mode: theme },
                stroke: { show: false },
                colors: ['#206bc4', '#2fb344', '#f59f00', '#d63939', '#4299e1', '#b8a2e3'],
                tooltip: { theme: 'dark' }
            };
            const leaveChart = new ApexCharts(document.querySelector("#chart-leave-distribution"), leaveOptions);
            leaveChart.render();
        }
    });
</script>
@endsection