@extends('layouts.sneat')
@section('title', 'Dashboard - Analytics')
@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}">
@endsection
@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection
@section('content')
@php
  $authUser = Auth::user();
@endphp
 @if($authUser && !in_array($authUser->user_type, [3, 345, 346]))
    <div class="row gy-4" style="padding-bottom: 25px; padding-top:25px;">
        {{-- Top KPI Cards --}}
        <div class="col-xl-3 col-md-6 col-12">
            <a href="{{ route('projects.index') }}" class="kpi-link">
                <div class="card h-100 shadow-sm border-0 kpi-card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Projects</h6>
                            <h3 class="mb-0">{{ $myProjectCount }}</h3>
                        </div>

                        <div class="d-flex align-items-center gap-2">
                            <i class="mdi mdi-briefcase-outline text-primary mdi-36px"></i>
                            <img src="{{ asset('images/arrow.gif') }}" class="kpi-arrow" alt=""
                                style="width: 50px;">
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-xl-3 col-md-6 col-12">
            <a href="{{ route('contacts.index') }}" class="kpi-link">
                <div class="card h-100 shadow-sm border-0 kpi-card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Enquiries</h6>
                            <h3 class="mb-0">{{ $enquiriesCount }}</h3>
                        </div>

                        <div class="d-flex align-items-center gap-2">
                            <i class="mdi mdi-account-multiple-outline text-success mdi-36px"></i>
                            <img src="{{ asset('images/arrow.gif') }}" class="kpi-arrow" style="width: 50px;">
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-xl-3 col-md-6 col-12">
            <a href="{{ route('admin.appointments.index') }}" class="kpi-link">
                <div class="card h-100 shadow-sm border-0 kpi-card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Appoinments</h6>
                            <h3 class="mb-0">{{ $appoinments }}</h3>
                        </div>

                        <div class="d-flex align-items-center gap-2">
                            <i class="mdi mdi-eye-outline text-info mdi-36px"></i>
                            <img src="{{ asset('images/arrow.gif') }}" class="kpi-arrow" style="width: 50px;">
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-xl-3 col-md-6 col-12">
            <a href="{{ route('admin.create-activity') }}" class="kpi-link">
                <div class="card h-100 shadow-sm border-0 kpi-card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Assigned Activities</h6>
                            <h3 class="mb-0">{{ $allActivities->count() }}</h3>
                        </div>

                        <div class="d-flex align-items-center gap-2">
                            <i class="mdi mdi-clipboard-text-outline text-warning mdi-36px"></i>
                            <img src="{{ asset('images/arrow.gif') }}" class="kpi-arrow" style="width: 50px;">
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        {{-- =================== LEFT: Company Targets =================== --}}
   <div class="col-md-8 mb-6">
    <div class="card h-100">
        <div class="card-header nav-align-top">
            <h5 class="mb-4">Company Targets</h5>

            @php
                $plannersByUser = [];

                foreach ($planners as $planner) {
                    foreach ($planner->assignedUsers as $user) {
                        $plannersByUser[$user->id]['user'] = $user;

                        if (!isset($plannersByUser[$user->id]['planners'])) {
                            $plannersByUser[$user->id]['planners'] = [];
                        }

                        if (count($plannersByUser[$user->id]['planners']) < 2) {
                            $plannersByUser[$user->id]['planners'][] = $planner;
                        }
                    }
                }
            @endphp

            {{-- USER TABS --}}
            <ul class="nav nav-pills flex-wrap row-gap-2" role="tablist">
                @foreach ($plannersByUser as $userId => $data)
                    <li class="nav-item">
                        <button class="nav-link @if ($loop->first) active @endif"
                            data-bs-toggle="tab"
                            data-bs-target="#userTab{{ $userId }}">
                            {{ $data['user']->name }}
                        </button>
                    </li>
                @endforeach
            </ul>
        </div>

        {{-- TAB CONTENT --}}
        <div class="tab-content mt-2">
            @foreach ($plannersByUser as $userId => $data)
                <div class="tab-pane fade @if ($loop->first) show active @endif"
                    id="userTab{{ $userId }}">

                    <div class="row g-4">
                        @foreach ($data['planners'] as $planner)

                            @php
                                // 🔑 UNIQUE KEY PER USER + PLANNER
                                $uid = $userId . '_' . $planner->id;
                            @endphp

                            <div class="col-12 col-md-6">
                                <div class="accordion mb-4" id="plannerAccordion{{ $uid }}">
                                    <div class="accordion-item border-0">

                                        {{-- HEADER --}}
                                        <h2 class="accordion-header" id="heading{{ $uid }}">
                                            <button class="accordion-button collapsed p-0 bg-transparent shadow-none"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{ $uid }}"
                                                aria-controls="collapse{{ $uid }}">

                                                <div class="p-3 w-100">
                                                    <div class="mb-3">
                                                        <span class="badge bg-label-primary">
                                                            {{ $planner->planner_type }}
                                                        </span>
                                                        <span class="badge bg-label-info">
                                                            {{ implode(' to ', array_map(
                                                                fn($d) => \Carbon\Carbon::parse($d)->format('d M Y'),
                                                                explode(' to ', $planner->plan_period)
                                                            )) }}
                                                        </span>
                                                    </div>

                                                    <div class="d-flex mb-3">
                                                        <div class="avatar flex-shrink-0 me-3">
                                                            <img src="{{ asset('assets/img/icons/unicons/wallet-primary.png') }}">
                                                        </div>
                                                        <div>
                                                            <p class="mb-0">Target Amount</p>
                                                            <h6 class="mb-0">
                                                                ₹{{ number_format($planner->target_amount, 2) }}
                                                            </h6>
                                                        </div>
                                                    </div>

                                                    <div class="d-flex">
                                                        <div class="avatar flex-shrink-0 me-3">
                                                            <img class="rounded-circle" width="40" height="40"
                                                                src="{{ $data['user']->profile_image
                                                                    ? asset('storage/' . $data['user']->profile_image)
                                                                    : asset('assets/img/avatars/default.png') }}">
                                                        </div>
                                                        <div>
                                                            <p class="mb-0">{{ $data['user']->name }}</p>
                                                            <small class="text-muted">
                                                                {{ $planner->places->location ?? '' }}
                                                                {{ $planner->area?->name ? ', '.$planner->area->name : '' }}
                                                                {{ $planner->province?->name ? ', '.$planner->province->name : '' }}
                                                            </small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </button>
                                        </h2>

                                        {{-- COLLAPSE --}}
                                        <div id="collapse{{ $uid }}"
                                            class="accordion-collapse collapse"
                                            data-bs-parent="#plannerAccordion{{ $uid }}">

                                            <div class="accordion-body">

                                                {{-- STATUS BARS --}}
                                                @php
                                                    $statusCounts = $planner->contactStatusCountsForUser($userId);
                                                    $targetCounts = $planner->targetCounts();
                                                    $fixedStatuses = [
                                                        1 => 'Initial Contact',
                                                        3 => 'Proposals & Quotes',
                                                        5 => 'Contract Signed',
                                                    ];
                                                @endphp

                                                <div class="row g-2">
                                                    @foreach ($fixedStatuses as $statusId => $statusName)
                                                        @php
                                                            $achieved = $statusCounts[$statusName] ?? 0;
                                                            $target = $targetCounts[$statusId] ?? 0;
                                                            $percent = $target > 0 ? round(($achieved / $target) * 100) : 0;
                                                        @endphp
                                                        <div class="col-12">
                                                            <h6>{{ $statusName }}</h6>
                                                            <div class="progress" style="height:6px">
                                                                <div class="progress-bar bg-success"
                                                                    style="width:{{ $percent }}%">
                                                                </div>
                                                            </div>
                                                            <small>{{ $achieved }} / {{ $target }}</small>
                                                        </div>
                                                    @endforeach
                                                </div>

                                                {{-- CHART --}}
                                                @php
                                                    $monthlyData = $planner->monthlyPerformanceForUser($userId);
                                                    $months = collect($monthlyData)->keys();
                                                    $statuses = [
                                                        'Initial Contact',
                                                        'Proposals & Quotes',
                                                        'Contract Signed'
                                                    ];
                                                @endphp

                                                <div class="mt-4">
                                                    <canvas id="monthlyChart{{ $uid }}" height="150"></canvas>
                                                </div>

                                             <script>
document.addEventListener('DOMContentLoaded', function () {

    const collapseEl = document.getElementById('collapse{{ $uid }}');
    let chart{{ $uid }} = null;

    const monthlyData{{ $uid }} = @json($monthlyData);
    const months{{ $uid }} = @json($months);
    const statuses{{ $uid }} = @json([
        'Initial Contact',
        'Proposals & Quotes',
        'Contract Signed'
    ]);

    collapseEl.addEventListener('shown.bs.collapse', function () {

        if (chart{{ $uid }}) return;

        const ctx = document
            .getElementById('monthlyChart{{ $uid }}')
            .getContext('2d');

        chart{{ $uid }} = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: months{{ $uid }},
                datasets: statuses{{ $uid }}.map(status => ({
                    label: status,
                    data: months{{ $uid }}.map(
                        month => monthlyData{{ $uid }}[month]?.[status] ?? 0
                    ),
                    backgroundColor:
                        status === 'Initial Contact' ? '#0d6efd' :
                        status === 'Proposals & Quotes' ? '#ffc107' :
                        '#198754'
                }))
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Monthly Performance'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Contacts'
                        }
                    }
                }
            }
        });
    });
});
</script>


                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

        {{-- =================== RIGHT: Latest Enquiries =================== --}}
        <div class="col-xl-4 col-12 mb-6">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Latest Enquiries</h5>
                    <a href="/contacts" class="btn btn-sm btn-outline-secondary">View All</a>
                </div>
                <div class="card-body p-0" style="overflow-y: auto;">
                    <ul class="list-group list-group-flush">
                        @foreach ($enquiries as $enquiry)
                            <li class="list-group-item d-flex align-items-center enquiry-item" role="button"
                                data-bs-toggle="modal" data-bs-target="#clientDetailsModal"
                                data-contact-id="{{ $enquiry->id }}">
                                <div class="avatar flex-shrink-0 me-3">
                                    @if ($enquiry->avatar)
                                        <img src="{{ $enquiry->avatar }}" alt="avatar" class="rounded-circle"
                                            width="40" height="40">
                                    @else
                                        <div class="avatar-initial rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center"
                                            style="width:40px; height:40px;">
                                            {{ strtoupper(substr($enquiry->name, 0, 1)) }}
                                        </div>
                                    @endif
                                </div>
                                <div class="d-flex justify-content-between w-100 align-items-center">
                                    <div>
                                        <h6 class="mb-0 d-flex align-items-center gap-2">{{ $enquiry->name }}</h6>
                                        <small class="text-muted">
                                            {{ \Carbon\Carbon::parse($enquiry->created_at)->timezone('Asia/Kolkata')->format('d M | h:i A') }}
                                        </small>
                                    </div>
                                    <span class="badge bg-light text-dark border me-2">{{ $enquiry->phone_number }}</span>
                                    <span class="badge rounded-pill bg-label-info"><i
                                            class="mdi mdi-arrow-right"></i></span>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-4 col-12">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Next Follow-Ups</h5>
                    <a href="/contacts" class="btn btn-sm btn-outline-secondary">View All</a>
                </div>
                <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
                    <ul class="list-group list-group-flush">
                        @forelse($nextFollowUps as $followUp)
                            <li class="list-group-item followup-item d-flex justify-content-between align-items-start"
                                role="button" data-bs-toggle="offcanvas" data-bs-target="#followUpDetailsModal"
                                data-followup-id="{{ $followUp->id }}">

                                <div>
                                    <strong>{{ $followUp->contact->name ?? 'N/A' }}</strong>
                                    <div class="text-muted small">
                                        {{ $followUp->title ?? '-' }} •
                                        {{ \Carbon\Carbon::parse($followUp->next_follow_up_date)->format('d M Y') }}
                                    </div>
                                </div>

                                <span class="badge rounded-pill bg-label-success">
                                    {{ $followUp->contact->phone_number ?? '-' }}
                                </span>
                            </li>
                        @empty
                            <li class="list-group-item text-center text-muted">
                                No upcoming follow-ups
                            </li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
        {{-- Charts --}}
        <div class="col-xl-4 col-12">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0 text-muted">Contact Status</h5>
                </div>
                <div class="card-body">
                    <div id="contactStatusPie"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-12">
        
            @forelse($upcomingMeetings as $meeting)
                @php
                    $meetingDate = \Carbon\Carbon::parse($meeting->meeting_datetime)->startOfDay();
                    $now = \Carbon\Carbon::now()->startOfDay();

                    if ($meetingDate->isToday()) {
                        $timeLabel = 'Today';
                        $timeClass = 'bg-success';
                        $icon = 'mdi-calendar-today';
                    } elseif ($meetingDate->isTomorrow()) {
                        $timeLabel = 'Tomorrow';
                        $timeClass = 'bg-warning';
                        $icon = 'mdi-calendar-arrow-right';
                    } else {
                        $diffDays = $now->diffInDays($meetingDate);
                        $timeLabel = $diffDays . ' days remaining';
                        $timeClass = 'bg-danger';
                        $icon = 'mdi-calendar-clock';
                    }

                    $participants = $meeting->participants ?? [];
                @endphp

                <div class="card h-100 shadow-sm border-0">
                      <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0 text-muted">Upcoming Meetings</h5>
                </div>
                    <div class="card-body">
                        <!-- Meeting Title + Icon -->
                        <div class="d-flex align-items-center mb-2">
                            <i class="mdi {{ $icon }} me-2 fs-4 text-primary"></i>
                            <h6 class="card-title mb-0">{{ $meeting->title }}</h6>
                        </div>

                        <!-- Time Badge -->
                        <div class="mb-2">
                            <span class="badge {{ $timeClass }} text-white">{{ $timeLabel }}</span>
                        </div>

                        <!-- Organizer & Schedule -->
                        <p class="mb-1 text-muted">
                            <i class="mdi mdi-account-outline me-1"></i>
                            <strong>Organizer:</strong> {{ $meeting->organizer ?? 'N/A' }}
                        </p>
                        <p class="mb-1 text-muted">
                            <i class="mdi mdi-clock-outline me-1"></i>
                            <strong>When:</strong>
                            {{ $meeting->meeting_datetime->format('d M Y, h:i A') }}
                        </p>

                        <p class="mb-1 text-muted">
                            <i class="mdi mdi-map-marker-outline me-1"></i>
                            <strong>Venue:</strong> {{ $meeting->venue ?? 'N/A' }}
                        </p>

                        <!-- Agenda -->
                        <p class="mb-2 text-muted">
                            <i class="mdi mdi-format-list-bulleted me-1"></i>
                            <strong>Agenda:</strong> {{ $meeting->agenda ?? 'No agenda' }}
                        </p>

                        <!-- Participants -->
                        @if (!empty($participants))
                            <div class="d-flex align-items-center mb-2">
                                <strong class="me-2">Participants:</strong>
                                @foreach ($participants as $userId)
                                    @php
                                        $user = \App\Models\User::find($userId);
                                    @endphp
                                    @if ($user)
                                        <li class="avatar avatar-sm pull-up d-flex align-items-center justify-content-center me-1"
                                            data-bs-toggle="tooltip" data-popup="tooltip-custom"
                                            data-bs-placement="bottom" aria-label="{{ $user->name }}"
                                            data-bs-original-title="{{ $user->name }}">
                                            <img class="rounded-circle"
                                                src="{{ $user->profile_image
                                                    ? asset('storage/' . $user->profile_image)
                                                    : asset('/assets/img/avatars/placeholder.png') }}"
                                                alt="{{ $user->name }}">
                                        </li>
                                    @endif
                                @endforeach
                            </div>
                        @endif
                        <!-- MOM / Status -->
                        <p class="mb-0">
                            @if ($meeting->latestMom)
                                <a href="{{ route('meeting-invitations.index') }}"
                                    class="btn btn-sm btn-outline-primary w-100 mt-2">
                                    <i class="mdi mdi-file-document-outline me-1"></i> View MOM
                                </a>

                                @if ($meeting->latestMom->decisions)
                                    <div class="mt-2 p-2 bg-light rounded">
                                        <strong>Decisions:</strong>
                                        {{ \Illuminate\Support\Str::limit($meeting->latestMom->decisions, 60) }}
                                    </div>
                                @endif
                            @else
                                <i class="mdi mdi-checkbox-marked-circle-outline me-1"></i>
                                <strong>Status:</strong>
                                <span class="badge rounded-pill bg-label-info">{{ ucfirst($meeting->status) }}</span>
                            @endif
                        </p>
                    </div>
                </div>
            @empty
                <p class="text-muted">No upcoming meetings</p>
            @endforelse
        </div>
    </div>
    {{-- TAB SECTION --}}
    <div class="nav-align-top mt-4">
        <ul class="nav nav-pills flex-column flex-md-row mb-6 flex-wrap row-gap-2" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="activities-tab" data-bs-toggle="pill" href="#tab-activities"
                    role="tab" aria-controls="tab-activities" aria-selected="true">
                    <i class="icon-base bx bx-task icon-sm me-1_5"></i> Activities & Enquiries
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="finance-tab" data-bs-toggle="pill" href="#tab-finance" role="tab"
                    aria-controls="tab-finance" aria-selected="false">
                    <i class="icon-base bx bx-rupee icon-sm me-1_5"></i> Finance & Renewals
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="remuneration-tab" data-bs-toggle="pill" href="#tab-remuneration" role="tab"
                    aria-controls="tab-remuneration" aria-selected="false">
                    <i class="icon-base bx bx-rupee icon-sm me-1_5"></i> Remuneration
                </a>
            </li>
        </ul>
    </div>

    <div class="tab-content p-0">
        {{-- TAB 1: Activities & Enquiries --}}
        <div class="tab-pane fade show active" id="tab-activities" role="tabpanel" aria-labelledby="activities-tab">

            <div class="row mt-4">
                {{-- Recent Assigned Activities --}}
                <div class="col-xxl-8">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="card-title m-0 me-2">Recent Assigned Activities</h5>
                            <div class="dropdown">
                                <button class="btn text-body-secondary p-0" type="button" id="activityDropdown"
                                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="icon-base bx bx-dots-vertical-rounded icon-lg"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="activityDropdown">
                                    <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                                    <a class="dropdown-item" href="javascript:void(0);">View All</a>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-borderless table-sm">
                                <thead>
                                    <tr>
                                        <th class="ps-6">Team Member</th>
                                        <th>Activity</th>
                                        <th>Status</th>
                                        <th class="pe-6">Progress</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentActivities as $activity)
                                        @php
                                            $logs = $activity->employeeActivityLogs ?? collect();
                                            $totalHours = $logs->sum('hours');
                                            $actualHours = $logs->sum(function ($log) {
                                                if (!$log->actual_time) {
                                                    return 0;
                                                }
                                                [$h, $m, $s] = explode(':', $log->actual_time);
                                                return (int) $h + (int) $m / 60 + (int) $s / 3600;
                                            });
                                            $progress = $totalHours > 0 ? round(($actualHours / $totalHours) * 100) : 0;

                                            if ($logs->count() === 0) {
                                                $overallStatus = 'Pending';
                                            } elseif (
                                                $logs->every(fn($log) => strtolower($log->status) === 'completed')
                                            ) {
                                                $overallStatus = 'Completed';
                                            } elseif (
                                                $logs->contains(fn($log) => strtolower($log->status) === 'in progress')
                                            ) {
                                                $overallStatus = 'In Progress';
                                            } else {
                                                $overallStatus = 'Pending';
                                            }
                                        @endphp
                                        <tr>
                                            {{-- Avatar --}}
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar me-3">
                                                        @if ($activity->user->profile_image)
                                                            <img class="rounded-circle activity-user-avatar"
                                                                src="{{ asset('storage/' . $activity->user->profile_image) }}"
                                                                alt="{{ $activity->user->name }}">
                                                        @else
                                                            <span
                                                                class="avatar-initial rounded-circle bg-label-secondary activity-user-avatar">
                                                                {{ strtoupper(substr($activity->user->name, 0, 2)) }}
                                                            </span>
                                                        @endif
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <h6 class="mb-0 text-truncate">
                                                            {{ $activity->user->name }}
                                                            <span>
                                                                <a href="{{ route('activity.details', ['user_id' => $activity->user->id]) }}"
                                                                    class="badge rounded-pill bg-label-success"
                                                                    target="_blank">all log</a>
                                                            </span>
                                                        </h6>
                                                        <small class="text-truncate text-body">
                                                            {{ $activity->user->email ?? 'N/A' }}
                                                        </small>
                                                    </div>
                                                </div>
                                            </td>

                                            {{-- Activity title --}}
                                            <td>
                                                <span class="badge bg-label-primary text-uppercase" role="button"
                                                    data-bs-toggle="offcanvas" data-bs-target="#activityOffcanvas"
                                                    data-user-id="{{ $activity->user->id }}"
                                                    data-activity-id="{{ $activity->activity_id }}">
                                                    {{ $activity->activity->title ?? 'N/A' }}
                                                </span>
                                            </td>

                                            {{-- Status --}}
                                            <td>
                                                @if (strtolower($overallStatus) === 'completed')
                                                    <span class="badge bg-label-success text-uppercase">Completed</span>
                                                @elseif(strtolower($overallStatus) === 'in progress')
                                                    <span class="badge bg-label-warning text-uppercase">In Progress</span>
                                                @else
                                                    <span
                                                        class="badge bg-label-secondary text-uppercase">{{ ucfirst($overallStatus) }}</span>
                                                @endif
                                            </td>

                                            {{-- Progress --}}
                                            <td>
                                                <div class="chart-progress" data-color="primary"
                                                    data-series="{{ $progress }}" style="min-height: 38px;">
                                                    <div class="progress" style="height:6px;">
                                                        <div class="progress-bar bg-primary" role="progressbar"
                                                            style="width: {{ $progress }}%;"
                                                            aria-valuenow="{{ $progress }}" aria-valuemin="0"
                                                            aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                                <small class="text-muted">{{ $progress }}%</small>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center">No recent assigned activities</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- Latest Enquiries --}}









            </div>
        </div>
        {{-- TAB 2: Finance & Renewals --}}
        <div class="tab-pane fade" id="tab-finance" role="tabpanel" aria-labelledby="finance-tab">

            <div class="row mb-4" style="padding-bottom: 25px;">
                {{-- Recent Invoices --}}
                <div class="col-xl-4 col-12">
                    <div class="card h-100 shadow-sm border-0 mt-4">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">Recent Invoices</h5>
                        </div>
                        <div class="card-body p-0">
                            <ul class="list-group list-group-flush">
                                @forelse ($recentInvoices as $invoice)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <strong>{{ $invoice->ref }}</strong>
                                            <div class="text-muted small">
                                                {{ $invoice->type }} • {{ $invoice->client_name }} •
                                                {{ \Carbon\Carbon::parse($invoice->created_at)->diffForHumans() }}
                                            </div>
                                        </div>
                                        <span class="fw-semibold">₹{{ number_format($invoice->amount, 2) }}</span>
                                    </li>
                                @empty
                                    <li class="list-group-item text-center text-muted">No recent invoices</li>
                                @endforelse
                            </ul>
                        </div>
                    </div>
                </div>

                {{-- Upcoming Renewals --}}
                <div class="col-xl-4 col-12">
                    <div class="card h-100 shadow-sm border-0 mt-4">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Upcoming Renewals</h5>
                            <span class="badge bg-label-danger">Next 15 Days</span>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                @forelse ($upcomingRenewals as $renewal)
                                    @php
                                        $expiry = \Carbon\Carbon::parse($renewal->expiry_date)->startOfDay();
                                        $today = now()->startOfDay();
                                        $daysLeft = $today->diffInDays($expiry, false);

                                        if (isset($renewal->status) && strtolower($renewal->status) === 'paid') {
                                            $badgeText = 'Paid';
                                            $color = 'success';
                                            $progressPercent = 100;
                                        } else {
                                            if ($daysLeft <= 0) {
                                                $badgeText = 'Expired';
                                                $color = 'danger';
                                            } elseif ($daysLeft == 1) {
                                                $badgeText = 'Tomorrow';
                                                $color = 'warning';
                                            } else {
                                                $badgeText = $daysLeft . ' days';
                                                $color = 'primary';
                                            }
                                            $progressPercent = min(100, max(0, round(((15 - $daysLeft) / 15) * 100)));
                                        }
                                    @endphp
                                    <div class="col-12 mb-3">
                                        <div class="d-flex align-items-center rounded p-3 shadow-sm">
                                            <div class="me-3 text-center">
                                                <div class="position-relative d-inline-block">
                                                    <svg width="50" height="50">
                                                        <circle cx="25" cy="25" r="22" stroke="#e9ecef"
                                                            stroke-width="4" fill="none" />
                                                        <circle cx="25" cy="25" r="22"
                                                            stroke="var(--bs-{{ $color }})" stroke-width="4"
                                                            fill="none" stroke-dasharray="138"
                                                            stroke-dashoffset="{{ 138 - (138 * $progressPercent) / 100 }}"
                                                            stroke-linecap="round" transform="rotate(-90 25 25)" />
                                                    </svg>
                                                    <div
                                                        class="position-absolute top-50 start-50 translate-middle small fw-bold text-{{ $color }}">
                                                        {{ $daysLeft >= 0 ? $daysLeft : 0 }}
                                                    </div>
                                                </div>
                                            </div>
                                            <a href="/renewals" class="flex-fill ms-2 text-decoration-none text-dark">
                                                <strong class="d-block">{{ $renewal->title }}</strong>
                                                <div class="text-muted small">Expires on {{ $expiry->format('d M Y') }}
                                                </div>
                                                <div class="small text-muted">Client:
                                                    {{ $renewal->client->name ?? 'N/A' }}</div>
                                            </a>
                                            <span
                                                class="badge rounded-pill bg-label-{{ $color }} ms-3">{{ $badgeText }}</span>
                                        </div>
                                    </div>
                                @empty
                                    <div class="col-12 text-center text-muted py-3">No upcoming renewals 🎉</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Invoice Distribution --}}
                <div class="col-xl-4 col-12">
                    <div class="card h-100 shadow-sm border-0 mt-4">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">Invoice Distribution</h5>
                        </div>
                        <div class="card-body">
                            @foreach (['proposal' => 'primary', 'proforma' => 'info', 'service' => 'success', 'quick' => 'warning', 'renewal' => 'secondary'] as $type => $color)
                                @php
                                    $percentage =
                                        $totalInvoices > 0 ? round(($counts[$type] / $totalInvoices) * 100) : 0;
                                @endphp
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between mb-1">
                                        <small class="text-capitalize">{{ $type }}</small>
                                        <small>{{ $counts[$type] ?? 0 }} ({{ $percentage }}%)</small>
                                    </div>
                                    <div class="progress" style="height: 8px;">
                                        <div class="progress-bar bg-{{ $color }}"
                                            style="width: {{ $percentage }}%"></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>
        </div>
        {{-- TAB 3: Remuneration --}}
        <div class="tab-pane fade" id="tab-remuneration" role="tabpanel" aria-labelledby="remuneration-tab">
            <div class="row mb-4" style="padding-bottom: 25px;">
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="card-title m-0">Employee Salaries</h5>
                            <div class="dropdown">
                                <button class="btn p-0" type="button" id="salaryFilter" data-bs-toggle="dropdown">
                                    <i class="bx bx-dots-vertical-rounded"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="salaryFilter">
                                    <li><a class="dropdown-item" href="#">This Month</a></li>
                                    <li><a class="dropdown-item" href="#">Last Month</a></li>
                                    <li><a class="dropdown-item" href="#">This Year</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0">
                                @foreach ($salaries as $salary)
                                    <li class="d-flex align-items-center mb-4">
                                        <div class="avatar me-3">
                                            @if (!empty($salary->profile_image))
                                                <img src="{{ asset('storage/' . $salary->profile_image) }}"
                                                    alt="{{ $salary->name }}" class="rounded-circle object-fit-cover"
                                                    width="40" height="40" loading="lazy">
                                            @else
                                                <span
                                                    class="avatar-initial rounded-circle bg-label-primary d-inline-flex align-items-center justify-content-center"
                                                    style="width:40px; height:40px;">
                                                    {{ strtoupper(substr($salary->name, 0, 2)) }}
                                                </span>
                                            @endif
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h6 class="mb-1">{{ $salary->name }}</h6>
                                                <span
                                                    class="badge 
                                        @if ($salary->status == 'Paid') bg-label-success rounded-pill
                                        @elseif($salary->status == 'Pending') bg-label-warning rounded-pill
                                        @else bg-danger @endif">
                                                    {{ $salary->status }}
                                                </span>
                                            </div>
                                            <small class="text-muted">
                                                To Pay: ₹{{ number_format($salary->basic_salary, 2) }},
                                                Paid: ₹{{ number_format($salary->total_paid, 2) }},
                                                Pending: ₹{{ number_format($salary->pending_amount, 2) }} <br>
                                                Last Paid:
                                                {{ $salary->last_paid_date ? \Carbon\Carbon::parse($salary->last_paid_date)->format('d-M-Y') : 'N/A' }}
                                            </small>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- /END TAB --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="activityLogsOffcanvas" aria-labelledby="activityLogsLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="activityLogsLabel">Activity Logs</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body pt-4">
            <div id="loadingLogs" class="text-center py-4 d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>

            <ul class="timeline pb-0 mb-0" id="timelineContent">
                <!-- JS will inject timeline items here -->
            </ul>
        </div>

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const triggers = document.querySelectorAll('.badge[data-bs-toggle="offcanvas"]');
            const offcanvasEl = document.getElementById('activityLogsOffcanvas');
            const offcanvas = new bootstrap.Offcanvas(offcanvasEl);
            const timelineContent = document.getElementById('timelineContent');
            const loading = document.getElementById('loadingLogs');

            triggers.forEach(trigger => {
                trigger.addEventListener('click', function() {
                    const userId = this.dataset.userId;
                    const activityId = this.dataset.activityId;

                    // Show offcanvas
                    offcanvas.show();

                    // Show loading spinner
                    timelineContent.innerHTML = '';
                    loading.classList.remove('d-none');

                    // Fetch logs
                    const url =
                        `/employee/${userId}/activity-logs${activityId ? '?activity_id=' + activityId : ''}`;
                    fetch(url)
                        .then(res => res.json())
                        .then(data => {
                            loading.classList.add('d-none');

                            if (!data || data.length === 0) {
                                timelineContent.innerHTML =
                                    '<div class="text-center p-4">No activity logs found.</div>';
                                return;
                            }

                            // Render logs
                            timelineContent.innerHTML = data.map((log, index) => `
                        <li class="timeline-item ${index === data.length - 1 ? 'timeline-item-transparent border-transparent pb-0' : 'timeline-item-transparent border-primary'}">
                            <span class="timeline-point ${log.status === 'Completed' ? 'timeline-point-success' : (log.status === 'In Progress' ? 'timeline-point-warning' : 'timeline-point-secondary')}"></span>
                            <div class="timeline-event">
                                <div class="timeline-header d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0 text-truncate">${log.module_model ? log.module_model.name : 'N/A'}</h6>
                                    <span class="badge ${log.status === 'Completed' ? 'bg-success' : (log.status === 'In Progress' ? 'bg-warning' : 'bg-secondary')}">${log.status}</span>
                                </div>
                                <p class="mb-1"><small>Planned Hours: ${log.hours} | Actual: ${log.actual_time ?? '0:00:00'}</small></p>
                                <p class="mb-1"><small>Start: ${log.start_date} ${log.start_time} | End: ${log.end_time}</small></p>
                                <p class="mb-0"><small>Remarks: ${log.remarks ?? 'N/A'}</small></p>
                            </div>
                        </li>
                    `).join('');
                        })
                        .catch(err => {
                            loading.classList.add('d-none');
                            timelineContent.innerHTML =
                                `<div class="text-center p-4 text-danger">Error loading logs</div>`;
                            console.error(err);
                        });
                });
            });
        });
    </script>
    <div class="modal fade" id="clientDetailsModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title">Client Details</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Modal Body -->
                <div class="modal-body">

                    <!-- Client Basic Info -->
                    <div id="clientBasicInfo" class="mb-3">
                        <div class="card border shadow-sm">
                            <div class="card-body">
                                <div class="row align-items-center">

                                    <!-- Client Name & Phone -->
                                    <div class="col-md-4">
                                        <h6 class="text-muted mb-1">Client</h6>
                                        <h5 id="clientName" class="mb-0"></h5>
                                        <small id="clientPhone" class="text-muted"></small>
                                    </div>

                                    <!-- Followed By -->
                                    <div class="col-md-4">
                                        <h6 class="text-muted mb-1">Followed By</h6>
                                        <div class="d-flex align-items-center gap-2">
                                            <img id="followedAvatar" class="rounded-circle" width="36"
                                                height="36" src="/assets/img/avatars/default.png">
                                            <span id="followedName" class="fw-semibold">-</span>
                                        </div>
                                    </div>

                                    <!-- Assigned To -->
                                    <div class="col-md-4">
                                        <h6 class="text-muted mb-1">Assigned To</h6>
                                        <div class="d-flex align-items-center gap-2">
                                            <img id="assignedAvatar" class="rounded-circle" width="36"
                                                height="36" src="/assets/img/avatars/default.png">
                                            <span id="assignedName" class="fw-semibold">-</span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tabs -->
                    <ul class="nav nav-tabs" id="clientTabs">
                        <li class="nav-item">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-proposals">
                                Proposals (<span id="proposalCount">0</span>)
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-proforma">
                                Proforma (<span id="proformaCount">0</span>)
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-service">
                                Service (<span id="serviceCount">0</span>)
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-quick">
                                Quick Invoice (<span id="quickCount">0</span>)
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Contents -->
                    <div class="tab-content mt-3">
                        <div class="tab-pane fade show active" id="tab-proposals"></div>
                        <div class="tab-pane fade" id="tab-proforma"></div>
                        <div class="tab-pane fade" id="tab-service"></div>
                        <div class="tab-pane fade" id="tab-quick"></div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="followUpDetailsModal"
        aria-labelledby="followUpDetailsLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="followUpDetailsLabel">Follow-Up Details</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body" id="followUpDetailsBody">

            <!-- Loading State -->
            <div class="text-center py-5" id="loadingFollowUp">
                <div class="spinner-border text-primary mb-2" role="status"></div>
                <p class="text-muted mb-0">Loading follow-up details...</p>
            </div>

            <!-- Content -->
            <div id="followUpContent" class="d-none">

                <!-- Contact Card -->
                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-label-primary d-flex align-items-center">
                        <i class="bx bx-user me-2"></i>
                        <h6 class="mb-0">Contact Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <strong>Name</strong>
                                <div class="text-muted" id="followUpContactName"></div>
                            </div>
                            <div class="col-6">
                                <strong>Phone</strong>
                                <div class="text-muted" id="followUpContactPhone"></div>
                            </div>
                            <div class="col-6">
                                <strong>Email</strong>
                                <div class="text-muted" id="followUpContactEmail"></div>
                            </div>
                            <div class="col-12">
                                <strong>Organization</strong>
                                <div class="text-muted" id="followUpContactOrg"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Follow-up Details -->
                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-label-info d-flex align-items-center">
                        <i class="bx bx-calendar-check me-2"></i>
                        <h6 class="mb-0">Follow-Up Details</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-2">
                            <strong>Title</strong><br>
                            <span class="text-muted" id="followUpTitle"></span>
                        </p>

                        <p class="mb-2">
                            <strong>Notes</strong><br>
                            <span class="text-muted" id="followUpNotes"></span>
                        </p>

                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                <strong>Next Date</strong>
                                <div class="text-muted" id="followUpDate"></div>
                            </div>
                            <span class="badge bg-label-success text-uppercase" id="followUpStatus"></span>
                        </div>
                    </div>
                </div>

                <!-- Assigned User -->
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-label-warning d-flex align-items-center">
                        <i class="bx bx-user-check me-2"></i>
                        <h6 class="mb-0">Assigned To</h6>
                    </div>
                    <div class="card-body d-flex align-items-center">
                        <div class="avatar avatar-md me-3">
                            <span class="avatar-initial rounded-circle bg-primary">
                                <i class="bx bx-user text-white"></i>
                            </span>
                        </div>
                        <div>
                            <strong id="followUpAssignedUser"></strong>
                            <div class="text-muted small">Responsible Person</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const followUpItems = document.querySelectorAll('.followup-item');
            const offcanvasEl = document.getElementById('followUpDetailsModal');
            const offcanvas = new bootstrap.Offcanvas(offcanvasEl);

            const loadingEl = document.getElementById('loadingFollowUp');
            const contentEl = document.getElementById('followUpContent');

            followUpItems.forEach(item => {
                item.addEventListener('click', function() {
                    const followUpId = this.dataset.followupId;
                    if (!followUpId) return;

                    // Show loading spinner
                    loadingEl.classList.remove('d-none');
                    contentEl.classList.add('d-none');

                    fetch(`/dashboard/followup/${followUpId}`)
                        .then(res => res.json())
                        .then(data => {
                            loadingEl.classList.add('d-none');
                            contentEl.classList.remove('d-none');

                            const followUp = data.followUp;
                            const contact = data.contact;
                            const assignedUser = data.assignedUser;

                            // Contact info
                            document.getElementById('followUpContactName').innerText = contact
                                ?.name ?? 'N/A';
                            document.getElementById('followUpContactPhone').innerText = contact
                                ?.phone_number ?? 'N/A';
                            document.getElementById('followUpContactEmail').innerText = contact
                                ?.email ?? 'N/A';
                            document.getElementById('followUpContactOrg').innerText = contact
                                ?.organization ?? 'N/A';

                            // Follow-up details
                            document.getElementById('followUpTitle').innerText = followUp
                                ?.title ?? '-';
                            document.getElementById('followUpNotes').innerText = followUp
                                ?.notes ?? '-';
                            document.getElementById('followUpDate').innerText = followUp
                                ?.next_follow_up_date ?? '-';
                            document.getElementById('followUpStatus').innerText = data.status ??
                                '-';


                            // Assigned user
                            document.getElementById('followUpAssignedUser').innerText =
                                assignedUser?.name ?? 'N/A';
                        })
                        .catch(err => {
                            loadingEl.classList.add('d-none');
                            contentEl.classList.remove('d-none');
                            contentEl.innerHTML =
                                '<p class="text-danger">Error loading follow-up details.</p>';
                            console.error(err);
                        });
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // Date formatter
            function formatDate(dateString) {
                if (!dateString) return '-';
                const date = new Date(dateString);
                return date.toLocaleString('en-IN', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });
            }

            // Helper for avatar URL (supports storage folder)
            function getAvatar(imagePath) {
                if (!imagePath) {
                    return '/assets/img/avatars/default.png'; // fallback
                }

                // Full URL already
                if (imagePath.startsWith('http') || imagePath.startsWith('https')) {
                    return imagePath;
                }

                // If the path already contains "images/", do not prepend
                if (imagePath.startsWith('images/')) {
                    return `/storage/${imagePath}`;
                }

                // Otherwise, prepend images folder
                return `/storage/images/${imagePath}`;
            }


            // Render table helper
            function renderTable(containerId, items) {
                const el = document.getElementById(containerId);
                if (!el) return;

                if (!Array.isArray(items) || items.length === 0) {
                    el.innerHTML = `<p class="text-muted">No records found</p>`;
                    return;
                }

                const rows = items.map(item => `
            <tr>
                <td>${item.invoice_number ?? item.title ?? '-'}</td>
                <td>${item.total_amount ?? item.amount ?? item.total ?? '-'}</td>
                <td>${item.status ?? '-'}</td>
                <td>${formatDate(item.created_at)}</td>
            </tr>
        `).join('');

                el.innerHTML = `
            <table class="table table-sm table-hover">
                <thead>
                    <tr>
                        <th>Ref</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>${rows}</tbody>
            </table>
        `;
            }

            // Click handler for each enquiry
            document.querySelectorAll('.enquiry-item').forEach(item => {
                item.addEventListener('click', function() {

                    const contactId = this.dataset.contactId;
                    if (!contactId) return;

                    fetch(`/dashboard/client/${contactId}`)
                        .then(res => res.json())
                        .then(data => {

                            const contact = data.contact || {};
                            const followed = data.followed_by || {};
                            const assigned = data.assigned_to || {};

                            // Populate client info + Followed By + Assigned To
                            document.getElementById('clientBasicInfo').innerHTML = `
                        <div class="card border shadow-sm">
                            <div class="card-body">
                                <div class="row align-items-center">

                                    <!-- Client Info -->
                                    <div class="col-md-4">
                                        <h6 class="text-muted mb-1">Client</h6>
                                        <h5>${contact.name ?? 'N/A'}</h5>
                                        <p class="mb-1"><strong>Phone:</strong> ${contact.phone_number ?? 'N/A'}</p>
                                        <p class="mb-1"><strong>Email:</strong> ${contact.email ?? 'N/A'}</p>
                                        <p class="mb-0"><strong>Organization:</strong> ${contact.organization ?? 'N/A'}</p>
                                    </div>

                                    <!-- Followed By -->
                                    <div class="col-md-4">
                                        <h6 class="text-muted mb-1">Followed By</h6>
                                        <div class="d-flex align-items-center gap-2">
                                            <img src="${getAvatar(followed.profile_image)}" class="rounded-circle" width="36" height="36">
                                            <span class="fw-semibold">${followed.name ?? 'System'}</span>
                                        </div>
                                    </div>

                                    <!-- Assigned To -->
                                    <div class="col-md-4">
                                        <h6 class="text-muted mb-1">Assigned To</h6>
                                        <div class="d-flex align-items-center gap-2">
                                            <img src="${getAvatar(assigned.profile_image)}" class="rounded-circle" width="36" height="36">
                                            <span class="fw-semibold">${assigned.name ?? 'Unassigned'}</span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    `;

                            // Update tab counts
                            document.getElementById('proposalCount').innerText = data.counts
                                ?.proposal ?? 0;
                            document.getElementById('proformaCount').innerText = data.counts
                                ?.proforma ?? 0;
                            document.getElementById('serviceCount').innerText = data.counts
                                ?.service ?? 0;
                            document.getElementById('quickCount').innerText = data.counts
                                ?.quick ?? 0;

                            // Render tab tables
                            renderTable('tab-proposals', data.proposals);
                            renderTable('tab-proforma', data.proforma);
                            renderTable('tab-service', data.service);
                            renderTable('tab-quick', data.quick);

                        })
                        .catch(err => console.error('Client fetch error:', err));
                });
            });

        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const crmStatusChart = @json($crmStatusChart);

            const options = {
                chart: {
                    type: 'donut',
                    height: 280,
                    events: {
                        dataPointSelection: function(event, chartContext, config) {
                            const index = config.dataPointIndex;
                            const statusId = crmStatusChart[index]?.id;

                            if (statusId) {
                                window.location.href =
                                    `/crm?state=&district=&status=${statusId}&category=&search=`;
                            }
                        }
                    }
                },
                labels: @json($contactStatusLabels),
                series: @json($contactStatusValues),
                colors: [
                    '#696cff',
                    '#03c3ec',
                    '#8592a3',
                    '#71dd37',
                    '#ffab00'
                ],
                stroke: {
                    width: 0
                },
                dataLabels: {
                    enabled: false
                },
                legend: {
                    position: 'bottom',
                    fontSize: '13px'
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '70%'
                        }
                    }
                }
            };

            new ApexCharts(
                document.querySelector('#contactStatusPie'),
                options
            ).render();
        });
    </script>
    
     @else
        {{-- For user_type = 345, show welcome message only --}}
        <div class="text-center py-5">
            <h3>Welcome, {{ $authUser->name }}!</h3>
            <p>You currently have limited access.</p>
        </div>
    @endif
@endsection