@extends('layouts.app')

@section('title', 'CRM Dashboard')

@section('content')
<style>
    .crm-dashboard { --dash-border:#e7ebf2; --dash-muted:#667085; }
    .dashboard-hero { position:relative; overflow:hidden; padding:26px 28px; border-radius:18px; color:#fff; background:linear-gradient(125deg,#21367f 0%,#3454d1 62%,#5574e8 100%); }
    .dashboard-hero::after { content:''; position:absolute; width:260px; height:260px; right:-70px; top:-120px; border-radius:50%; background:rgba(255,255,255,.08); }
    .dashboard-hero .hero-copy { position:relative; z-index:1; max-width:680px; }
    .dashboard-quick-actions { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; }
    .dashboard-quick-actions .btn { border-color:rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.1); }
    .dashboard-quick-actions .btn:hover { color:#253047; background:#fff; }
    .dashboard-metric { height:100%; min-height:132px; padding:18px; border:1px solid var(--dash-border); border-radius:15px; background:#fff; }
    .dashboard-metric-icon { display:inline-flex; width:43px; height:43px; align-items:center; justify-content:center; border-radius:12px; font-size:18px; }
    .dashboard-metric-value { margin:14px 0 4px; color:#1d2939; font-size:27px; font-weight:750; line-height:1; }
    .dashboard-metric-label { color:#475467; font-size:12px; font-weight:700; }
    .dashboard-metric-caption { color:#98a2b3; font-size:11px; }
    .dashboard-panel { height:100%; border:1px solid var(--dash-border); border-radius:16px; background:#fff; overflow:hidden; }
    .dashboard-panel-header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 19px; border-bottom:1px solid #edf0f4; }
    .dashboard-panel-body { padding:17px 19px; }
    .pipeline-row + .pipeline-row { margin-top:15px; }
    .pipeline-track { height:7px; overflow:hidden; border-radius:99px; background:#eef1f6; }
    .pipeline-bar { height:100%; min-width:5px; border-radius:inherit; background:linear-gradient(90deg,#3454d1,#6e88ec); }
    .dashboard-record { display:flex; align-items:center; gap:12px; padding:11px 0; color:inherit; text-decoration:none; border-bottom:1px solid #f0f2f5; }
    .dashboard-record:last-child { border-bottom:0; }
    .dashboard-record:hover .record-title { color:#3454d1; }
    .dashboard-record-icon { display:inline-flex; width:38px; height:38px; flex:0 0 auto; align-items:center; justify-content:center; border-radius:11px; }
    .record-title { color:#253047; font-size:13px; font-weight:700; }
    .dashboard-activity { position:relative; padding:0 0 16px 28px; }
    .dashboard-activity:last-child { padding-bottom:0; }
    .dashboard-activity::before { content:''; position:absolute; left:7px; top:7px; bottom:-7px; width:1px; background:#e2e7f0; }
    .dashboard-activity:last-child::before { display:none; }
    .dashboard-activity-dot { position:absolute; top:5px; left:2px; width:11px; height:11px; border:3px solid #dce4ff; border-radius:50%; background:#3454d1; }
    .performance-ring { --value:0; display:grid; width:92px; height:92px; place-items:center; border-radius:50%; background:conic-gradient(#3454d1 calc(var(--value)*1%),#edf0f5 0); }
    .performance-ring::before { content:attr(data-value); display:grid; width:70px; height:70px; place-items:center; border-radius:50%; color:#253047; background:#fff; font-size:18px; font-weight:750; }
    .dashboard-empty { padding:34px 15px; color:#98a2b3; text-align:center; }
    @media(max-width:767.98px){ .dashboard-hero{padding:22px 20px}.dashboard-quick-actions{margin-top:18px}.dashboard-panel-body{padding:15px} }
</style>

<div class="page-header">
    <div class="page-header-left d-flex align-items-center">
        <div class="page-header-title"><h5 class="mb-1">Dashboard</h5></div>
        <ul class="breadcrumb"><li class="breadcrumb-item">Home</li><li class="breadcrumb-item">CRM Dashboard</li></ul>
    </div>
    <div class="page-header-right ms-auto"><span class="badge bg-soft-primary text-primary"><i class="feather-calendar me-1"></i>{{ now()->format('d M Y') }}</span></div>
</div>

<div class="main-content crm-dashboard" data-testid="professional-crm-dashboard">
    <section class="dashboard-hero mb-4">
        <div class="d-lg-flex align-items-center justify-content-between gap-4">
            <div class="hero-copy">
                <small class="text-uppercase fw-bold opacity-75" style="letter-spacing:.09em">CRM workspace</small>
                <h3 class="fw-bold text-white mt-2 mb-2">Welcome back, {{ $user->name }}</h3>
                <p class="mb-0 text-white opacity-75">Here is the latest view of your pipeline, customer workload, activities, and commercial performance.</p>
            </div>
            <div class="dashboard-quick-actions">
                @can('create_leads')<a href="{{ route('leads-create') }}" class="btn btn-sm"><i class="feather-user-plus me-1"></i>New Lead</a>@endcan
                @can('create_deals')<a href="{{ route('deals-create') }}" class="btn btn-sm"><i class="feather-briefcase me-1"></i>New Deal</a>@endcan
                @can('create_contacts')<a href="{{ route('contacts-create') }}" class="btn btn-sm"><i class="feather-users me-1"></i>New Contact</a>@endcan
                @can('create_activities')<a href="{{ route('schedule-activity-create') }}" class="btn btn-sm"><i class="feather-activity me-1"></i>Schedule Activity</a>@endcan
            </div>
        </div>
    </section>

    <div class="row g-3 mb-4">
        @foreach ([
            ['Active Leads',$activeLeads,'Prospects currently progressing','feather-user-plus','primary'],
            ['Open Deals',$openDeals,'Active commercial opportunities','feather-briefcase','warning'],
            ['Forecast Value',number_format($forecastValue,2),'Expected open-pipeline value','feather-trending-up','success'],
            ['Contacts',$contactCount,'Accessible customer contacts','feather-users','info'],
            ['Open Tickets',$openTickets,'Customer requests requiring action','feather-tag','danger'],
            ["Today's Activities",$todayActivities,'Scheduled work for today','feather-activity','primary'],
        ] as [$label,$value,$caption,$icon,$class])
            <div class="col-xl-2 col-md-4 col-sm-6">
                <div class="dashboard-metric">
                    <span class="dashboard-metric-icon bg-soft-{{ $class }} text-{{ $class }}"><i class="{{ $icon }}"></i></span>
                    <div class="dashboard-metric-value">{{ $value }}</div>
                    <div class="dashboard-metric-label">{{ $label }}</div>
                    <small class="dashboard-metric-caption">{{ $caption }}</small>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row g-4 mb-4">
        <div class="col-xl-7">
            <section class="dashboard-panel">
                <div class="dashboard-panel-header">
                    <div><h5 class="fw-bold mb-1">Lead Pipeline</h5><small class="text-muted">Distribution across current Lead statuses</small></div>
                    <a href="{{ route('leads') }}" class="btn btn-sm btn-light">View Leads <i class="feather-arrow-right ms-1"></i></a>
                </div>
                <div class="dashboard-panel-body">
                    @forelse($leadPipeline as $stage)
                        <div class="pipeline-row">
                            <div class="d-flex justify-content-between mb-2"><span class="fw-semibold small">{{ $stage['name'] }}</span><span class="text-muted small">{{ $stage['total'] }}</span></div>
                            <div class="pipeline-track"><div class="pipeline-bar" style="width:{{ (int) round(($stage['total'] / $pipelineMaximum) * 100) }}%"></div></div>
                        </div>
                    @empty
                        <div class="dashboard-empty"><i class="feather-bar-chart-2 fs-3 d-block mb-2"></i>No Lead pipeline data available.</div>
                    @endforelse
                </div>
            </section>
        </div>
        <div class="col-xl-5">
            <section class="dashboard-panel">
                <div class="dashboard-panel-header"><div><h5 class="fw-bold mb-1">Performance</h5><small class="text-muted">Pipeline completion and commercial outcomes</small></div></div>
                <div class="dashboard-panel-body">
                    <div class="row text-center g-4">
                        <div class="col-6 d-flex flex-column align-items-center"><div class="performance-ring" style="--value:{{ $leadCompletionRate }}" data-value="{{ $leadCompletionRate }}%"></div><strong class="mt-3 small">Lead Completion</strong><small class="text-muted">Qualified or unqualified</small></div>
                        <div class="col-6 d-flex flex-column align-items-center"><div class="performance-ring" style="--value:{{ $dealWinRate }}" data-value="{{ $dealWinRate }}%"></div><strong class="mt-3 small">Deal Win Rate</strong><small class="text-muted">Won from closed Deals</small></div>
                    </div>
                    <div class="row g-3 mt-2">
                        <div class="col-6"><div class="border rounded-3 p-3"><small class="text-muted d-block">Won Value</small><strong>{{ number_format($wonValue,2) }}</strong></div></div>
                        <div class="col-6"><div class="border rounded-3 p-3"><small class="text-muted d-block">Accounts</small><strong>{{ $accountCount }}</strong></div></div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-xl-7">
            <section class="dashboard-panel">
                <div class="dashboard-panel-header"><div><h5 class="fw-bold mb-1">Recently Updated</h5><small class="text-muted">Latest Leads, Deals, and Tickets in your scope</small></div></div>
                <div class="dashboard-panel-body py-1">
                    @forelse($recentRecords as $record)
                        <a href="{{ $record['url'] }}" class="dashboard-record">
                            <span class="dashboard-record-icon bg-soft-{{ $record['class'] }} text-{{ $record['class'] }}"><i class="{{ $record['icon'] }}"></i></span>
                            <span class="min-w-0 flex-grow-1"><span class="record-title d-block text-truncate">{{ $record['title'] ?: $record['type'].' record' }}</span><small class="text-muted">{{ $record['type'] }} · {{ $record['subtitle'] }}</small></span>
                            <small class="text-muted text-nowrap">{{ $record['updated_at']->diffForHumans() }}</small>
                        </a>
                    @empty
                        <div class="dashboard-empty"><i class="feather-inbox fs-3 d-block mb-2"></i>No recent CRM records.</div>
                    @endforelse
                </div>
            </section>
        </div>
        <div class="col-xl-5">
            <section class="dashboard-panel">
                <div class="dashboard-panel-header"><div><h5 class="fw-bold mb-1">Upcoming Activities</h5><small class="text-muted">Your next scheduled actions</small></div><a href="{{ route('myactivities') }}" class="btn btn-sm btn-light">Open Workspace</a></div>
                <div class="dashboard-panel-body">
                    @forelse($upcomingActivities as $activity)
                        @php($moment = \Carbon\Carbon::parse($activity->start_date ?? $activity->due_date ?? $activity->created_at))
                        <div class="dashboard-activity"><span class="dashboard-activity-dot"></span><strong class="small d-block">{{ $activity->title ?: 'Untitled activity' }}</strong><small class="text-muted">{{ $moment->format('d M Y') }}{{ $activity->start_time ? ' · '.\Carbon\Carbon::parse($activity->start_time)->format('h:i A') : '' }}</small></div>
                    @empty
                        <div class="dashboard-empty"><i class="feather-calendar fs-3 d-block mb-2"></i>No upcoming activities.</div>
                    @endforelse
                </div>
            </section>
        </div>
    </div>
</div>
@endsection
