@extends('layouts.app')
@section('title','My Dashboard')
@section('content')
<style>
    .my-dashboard{--my-border:#e7ebf2}.my-dashboard-hero{padding:24px 26px;border-radius:17px;color:#fff;background:linear-gradient(125deg,#2b3f92,#4867dd)}
    .my-stat,.my-panel,.my-team-card{height:100%;border:1px solid var(--my-border);border-radius:15px;background:#fff}.my-stat{padding:17px}.my-stat-icon{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:11px}
    .my-panel{overflow:hidden}.my-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #edf0f4}.my-panel-body{padding:17px 18px}
    .my-team-card{padding:17px;transition:.2s}.my-team-card:hover{border-color:#bdc8f8;transform:translateY(-1px)}.my-team-avatars{display:flex}.my-team-avatars span{margin-left:-7px;border:2px solid #fff}.my-team-avatars span:first-child{margin-left:0}
    .my-activity{position:relative;padding:0 0 17px 27px}.my-activity:last-child{padding-bottom:0}.my-activity:before{content:'';position:absolute;left:6px;top:8px;bottom:-7px;width:1px;background:#e5e9f1}.my-activity:last-child:before{display:none}.my-activity-dot{position:absolute;left:1px;top:5px;width:11px;height:11px;border:3px solid #dce4ff;border-radius:50%;background:#3454d1}
</style>
<div class="page-header"><div class="page-header-left"><div class="page-header-title"><h5>My Dashboard</h5></div></div><div class="page-header-right ms-auto"><a href="{{ route('myactivities') }}" class="btn btn-primary"><i class="feather-activity me-1"></i>My Activities</a></div></div>
<div class="main-content my-dashboard" data-testid="my-dashboard-professional-ui">
    <section class="my-dashboard-hero mb-4"><div class="d-md-flex align-items-center justify-content-between gap-3"><div><small class="text-uppercase fw-bold opacity-75" style="letter-spacing:.08em">Personal workspace</small><h3 class="fw-bold text-white mt-2 mb-1">Hello, {{ $user->name }}</h3><p class="mb-0 opacity-75">Your work, upcoming commitments, and Team collaboration in one place.</p></div><div class="mt-3 mt-md-0 text-md-end"><strong>{{ now()->format('l') }}</strong><small class="d-block opacity-75">{{ now()->format('d M Y') }}</small></div></div></section>
    <div class="row g-3 mb-4">
        @foreach([['My Leads',$personalStats['leads'],'feather-user-plus','primary'],['My Deals',$personalStats['deals'],'feather-briefcase','warning'],['My Tickets',$personalStats['tickets'],'feather-tag','success'],["Today's Activities",$personalStats['today'],'feather-calendar','info'],['Overdue',$personalStats['overdue'],'feather-alert-circle','danger']] as [$label,$value,$icon,$class])
        <div class="col-xl col-md-4 col-sm-6"><div class="my-stat"><span class="my-stat-icon bg-soft-{{ $class }} text-{{ $class }}"><i class="{{ $icon }}"></i></span><div class="fs-4 fw-bold mt-3">{{ $value }}</div><small class="text-muted fw-semibold">{{ $label }}</small></div></div>
        @endforeach
    </div>
    <div class="row g-4">
        <div class="col-xl-7"><section class="my-panel"><div class="my-panel-header"><div><h5 class="fw-bold mb-1">My Teams</h5><small class="text-muted">Open a Team to review shared activity</small></div>@can('list_teams')<a href="{{ route('teams.index') }}" class="btn btn-sm btn-light">Manage Teams</a>@endcan</div><div class="my-panel-body"><div class="row g-3">
            @forelse($myTeams as $team)<div class="col-md-6"><a href="{{ route('teams.activity',$team) }}" class="text-decoration-none text-reset"><article class="my-team-card"><div class="d-flex justify-content-between align-items-start"><span class="my-stat-icon bg-soft-primary text-primary"><i class="feather-users"></i></span><span class="badge {{ $team->status==='active'?'bg-soft-success text-success':'bg-soft-secondary text-secondary' }}">{{ ucfirst($team->status) }}</span></div><h6 class="fw-bold mt-3 mb-1">{{ $team->name }}</h6><small class="text-muted">Managed by {{ $team->manager?->name ?: 'Not assigned' }}</small><div class="d-flex align-items-center justify-content-between mt-3"><div class="my-team-avatars">@foreach($team->members->take(4) as $member)<span class="avatar-text avatar-sm bg-soft-primary text-primary" title="{{ $member->name }}">{{ strtoupper(substr($member->name,0,1)) }}</span>@endforeach</div><small class="text-muted">{{ $team->members_count }} members · {{ $team->recent_activity_count }} recent</small></div><div class="text-primary small fw-semibold mt-3">Team Activity <i class="feather-arrow-right ms-1"></i></div></article></a></div>
            @empty<div class="col-12 text-center text-muted py-5"><i class="feather-users fs-2 d-block mb-2"></i>You are not assigned to an active Team.</div>@endforelse
        </div></div></section></div>
        <div class="col-xl-5"><section class="my-panel"><div class="my-panel-header"><div><h5 class="fw-bold mb-1">My Upcoming Activities</h5><small class="text-muted">Next actions assigned to you</small></div><a href="{{ route('myactivities') }}" class="btn btn-sm btn-light">View All</a></div><div class="my-panel-body">
            @forelse($upcomingActivities as $activity)@php($moment=\Carbon\Carbon::parse($activity->start_date ?? $activity->due_date ?? $activity->created_at))<div class="my-activity"><span class="my-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="text-center text-muted py-5"><i class="feather-calendar fs-2 d-block mb-2"></i>No upcoming activities.</div>@endforelse
        </div></section></div>
    </div>
</div>
@endsection
