@extends('layouts.app')
@section('title', 'Reports')
@section('breadcrumb')<span class="text-white">Reports & Analytics</span>@endsection

@section('content')
<div class="space-y-6" x-data="{}">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
            <h1>Reports &amp; Analytics</h1>
            <p class="text-sm text-slate-400 mt-1">Pipeline performance, revenue trends, and conversion metrics</p>
        </div>
        <a href="{{ request()->fullUrlWithQuery(['export' => 'csv']) }}" class="btn btn-secondary">
            <i class="fas fa-download mr-2"></i>Export CSV
        </a>
    </div>

    <!-- Filter Bar -->
    <form method="GET" action="{{ route('reports.index') }}" class="card p-4">
        <div class="flex flex-wrap items-end gap-3">
            <div>
                <label class="block text-xs text-slate-500 mb-1">From</label>
                <input type="date" name="from" value="{{ $from->format('Y-m-d') }}" class="input" style="width:150px;">
            </div>
            <div>
                <label class="block text-xs text-slate-500 mb-1">To</label>
                <input type="date" name="to" value="{{ $to->format('Y-m-d') }}" class="input" style="width:150px;">
            </div>
            <div>
                <label class="block text-xs text-slate-500 mb-1">Stage</label>
                <select name="stage_filter" class="input" style="width:160px;">
                    <option value="">All Stages</option>
                    @foreach(['lead'=>'Lead','consult'=>'Consultation','sold'=>'Sold','contracts'=>'Contracts','cm'=>'Check Measure','processing'=>'Processing','delivery'=>'Delivery','installation'=>'Installation','completion'=>'Completion'] as $k=>$v)
                    <option value="{{ $k }}" {{ $stageFilter === $k ? 'selected' : '' }}>{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-slate-500 mb-1">Project Manager</label>
                <select name="pm_filter" class="input" style="width:180px;">
                    <option value="">All PMs</option>
                    @foreach($projectManagers as $pm)
                    <option value="{{ $pm->id }}" {{ $pmFilter == $pm->id ? 'selected' : '' }}>{{ $pm->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-slate-500 mb-1">Group By</label>
                <select name="group_by" class="input" style="width:150px;">
                    @foreach($groupLabels as $key => $label)
                    <option value="{{ $key }}" {{ $groupBy === $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="fas fa-filter mr-2"></i>Apply</button>
                <a href="{{ route('reports.index') }}" class="btn btn-secondary">Reset</a>
            </div>
        </div>
        @if($stageFilter || $pmFilter)
        <div class="mt-2 flex flex-wrap gap-2">
            @if($stageFilter)
            <span class="inline-flex items-center gap-1 text-xs bg-blue-900/40 text-blue-300 border border-blue-700 rounded-full px-3 py-1">
                Stage: {{ ucfirst($stageFilter) }}
                <a href="{{ request()->fullUrlWithQuery(['stage_filter'=>null]) }}" class="ml-1 text-blue-400 hover:text-white"><i class="fas fa-times text-xs"></i></a>
            </span>
            @endif
            @if($pmFilter)
            @php $pmName = $projectManagers->firstWhere('id', $pmFilter)?->name ?? 'Unknown'; @endphp
            <span class="inline-flex items-center gap-1 text-xs bg-purple-900/40 text-purple-300 border border-purple-700 rounded-full px-3 py-1">
                PM: {{ $pmName }}
                <a href="{{ request()->fullUrlWithQuery(['pm_filter'=>null]) }}" class="ml-1 text-purple-400 hover:text-white"><i class="fas fa-times text-xs"></i></a>
            </span>
            @endif
        </div>
        @endif
    </form>

    <!-- KPI Row -->
    <!-- <div class="grid grid-cols-2 lg:grid-cols-6 gap-4">
        <div class="stat-card">
            <div class="text-xs text-slate-500 mb-1">Total Revenue</div>
            <div class="text-2xl font-bold text-green-400">${{ number_format($totalRevenue) }}</div>
            <div class="text-xs text-slate-500 mt-1">Completed jobs</div>
        </div>
        <div class="stat-card">
            <div class="text-xs text-slate-500 mb-1">Total Jobs</div>
            <div class="text-2xl font-bold text-white">{{ $totalJobs }}</div>
            <div class="text-xs text-slate-500 mt-1">In period</div>
        </div>
        <div class="stat-card">
            <div class="text-xs text-slate-500 mb-1">Completed</div>
            <div class="text-2xl font-bold text-emerald-400">{{ $completedJobs }}</div>
            <div class="text-xs text-slate-500 mt-1">{{ $totalJobs > 0 ? round(($completedJobs / $totalJobs) * 100) : 0 }}% rate</div>
        </div>
        <div class="stat-card">
            <div class="text-xs text-slate-500 mb-1">Avg Job Value</div>
            <div class="text-2xl font-bold text-blue-400">${{ number_format($avgJobValue) }}</div>
            <div class="text-xs text-slate-500 mt-1">Per completed job</div>
        </div>
        <div class="stat-card">
            <div class="text-xs text-slate-500 mb-1">Total Leads</div>
            <div class="text-2xl font-bold text-purple-400">{{ $totalLeads }}</div>
            <div class="text-xs text-slate-500 mt-1">In period</div>
        </div>
        <div class="stat-card">
            <div class="text-xs text-slate-500 mb-1">Lead→Job Rate</div>
            <div class="text-2xl font-bold text-amber-400">{{ $conversionRate }}%</div>
            <div class="text-xs text-slate-500 mt-1">Conversion</div>
        </div>
    </div> -->

    <!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
     
        <div class="card p-5">
            <h3 class="mb-5">Jobs by Pipeline Stage</h3>
            @php
            $stageLabels = ['lead'=>'Lead','consult'=>'Consultation','sold'=>'Sold','contracts'=>'Contracts','cm'=>'Check Measure','processing'=>'Processing','delivery'=>'Delivery','installation'=>'Installation','completion'=>'Completion'];
            $stageColors = ['lead'=>'#94a3b8','consult'=>'#60a5fa','sold'=>'#4ade80','contracts'=>'#c084fc','cm'=>'#818cf8','processing'=>'#2dd4bf','delivery'=>'#fb923c','installation'=>'#fbbf24','completion'=>'#34d399'];
            $maxVal = max(array_values($jobsByStage) + [1]);
            @endphp
            <div class="space-y-3">
                @foreach($stageLabels as $key => $label)
                @php $val = $jobsByStage[$key] ?? 0; $pct = $maxVal > 0 ? ($val / $maxVal) * 100 : 0; @endphp
                <a href="{{ route('reports.index', array_merge(request()->except('stage_filter'), ['stage_filter' => $key])) }}"
                   class="flex items-center gap-3 {{ $stageFilter === $key ? 'ring-1 ring-blue-500 rounded' : '' }}">
                    <div class="text-xs text-slate-400 w-24 text-right flex-shrink-0">{{ $label }}</div>
                    <div class="flex-1 h-6 rounded-md overflow-hidden" style="background: #0f172a;">
                        <div class="h-full rounded-md flex items-center px-2" style="width: {{ max($pct, 2) }}%; background: {{ $stageColors[$key] ?? '#60a5fa' }}22; border-left: 3px solid {{ $stageColors[$key] ?? '#60a5fa' }};">
                            @if($val > 0)<span class="text-xs font-bold" style="color: {{ $stageColors[$key] ?? '#60a5fa' }};">{{ $val }}</span>@endif
                        </div>
                    </div>
                    <div class="text-sm font-bold text-white w-6 text-right flex-shrink-0">{{ $val }}</div>
                </a>
                @endforeach
            </div>
            <p class="text-xs text-slate-600 mt-3">Click a stage bar to filter the report.</p>
        </div>

      
        <div class="card p-5">
            <h3 class="mb-5">Revenue Trend</h3>
            @php $maxRev = max(array_column($revenueByMonth, 'revenue') + [1]); @endphp
            <div class="flex items-end gap-2 h-40">
                @foreach($revenueByMonth as $m)
                @php $barH = $maxRev > 0 ? ($m['revenue'] / $maxRev) * 100 : 0; @endphp
                <div class="flex-1 flex flex-col items-center gap-1">
                    <div class="text-xs text-slate-500">{{ $m['revenue'] > 0 ? '$'.number_format($m['revenue']/1000,0).'k' : '' }}</div>
                    <div class="w-full rounded-t-md" style="height: {{ max($barH, 2) }}%; background: linear-gradient(to top, #1d4ed8, #3b82f6); min-height: 4px;"></div>
                    <div class="text-xs text-slate-500 text-center leading-tight">{{ $m['month'] }}</div>
                    <div class="text-xs text-slate-600">{{ $m['count'] }}</div>
                </div>
                @endforeach
            </div>
        </div>
    </div> -->

    <!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
       
        <div class="card p-5">
            <h3 class="mb-5">Lead Source Distribution</h3>
            @php
            $sourceColors = ['referral'=>'#4ade80','website'=>'#60a5fa','walk_in'=>'#f472b6','showroom'=>'#fb923c','google'=>'#c084fc','social_media'=>'#fbbf24','real_estate'=>'#2dd4bf','other'=>'#94a3b8'];
            $sourceLabels = ['referral'=>'Referral','website'=>'Website','walk_in'=>'Walk In','showroom'=>'Showroom','google'=>'Google Ads','social_media'=>'Social Media','real_estate'=>'Real Estate','other'=>'Other'];
            $totalSourceLeads = array_sum(array_values($leadsBySource));
            @endphp
            @if($totalSourceLeads > 0)
            <div class="flex gap-6 items-center">
                @php
                $cx = 60; $cy = 60; $r = 45; $stroke = 18;
                $circumference = 2 * M_PI * $r;
                $offset = 0; $segments = [];
                foreach($leadsBySource as $src => $cnt) {
                    $pct = $cnt / $totalSourceLeads;
                    $segments[] = ['src'=>$src,'cnt'=>$cnt,'pct'=>$pct,'dash'=>$pct*$circumference,'offset'=>$offset,'color'=>$sourceColors[$src]??'#94a3b8','label'=>$sourceLabels[$src]??$src];
                    $offset += $pct*$circumference;
                }
                @endphp
                <svg width="120" height="120" viewBox="0 0 120 120" class="flex-shrink-0">
                    <circle cx="{{ $cx }}" cy="{{ $cy }}" r="{{ $r }}" fill="none" stroke="#1e293b" stroke-width="{{ $stroke }}"/>
                    @foreach($segments as $seg)
                    <circle cx="{{ $cx }}" cy="{{ $cy }}" r="{{ $r }}" fill="none" stroke="{{ $seg['color'] }}"
                            stroke-width="{{ $stroke }}" stroke-dasharray="{{ round($seg['dash'],2) }} {{ round($circumference,2) }}"
                            stroke-dashoffset="{{ round($circumference - $seg['offset'],2) }}"
                            transform="rotate(-90 {{ $cx }} {{ $cy }})"/>
                    @endforeach
                    <text x="{{ $cx }}" y="{{ $cy }}" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="14" font-weight="bold">{{ $totalSourceLeads }}</text>
                    <text x="{{ $cx }}" y="{{ $cy + 14 }}" text-anchor="middle" fill="#64748b" font-size="8">leads</text>
                </svg>
                <div class="flex-1 space-y-1.5">
                    @foreach($segments as $seg)
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background:{{ $seg['color'] }};"></span>
                        <span class="text-xs text-slate-300 flex-1">{{ $seg['label'] }}</span>
                        <span class="text-xs font-bold text-white">{{ $seg['cnt'] }}</span>
                        <span class="text-xs text-slate-500 w-8 text-right">{{ round($seg['pct']*100) }}%</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @else
            <p class="text-sm text-slate-500 text-center py-8">No lead source data in this period.</p>
            @endif
        </div>

        <div class="card p-5">
            <h3 class="mb-5">Quote Conversion Funnel</h3>
            @php
            $funnel = [
                ['label'=>'Quotes Created',  'val'=>$quotesTotal,    'color'=>'#60a5fa'],
                ['label'=>'Quotes Sent',     'val'=>$quotesSent,     'color'=>'#818cf8'],
                ['label'=>'Quotes Accepted', 'val'=>$quotesAccepted, 'color'=>'#4ade80'],
            ];
            $maxF = max(array_column($funnel, 'val') + [1]);
            @endphp
            <div class="space-y-4">
                @foreach($funnel as $row)
                @php $pct = $maxF > 0 ? ($row['val'] / $maxF) * 100 : 0; @endphp
                <div>
                    <div class="flex justify-between text-xs text-slate-400 mb-1">
                        <span>{{ $row['label'] }}</span><span class="font-bold" style="color:{{ $row['color'] }}">{{ $row['val'] }}</span>
                    </div>
                    <div class="h-7 rounded-lg overflow-hidden" style="background:#0f172a;">
                        <div class="h-full rounded-lg flex items-center px-3" style="width:{{ max($pct,2) }}%;background:{{ $row['color'] }}22;border:1px solid {{ $row['color'] }}33;">
                            <span class="text-sm font-bold" style="color:{{ $row['color'] }}">{{ round($pct) }}%</span>
                        </div>
                    </div>
                </div>
                @endforeach
                @if($quotesTotal > 0)
                <div class="mt-4 p-3 rounded-lg grid grid-cols-2 gap-3" style="background:#0f172a;">
                    <div class="text-center">
                        <div class="text-lg font-bold text-green-400">{{ round(($quotesAccepted/$quotesTotal)*100) }}%</div>
                        <div class="text-xs text-slate-500">Accept rate</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-bold text-blue-400">{{ round(($quotesSent/$quotesTotal)*100) }}%</div>
                        <div class="text-xs text-slate-500">Sent rate</div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div> -->

    <!-- Group-by Breakdown -->
    <!-- <div class="card p-5">
        <div class="flex items-center justify-between mb-5">
            <h3>Breakdown by {{ $groupLabels[$groupBy] }}</h3>
            <span class="text-xs text-slate-500">{{ $groupedData->count() }} {{ Str::plural('group', $groupedData->count()) }}</span>
        </div>
        @if($groupedData->count())
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="text-xs text-slate-500 border-b border-slate-700">
                        <th class="text-left pb-3 font-medium">{{ $groupLabels[$groupBy] }}</th>
                        <th class="text-right pb-3 font-medium">Jobs</th>
                        <th class="text-right pb-3 font-medium">Total Value</th>
                        <th class="text-right pb-3 font-medium">Avg Value</th>
                        <th class="pb-3 font-medium" style="width:160px;">Share</th>
                    </tr>
                </thead>
                <tbody>
                    @php $grandTotal = $groupedData->sum('cnt'); $grandRev = $groupedData->sum('revenue'); @endphp
                    @foreach($groupedData as $row)
                    @php $sharePct = $grandTotal > 0 ? ($row->cnt / $grandTotal) * 100 : 0; @endphp
                    <tr class="table-row">
                        <td class="py-3 pr-4 text-sm text-white font-medium">{{ $row->grp_key ?? '(not set)' }}</td>
                        <td class="py-3 pr-4 text-right text-sm text-white">{{ $row->cnt }}</td>
                        <td class="py-3 pr-4 text-right text-sm text-green-400">${{ number_format($row->revenue) }}</td>
                        <td class="py-3 pr-4 text-right text-sm text-slate-400">${{ $row->cnt > 0 ? number_format($row->revenue / $row->cnt) : 0 }}</td>
                        <td class="py-3">
                            <div class="flex items-center gap-2">
                                <div class="progress-bar flex-1"><div class="progress-fill" style="width: {{ $sharePct }}%;"></div></div>
                                <span class="text-xs text-slate-400 w-8">{{ round($sharePct) }}%</span>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="border-t border-slate-700">
                        <td class="pt-3 text-sm font-bold text-white">Total</td>
                        <td class="pt-3 text-right text-sm font-bold text-white">{{ $grandTotal }}</td>
                        <td class="pt-3 text-right text-sm font-bold text-green-400">${{ number_format($grandRev) }}</td>
                        <td class="pt-3 text-right text-sm text-slate-400">${{ $grandTotal > 0 ? number_format($grandRev / $grandTotal) : 0 }}</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        @else
        <p class="text-slate-500 text-sm text-center py-6">No data for this period.</p>
        @endif
    </div> -->

    <!-- PM Performance -->
    <!-- <div class="card p-5">
        <h3 class="mb-5">Project Manager Performance</h3>
        @forelse($pmStats as $pm)
        <div class="flex items-center gap-3 py-2 border-b border-slate-700 last:border-0">
            <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center text-xs font-bold text-blue-300 flex-shrink-0">
                {{ strtoupper(substr($pm['name'], 0, 2)) }}
            </div>
            <div class="flex-1 min-w-0">
                <div class="text-sm text-white font-medium">
                    {{ $pm['name'] }}
                    @if($pmFilter == $pm['id'])
                    <span class="ml-2 text-xs bg-purple-900/40 text-purple-300 border border-purple-700 rounded-full px-2 py-0.5">filtered</span>
                    @endif
                </div>
                <div class="flex items-center gap-3 mt-1">
                    @php $rate = $pm['total'] > 0 ? round(($pm['completed']/$pm['total'])*100) : 0; @endphp
                    <div class="progress-bar flex-1" style="max-width:80px;"><div class="progress-fill" style="width:{{ $rate }}%;"></div></div>
                    <span class="text-xs text-slate-400">{{ $rate }}% completion</span>
                </div>
            </div>
            <div class="text-right flex-shrink-0">
                <div class="text-sm font-bold text-white">{{ $pm['total'] }} jobs</div>
                <div class="text-xs text-green-400">${{ number_format($pm['revenue']) }}</div>
            </div>
            <a href="{{ route('reports.index', array_merge(request()->except('pm_filter'), ['pm_filter' => $pm['id']])) }}"
               class="btn btn-secondary text-xs py-1 px-2">
                <i class="fas fa-filter text-xs"></i>
            </a>
        </div>
        @empty
        <p class="text-sm text-slate-500 text-center py-6">No PM data in this period</p>
        @endforelse
    </div> -->

    <!-- Downloadable Reports Panel -->
    <div class="card p-5">
        <div class="flex items-center justify-between mb-5">
            <h3 class="flex items-center gap-2"><i class="fas fa-file-download text-blue-400"></i> Downloadable Reports</h3>
            <span class="text-xs text-slate-500">Download pre-built CSV reports for the selected date range</span>
        </div>
        <!-- Gross Profit quick access -->
        <div class="mb-4 p-4 rounded-xl flex items-center justify-between gap-4" style="background:#0a1628;border:1px solid #1d4ed8;">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1e3a5f;">
                    <i class="fas fa-chart-line text-green-400"></i>
                </div>
                <div>
                    <div class="text-sm font-semibold text-white">Gross Profit Report</div>
                    <div class="text-xs text-slate-400">Revenue vs costs per job — sortable, filterable, exportable to CSV</div>
                </div>
            </div>
            <a href="{{ route('reports.gross-profit', ['from' => $from->format('Y-m-d'), 'to' => $to->format('Y-m-d')]) }}"
               class="btn btn-primary text-sm whitespace-nowrap">
                <i class="fas fa-arrow-right"></i> Open Report
            </a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach([
                ['Pipeline Summary',     'Complete jobs list with stage, status, and value',     'fa-chart-bar',    'text-blue-400',   ['export'=>'csv']],
                ['Revenue by Month',     'Monthly revenue totals for the selected period',        'fa-coins',        'text-green-400',  ['export'=>'csv','group_by'=>'stage']],
                ['Lead Source Report',   'Lead counts and conversion by source channel',         'fa-funnel-dollar','text-purple-400', ['export'=>'csv','group_by'=>'source']],
                ['Project Type Report',  'Job breakdown by kitchen, laundry, wardrobe etc.',     'fa-layer-group',  'text-amber-400',  ['export'=>'csv','group_by'=>'project_type']],
                ['PM Performance',       'Jobs and revenue per project manager',                 'fa-user-tie',     'text-pink-400',   ['export'=>'csv','group_by'=>'status']],
                ['Consultant Activity',  'Lead and job counts per sales consultant',             'fa-handshake',    'text-teal-400',   ['export'=>'csv','group_by'=>'stage']],
            ] as [$rptName, $rptDesc, $rptIcon, $rptColor, $rptParams])
            @php
                $rptUrl = route('reports.index', array_merge(
                    ['from' => $from->format('Y-m-d'), 'to' => $to->format('Y-m-d')],
                    $stageFilter ? ['stage_filter' => $stageFilter] : [],
                    $pmFilter    ? ['pm_filter'    => $pmFilter]    : [],
                    $rptParams
                ));
            @endphp
            <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#0f172a; border:1px solid #1e293b;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1e293b;">
                        <i class="fas {{ $rptIcon }} {{ $rptColor }}"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-semibold text-white">{{ $rptName }}</div>
                        <div class="text-xs text-slate-500 mt-0.5 leading-relaxed">{{ $rptDesc }}</div>
                    </div>
                </div>
                <a href="{{ $rptUrl }}" class="btn btn-secondary text-xs justify-center w-full">
                    <i class="fas fa-download mr-1.5"></i>Download CSV
                </a>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Scheduled Reports Panel -->
    <div class="card p-5" x-data="{ showCreate: false }">
        <div class="flex items-center justify-between mb-5">
            <h3 class="flex items-center gap-2">
                <i class="fas fa-clock text-amber-400"></i> Scheduled Reports
                <span class="ml-2 text-xs text-slate-500 font-normal">{{ $scheduledReports->count() }} configured</span>
            </h3>
            <button @click="showCreate = !showCreate" class="btn btn-primary text-sm">
                <i class="fas fa-plus mr-1"></i> New Schedule
            </button>
        </div>

        <!-- Create form -->
        <div x-show="showCreate" x-collapse class="mb-5 p-4 rounded-xl" style="background:#0f172a;border:1px solid #1e293b;">
            <form method="POST" action="{{ route('reports.scheduled.store') }}" class="grid grid-cols-1 sm:grid-cols-4 gap-3">
                @csrf
                <div>
                    <label class="block text-xs text-slate-500 mb-1">Report Name</label>
                    <input type="text" name="name" class="input text-sm" placeholder="e.g. Weekly Pipeline" required>
                </div>
                <div>
                    <label class="block text-xs text-slate-500 mb-1">Report Type</label>
                    <select name="report_type" class="input text-sm">
                        @foreach(\App\Models\ScheduledReport::typeLabels() as $k => $v)
                        <option value="{{ $k }}">{{ $v }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-slate-500 mb-1">Frequency</label>
                    <select name="frequency" class="input text-sm">
                        @foreach(\App\Models\ScheduledReport::frequencyLabels() as $k => $v)
                        <option value="{{ $k }}">{{ $v }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-end gap-2">
                    <button type="submit" class="btn btn-primary text-sm flex-1">Create</button>
                    <button type="button" @click="showCreate=false" class="btn btn-secondary text-sm">Cancel</button>
                </div>
            </form>
        </div>

        <!-- Scheduled report list -->
        @if($scheduledReports->isEmpty())
        <div class="text-center py-8 text-slate-500">
            <i class="fas fa-clock text-3xl block mb-2 opacity-20"></i>
            <p class="text-sm">No scheduled reports configured yet.</p>
            <p class="text-xs mt-1">Click "New Schedule" to create your first automated report.</p>
        </div>
        @else
        <div class="space-y-3">
            @foreach($scheduledReports as $rpt)
            <div class="flex items-center gap-4 p-3 rounded-lg" style="background:#0f172a;border:1px solid #1e293b;">
                <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1e293b;">
                    <i class="fas fa-file-chart-line text-blue-400 text-sm"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-white">{{ $rpt->name }}</div>
                    <div class="text-xs text-slate-500 mt-0.5">
                        {{ \App\Models\ScheduledReport::typeLabels()[$rpt->report_type] ?? $rpt->report_type }}
                        &middot;
                        {{ \App\Models\ScheduledReport::frequencyLabels()[$rpt->frequency] ?? $rpt->frequency }}
                        @if($rpt->last_run_at)
                        &middot; Last run {{ $rpt->last_run_at->diffForHumans() }}
                        @else
                        &middot; <span class="text-slate-600">Never run</span>
                        @endif
                    </div>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    <!-- Active / Inactive toggle -->
                    <form method="POST" action="{{ route('reports.scheduled.toggle', $rpt) }}">
                        @csrf
                        <button type="submit"
                                class="relative inline-flex h-6 w-11 rounded-full transition-colors duration-200 focus:outline-none {{ $rpt->is_active ? 'bg-blue-600' : 'bg-slate-700' }}"
                                title="{{ $rpt->is_active ? 'Pause schedule' : 'Activate schedule' }}">
                            <span class="inline-block h-6 w-6 transform rounded-full bg-white shadow transition-transform duration-200 {{ $rpt->is_active ? 'translate-x-5' : 'translate-x-0' }}"></span>
                        </button>
                    </form>
                    <span class="text-xs {{ $rpt->is_active ? 'text-green-400' : 'text-slate-500' }} w-14">
                        {{ $rpt->is_active ? 'Active' : 'Paused' }}
                    </span>
                    <!-- Delete -->
                    <form method="POST" action="{{ route('reports.scheduled.destroy', $rpt) }}"
                          onsubmit="return confirm('Delete this scheduled report?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-slate-600 hover:text-red-400 transition-colors">
                            <i class="fas fa-trash text-xs"></i>
                        </button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>

</div>
@endsection