@extends('admin.layouts.app')

@section('title', 'Reports')

@section('styles')
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="{{ asset('assets/css/reports-shared.css') }}">
<style>
    /* Reports index specific layout enhancements */
    .reports_management .stats-grid.kpi-grid-6 {
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
        padding: 5px 0 24px;
    }
    .reports_management .report-kpi-card {
        background: #1D1D1D;
        border: 1px solid #2B2B2B;
        border-radius: 24px;
        padding: 17px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 8px;
        min-height: 136px;
        box-sizing: border-box;
    }
    .reports_management .kpi-title {
        font-family: 'Barlow', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #777777;
        line-height: 17px;
    }
    .reports_management .kpi-value {
        font-family: 'Roboto', sans-serif;
        font-size: 24px;
        font-weight: 700;
        color: #FFFFFF;
        line-height: 28px;
        margin-top: 0;
    }
    .reports_management .kpi-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        padding: 0 10px;
        border-radius: 9999px;
        font-family: 'Barlow', sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 14px;
        width: max-content;
    }
    .reports_management .kpi-badge.badge-purple {
        background: rgba(105, 34, 218, 0.1);
        color: #6922DA;
    }
    .reports_management .kpi-badge.badge-green {
        background: #3E4D35;
        color: #A0E86F;
    }
    .reports_management .kpi-badge.badge-yellow {
        background: rgba(238, 193, 76, 0.1);
        color: #EEC14C;
    }

    .reports_management .filter-grid.reports-filter-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 16px;
    }

    /* Responsive Breakpoints */
    @media (max-width: 1366px) {
        .reports_management .stats-grid.kpi-grid-6 {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media (max-width: 768px) {
        .reports_management .stats-grid.kpi-grid-6 {
            grid-template-columns: repeat(2, 1fr);
        }
        .reports_management .filter-grid.reports-filter-grid {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 480px) {
        .reports_management .stats-grid.kpi-grid-6 {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')
<div class="content_area feedmanagement finance_management reports_management">

    <!-- Centralized Dummy JSON Data -->
    @php
        $kpiCards = [
            ['title' => 'Total Reward Codes', 'value' => '1,248', 'badge' => '+12', 'badge_type' => 'purple'],
            ['title' => 'QR Scans', 'value' => '842', 'badge' => '+8.4', 'badge_type' => 'green'],
            ['title' => 'Offer Opens', 'value' => '615', 'badge' => '+5.2', 'badge_type' => 'green'],
            ['title' => 'Reviewed Offers', 'value' => '486', 'badge' => '3 Pending', 'badge_type' => 'yellow'],
            ['title' => 'Redeemed Offers', 'value' => '328', 'badge' => '26.3% CR', 'badge_type' => 'green'],
            ['title' => 'Payment Generated', 'value' => '$96,200', 'badge' => 'High Value', 'badge_type' => 'purple'],
        ];

        $rewardData = [
            [
                'reward_code' => 'TXN-10234',
                'winner' => 'Rahul Sharma',
                'winner_role' => 'Player',
                'event' => 'NZ League 2026',
                'partner' => 'NYC Luxury Apts',
                'redeemed' => '56',
                'discount' => '-$4,600',
                'payment' => '$42,000',
                'status' => 'Active'
            ],
            [
                'reward_code' => 'TXN-10234',
                'winner' => 'Rahul Sharma',
                'winner_role' => 'Player',
                'event' => 'NZ League 2026',
                'partner' => 'NYC Luxury Apts',
                'redeemed' => '56',
                'discount' => '-$4,600',
                'payment' => '$42,000',
                'status' => 'Active'
            ],
            [
                'reward_code' => 'TXN-10234',
                'winner' => 'Rahul Sharma',
                'winner_role' => 'Player',
                'event' => 'NZ League 2026',
                'partner' => 'NYC Luxury Apts',
                'redeemed' => '56',
                'discount' => '-$4,600',
                'payment' => '$42,000',
                'status' => 'Active'
            ],
            [
                'reward_code' => 'TXN-10234',
                'winner' => 'Rahul Sharma',
                'winner_role' => 'Player',
                'event' => 'NZ League 2026',
                'partner' => 'NYC Luxury Apts',
                'redeemed' => '56',
                'discount' => '-$4,600',
                'payment' => '$42,000',
                'status' => 'Active'
            ],
            [
                'reward_code' => 'TXN-10234',
                'winner' => 'Rahul Sharma',
                'winner_role' => 'Player',
                'event' => 'NZ League 2026',
                'partner' => 'NYC Luxury Apts',
                'redeemed' => '56',
                'discount' => '-$4,600',
                'payment' => '$42,000',
                'status' => 'Active'
            ],
            [
                'reward_code' => 'TXN-10234',
                'winner' => 'Rahul Sharma',
                'winner_role' => 'Player',
                'event' => 'NZ League 2026',
                'partner' => 'NYC Luxury Apts',
                'redeemed' => '56',
                'discount' => '-$4,600',
                'payment' => '$42,000',
                'status' => 'Active'
            ],
        ];
    @endphp

    <!-- 6 KPI Cards Grid -->
    <div class="stats-grid kpi-grid-6">
        @foreach($kpiCards as $card)
            <x-report-kpi-card 
                :title="$card['title']" 
                :value="$card['value']" 
                :badge="$card['badge']" 
                :badgeType="$card['badge_type']" 
            />
        @endforeach
    </div>

    <!-- Reward Coupon Performance Section -->
    <div class="final_squads">
        <div class="right-box">
            
            <div class="top-bar mb-3">
                <h3 style="color:#fff; font-size:18px;">Reward Coupon Performance</h3>
            </div>

            <!-- Filter Section -->
            @include('admin.reports.partials._filter-bar', [
                'dateId' => 'reportDateRange',
                'select1Id' => 'reportEvent',
                'select2Id' => 'reportStatus',
                'searchId' => 'reportSearch'
            ])

            <!-- Reward Table Section -->
            <div class="table-box">
                <div class="table-card">
                    @if(count($rewardData) > 0)
                        <div class="table-responsive">
                            <table class="table mb-0">
                                <thead>
                                    <tr>
                                        <th>Reward Code</th>
                                        <th>Winner</th>
                                        <th>Event</th>
                                        <th>Partner</th>
                                        <th>Redeemed</th>
                                        <th>Discount</th>
                                        <th>Payment</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($rewardData as $row)
                                        <tr>
                                            <td>{{ $row['reward_code'] }}</td>
                                            <td>
                                                <div class="user">
                                                    <div>
                                                        <div class="name">{{ $row['winner'] }}</div>
                                                        <div class="role">{{ $row['winner_role'] }}</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $row['event'] }}</td>
                                            <td>{{ $row['partner'] }}</td>
                                            <td>{{ $row['redeemed'] }}</td>
                                            <td>{{ $row['discount'] }}</td>
                                            <td>{{ $row['payment'] }}</td>
                                            <td>
                                                <span class="badge status-active">{{ $row['status'] }}</span>
                                            </td>
                                             <td>
                                                 <a href="{{ route('admin.reports.detail', ['id' => $loop->iteration]) }}" class="btn view-action-btn text-decoration-none d-inline-flex align-items-center justify-content-center">View</a>
                                             </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Footer & Pagination Bar -->
                        @include('admin.reports.partials._table-pagination', ['count' => count($rewardData)])
                    @else
                        <!-- Empty State Placeholder -->
                        <div class="text-center py-5" style="color: #777;">
                            <p>No reward coupon records found.</p>
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="{{ asset('assets/js/reports-shared.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Flatpickr Date Range Picker with SaaS Dark Styling
        if (typeof flatpickr !== 'undefined') {
            flatpickr('#reportDateRange', {
                mode: 'range',
                dateFormat: 'M d, Y',
                locale: {
                    rangeSeparator: ' – '
                },
                defaultDate: ['Mar 01, 2026', 'Mar 20, 2026'],
                allowInput: true
            });
        }

        // Initialize Custom Dropdowns
        initIclCustomSelects();
    });
</script>
@endsection