@extends('layouts.app')
@section('title', 'Dashboard — HIGHRA CRM')
@section('header', 'Dashboard')

@section('content')
<!-- TOP GREETING & HEADER -->
<div class="row" style="margin-bottom: 24px; align-items: flex-start;">
    <div>
        <h1 style="margin: 0 0 6px 0; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: #ffffff;">
            {{ $greeting }}, {{ $userName }}
        </h1>
        <p style="color: #8e9ab4; margin: 0; font-size: 14px;">
            Here is your sales and lead performance overview
        </p>
    </div>
    <div>
        <a href="{{ route('analytics') }}" class="btn btn-secondary" style="padding: 10px 18px; font-size: 13px; font-weight: 600; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px;">
            View Analytics &rarr;
        </a>
    </div>
</div>

<!-- 5 TOP KPI CARDS ROW -->
<div class="dash-kpi-grid">
    <!-- Total Leads -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Total Leads</div>
        <div class="dash-kpi-number" style="color: #ffffff;">{{ $totalLeads }}</div>
        <div class="dash-kpi-sub">All captured leads</div>
    </div>

    <!-- New Leads -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">New Leads</div>
        <div class="dash-kpi-number" style="color: #22c55e;">{{ $newLeads }}</div>
        <div class="dash-kpi-sub">Needs attention</div>
    </div>

    <!-- Follow-ups -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Follow-ups</div>
        <div class="dash-kpi-number" style="color: #38bdf8;">{{ $followupsCount }}</div>
        <div class="dash-kpi-sub">Due today</div>
    </div>

    <!-- Qualified -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Qualified</div>
        <div class="dash-kpi-number" style="color: #818cf8;">{{ $qualifiedLeads }}</div>
        <div class="dash-kpi-sub">Sales-ready</div>
    </div>

    <!-- Won Deals -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Won Deals</div>
        <div class="dash-kpi-number" style="color: #f43f5e;">{{ $wonDeals }}</div>
        <div class="dash-kpi-sub">Converted customers</div>
    </div>
</div>

<!-- MIDDLE SECTION: LEAD SOURCES & LEAD TREND -->
<div class="dash-grid-2">
    <!-- Lead Sources Panel -->
    <div class="dash-panel">
        <div class="dash-panel-header">
            <h2 class="dash-panel-title">Lead Sources</h2>
            <p class="dash-panel-sub">Where enquiries come from</p>
        </div>
        <div>
            @foreach($leadSources as $source)
                <div class="source-item">
                    <span style="font-weight: 500;">{{ $source['name'] }}</span>
                    <span class="source-tag" style="background: {{ $source['bg'] ?? 'rgba(99, 102, 241, 0.2)' }}; color: {{ $source['color'] ?? '#818cf8' }}; border: 1px solid {{ $source['border'] ?? 'rgba(99, 102, 241, 0.4)' }};">
                        {{ $source['tag'] ?? 'LEAD' }}
                    </span>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Lead Trend Panel -->
    <div class="dash-panel">
        <div class="dash-panel-header">
            <h2 class="dash-panel-title">Lead Trend</h2>
            <p class="dash-panel-sub">Last 7 days</p>
        </div>
        <div class="dash-chart-box">
            <div class="dash-bars-wrapper">
                @foreach($trendDays as $day)
                    <div class="dash-bar-col" title="{{ $day['date'] }}: {{ $day['count'] }} leads">
                        <div class="dash-bar-fill" style="height: {{ $day['height_pct'] ?? $day['height'] ?? 8 }}%;"></div>
                        <span class="dash-bar-label">{{ $day['day'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- BOTTOM SECTION: RECENT LEADS -->
<div class="dash-panel">
    <div class="dash-panel-header">
        <h2 class="dash-panel-title">Recent Leads</h2>
        <p class="dash-panel-sub">Latest enquiries</p>
    </div>
    
    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="border-bottom: 1px solid #1c2742;">
                    <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Lead</th>
                    <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Source</th>
                    <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Campaign</th>
                    <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Status</th>
                    <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Priority</th>
                    <th style="padding: 12px 14px; text-align: right; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentLeads as $lead)
                    <tr style="border-bottom: 1px solid #141f38;">
                        <!-- Lead Name & Phone -->
                        <td style="padding: 16px 14px;">
                            <strong style="color: #ffffff; display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px;">
                                {{ $lead->name }}
                            </strong>
                            <small style="color: #8e9ab4; font-size: 12px;">
                                {{ $lead->phone ? (str_starts_with($lead->phone, '+') ? $lead->phone : '+91 '.$lead->phone) : ($lead->email ?? 'No contact info') }}
                            </small>
                        </td>

                        <!-- Source -->
                        <td style="padding: 16px 14px; color: #e2e8f0; font-size: 13px; font-weight: 500; text-transform: capitalize;">
                            {{ $lead->source ?? 'Direct' }}
                        </td>

                        <!-- Campaign -->
                        <td style="padding: 16px 14px; color: #cbd5e1; font-size: 13px;">
                            {{ $lead->campaign ?: ($lead->product_service ?: 'Direct Inquiry') }}
                        </td>

                        <!-- Status Pill -->
                        <td style="padding: 16px 14px;">
                            @php
                                $statusSlug = strtolower($lead->status ?? 'new');
                                $pillClass = match($statusSlug) {
                                    'new' => 'pill-new',
                                    'qualified' => 'pill-qualified',
                                    'contacted' => 'pill-contacted',
                                    'interested' => 'pill-interested',
                                    'won' => 'pill-won',
                                    'lost' => 'pill-lost',
                                    default => 'pill-new'
                                };
                            @endphp
                            <span class="pill-status {{ $pillClass }}">
                                {{ ucfirst($lead->status ?? 'New') }}
                            </span>
                        </td>

                        <!-- Priority -->
                        <td style="padding: 16px 14px; color: #cbd5e1; font-size: 13px; font-weight: 500; text-transform: capitalize;">
                            {{ $lead->priority ? ucfirst($lead->priority) : 'Normal' }}
                        </td>

                        <!-- Action Button -->
                        <td style="padding: 16px 14px; text-align: right;">
                            <a href="{{ route('leads.show', $lead) }}" class="btn-view-lead">
                                View &rarr;
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" style="padding: 40px; text-align: center; color: #64748b; font-size: 13px;">
                            No recent leads found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection