@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-money-bill-wave mr-2" style="color:#c9a96e"></i>Payments</h3>
                    <p class="text-muted mb-0" style="font-size:13px">Online payment transactions</p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">Payments</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- Stat cards --}}
    <div class="container-fluid mb-3">
        <div class="row">
            @foreach([
                ['label'=>'Total Collected', 'value'=>$currency . ' ' . $stats['total_collected'], 'color'=>'#22c55e','icon'=>'fa-coins'],
                ['label'=>'This Month',      'value'=>$currency . ' ' . $stats['this_month'],     'color'=>'#c9a96e','icon'=>'fa-calendar-alt'],
                ['label'=>'Transactions',    'value'=>$stats['total_count'],   'color'=>'#3b82f6','icon'=>'fa-receipt'],
                ['label'=>'Pending',         'value'=>$stats['pending_count'], 'color'=>'#f59e0b','icon'=>'fa-hourglass-half'],
                ['label'=>'Failed',          'value'=>$stats['failed_count'],  'color'=>'#ef4444','icon'=>'fa-times-circle'],
            ] as $c)
            <div class="col mb-3" style="min-width:160px">
                <div class="card shadow-sm h-100" style="border-left:4px solid {{ $c['color'] }}">
                    <div class="card-body py-2 px-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <div class="text-muted text-uppercase" style="font-size:10px">{{ $c['label'] }}</div>
                            <i class="fas {{ $c['icon'] }} text-muted" style="opacity:0.4;font-size:12px"></i>
                        </div>
                        <div style="font-size:20px;font-weight:700;color:{{ $c['color'] }}">{{ $c['value'] }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Revenue chart + By gateway --}}
    <div class="container-fluid mb-3">
        <div class="row">
            {{-- Monthly chart --}}
            <div class="col-lg-8 mb-3">
                <div class="card shadow-sm h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">Monthly Revenue (Last 6 Months)</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="revenueChart" height="80"></canvas>
                    </div>
                </div>
            </div>
            {{-- By gateway --}}
            <div class="col-lg-4 mb-3">
                <div class="card shadow-sm h-100">
                    <div class="card-header"><h6 class="mb-0">By Gateway</h6></div>
                    <div class="card-body">
                        @foreach($byGateway as $gw)
                        @php
                            $gwColors = ['razorpay'=>'#3b82f6','stripe'=>'#8b5cf6','phonepe'=>'#f59e0b','cash'=>'#22c55e','manual'=>'#64748b'];
                            $gwColor  = $gwColors[strtolower($gw->gateway)] ?? '#64748b';
                        @endphp
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <div style="font-weight:700;text-transform:capitalize;color:#1e293b">
                                    {{ $gw->gateway }}
                                    <span style="font-size:11px;color:#94a3b8"> · {{ $gw->count }} txns</span>
                                </div>
                            </div>
                            <div style="font-weight:700;color:{{ $gwColor }}">
                                {{ $currency }} {{ $gw->total }}
                            </div>
                        </div>
                        @endforeach
                        @if($byGateway->isEmpty())
                        <p class="text-muted text-center py-3">No data yet</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="container-fluid mb-3">
        <div class="card shadow-sm">
            <div class="card-body py-2">
                <form method="GET" class="d-flex flex-wrap align-items-center" style="gap:8px">
                    <input type="text" name="search" class="form-control form-control-sm"
                        placeholder="Search payment ID, user..." value="{{ request('search') }}" style="max-width:220px">
                    <select name="status" class="form-control form-control-sm" style="max-width:120px">
                        <option value="">All Status</option>
                        @foreach(['success','pending','failed','refunded'] as $s)
                        <option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ ucfirst($s) }}</option>
                        @endforeach
                    </select>
                    <select name="gateway" class="form-control form-control-sm" style="max-width:120px">
                        <option value="">All Gateways</option>
                        @foreach(['razorpay','stripe','phonepe','cash','manual'] as $g)
                        <option value="{{ $g }}" {{ request('gateway')===$g?'selected':'' }}>{{ ucfirst($g) }}</option>
                        @endforeach
                    </select>
                    <select name="mode" class="form-control form-control-sm" style="max-width:110px">
                        <option value="">All Modes</option>
                        @foreach(['online','cash','manual'] as $m)
                        <option value="{{ $m }}" {{ request('mode')===$m?'selected':'' }}>{{ ucfirst($m) }}</option>
                        @endforeach
                    </select>
                    <input type="date" name="date_from" class="form-control form-control-sm" style="max-width:140px" value="{{ request('date_from') }}" placeholder="From">
                    <input type="date" name="date_to"   class="form-control form-control-sm" style="max-width:140px" value="{{ request('date_to') }}" placeholder="To">
                    <button class="btn btn-primary btn-sm"><i class="fas fa-filter mr-1"></i>Filter</button>
                    <a href="/admin/payments" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times"></i></a>
                    <a href="/admin/payments/export" class="btn btn-success btn-sm ml-auto">
                        <i class="fas fa-file-csv mr-1"></i>Export CSV
                    </a>
                </form>
            </div>
        </div>
    </div>

    {{-- Transactions table --}}
    <div class="container-fluid">
        <div class="card shadow-sm">
            <div class="card-header"><h6 class="mb-0">{{ $transactions->total() }} Transactions</h6></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" style="font-size:13px">
                        <thead style="background:#f8f9fa">
                            <tr>
                                <th>#</th>
                                <th>User</th>
                                <th>Unit</th>
                                <th>Gateway</th>
                                <th>Payment ID</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                       
                            @forelse($transactions as $t)
                            @php
                                $statusColors = ['success'=>'#22c55e','failed'=>'#ef4444','pending'=>'#f59e0b','refunded'=>'#94a3b8'];
                                $statusColor  = $statusColors[$t->status] ?? '#94a3b8';
                                $gwIcons = ['razorpay'=>'💳','stripe'=>'💎','phonepe'=>'📱','cash'=>'💵','manual'=>'🏦'];
                                $gwIcon  = $gwIcons[strtolower($t->gateway)] ?? '🏦';
                            @endphp
                            <tr>
                                <td style="color:#94a3b8;font-size:12px">{{ $t->id }}</td>
                                <td>
                                    <div style="font-weight:600">{{ $t->user?->name }}</div>
                                    <div style="font-size:11px;color:#94a3b8">{{ $t->user?->email }}</div>
                                </td>
                                <td>
                                    @if($t->booking)
                                        <span style="font-weight:600">Unit {{ $t->booking->plot_number }}</span>
                                        <div style="font-size:11px;color:#94a3b8">{{ $t->booking->plot_type }}</div>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    <span>{{ $gwIcon }} {{ ucfirst($t->gateway) }}</span>
                                    @if($t->mode !== 'online')
                                    <span class="badge badge-secondary ml-1" style="font-size:9px">{{ $t->mode }}</span>
                                    @endif
                                </td>
                                <td>
                                    <code style="font-size:11px;color:#475569">
                                        {{ Str::limit($t->gateway_payment_id ?: $t->gateway_order_id ?: '—', 24) }}
                                    </code>
                                </td>
                                <td style="font-weight:700;color:#1e293b">
                                    {{ $currency }} {{ $t->amount }}
                                    <div style="font-size:10px;color:#94a3b8">{{ $t->currency }}</div>
                                </td>
                                <td>
                                    <span style="font-size:11px;font-weight:700;color:{{ $statusColor }};text-transform:capitalize">
                                        ● {{ $t->status }}
                                    </span>
                                </td>
                                <td style="font-size:12px;color:#94a3b8">
                                    {{ $t->paid_at ? $t->paid_at->format('d M Y') : ($t->created_at->format('d M Y')) }}
                                    <div style="font-size:11px">{{ $t->paid_at ? $t->paid_at->format('H:i') : '' }}</div>
                                </td>
                                <td>
                                    <a href="/admin/payments/{{ $t->id }}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted py-5">
                                    <i class="fas fa-receipt fa-2x mb-2 d-block" style="opacity:0.2"></i>
                                    No payment transactions found.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($transactions->hasPages())
            <div class="card-footer">{{ $transactions->links('vendor.pagination.custom') }}</div>
            @endif
        </div>
    </div>

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

@include('Partials.footer')

<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script>
const ctx = document.getElementById('revenueChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: @json($monthly->pluck('month')),
        datasets: [{
            label: 'Revenue',
            data: @json($monthly->pluck('total')),
            backgroundColor: 'rgba(201,169,110,0.7)',
            borderColor: '#c9a96e',
            borderWidth: 1,
            borderRadius: 6,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, ticks: { callback: v => '{{ $currency }}' + v.toLocaleString('en-IN') } }
        }
    }
});
</script>