{{-- New-Unity ERP | app/Modules/Sales/Resources/Views/dashboard/index.blade.php | v1.0 | 20/07/2026 --}}
{{-- v1.0 — Dashboard de ventas role-based: vista gerencial y vista personal del vendedor. --}}

@extends('layouts.vertical', ['pageTitle' => __('sales.dashboard.title')])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-chart-line"></i> {{ __('sales.dashboard.title') }}
        <small>{{ $isManager ? __('sales.dashboard.team_overview') : __('sales.dashboard.my_performance') }}</small>
    </h1>
    <div class="subheader-block d-flex gap-2 align-items-center">

        {{-- Period selector --}}
        <form method="GET" class="d-flex gap-2 align-items-center" id="dashboardFilters">
            <select name="period" class="form-select form-select-sm" onchange="this.form.submit()" style="width:auto;">
                <option value="today"   {{ $period == 'today'   ? 'selected':'' }}>{{ __('sales.dashboard.period_today') }}</option>
                <option value="week"    {{ $period == 'week'    ? 'selected':'' }}>{{ __('sales.dashboard.period_week') }}</option>
                <option value="month"   {{ $period == 'month'   ? 'selected':'' }}>{{ __('sales.dashboard.period_month') }}</option>
                <option value="quarter" {{ $period == 'quarter' ? 'selected':'' }}>{{ __('sales.dashboard.period_quarter') }}</option>
                <option value="year"    {{ $period == 'year'    ? 'selected':'' }}>{{ __('sales.dashboard.period_year') }}</option>
            </select>

            {{-- Seller filter (managers only) --}}
            @if($isManager)
            <select name="seller_id" class="form-select form-select-sm" onchange="this.form.submit()" style="width:auto;">
                <option value="">{{ __('sales.dashboard.all_sellers') }}</option>
                @foreach($sellersList as $s)
                <option value="{{ $s->id }}" {{ $sellerId == $s->id ? 'selected':'' }}>{{ $s->name }}</option>
                @endforeach
            </select>

            {{-- Toggle view --}}
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn {{ !$sellerId ? 'btn-primary' : 'btn-outline-primary' }}"
                        onclick="document.querySelector('[name=seller_id]').value=''; this.form.submit();">
                    <i class="fal fa-users me-1"></i> {{ __('sales.dashboard.team') }}
                </button>
                <button type="button" class="btn {{ $sellerId == auth()->id() ? 'btn-primary' : 'btn-outline-primary' }}"
                        onclick="document.querySelector('[name=seller_id]').value='{{ auth()->id() }}'; this.form.submit();">
                    <i class="fal fa-user me-1"></i> {{ __('sales.dashboard.my_view') }}
                </button>
            </div>
            @endif
        </form>

        <a href="{{ route('sales.opportunities.report') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fal fa-file-chart-line me-1"></i> {{ __('sales.dashboard.full_report') }}
        </a>
    </div>
</div>
@endsection

@section('content')

{{-- ── KPI Row ── --}}
<div class="row mb-3">
    <div class="col-xl-3 col-md-6 mb-2">
        <div class="card border-0 shadow-sm h-100" style="border-left: 3px solid #185FA5 !important;">
            <div class="card-body py-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-xs text-muted fw-bold text-uppercase mb-1">{{ __('sales.dashboard.pipeline_value') }}</div>
                        <div class="h4 fw-bold mb-0">${{ number_format($pipelineValue, 0) }}</div>
                        <div class="small text-muted">{{ $activeOpps->count() }} {{ __('sales.dashboard.active_opportunities') }}</div>
                    </div>
                    <i class="fal fa-funnel-dollar fa-2x text-primary opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-2">
        <div class="card border-0 shadow-sm h-100" style="border-left: 3px solid #28a745 !important;">
            <div class="card-body py-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-xs text-muted fw-bold text-uppercase mb-1">{{ __('sales.dashboard.won_this_period') }}</div>
                        <div class="h4 fw-bold mb-0 text-success">${{ number_format($wonValue, 0) }}</div>
                        <div class="small text-muted">{{ $wonCount }} {{ __('sales.dashboard.deals_closed') }}</div>
                    </div>
                    <i class="fal fa-trophy fa-2x text-success opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-2">
        <div class="card border-0 shadow-sm h-100" style="border-left: 3px solid #dc3545 !important;">
            <div class="card-body py-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-xs text-muted fw-bold text-uppercase mb-1">{{ __('sales.dashboard.at_risk') }}</div>
                        <div class="h4 fw-bold mb-0 text-danger">{{ $atRisk->count() }}</div>
                        <div class="small text-muted">
                            <a href="#" onclick="loadDrilldown('at_risk')" class="text-danger">{{ __('sales.dashboard.view_details') }}</a>
                        </div>
                    </div>
                    <i class="fal fa-exclamation-triangle fa-2x text-danger opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-2">
        <div class="card border-0 shadow-sm h-100" style="border-left: 3px solid #ffc107 !important;">
            <div class="card-body py-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-xs text-muted fw-bold text-uppercase mb-1">{{ __('sales.dashboard.conversion_rate') }}</div>
                        <div class="h4 fw-bold mb-0">{{ $conversionRate }}%</div>
                        <div class="small text-muted">{{ $newCustomers }} {{ __('sales.dashboard.new_customers') }}</div>
                    </div>
                    <i class="fal fa-percentage fa-2x text-warning opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ── Pipeline + Team/Personal ── --}}
<div class="row mb-3">

    {{-- Pipeline by stage --}}
    <div class="col-xl-4 mb-3">
        <div class="panel h-100">
            <div class="panel-hdr">
                <h2><i class="fal fa-stream me-2"></i> {{ __('sales.dashboard.pipeline_by_stage') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    @php $maxValue = collect($pipeline)->max('value') ?: 1; @endphp
                    @foreach($pipeline as $key => $stage)
                    @if(!in_array($key, ['won','lost']))
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="small fw-bold" style="color:{{ $stage['color'] }}">{{ $stage['label'] }}</span>
                            <span class="small text-muted">{{ $stage['count'] }} · ${{ number_format($stage['value'], 0) }}</span>
                        </div>
                        <div class="progress" style="height:6px;">
                            <div class="progress-bar" style="width:{{ $maxValue > 0 ? ($stage['value']/$maxValue*100) : 0 }}%;background:{{ $stage['color'] }};"></div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                    <div class="border-top pt-2 mt-2">
                        <div class="d-flex justify-content-between small">
                            <span class="text-success fw-bold"><i class="fal fa-check-circle me-1"></i>{{ __('sales.dashboard.won') }}: ${{ number_format($pipeline['won']['value'] ?? 0, 0) }}</span>
                            <span class="text-danger fw-bold"><i class="fal fa-times-circle me-1"></i>{{ __('sales.dashboard.lost') }}: {{ $pipeline['lost']['count'] ?? 0 }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($isManager && !$sellerId)
    {{-- Team leaderboard --}}
    <div class="col-xl-8 mb-3">
        <div class="panel h-100">
            <div class="panel-hdr">
                <h2><i class="fal fa-medal me-2"></i> {{ __('sales.dashboard.team_performance') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0 small">
                            <thead class="bg-primary-600">
                                <tr>
                                    <th class="ps-3">#</th>
                                    <th>{{ __('sales.dashboard.seller') }}</th>
                                    <th class="text-end">{{ __('sales.dashboard.pipeline') }}</th>
                                    <th class="text-end">{{ __('sales.dashboard.won') }}</th>
                                    <th class="text-center">{{ __('sales.dashboard.opps') }}</th>
                                    <th class="text-center">{{ __('sales.dashboard.done_today') }}</th>
                                    <th class="text-center">{{ __('sales.dashboard.overdue') }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($teamStats as $i => $ts)
                                <tr>
                                    <td class="ps-3 fw-bold text-muted">{{ $i + 1 }}</td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold"
                                                 style="width:28px;height:28px;background:var(--bs-primary-bg-subtle);color:var(--bs-primary);font-size:10px;flex-shrink:0;">
                                                {{ strtoupper(substr($ts['seller']->name, 0, 2)) }}
                                            </div>
                                            {{ $ts['seller']->name }}
                                        </div>
                                    </td>
                                    <td class="text-end fw-bold">${{ number_format($ts['pipeline_value'], 0) }}</td>
                                    <td class="text-end text-success fw-bold">${{ number_format($ts['won_value'], 0) }}</td>
                                    <td class="text-center">{{ $ts['opp_count'] }}</td>
                                    <td class="text-center text-success">{{ $ts['activities_done'] }}</td>
                                    <td class="text-center {{ $ts['overdue'] > 0 ? 'text-danger fw-bold' : 'text-muted' }}">
                                        {{ $ts['overdue'] }}
                                    </td>
                                    <td>
                                        <a href="{{ route('sales.dashboard') }}?seller_id={{ $ts['seller']->id }}&period={{ $period }}"
                                           class="btn btn-xs btn-outline-primary" style="font-size:10px;padding:2px 8px;">{{ __('sales.dashboard.view') }}</a>
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="8" class="text-center text-muted py-3">{{ __('sales.dashboard.no_sellers') }}</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @else
    {{-- Personal view: my opportunities --}}
    <div class="col-xl-8 mb-3">
        <div class="panel h-100">
            <div class="panel-hdr">
                <h2><i class="fal fa-list me-2"></i> {{ __('sales.dashboard.my_opportunities') }}</h2>
                <div class="panel-toolbar">
                    <a href="{{ route('sales.opportunities.index') }}" class="btn btn-sm btn-outline-primary">{{ __('sales.dashboard.view_all') }}</a>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0 small">
                            <thead class="bg-primary-600">
                                <tr>
                                    <th class="ps-3">{{ __('sales.dashboard.opportunity') }}</th>
                                    <th>{{ __('sales.dashboard.customer') }}</th>
                                    <th class="text-center">{{ __('sales.dashboard.stage') }}</th>
                                    <th class="text-end">{{ __('sales.dashboard.value') }}</th>
                                    <th class="text-center">{{ __('sales.dashboard.risk') }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($myOpps as $opp)
                                @php
                                $riskColor = match($opp->risk) { 'high'=>'danger', 'medium'=>'warning', default=>'success' };
                                $riskLabel = match($opp->risk) { 'high'=>__('sales.dashboard.risk_high'), 'medium'=>__('sales.dashboard.risk_medium'), default=>__('sales.dashboard.risk_low') };
                                @endphp
                                <tr>
                                    <td class="ps-3">
                                        <div class="fw-bold">{{ $opp->title }}</div>
                                        <div class="text-muted" style="font-size:10px;">{{ $opp->opportunity_number }}</div>
                                    </td>
                                    <td>{{ $opp->customer->commercial_name ?? '—' }}</td>
                                    <td class="text-center">
                                        <span class="badge" style="background:{{ $opp->stage_color }};font-size:10px;">{{ $opp->stage_label }}</span>
                                    </td>
                                    <td class="text-end fw-bold">${{ number_format($opp->estimated_value, 0) }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ $riskColor }}" style="font-size:10px;">{{ $riskLabel }}</span>
                                    </td>
                                    <td>
                                        <a href="{{ route('sales.opportunities.show', $opp) }}"
                                           class="btn btn-xs btn-outline-primary" style="font-size:10px;padding:2px 8px;">{{ __('sales.dashboard.open') }}</a>
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="6" class="text-center text-muted py-3">{{ __('sales.dashboard.no_active_opportunities') }}</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

{{-- ── Activities + Alerts ── --}}
<div class="row">

    {{-- Today's activities --}}
    <div class="col-xl-5 mb-3">
        <div class="panel h-100">
            <div class="panel-hdr">
                <h2><i class="fal fa-calendar-day me-2"></i> {{ __('sales.dashboard.todays_activities') }}
                    <span class="badge bg-primary ms-2">{{ $todayActivities->count() }}</span>
                </h2>
                <div class="panel-toolbar">
                    <a href="{{ route('sales.activities.calendar') }}" class="btn btn-sm btn-outline-primary">{{ __('sales.dashboard.calendar') }}</a>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content p-0" style="max-height:280px;overflow-y:auto;">
                    @forelse($todayActivities->sortBy('scheduled_at') as $act)
                    @php $tc = match($act->type_color) {'primary'=>'0d6efd','info'=>'0dcaf0','warning'=>'ffc107','success'=>'28a745','dark'=>'212529',default=>'6c757d'}; @endphp
                    <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom {{ $act->status == 'overdue' ? 'bg-danger bg-opacity-10' : '' }}">
                        <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:32px;height:32px;background:#{{ $tc }}22;">
                            <i class="fal {{ $act->type_icon }}" style="color:#{{ $tc }};font-size:14px;"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="fw-bold small">{{ $act->title }}</div>
                            <div class="text-muted" style="font-size:11px;">
                                {{ $act->scheduled_at->format('H:i') }}
                                @if($act->opportunity) · {{ $act->opportunity->opportunity_number }} @endif
                                @if($isManager) · {{ $act->assignedTo->name ?? '' }} @endif
                            </div>
                        </div>
                        @if(in_array($act->status, ['pending','in_progress']))
                        <button class="btn btn-xs btn-outline-success btn-complete-act" data-id="{{ $act->id }}"
                                style="font-size:10px;padding:2px 8px;">{{ __('sales.dashboard.done') }}</button>
                        @else
                        <span class="badge bg-success" style="font-size:10px;">{{ __('sales.dashboard.done') }}</span>
                        @endif
                    </div>
                    @empty
                    <div class="text-center py-4 text-muted">
                        <i class="fal fa-calendar-check fa-2x d-block mb-2 opacity-50"></i>
                        <small>{{ __('sales.dashboard.no_activities_today') }}</small>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- Alerts --}}
    <div class="col-xl-7 mb-3">
        <div class="panel h-100">
            <div class="panel-hdr">
                <h2><i class="fal fa-bell me-2"></i> {{ __('sales.dashboard.alerts_title') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="row g-2">

                        {{-- At risk --}}
                        <div class="col-md-6">
                            <div class="card border-0 h-100" style="background:var(--bs-danger-bg-subtle);">
                                <div class="card-body py-2 px-3">
                                    <div class="d-flex align-items-center gap-2 mb-1">
                                        <i class="fal fa-exclamation-triangle text-danger"></i>
                                        <span class="fw-bold small text-danger">{{ $atRisk->count() }} {{ __('sales.dashboard.at_risk_short') }}</span>
                                    </div>
                                    @forelse($atRisk->take(3) as $opp)
                                    <div class="text-danger small mb-1" style="font-size:11px;">
                                        · {{ $opp->opportunity_number }} — {{ Str::limit($opp->title, 28) }}
                                    </div>
                                    @empty
                                    <div class="text-success small"><i class="fal fa-check me-1"></i>{{ __('sales.dashboard.all_clear') }}</div>
                                    @endforelse
                                    @if($atRisk->count() > 3)
                                    <a href="#" onclick="loadDrilldown('at_risk')" class="small text-danger">+ {{ $atRisk->count() - 3 }} {{ __('sales.dashboard.more') }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- Overdue activities --}}
                        <div class="col-md-6">
                            <div class="card border-0 h-100" style="background:var(--bs-warning-bg-subtle);">
                                <div class="card-body py-2 px-3">
                                    <div class="d-flex align-items-center gap-2 mb-1">
                                        <i class="fal fa-clock text-warning"></i>
                                        <span class="fw-bold small text-warning">{{ $overdueActivities->count() }} {{ __('sales.dashboard.overdue_activities') }}</span>
                                    </div>
                                    @forelse($overdueActivities->take(3) as $act)
                                    <div class="text-warning small mb-1" style="font-size:11px;">
                                        · {{ $act->title }} ({{ $act->scheduled_at->diffForHumans() }})
                                    </div>
                                    @empty
                                    <div class="text-success small"><i class="fal fa-check me-1"></i>{{ __('sales.dashboard.no_overdue') }}</div>
                                    @endforelse
                                    @if($overdueActivities->count() > 3)
                                    <a href="{{ route('sales.activities.index') }}?status=overdue" class="small text-warning">+ {{ $overdueActivities->count() - 3 }} {{ __('sales.dashboard.more') }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- Pending activities --}}
                        <div class="col-md-6">
                            <div class="card border-0 h-100" style="background:var(--bs-primary-bg-subtle);">
                                <div class="card-body py-2 px-3">
                                    <div class="d-flex align-items-center gap-2 mb-1">
                                        <i class="fal fa-tasks text-primary"></i>
                                        <span class="fw-bold small text-primary">{{ $pendingActivities->count() }} {{ __('sales.dashboard.pending') }}</span>
                                    </div>
                                    <div class="small text-primary">{{ __('sales.dashboard.pending_desc') }}</div>
                                    <a href="{{ route('sales.activities.index') }}?status=pending" class="small text-primary">{{ __('sales.dashboard.view_all_arrow') }}</a>
                                </div>
                            </div>
                        </div>

                        {{-- Expiring quotes --}}
                        <div class="col-md-6">
                            <div class="card border-0 h-100" style="background:var(--bs-success-bg-subtle);">
                                <div class="card-body py-2 px-3">
                                    <div class="d-flex align-items-center gap-2 mb-1">
                                        <i class="fal fa-file-alt text-success"></i>
                                        <span class="fw-bold small text-success">{{ $newCustomers }} {{ __('sales.dashboard.new_customers') }}</span>
                                    </div>
                                    <div class="small text-success">{{ __('sales.dashboard.new_customers_added') }}</div>
                                    <a href="{{ route('sales.customers.index') }}" class="small text-success">{{ __('sales.dashboard.view_customers') }}</a>
                                </div>
                            </div>
                        </div>

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

{{-- Modal: Drill-down --}}
<div class="modal fade" id="drilldownModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="drilldownTitle">{{ __('sales.dashboard.details') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="drilldownBody">
                <div class="text-center py-3"><i class="fal fa-spinner fa-spin fa-2x text-muted"></i></div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
var CSRF         = '{{ csrf_token() }}';
var DRILLDOWN_URL= '{{ route("sales.dashboard.drilldown") }}';
var SELLER_ID    = '{{ $sellerId ?? "" }}';

// Complete activity
document.querySelectorAll('.btn-complete-act').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var id = this.dataset.id;
        var btn = this;
        fetch('/sales/activities/' + id + '/complete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
            body: JSON.stringify({})
        }).then(r => r.json()).then(function(res) {
            if (res.success) {
                btn.outerHTML = '<span class="badge bg-success" style="font-size:10px;">{{ __('sales.dashboard.done') }}</span>';
                showNotification('{{ __('sales.dashboard.activity_completed') }}', 'success');
            }
        });
    });
});

// Drill-down modal
function loadDrilldown(type) {
    var titles = { at_risk: '{{ __('sales.dashboard.opportunities_at_risk') }}', overdue_activities: '{{ __('sales.dashboard.overdue_activities_title') }}', today_activities: '{{ __('sales.dashboard.todays_activities') }}' };
    document.getElementById('drilldownTitle').textContent = titles[type] || '{{ __('sales.dashboard.details') }}';
    document.getElementById('drilldownBody').innerHTML = '<div class="text-center py-3"><i class="fal fa-spinner fa-spin fa-2x text-muted"></i></div>';
    new bootstrap.Modal(document.getElementById('drilldownModal')).show();

    fetch(DRILLDOWN_URL + '?type=' + type + (SELLER_ID ? '&seller_id=' + SELLER_ID : ''))
        .then(r => r.json())
        .then(function(data) {
            if (data.length === 0) {
                document.getElementById('drilldownBody').innerHTML = '<p class="text-center text-muted py-3">{{ __('sales.dashboard.no_records') }}</p>';
                return;
            }
            var html = '<div class="table-responsive"><table class="table table-sm table-hover small"><thead class="table-light"><tr>';
            if (type === 'at_risk') {
                html += '<th>{{ __('sales.dashboard.opportunity') }}</th><th>{{ __('sales.dashboard.customer') }}</th><th>{{ __('sales.dashboard.stage') }}</th><th>{{ __('sales.dashboard.value') }}</th><th>{{ __('sales.dashboard.last_activity') }}</th></tr></thead><tbody>';
                data.forEach(function(d) {
                    html += '<tr><td><strong>' + d.opportunity_number + '</strong><br><small class="text-muted">' + d.title + '</small></td>' +
                        '<td>' + (d.customer ? d.customer.commercial_name : '—') + '</td>' +
                        '<td><span class="badge" style="background:' + (d.stage_color||'#6c757d') + '">' + d.stage + '</span></td>' +
                        '<td>$' + parseInt(d.estimated_value).toLocaleString() + '</td>' +
                        '<td>' + (d.last_activity_at ? new Date(d.last_activity_at).toLocaleDateString() : '{{ __('sales.dashboard.never') }}') + '</td></tr>';
                });
            } else {
                html += '<th>{{ __('sales.dashboard.activity') }}</th><th>{{ __('sales.dashboard.type') }}</th><th>{{ __('sales.dashboard.scheduled') }}</th><th>{{ __('sales.dashboard.assigned') }}</th></tr></thead><tbody>';
                data.forEach(function(d) {
                    html += '<tr><td>' + d.title + '</td><td>' + d.type + '</td>' +
                        '<td>' + new Date(d.scheduled_at).toLocaleString() + '</td>' +
                        '<td>' + (d.assigned_to ? d.assigned_to.name : '—') + '</td></tr>';
                });
            }
            html += '</tbody></table></div>';
            document.getElementById('drilldownBody').innerHTML = html;
        });
}
</script>
@endsection