@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;
    }

    /* Reward code cell — monospaced so the hex codes line up column to column */
    .reports_management .reward-code {
        font-family: 'Roboto Mono', 'Courier New', monospace;
        letter-spacing: 0.4px;
        white-space: nowrap;
    }

    /* 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">

    <!-- 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', [
                'formAction' => route('admin.reports'),
                'dateId' => 'reportDateRange',
                'dateName' => 'date_range',
                'dateValue' => $filters['date_range'],
                'select1Id' => 'reportEvent',
                'select1Name' => 'event',
                'select1Label' => 'All Events',
                'select1Options' => $events,
                'select1Selected' => $filters['event'],
                'select2Id' => 'reportStatus',
                'select2Name' => 'status',
                'select2Label' => 'Status',
                'select2Options' => $statuses,
                'select2Selected' => $filters['status'],
                'searchId' => 'reportSearch',
                'searchName' => 'search',
                'searchValue' => $filters['search'],
                'searchPlaceholder' => 'Code, winner, partner or offer...',
            ])

            <!-- Reward Table Section -->
            <div class="table-box">
                <div class="table-card">
                    @if($redemptions->isNotEmpty())
                        <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($redemptions as $redemption)
                                        @php
                                            $offer = $redemption->offer;
                                            $currency = $offer->currency ?? 'NZD';
                                            $payment = (float) ($offer->offer_price ?? 0);
                                            $discount = max(0, (float) ($offer->original_price ?? 0) - $payment);
                                        @endphp
                                        <tr>
                                            <td class="reward-code" title="{{ $redemption->code }}">{{ $redemption->shortCode() }}</td>
                                            <td>
                                                <div class="user">
                                                    <div>
                                                        <div class="name">{{ $redemption->winnerName() }}</div>
                                                        <div class="role">{{ $redemption->user->role->name ?? 'User' }}</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $redemption->league->name ?? '—' }}</td>
                                            <td>{{ $redemption->partnerName() }}</td>
                                            <td>{{ number_format($redemption->points_spent) }} pts</td>
                                            <td>{{ $discount > 0 ? '-' . $currency . ' ' . number_format($discount, 2) : '—' }}</td>
                                            <td>{{ $currency }} {{ number_format($payment, 2) }}</td>
                                            <td>
                                                <span class="badge {{ $redemption->statusBadgeClass() }}">{{ $redemption->statusLabel() }}</span>
                                            </td>
                                            <td>
                                                <a href="{{ route('admin.reports.detail', ['id' => $redemption->id]) }}" 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', ['paginator' => $redemptions])
                    @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: ' – '
                },
                allowInput: true,
                // Reload once both ends of the range are picked, or when the
                // field is cleared back to no filter.
                onClose: function(selectedDates, dateStr, instance) {
                    var input = instance.input;
                    if (selectedDates.length === 2 || dateStr === '') {
                        if (dateStr !== input.dataset.appliedValue) {
                            input.form.submit();
                        }
                    }
                }
            });

            var dateInput = document.getElementById('reportDateRange');
            if (dateInput) {
                dateInput.dataset.appliedValue = @json($filters['date_range']);
            }
        }

        // Submit the search box on Enter rather than on every keystroke.
        var searchInput = document.getElementById('reportSearch');
        if (searchInput) {
            searchInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    this.form.submit();
                }
            });
        }

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