@extends('layouts.admin')
@section('title','Reports & Analytics')
@section('breadcrumb')<li class="breadcrumb-item active">Reports</li>@endsection
@section('admin-content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="fw-bold mb-1" style="color:var(--primary)"><i class="fas fa-chart-bar me-2"></i>Reports & Analytics</h4>
        <p class="text-muted mb-0 small">Comprehensive fee collection analytics</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.reports.pdf.collection', request()->query()) }}" target="_blank"
           class="btn btn-sm" style="background:var(--primary);color:white;border-radius:8px">
            <i class="fas fa-file-pdf me-1"></i>Collection PDF
        </a>
        <a href="{{ route('admin.reports.pdf.advisor', request()->query()) }}" target="_blank"
           class="btn btn-sm" style="background:var(--violet);color:white;border-radius:8px">
            <i class="fas fa-file-pdf me-1"></i>Advisor PDF
        </a>
    </div>
</div>

{{-- FILTER BAR --}}
<div class="card mb-4">
<div class="card-body py-3">
<form method="GET" class="row g-2 align-items-end">
    <div class="col-md-2 col-6">
        <label class="form-label small fw-semibold mb-1">Institute</label>
        <select name="institute_id" class="form-select form-select-sm">
            <option value="">All Institutes</option>
            @foreach($institutes as $i)<option value="{{ $i->id }}" @selected(request('institute_id')==$i->id)>{{ $i->name }}</option>@endforeach
        </select>
    </div>
    <div class="col-md-2 col-6">
        <label class="form-label small fw-semibold mb-1">Session</label>
        <select name="session_id" class="form-select form-select-sm">
            <option value="">All Sessions</option>
            @foreach($sessions as $s)<option value="{{ $s->id }}" @selected(request('session_id')==$s->id)>{{ $s->name }}</option>@endforeach
        </select>
    </div>
    <div class="col-md-2 col-6">
        <label class="form-label small fw-semibold mb-1">Course</label>
        <select name="course_id" class="form-select form-select-sm">
            <option value="">All Courses</option>
            @foreach($courses as $c)<option value="{{ $c->id }}" @selected(request('course_id')==$c->id)>{{ $c->name }}</option>@endforeach
        </select>
    </div>
    <div class="col-md-2 col-6">
        <label class="form-label small fw-semibold mb-1">Advisor</label>
        <select name="advisor_id" class="form-select form-select-sm">
            <option value="">All Advisors</option>
            @foreach($advisors as $a)<option value="{{ $a->id }}" @selected(request('advisor_id')==$a->id)>{{ $a->name }}</option>@endforeach
        </select>
    </div>
    <div class="col-md-1 col-6">
        <label class="form-label small fw-semibold mb-1">From</label>
        <input type="date" name="from" class="form-control form-control-sm" value="{{ request('from') }}">
    </div>
    <div class="col-md-1 col-6">
        <label class="form-label small fw-semibold mb-1">To</label>
        <input type="date" name="to" class="form-control form-control-sm" value="{{ request('to') }}">
    </div>
    <div class="col-md-2 col-6 d-flex gap-1 align-items-end">
        <button type="submit" class="btn btn-primary btn-sm flex-grow-1"><i class="fas fa-filter me-1"></i>Apply</button>
        <a href="{{ route('admin.reports.index') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times"></i></a>
    </div>
</form>
</div>
</div>

{{-- KPI CARDS --}}
<div class="row g-3 mb-4">
    <div class="col-md-3 col-6">
        <div class="card stat-success h-100">
            <div class="card-body py-3">
                <div class="small text-muted mb-1">Total Collected</div>
                <div class="fw-bold fs-5">₹{{ number_format($totalCollected, 0) }}</div>
                <div class="small text-muted mt-1">{{ $totalPayments }} payments</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-danger h-100">
            <div class="card-body py-3">
                <div class="small text-muted mb-1">Total Due</div>
                <div class="fw-bold fs-5">₹{{ number_format($totalDue, 0) }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-primary h-100">
            <div class="card-body py-3">
                <div class="small text-muted mb-1">Total Students</div>
                <div class="fw-bold fs-5">{{ $totalStudents }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-warning h-100">
            <div class="card-body py-3">
                <div class="small text-muted mb-1">Collection Rate</div>
                @php $rate = ($totalCollected + $totalDue) > 0 ? round($totalCollected / ($totalCollected + $totalDue) * 100, 1) : 0; @endphp
                <div class="fw-bold fs-5">{{ $rate }}%</div>
                <div class="progress mt-1" style="height:4px"><div class="progress-bar bg-warning" style="width:{{ $rate }}%"></div></div>
            </div>
        </div>
    </div>
</div>

{{-- CHARTS ROW --}}
<div class="row g-3 mb-4">
    <div class="col-md-5">
        <div class="card h-100">
            <div class="card-header py-2 fw-semibold small">Monthly Collection Trend</div>
            <div class="card-body p-2"><div id="monthlyChart" style="height:220px"></div></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header py-2 fw-semibold small">Institute-wise Collection</div>
            <div class="card-body p-2"><div id="instituteChart" style="height:220px"></div></div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card h-100">
            <div class="card-header py-2 fw-semibold small">Payment Modes</div>
            <div class="card-body p-2"><div id="modeChart" style="height:220px"></div></div>
        </div>
    </div>
</div>

{{-- TABBED TABLES --}}
<div class="card">
<div class="card-header py-2 no-print">
    <ul class="nav nav-tabs card-header-tabs" id="reportTabs">
        <li class="nav-item"><a class="nav-link active small" data-bs-toggle="tab" href="#tab-institute">Institute-Wise</a></li>
        <li class="nav-item"><a class="nav-link small" data-bs-toggle="tab" href="#tab-session">Session-Wise</a></li>
        <li class="nav-item"><a class="nav-link small" data-bs-toggle="tab" href="#tab-course">Course-Wise</a></li>
        <li class="nav-item"><a class="nav-link small" data-bs-toggle="tab" href="#tab-advisor">Advisor Commission</a></li>
        <li class="nav-item"><a class="nav-link small" data-bs-toggle="tab" href="#tab-top">Top Payers</a></li>
    </ul>
</div>
<div class="card-body p-0">
<div class="tab-content">

    {{-- INSTITUTE-WISE --}}
    <div class="tab-pane fade show active" id="tab-institute">
    <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
    <thead class="table-light"><tr>
        <th>#</th><th>Institute</th><th class="text-center">Students</th>
        <th class="text-end">Total Fee</th><th class="text-end">Collected</th><th class="text-end">Due</th><th style="min-width:120px">Progress</th>
    </tr></thead>
    <tbody>
    @forelse($instituteReport as $idx => $row)
    <tr>
        <td class="small text-muted">{{ $idx+1 }}</td>
        <td><strong>{{ $row->name }}</strong></td>
        <td class="text-center">{{ $row->students }}</td>
        <td class="text-end">₹{{ number_format($row->total_fee, 0) }}</td>
        <td class="text-end text-success fw-semibold">₹{{ number_format($row->collected, 0) }}</td>
        <td class="text-end text-danger">₹{{ number_format($row->due, 0) }}</td>
        <td>
            @php $pct = $row->total_fee > 0 ? round($row->collected/$row->total_fee*100,1) : 0; @endphp
            <div class="d-flex align-items-center gap-1">
                <div class="progress flex-grow-1" style="height:6px"><div class="progress-bar bg-success" style="width:{{ min($pct,100) }}%"></div></div>
                <span class="small text-muted" style="min-width:36px">{{ $pct }}%</span>
            </div>
        </td>
    </tr>
    @empty
    <tr><td colspan="7" class="text-center py-3 text-muted">No data.</td></tr>
    @endforelse
    </tbody>
    </table>
    </div>
    </div>

    {{-- SESSION-WISE --}}
    <div class="tab-pane fade" id="tab-session">
    <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
    <thead class="table-light"><tr>
        <th>#</th><th>Session</th><th class="text-center">Students</th><th class="text-center">Payments</th>
        <th class="text-end">Total Fee</th><th class="text-end">Collected</th><th class="text-end">Due</th><th style="min-width:120px">Progress</th>
    </tr></thead>
    <tbody>
    @forelse($sessionReport as $idx => $row)
    <tr>
        <td class="small text-muted">{{ $idx+1 }}</td>
        <td><strong>{{ $row->name }}</strong></td>
        <td class="text-center">{{ $row->students }}</td>
        <td class="text-center">{{ $row->payments }}</td>
        <td class="text-end">₹{{ number_format($row->total_fee, 0) }}</td>
        <td class="text-end text-success fw-semibold">₹{{ number_format($row->collected, 0) }}</td>
        <td class="text-end text-danger">₹{{ number_format($row->due, 0) }}</td>
        <td>
            @php $pct = $row->total_fee > 0 ? round($row->collected/$row->total_fee*100,1) : 0; @endphp
            <div class="d-flex align-items-center gap-1">
                <div class="progress flex-grow-1" style="height:6px"><div class="progress-bar bg-primary" style="width:{{ min($pct,100) }}%"></div></div>
                <span class="small text-muted" style="min-width:36px">{{ $pct }}%</span>
            </div>
        </td>
    </tr>
    @empty
    <tr><td colspan="8" class="text-center py-3 text-muted">No data.</td></tr>
    @endforelse
    </tbody>
    </table>
    </div>
    </div>

    {{-- COURSE-WISE --}}
    <div class="tab-pane fade" id="tab-course">
    <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
    <thead class="table-light"><tr>
        <th>#</th><th>Course</th><th class="text-center">Students</th><th class="text-center">Payments</th>
        <th class="text-end">Total Fee</th><th class="text-end">Collected</th><th class="text-end">Due</th><th style="min-width:120px">Progress</th>
    </tr></thead>
    <tbody>
    @forelse($courseReport as $idx => $row)
    <tr>
        <td class="small text-muted">{{ $idx+1 }}</td>
        <td><strong>{{ $row->name }}</strong> <span class="badge bg-light text-muted border ms-1" style="font-size:10px">{{ $row->code ?? '' }}</span></td>
        <td class="text-center">{{ $row->students }}</td>
        <td class="text-center">{{ $row->payments }}</td>
        <td class="text-end">₹{{ number_format($row->total_fee, 0) }}</td>
        <td class="text-end text-success fw-semibold">₹{{ number_format($row->collected, 0) }}</td>
        <td class="text-end text-danger">₹{{ number_format($row->due, 0) }}</td>
        <td>
            @php $pct = $row->total_fee > 0 ? round($row->collected/$row->total_fee*100,1) : 0; @endphp
            <div class="d-flex align-items-center gap-1">
                <div class="progress flex-grow-1" style="height:6px"><div class="progress-bar bg-info" style="width:{{ min($pct,100) }}%"></div></div>
                <span class="small text-muted" style="min-width:36px">{{ $pct }}%</span>
            </div>
        </td>
    </tr>
    @empty
    <tr><td colspan="8" class="text-center py-3 text-muted">No data.</td></tr>
    @endforelse
    </tbody>
    </table>
    </div>
    </div>

    {{-- ADVISOR COMMISSION --}}
    <div class="tab-pane fade" id="tab-advisor">
    <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
    <thead class="table-light"><tr>
        <th>#</th><th>Advisor</th><th>Code</th><th class="text-center">Students</th>
        <th class="text-end">Total Fee</th><th class="text-end">Collected</th><th class="text-center">Rate</th><th class="text-end">Commission Earned</th>
    </tr></thead>
    <tbody>
    @forelse($advisorReport as $idx => $row)
    <tr>
        <td class="small text-muted">{{ $idx+1 }}</td>
        <td><strong>{{ $row->name }}</strong></td>
        <td><span class="badge bg-light text-dark border font-monospace">{{ $row->advisor_code }}</span></td>
        <td class="text-center">{{ $row->students }}</td>
        <td class="text-end">₹{{ number_format($row->total_fee, 0) }}</td>
        <td class="text-end text-success fw-semibold">₹{{ number_format($row->collected, 0) }}</td>
        <td class="text-center">{{ $row->commission }}%</td>
        <td class="text-end fw-bold" style="color:var(--violet)">₹{{ number_format($row->commission_amt, 0) }}</td>
    </tr>
    @empty
    <tr><td colspan="8" class="text-center py-3 text-muted">No data.</td></tr>
    @endforelse
    </tbody>
    @if(count($advisorReport) > 0)
    <tfoot class="table-light">
        <tr>
            <td colspan="7" class="text-end fw-bold">Total Commission:</td>
            <td class="text-end fw-bold" style="color:var(--violet)">₹{{ number_format($advisorReport->sum('commission_amt'), 0) }}</td>
        </tr>
    </tfoot>
    @endif
    </table>
    </div>
    </div>

    {{-- TOP PAYERS --}}
    <div class="tab-pane fade" id="tab-top">
    <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
    <thead class="table-light"><tr>
        <th>#</th><th>Student</th><th>Course</th><th>Institute</th>
        <th class="text-end">Total Paid</th>
    </tr></thead>
    <tbody>
    @forelse($topStudents as $idx => $row)
    <tr>
        <td class="small text-muted">{{ $idx+1 }}</td>
        <td>
            <strong>{{ $row->student_name }}</strong>
            <div class="small text-muted">{{ $row->enrollment_no }}</div>
        </td>
        <td class="small">{{ $row->course_name }}</td>
        <td class="small">{{ $row->institute_name }}</td>
        <td class="text-end fw-bold text-success">₹{{ number_format($row->total_paid, 0) }}</td>
    </tr>
    @empty
    <tr><td colspan="5" class="text-center py-3 text-muted">No data.</td></tr>
    @endforelse
    </tbody>
    </table>
    </div>
    </div>

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

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.44.0/dist/apexcharts.min.js"></script>
<script>
// Monthly trend chart
var monthlyData = @json($monthlyTrend);
new ApexCharts(document.querySelector('#monthlyChart'), {
    series: [{ name: 'Collected', data: monthlyData.map(r => r.total) }],
    chart: { type: 'area', height: 220, toolbar: { show: false }, sparkline: { enabled: false } },
    stroke: { curve: 'smooth', width: 2 },
    fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.05 } },
    colors: ['#4f46e5'],
    xaxis: { categories: monthlyData.map(r => r.month), labels: { style: { fontSize: '10px' } } },
    yaxis: { labels: { formatter: v => '₹'+Number(v).toLocaleString('en-IN'), style: { fontSize: '10px' } } },
    tooltip: { y: { formatter: v => '₹'+Number(v).toLocaleString('en-IN') } },
    grid: { borderColor: '#f0f2ff' }
}).render();

// Institute chart
var instData = @json($instituteReport);
new ApexCharts(document.querySelector('#instituteChart'), {
    series: [{ name: 'Collected', data: instData.map(r => r.collected) }, { name: 'Due', data: instData.map(r => r.due) }],
    chart: { type: 'bar', height: 220, toolbar: { show: false }, stacked: true },
    colors: ['#10b981','#f43f5e'],
    plotOptions: { bar: { horizontal: true, barHeight: '60%' } },
    xaxis: { categories: instData.map(r => r.name.length > 18 ? r.name.substring(0,18)+'…' : r.name), labels: { style: { fontSize: '10px' } } },
    yaxis: { labels: { style: { fontSize: '9px' } } },
    legend: { position: 'bottom', fontSize: '10px' },
    tooltip: { y: { formatter: v => '₹'+Number(v).toLocaleString('en-IN') } },
    grid: { borderColor: '#f0f2ff' }
}).render();

// Mode donut
var modeData = @json($modeReport);
new ApexCharts(document.querySelector('#modeChart'), {
    series: modeData.map(r => parseFloat(r.total)),
    labels: modeData.map(r => r.payment_mode),
    chart: { type: 'donut', height: 220 },
    colors: ['#4f46e5','#10b981','#f97316','#06b6d4','#8b5cf6','#f43f5e'],
    legend: { position: 'bottom', fontSize: '10px' },
    tooltip: { y: { formatter: v => '₹'+Number(v).toLocaleString('en-IN') } },
    plotOptions: { pie: { donut: { size: '65%' } } }
}).render();
</script>
@endpush
@endsection