@extends('employee.layouts.app')

{{-- @section('page-title')
    {{ __('Dashboard Overview') }}
@endsection --}}

@push('theme-script')
    <script src="{{ asset('assets/libs/apexcharts/dist/apexcharts.min.js') }}"></script>
@endpush

@section('content')
<div class="dash-content px-2">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold text-dark" style="letter-spacing: -0.5px;">{{ __('Dashboard Overview') }}</h4>
            <p class="text-muted mb-0" style="font-size: 0.85rem;">
                Tracking performance for <span id="current-period-label" class="text-success fw-bold">{{ $periodLabel ?? ucfirst($period ?? 'weekly') }}</span>
            </p>
        </div>
        <div class="filter-pills p-1 d-flex">
            @foreach (['daily', 'weekly', 'monthly'] as $p)
                <button type="button"
                    data-period="{{ $p }}"
                    class="pill-btn filter-btn {{ ($period ?? 'weekly') === $p ? 'active' : '' }}">
                    {{ ucfirst($p) }}
                </button>
            @endforeach
        </div>
    </div>

    <div class="row">
        @php
            $cards = [
                ['title' => 'Total Leads', 'key' => 'total_leads', 'icon' => 'ti ti-target', 'bg' => '#28c76f'],
                ['title' => 'Active Leads', 'key' => 'active_leads', 'icon' => 'ti ti-bolt', 'bg' => '#00cfe8'],
                ['title' => 'Converted', 'key' => 'won_leads', 'icon' => 'ti ti-trophy', 'bg' => '#ff9f43'],
                ['title' => 'Lost', 'key' => 'lost_leads', 'icon' => 'ti ti-circle-x', 'bg' => '#ea5455'],
                ['title' => 'Invalid', 'key' => 'invalid_leads', 'icon' => 'ti ti-ban', 'bg' => '#6c757d'],
                ['title' => 'Unassigned', 'key' => 'unassigned_leads', 'icon' => 'ti ti-user-exclamation', 'bg' => '#7367f0'],
                ['title' => 'Follow-up Due', 'key' => 'followup_due', 'icon' => 'ti ti-calendar-event', 'bg' => '#f59f00'],
            ];
        @endphp

        @foreach ($cards as $card)
            <div class="col-xl-4 col-md-6 mb-4">
                <div class="stats-card h-100">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between">
                            <div>
                                <span class="stats-label">{{ __($card['title']) }}</span>
                                <h2 class="stats-value mt-2" id="stat-{{ $card['key'] }}">
                                    {{ number_format(($stats[$card['key']]['count'] ?? 0)) }}
                                </h2>

                                @php($growth = $stats[$card['key']]['growth'] ?? null)
                                <div class="stats-trend" id="growth-container-{{ $card['key'] }}" style="{{ $growth === null ? 'display:none' : '' }}">
                                    <span class="{{ ($growth ?? 0) >= 0 ? 'text-success' : 'text-danger' }}" id="growth-badge-{{ $card['key'] }}">
                                        <i class="ti {{ ($growth ?? 0) >= 0 ? 'ti-arrow-up' : 'ti-arrow-down' }}" id="growth-icon-{{ $card['key'] }}"></i>
                                        <span id="growth-value-{{ $card['key'] }}">{{ abs((int) ($growth ?? 0)) }}%</span>
                                    </span>
                                    <span class="ms-1">{{ __('vs prev') }}</span>
                                </div>
                            </div>
                            <div class="icon-box shadow-sm" style="background: {{ $card['bg'] }}15;">
                                <i class="{{ $card['icon'] }}" style="color: {{ $card['bg'] }};"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row mt-2">
        <div class="col-12">
            <div class="stats-card border-0 shadow-sm" style="border-radius: 16px;">
                <div class="card-header-custom">
                    <div>
                        <h5 class="m-0 fw-bold">{{ __('Leads Trend') }}</h5>
                        <small class="text-muted">{{ __('Leads grouped by period') }}</small>
                    </div>
                    <div id="chart-loader" class="spinner-border spinner-border-sm text-success" role="status" style="display: none;"></div>
                </div>
                <div class="card-body px-4 pb-4">
                    <div id="chart-leads" style="min-height: 320px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-12">
            <div class="main-table-card border-0 shadow-sm">
                <div class="card-header-custom">
                    <h5 class="m-0 fw-bold">{{ __('Recent Leads') }}</h5>
                    <a href="{{ route('employee.leads.index') }}" class="view-all-btn">
                        {{ __('View All Leads') }} <i class="ti ti-chevron-right ms-1"></i>
                    </a>
                </div>
                <div class="table-responsive">
                    <table class="table table-custom align-middle mb-0">
                        <thead>
                            <tr>
                                <th class="ps-4">{{ __('Lead Name') }}</th>
                                <th>{{ __('Phone Number') }}</th>
                                <th class="text-center">{{ __('Status') }}</th>
                                <th>{{ __('Created Date') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($recentLeads as $lead)
                                <tr>
                                    <td class="ps-4">
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm me-3">{{ substr($lead['name'] ?? 'U', 0, 1) }}</div>
                                            <span class="fw-bold text-dark">{{ $lead['name'] ?? __('Unknown') }}</span>
                                        </div>
                                    </td>
                                    <td class="text-muted" style="font-family: 'Inter', sans-serif;">{{ $lead['phone'] }}</td>
                                    <td class="text-center">
                                        <span class="status-badge-modern">
                                            {{ ucwords(str_replace('_', ' ', $lead['status'] ?? 'Contacted')) }}
                                        </span>
                                    </td>
                                    <td class="text-muted">{{ \Carbon\Carbon::parse($lead['created_at'])->format('d M, Y') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5 text-muted">{{ __('No leads found') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Global Background Fix */
    body { background-color: #f8f9fa; font-family: 'Inter', sans-serif; }

    /* Filter Pills */
    .filter-pills { background: #fff; border-radius: 50px; border: 1px solid #e9ecef; }
    .pill-btn { border: none; background: transparent; padding: 6px 18px; border-radius: 50px; font-size: 13px; font-weight: 500; color: #6e6e6e; transition: 0.3s; }
    .pill-btn.active { background: #28c76f; color: #fff; box-shadow: 0 4px 10px rgba(40, 199, 111, 0.3); }

    /* Stats Card Styling */
    .stats-card { background: #fff; border-radius: 16px; border: none; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); transition: 0.3s; position: relative; overflow: hidden; }
    .stats-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
    .stats-label { text-transform: uppercase; font-size: 11px; font-weight: 700; color: #a1acb8; letter-spacing: 1px; }
    .stats-value { font-weight: 800; color: #444; letter-spacing: -1px; }
    .stats-trend { font-size: 12px; color: #b9bec7; }
    
    .icon-box { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }

    /* Table Styling */
    .main-table-card { background: #fff; border-radius: 16px; }
    .card-header-custom { padding: 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f1f1; }
    
    .table-custom thead th { background: #fcfcfc; text-transform: uppercase; font-size: 11px; font-weight: 700; color: #8898aa; padding: 15px 20px; border-bottom: 1px solid #f1f1f1; }
    .table-custom tbody td { padding: 18px 20px; border-bottom: 1px solid #f8f9fa; font-size: 14px; }
    
    .view-all-btn { color: #28c76f; text-decoration: none; font-weight: 600; font-size: 13px; }
    .view-all-btn:hover { text-decoration: underline; }

    /* Avatar Circle */
    .avatar-sm { width: 32px; height: 32px; background: #f0f2f5; color: #5e5e5e; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

    /* Modern Status Badge */
    .status-badge-modern { padding: 6px 16px; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; background: #fff4e6; color: #ff9f43; border: 1px solid rgba(255,159,67,0.1); }
</style>
@endsection

@push('script-page')
<script>
    (function () {
        let leadsChart;
        const cachePrefix = 'emp_dash_cache_';

        function initChart() {
            const labels = {!! json_encode($graph['leads']['labels'] ?? []) !!};
            const values = {!! json_encode($graph['leads']['values'] ?? []) !!};

            const options = {
                series: [{
                    name: 'Leads',
                    data: values
                }],
                chart: {
                    type: 'bar',
                    height: 320,
                    toolbar: { show: false },
                    fontFamily: 'inherit'
                },
                colors: ['#28c76f'],
                plotOptions: {
                    bar: {
                        borderRadius: 8,
                        columnWidth: '45%',
                    }
                },
                fill: { opacity: 1 },
                dataLabels: { enabled: false },
                grid: { borderColor: '#f1f1f1', strokeDashArray: 4 },
                xaxis: {
                    categories: labels,
                    labels: { style: { colors: '#adb5bd', fontSize: '12px' } }
                },
                yaxis: {
                    labels: {
                        style: { colors: '#adb5bd', fontSize: '12px' },
                        formatter: function (value) { return Number(value).toLocaleString(); }
                    }
                },
                tooltip: { theme: 'light' }
            };

            leadsChart = new ApexCharts(document.querySelector("#chart-leads"), options);
            leadsChart.render();
        }

        function updateDashboardUI(data) {
            if (data?.period) {
                const label = document.getElementById('current-period-label');
                if (label) label.innerText = data.period;
            }

            Object.keys(data?.stats ?? {}).forEach(key => {
                const countEl = document.getElementById(`stat-${key}`);
                if (countEl) {
                    countEl.innerText = Number(data.stats[key].count ?? 0).toLocaleString();
                }

                const growthVal = data.stats[key].growth;
                const container = document.getElementById(`growth-container-${key}`);
                if (!container) return;

                if (growthVal === null || growthVal === undefined) {
                    container.style.display = 'none';
                    return;
                }

                container.style.display = 'block';
                const badge = document.getElementById(`growth-badge-${key}`);
                const icon = document.getElementById(`growth-icon-${key}`);
                const valText = document.getElementById(`growth-value-${key}`);

                if (valText) valText.innerText = Math.abs(growthVal) + '%';
                if (badge) badge.className = (growthVal >= 0) ? 'text-success' : 'text-danger';
                if (icon) icon.className = 'ti ' + ((growthVal >= 0) ? 'ti-arrow-up' : 'ti-arrow-down');
            });

            const leadLabels = data?.graph?.leads?.labels ?? [];
            const leadValues = data?.graph?.leads?.values ?? [];

            if (leadsChart) {
                leadsChart.updateOptions({ xaxis: { categories: leadLabels } });
                leadsChart.updateSeries([{ data: leadValues }]);
            }
        }

        async function handlePeriodChange(period) {
            const cacheKey = cachePrefix + period;
            const loader = document.getElementById('chart-loader');

            const cached = sessionStorage.getItem(cacheKey);
            if (cached) {
                updateDashboardUI(JSON.parse(cached));
                return;
            }

            if (loader) loader.style.display = 'block';
            try {
                const url = new URL(window.location.href);
                url.searchParams.set('period', period);

                const response = await fetch(url, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });

                const data = await response.json();
                sessionStorage.setItem(cacheKey, JSON.stringify(data));
                updateDashboardUI(data);
            } catch (e) {
                console.error("Employee Dashboard Fetch Error:", e);
            } finally {
                if (loader) loader.style.display = 'none';
            }
        }

        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                const period = this.getAttribute('data-period');

                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                handlePeriodChange(period);
            });
        });

        initChart();
    })();
</script>
@endpush