@extends('layouts.app')

@section('title', 'Payment Methods Report')

@push('styles')
<style>
h1 { color: var(--text-primary); }
p.text-secondary { color: var(--text-secondary); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 700; border-radius: 0.75rem; transition: all 0.2s; }
.btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); border-color: var(--accent); }
</style>
@endpush

@section('content')
@can('view_payment_methods')

<div class="mb-8 fade-in">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="h-14 w-1 bg-gradient-to-b from-fuchsia-400 to-fuchsia-600 rounded-full"></div>
            <div>
                <h1 class="text-3xl font-bold tracking-tight">Payment Methods Report</h1>
                <p class="text-secondary mt-1">Revenue breakdown by payment method</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="window.print()" class="btn-ghost flex items-center gap-2">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="{{ route('reports.payment-methods.pdf', request()->query()) }}" class="btn-primary flex items-center gap-2 text-sm font-medium">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
        </div>
    </div>
</div>

<div class="table-container rounded-2xl p-4 mb-8 fade-in">
    <form method="GET" class="space-y-4">
        <div class="flex flex-wrap gap-2">
            <button type="button" onclick="setRange('today')" class="btn-ghost">Today</button>
            <button type="button" onclick="setRange('yesterday')" class="btn-ghost">Yesterday</button>
            <button type="button" onclick="setRange('this-week')" class="btn-ghost">This Week</button>
            <button type="button" onclick="setRange('last-week')" class="btn-ghost">Last Week</button>
            <button type="button" onclick="setRange('this-month')" class="btn-ghost">This Month</button>
            <button type="button" onclick="setRange('last-month')" class="btn-ghost">Last Month</button>
            <button type="button" onclick="setRange('this-year')" class="btn-ghost">This Year</button>
            <button type="button" onclick="setRange('last-year')" class="btn-ghost">Last Year</button>
        </div>
        <div class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-xs text-secondary mb-1">From</label>
                <input type="date" id="dateFrom" name="date_from" value="{{ $dateFrom }}" class="input-modern">
            </div>
            <div>
                <label class="block text-xs text-secondary mb-1">To</label>
                <input type="date" id="dateTo" name="date_to" value="{{ $dateTo }}" class="input-modern">
            </div>
            @include('reports.partials.branch-filter')
            <button type="submit" class="btn-primary text-sm font-medium">View Report</button>
        </div>
    </form>
</div>

<script>
function formatDate(d) { const yyyy = d.getFullYear(); const mm = String(d.getMonth() + 1).padStart(2, '0'); const dd = String(d.getDate()).padStart(2, '0'); return `${yyyy}-${mm}-${dd}`; }
function setRange(preset) {
    const today = new Date(); let from, to;
    switch (preset) {
        case 'today': from = to = new Date(today); break;
        case 'yesterday': from = new Date(today); from.setDate(today.getDate() - 1); to = new Date(today); to.setDate(today.getDate() - 1); break;
        case 'this-week': from = new Date(today); from.setDate(today.getDate() - ((today.getDay() + 6) % 7)); to = new Date(today); break;
        case 'last-week': from = new Date(today); from.setDate(today.getDate() - ((today.getDay() + 6) % 7) - 7); to = new Date(today); to.setDate(today.getDate() - ((today.getDay() + 6) % 7) - 1); break;
        case 'this-month': from = new Date(today.getFullYear(), today.getMonth(), 1); to = new Date(today); break;
        case 'last-month': from = new Date(today.getFullYear(), today.getMonth() - 1, 1); to = new Date(today.getFullYear(), today.getMonth(), 0); break;
        case 'this-year': from = new Date(today.getFullYear(), 0, 1); to = new Date(today); break;
        case 'last-year': from = new Date(today.getFullYear() - 1, 0, 1); to = new Date(today.getFullYear() - 1, 11, 31); break;
    }
    document.getElementById('dateFrom').value = formatDate(from); document.getElementById('dateTo').value = formatDate(to); document.getElementById('dateFrom').closest('form').submit();
}
</script>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center">
                <i class="fas fa-circle-check text-emerald-400"></i>
            </div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">Total Collected</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format($grandTotal, 2) }}</p>
        <p class="text-xs text-secondary mt-1">Cash received</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-fuchsia-500/20 flex items-center justify-center">
                <i class="fas fa-file-invoice text-fuchsia-400"></i>
            </div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">Total Invoiced</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format(array_sum(array_column($reportData, 'total_sales')), 2) }}</p>
        <p class="text-xs text-secondary mt-1">{{ $totalTransactions }} transaction(s)</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-rose-500/20 flex items-center justify-center">
                <i class="fas fa-clock text-rose-400"></i>
            </div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">Outstanding</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">${{ number_format(array_sum(array_column($reportData, 'total_due')), 2) }}</p>
        <p class="text-xs text-secondary mt-1">Not yet collected</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
                <i class="fas fa-money-bill-wave text-amber-400"></i>
            </div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">Most Used</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">{{ collect($reportData)->sortByDesc('transaction_count')->first()['name'] ?? 'N/A' }}</p>
        <p class="text-xs text-secondary mt-1">{{ collect($reportData)->sortByDesc('transaction_count')->first()['transaction_count'] ?? 0 }} transactions</p>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-slate-500/20 flex items-center justify-center">
                <i class="fas fa-calendar" style="color: var(--text-muted);"></i>
            </div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">Period</p>
        </div>
        <p class="text-2xl font-extrabold" style="color: var(--text-primary);">{{ \Carbon\Carbon::parse($dateFrom)->format('M d') }}</p>
        <p class="text-xs text-secondary mt-1">to {{ displayDate(\Carbon\Carbon::parse($dateTo)) }}</p>
    </div>
</div>

<div class="table-container rounded-2xl overflow-hidden fade-in">
    <div class="p-5" style="border-bottom: 1px solid var(--border-color);">
        <h3 class="text-lg font-semibold" style="color: var(--text-primary);">Payment Method Breakdown</h3>
        <p class="text-sm text-secondary mt-1">{{ displayDate(\Carbon\Carbon::parse($dateFrom)) }} — {{ displayDate(\Carbon\Carbon::parse($dateTo)) }}</p>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full">
            <thead class="table-header">
                <tr>
                    <th class="px-5 py-3.5 text-left text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Method</th>
                    <th class="px-5 py-3.5 text-center text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Status</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Transactions</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Paid</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Partial</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Unpaid</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Total Sales</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Total Paid</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Due</th>
                    <th class="px-5 py-3.5 text-right text-[10px] font-bold uppercase tracking-widest" style="color: var(--text-muted);">Share</th>
                </tr>
            </thead>
            <tbody class="divide-y" style="border-color: var(--border-color);">
                @forelse($reportData as $method)
                    <tr class="table-row">
                        <td class="px-5 py-4">
                            <div class="flex items-center gap-3">
                                @if($method['icon'])
                                    <i class="{{ $method['icon'] }} text-lg text-fuchsia-400"></i>
                                @else
                                    <div class="w-8 h-8 rounded-lg bg-fuchsia-500/20 flex items-center justify-center">
                                        <i class="fas fa-credit-card text-fuchsia-400 text-sm"></i>
                                    </div>
                                @endif
                                <div>
                                    <p class="text-sm font-bold" style="color: var(--text-primary);">{{ $method['name'] }}</p>
                                    <p class="text-xs font-mono" style="color: var(--text-muted);">{{ $method['code'] }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-4 text-center">
                            @if($method['is_active'])
                                <span class="badge badge-active">Active</span>
                            @else
                                <span class="badge badge-inactive">Inactive</span>
                            @endif
                        </td>
                        <td class="px-5 py-4 text-sm text-right font-semibold" style="color: var(--text-primary);">{{ $method['transaction_count'] }}</td>
                        <td class="px-5 py-4 text-sm text-right font-medium text-emerald-400">{{ $method['paid_count'] }}</td>
                        <td class="px-5 py-4 text-sm text-right font-medium text-amber-400">{{ $method['partial_count'] }}</td>
                        <td class="px-5 py-4 text-sm text-right font-medium text-rose-400">{{ $method['unpaid_count'] }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-fuchsia-400">${{ number_format($method['total_sales'], 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-medium text-emerald-400">${{ number_format($method['total_paid'], 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold {{ $method['total_due'] > 0 ? 'text-red-400' : 'text-secondary' }}">
                            ${{ number_format($method['total_due'], 2) }}
                        </td>
                        <td class="px-5 py-4 text-sm text-right" style="color: var(--text-muted);">{{ $grandTotal > 0 ? number_format(($method['total_paid'] / $grandTotal) * 100, 1) : 0 }}%</td>
                    </tr>
                @empty
                    <tr><td colspan="10" class="px-5 py-12 text-center" style="color: var(--text-muted);">
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-3" style="background: var(--table-bg);">
                                <i class="fas fa-credit-card" style="color: var(--text-muted); font-size: 1.25rem;"></i>
                            </div>
                            <p class="font-medium" style="color: var(--text-primary);">No payment methods found</p>
                        </div>
                    </td></tr>
                @endforelse
            </tbody>
            @if(count($reportData) > 0)
                <tfoot>
                    <tr style="border-top: 1px solid var(--border-color);">
                        <td class="px-5 py-4 text-sm font-bold" style="color: var(--text-primary);" colspan="2">Total</td>
                        <td class="px-5 py-4 text-sm text-right font-bold" style="color: var(--text-primary);">{{ array_sum(array_column($reportData, 'transaction_count')) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-emerald-400">{{ array_sum(array_column($reportData, 'paid_count')) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-amber-400">{{ array_sum(array_column($reportData, 'partial_count')) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-rose-400">{{ array_sum(array_column($reportData, 'unpaid_count')) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-fuchsia-400">${{ number_format(array_sum(array_column($reportData, 'total_sales')), 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-emerald-400">${{ number_format($grandTotal, 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold text-red-400">${{ number_format(array_sum(array_column($reportData, 'total_due')), 2) }}</td>
                        <td class="px-5 py-4 text-sm text-right font-bold" style="color: var(--text-primary);">100%</td>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>
</div>

@endcan
@endsection