@extends('layouts.cashier')
@section('title','My Reports')
@section('breadcrumb')<li class="breadcrumb-item active">Reports</li>@endsection
@push('styles')
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.44.0/dist/apexcharts.min.js"></script>
<style>
.tab-section .nav-link { color:#555; font-weight:600; border-radius:8px 8px 0 0; }
.tab-section .nav-link.active { color:var(--primary); background:#fff; border-color:#dee2e6 #dee2e6 #fff; }
</style>
@endpush
@section('cashier-content')

{{-- Page Header --}}
<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>My Reports</h4>
        <p class="text-muted mb-0 small">Your personal fee collection analytics</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('cashier.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>
        <button onclick="window.print()" class="btn btn-outline-secondary btn-sm"><i class="fas fa-print me-1"></i>Print</button>
    </div>
</div>

{{-- All-time KPI Cards --}}
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="stat-primary">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <p class="mb-1 small opacity-75">Today's Collection</p>
                    <h3 class="fw-bold mb-1">₹{{ number_format($todayAmount, 0) }}</h3>
                    <p class="mb-0 small opacity-75"><i class="fas fa-receipt me-1"></i>{{ $todayCount }} receipts</p>
                </div>
                <div style="background:rgba(255,255,255,0.2);border-radius:12px;padding:12px;font-size:22px"><i class="fas fa-sun"></i></div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-cyan">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <p class="mb-1 small opacity-75">This Month</p>
                    <h3 class="fw-bold mb-1">₹{{ number_format($monthAmount, 0) }}</h3>
                    <p class="mb-0 small opacity-75"><i class="fas fa-receipt me-1"></i>{{ $monthCount }} receipts</p>
                </div>
                <div style="background:rgba(255,255,255,0.2);border-radius:12px;padding:12px;font-size:22px"><i class="fas fa-calendar-alt"></i></div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-success">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <p class="mb-1 small opacity-75">Total (All Time)</p>
                    <h3 class="fw-bold mb-1">₹{{ number_format($totalAmount, 0) }}</h3>
                    <p class="mb-0 small opacity-75"><i class="fas fa-receipt me-1"></i>{{ $totalCount }} receipts</p>
                </div>
                <div style="background:rgba(255,255,255,0.2);border-radius:12px;padding:12px;font-size:22px"><i class="fas fa-rupee-sign"></i></div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-warning">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <p class="mb-1 small opacity-75">Filtered Period</p>
                    <h3 class="fw-bold mb-1">₹{{ number_format($filteredTotal, 0) }}</h3>
                    <p class="mb-0 small opacity-75"><i class="fas fa-receipt me-1"></i>{{ $filteredCount }} receipts</p>
                </div>
                <div style="background:rgba(255,255,255,0.2);border-radius:12px;padding:12px;font-size:22px"><i class="fas fa-filter"></i></div>
            </div>
        </div>
    </div>
</div>

{{-- Filter Card --}}
<div class="card mb-4">
    <div class="card-header py-2 d-flex align-items-center gap-2">
        <i class="fas fa-calendar-week text-primary"></i>
        <h6 class="mb-0 fw-bold">Date Range Filter</h6>
    </div>
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-4 col-6">
                <label class="form-label small fw-bold mb-1">From Date</label>
                <input type="date" name="from_date" class="form-control form-control-sm" value="{{ $from }}">
            </div>
            <div class="col-md-4 col-6">
                <label class="form-label small fw-bold mb-1">To Date</label>
                <input type="date" name="to_date" class="form-control form-control-sm" value="{{ $to }}">
            </div>
            <div class="col-md-2 col-6">
                <button type="submit" class="btn btn-primary btn-sm w-100"><i class="fas fa-search me-1"></i>Apply</button>
            </div>
            <div class="col-md-2 col-6">
                <a href="{{ route('cashier.reports.index') }}" class="btn btn-outline-secondary btn-sm w-100"><i class="fas fa-undo me-1"></i>Reset</a>
            </div>
        </form>
    </div>
</div>

{{-- Charts --}}
<div class="row g-3 mb-4">
    <div class="col-xl-8">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-bold"><i class="fas fa-chart-area me-2" style="color:var(--primary)"></i>Daily Collection Trend</h6>
                <small class="text-muted">{{ $from }} to {{ $to }}</small>
            </div>
            <div class="card-body p-3">
                @if($dailyTrend->isEmpty())
                    <div class="text-center py-5 text-muted"><i class="fas fa-chart-area fa-3x mb-3 opacity-25"></i><p>No data for this period.</p></div>
                @else
                    <div id="dailyChart" style="min-height:280px"></div>
                @endif
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-bold"><i class="fas fa-credit-card me-2" style="color:var(--violet)"></i>Payment Modes</h6>
                <small class="text-muted">{{ $modeReport->count() }} modes</small>
            </div>
            <div class="card-body p-3">
                @if($modeReport->isEmpty())
                    <div class="text-center py-5 text-muted"><i class="fas fa-credit-card fa-3x mb-3 opacity-25"></i><p>No data for this period.</p></div>
                @else
                    <div id="modeChart" style="min-height:280px"></div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Mode Summary Cards --}}
@if($modeReport->isNotEmpty())
<div class="row g-3 mb-4">
    @foreach($modeReport as $mode)
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body py-3">
                <div class="d-flex align-items-center gap-3">
                    <div style="width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--violet));display:flex;align-items:center;justify-content:center;color:#fff">
                        @if(strtolower($mode->payment_mode) == 'cash') <i class="fas fa-money-bill-wave"></i>
                        @elseif(in_array(strtolower($mode->payment_mode), ['online','upi','neft','rtgs'])) <i class="fas fa-mobile-alt"></i>
                        @elseif(strtolower($mode->payment_mode) == 'cheque') <i class="fas fa-money-check"></i>
                        @else <i class="fas fa-wallet"></i>
                        @endif
                    </div>
                    <div>
                        <p class="mb-0 small text-muted fw-bold">{{ strtoupper($mode->payment_mode) }}</p>
                        <h5 class="fw-bold mb-0" style="color:var(--primary)">₹{{ number_format($mode->total, 0) }}</h5>
                        <small class="text-muted">{{ $mode->count }} transactions</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endif

{{-- Payments Table --}}
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-bold"><i class="fas fa-list me-2 text-primary"></i>Payment Records</h6>
        <span class="badge bg-primary">{{ $recentPayments->total() }} records</span>
    </div>
    <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
            <tr>
                <th>Receipt No</th>
                <th>Date</th>
                <th>Student</th>
                <th>Institute</th>
                <th>Course</th>
                <th>Mode</th>
                <th class="text-end">Amount</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        @forelse($recentPayments as $p)
        <tr>
            <td class="font-monospace small fw-bold">{{ $p->receipt_no }}</td>
            <td class="small">{{ $p->payment_date->format('d M Y') }}</td>
            <td>
                <strong>{{ optional($p->student)->name }}</strong><br>
                <small class="text-muted">{{ optional($p->student)->enrollment_no }}</small>
            </td>
            <td class="small">{{ optional(optional($p->student)->institute)->name ?? '-' }}</td>
            <td class="small">{{ optional(optional($p->student)->course)->name ?? '-' }}</td>
            <td><span class="badge bg-light text-dark border">{{ $p->payment_mode }}</span></td>
            <td class="text-end fw-bold text-success">₹{{ number_format($p->amount_paid, 0) }}</td>
            <td>
                <a href="{{ route('cashier.receipts.show', $p) }}" class="btn btn-sm btn-outline-primary py-0 px-2" title="View"><i class="fas fa-eye"></i></a>
            </td>
        </tr>
        @empty
        <tr><td colspan="8" class="text-center py-4 text-muted">No payments found for this period.</td></tr>
        @endforelse
        </tbody>
    </table>
    </div>
    @if($recentPayments->hasPages())
    <div class="card-footer d-flex justify-content-between align-items-center">
        <small class="text-muted">Showing {{ $recentPayments->firstItem() }}-{{ $recentPayments->lastItem() }} of {{ $recentPayments->total() }}</small>
        {{ $recentPayments->links('pagination::bootstrap-5') }}
    </div>
    @endif
</div>

@endsection
@push('scripts')
<script>
const fmt = v => '₹' + parseFloat(v||0).toLocaleString('en-IN');

// Daily Trend Chart
const dailyData = @json($dailyTrend);
if (dailyData.length && document.getElementById('dailyChart')) {
    new ApexCharts(document.getElementById('dailyChart'), {
        chart: { type:'area', height:280, toolbar:{show:false}, fontFamily:'Inter,sans-serif' },
        series: [{ name:'Collection', data: dailyData.map(x => parseFloat(x.total)||0) }],
        xaxis: {
            categories: dailyData.map(x => {
                const d = new Date(x.date);
                return d.getDate()+'/'+(d.getMonth()+1);
            }),
            labels: { style:{fontSize:'11px'} }
        },
        colors: ['#4f46e5'],
        stroke: { curve:'smooth', width:3 },
        fill: { type:'gradient', gradient:{ shadeIntensity:1, opacityFrom:0.35, opacityTo:0.03 } },
        dataLabels: { enabled:false },
        grid: { borderColor:'#f1f5f9', strokeDashArray:4 },
        tooltip: { y:{ formatter: fmt } }
    }).render();
}

// Mode Donut Chart
const modeData = @json($modeReport);
if (modeData.length && document.getElementById('modeChart')) {
    new ApexCharts(document.getElementById('modeChart'), {
        chart: { type:'donut', height:280, fontFamily:'Inter,sans-serif' },
        series: modeData.map(x => parseFloat(x.total)||0),
        labels: modeData.map(x => x.payment_mode),
        colors: ['#4f46e5','#10b981','#f59e0b','#f43f5e','#06b6d4','#8b5cf6'],
        legend: { position:'bottom', fontSize:'12px' },
        dataLabels: { enabled:true, formatter:(v,o) => v.toFixed(1)+'%' },
        tooltip: { y:{ formatter: fmt } },
        plotOptions: { pie:{ donut:{ size:'60%', labels:{ show:true, total:{ show:true, label:'Total', formatter: w => fmt(w.globals.seriesTotals.reduce((a,b)=>a+b,0)) } } } } }
    }).render();
}
</script>
@endpush